Better clear button

src-ui/src/app/components/common/input/debounce/input-debounce.component.html

@@ -1 +1,2 @@
 <input type="text" [class]="cssClasses" [placeholder]="placeholder" [(ngModel)]="inputValue" />
+<span *ngIf="allowClear && inputValue?.length > 0" class="clear-wrapper" title="Clear all" (click)="clear()"><span aria-hidden="true" class="clear">×</span></span>

src-ui/src/app/components/common/input/debounce/input-debounce.component.scss

@@ -0,0 +1,23 @@
+.clear-wrapper {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  user-select: none;
+  width: 17px;
+  color: #999;
+
+  .clear {
+    display: inline-block;
+    font-size: 18px;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  &:hover .clear {
+    color: #D0021B;
+  }
+}

src-ui/src/app/components/common/input/debounce/input-debounce.component.ts

@@ -18,6 +18,9 @@ export class InputDebounceComponent {
   @Input()
   classes: string
 
+  @Input()
+  allowClear: boolean = true
+
   @Output()
   value: EventEmitter<string> = new EventEmitter<string>()
 
@@ -38,4 +41,9 @@ export class InputDebounceComponent {
     return 'form-control ' + this.classes
   }
 
+  clear() {
+    this.inputValue = ''
+    this.value.emit(this.inputValue)
+  }
+
 }

src-ui/src/app/components/split-merge/split-merge.component.html

@@ -106,11 +106,6 @@
                   </div>
                   <app-input-debounce delay="500" classes="form-control-sm" placeholder="All" ngbTooltip="e.g. 1-3,5" [inputValue]="formatPages(d.pages)" (value)="pagesFieldChange($event, d, i)"></app-input-debounce>
                   <div class="input-group-append">
-                    <button class="btn btn-outline-secondary" type="button" i18n-title title="Clear" [disabled]="d.pages?.length < 1" (click)="clearPages(d, i)">
-                      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#x" />
-                      </svg>
-                    </button>
                     <button class="btn btn-outline-primary" type="button" i18n-title title="Select Pages" (click)="choosePages(d, i)">
                       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
                         <use xlink:href="assets/bootstrap-icons.svg#pencil" />

src-ui/src/app/components/split-merge/split-merge.component.scss

@@ -56,6 +56,7 @@ button span {
 
 app-input-debounce {
   flex: 1 1;
+  position: relative;
 
   ::ng-deep .form-control {
     border-radius: 0;

src-ui/src/app/components/split-merge/split-merge.component.ts

@@ -131,11 +131,6 @@ export class SplitMergeComponent implements OnInit, OnDestroy {
     })
   }
 
-  clearPages(d: PaperlessDocument, index: number) {
-    this.splitMergeService.setDocumentPages(d, index, [])
-    this.previewDebounce$.next()
-  }
-
   chooseSplit(d: PaperlessDocument, index: number) {
     let modal = this.modalService.open(PageChooserComponent, { backdrop: 'static', size: 'lg' })
     modal.componentInstance.document = d