Add "clearable" badge

src-ui/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { CorrespondentEditDialogComponent } from './components/common/edit-dialo
 import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { TagComponent } from './components/common/tag/tag.component'
+import { ClearableBadge } from './components/common/clearable-badge/clearable-badge.component'
 import { PageHeaderComponent } from './components/common/page-header/page-header.component'
 import { AppFrameComponent } from './components/app-frame/app-frame.component'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
@@ -141,6 +142,7 @@ function initializeApp(settings: SettingsService) {
     DocumentTypeEditDialogComponent,
     StoragePathEditDialogComponent,
     TagComponent,
+    ClearableBadge,
     PageHeaderComponent,
     AppFrameComponent,
     ToastsComponent,

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html

@@ -0,0 +1,9 @@
+<button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-circle p-1" title="Clear" i18n-title (click)="onClick($event)">
+    <svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
+    </svg>
+    <div *ngIf="isNumbered" class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    <svg width=".9em" height="1em" class="x m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
+    </svg>
+</button>

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss

@@ -0,0 +1,25 @@
+.badge {
+    width: 20px;
+    height: 20px;
+}
+
+.x {
+    display: none;
+}
+
+.number {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+}
+
+button:hover {
+    .check,
+    .number {
+        display: none;
+    }
+
+    .x {
+        display: inline-block;
+    }
+}

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+
+@Component({
+  selector: 'app-clearable-badge',
+  templateUrl: './clearable-badge.component.html',
+  styleUrls: ['./clearable-badge.component.scss'],
+})
+export class ClearableBadge {
+  constructor() {}
+
+  @Input()
+  number: number
+
+  @Input()
+  selected: boolean
+
+  @Output()
+  cleared: EventEmitter<boolean> = new EventEmitter()
+
+  get active(): boolean {
+    return this.selected || this.number > -1
+  }
+
+  get isNumbered(): boolean {
+    return this.number > -1
+  }
+
+  onClick(event: PointerEvent) {
+    this.cleared.emit(true)
+    event.stopImmediatePropagation()
+    event.preventDefault()
+  }
+}

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html

@@ -1,11 +1,7 @@
   <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
-    <div *ngIf="isActive" class="position-absolute top-0 start-100 p-1 translate-middle badge bg-secondary border border-light rounded-circle">
-      <svg width="1em" height="1em" class="m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
-      </svg><span class="visually-hidden">selected</span>
-    </div>
+    <app-clearable-badge [selected]="isActive" (cleared)="reset()"></app-clearable-badge><span class="visually-hidden">selected</span>
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts

@@ -106,6 +106,13 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     }
   }
 
+  reset() {
+    this.dateBefore = null
+    this.dateAfter = null
+    this.relativeDate = null
+    this.onChange()
+  }
+
   setRelativeDate(rd: RelativeDate) {
     this.dateBefore = null
     this.dateAfter = null

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -5,14 +5,7 @@
     </svg>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
-      <div *ngIf="multiple" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light text-light rounded-pill">
-        {{selectionModel.totalCount}}<span class="visually-hidden">selected</span>
-      </div>
-      <div *ngIf="!multiple" class="position-absolute top-0 start-100 p-1 translate-middle badge bg-secondary border border-light rounded-circle">
-        <svg width="1em" height="1em" class="m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
-        </svg><span class="visually-hidden">selected</span>
-      </div>
+      <app-clearable-badge [number]="multiple ? selectionModel.totalCount : undefined" [selected]="!multiple && selectionModel.selectionSize() > 0" (cleared)="reset()"></app-clearable-badge>
     </ng-container>
   </button>
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -384,4 +384,9 @@ export class FilterableDropdownComponent {
       this.selectionModel.exclude(itemID)
     }
   }
+
+  reset() {
+    this.selectionModel.reset()
+    this.selectionModelChange.emit(this.selectionModel)
+  }
 }