update ngx-mat-select-search to version 2.2.0

package.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser-dynamic": "8.2.14",
     "@angular/router": "8.2.14",
     "core-js": "^2.6.1",
-    "ngx-mat-select-search": "^2.1.2",
+    "ngx-mat-select-search": "^2.2.0",
     "rxjs": "6.5.4",
     "zone.js": "~0.9.0"
   },

src/app/app.component.html

@@ -23,6 +23,7 @@ <h2>Examples</h2>
 
   <app-multiple-selection-select-all-example></app-multiple-selection-select-all-example>
 
+  <app-tooltip-select-all-example></app-tooltip-select-all-example>
 
   <span class="version-info">
     ngx-mat-select-search Version: {{matSelectSearchVersion}} <br/>

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { CustomClearIconExampleComponent } from './examples/03-custom-clear-icon
 import { MultipleSelectionExampleComponent } from './examples/02-multiple-selection-example/multiple-selection-example.component';
 import { SingleSelectionExampleComponent } from './examples/01-single-selection-example/single-selection-example.component';
 import { MultipleSelectionSelectAllExampleComponent } from './examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component';
+import { TooltipSelectAllExampleComponent } from './examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component';
 
 
 @NgModule({
@@ -26,7 +27,8 @@ import { MultipleSelectionSelectAllExampleComponent } from './examples/06-multip
     CustomClearIconExampleComponent,
     OptionGroupsExampleComponent,
     ServerSideSearchExampleComponent,
-    MultipleSelectionSelectAllExampleComponent
+    MultipleSelectionSelectAllExampleComponent,
+    TooltipSelectAllExampleComponent
   ],
   imports: [
     BrowserModule,

src/app/examples/05-server-side-search-example/server-side-search-example.component.ts

@@ -23,7 +23,7 @@ export class ServerSideSearchExampleComponent implements OnInit, OnDestroy {
   public bankServerSideFilteringCtrl: FormControl = new FormControl();
 
   /** indicate search operation is in progress */
-  public searching: boolean = false;
+  public searching = false;
 
   /** list of banks filtered after simulating server side search */
   public  filteredServerSideBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
@@ -48,7 +48,8 @@ export class ServerSideSearchExampleComponent implements OnInit, OnDestroy {
           // simulate server fetching and filtering data
           return this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1);
         }),
-        delay(500)
+        delay(500),
+        takeUntil(this._onDestroy)
       )
       .subscribe(filteredBanks => {
         this.searching = false;

src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.html

@@ -0,0 +1,13 @@
+<h3>Tooltip on the Select All Checkbox</h3>
+<p>
+  <mat-form-field color="accent">
+    <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect>
+      <ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)"
+        [formControl]="bankMultiFilterCtrl" [toggleAllCheckboxTooltipMessage]="tooltipMessage"
+        [toogleAllCheckboxTooltipPosition]="'above'"></ngx-mat-select-search>
+      <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
+        {{bank.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</p>

src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.scss

@@ -0,0 +1,3 @@
+::ng-deep .ngx-mat-select-search-toggle-all-tooltip {
+    font-size: 0.8em;
+  }

src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.ts

@@ -0,0 +1,107 @@
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ReplaySubject, Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { MatSelect } from '@angular/material/select';
+
+import { Bank, BANKS } from '../demo-data';
+
+@Component({
+  selector: 'app-tooltip-select-all-example',
+  templateUrl: './tooltip-select-all-example.component.html',
+  styleUrls: ['./tooltip-select-all-example.component.scss']
+})
+export class TooltipSelectAllExampleComponent implements OnInit, AfterViewInit, OnDestroy {
+
+  /** list of banks */
+  protected banks: Bank[] = BANKS;
+
+  /** control for the selected bank for multi-selection */
+  public bankMultiCtrl: FormControl = new FormControl();
+
+  /** control for the MatSelect filter keyword multi-selection */
+  public bankMultiFilterCtrl: FormControl = new FormControl();
+
+  /** list of banks filtered by search keyword */
+  public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
+
+  public tooltipMessage = 'Select All / Unselect All';
+
+  @ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
+
+  /** Subject that emits when the component has been destroyed. */
+  protected _onDestroy = new Subject<void>();
+
+
+  constructor() { }
+
+  ngOnInit() {
+    // set initial selection
+    this.bankMultiCtrl.setValue([this.banks[10], this.banks[11], this.banks[12]]);
+
+    // load the initial bank list
+    this.filteredBanksMulti.next(this.banks.slice());
+
+    // listen for search field value changes
+    this.bankMultiFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterBanksMulti();
+      });
+  }
+
+  ngAfterViewInit() {
+    this.setInitialValue();
+  }
+
+  ngOnDestroy() {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+  toggleSelectAll(selectAllValue: boolean) {
+    this.filteredBanksMulti.pipe(take(1), takeUntil(this._onDestroy))
+      .subscribe(val => {
+        if (selectAllValue) {
+          this.bankMultiCtrl.patchValue(val);
+        } else {
+          this.bankMultiCtrl.patchValue([]);
+        }
+      });
+  }
+
+  /**
+   * Sets the initial value after the filteredBanks are loaded initially
+   */
+  protected setInitialValue() {
+    this.filteredBanksMulti
+      .pipe(take(1), takeUntil(this._onDestroy))
+      .subscribe(() => {
+        // setting the compareWith property to a comparison function
+        // triggers initializing the selection according to the initial value of
+        // the form control (i.e. _initializeSelection())
+        // this needs to be done after the filteredBanks are loaded initially
+        // and after the mat-option elements are available
+        this.multiSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id;
+      });
+  }
+
+  protected filterBanksMulti() {
+    if (!this.banks) {
+      return;
+    }
+    // get the search keyword
+    let search = this.bankMultiFilterCtrl.value;
+    if (!search) {
+      this.filteredBanksMulti.next(this.banks.slice());
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    // filter the banks
+    this.filteredBanksMulti.next(
+      this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1)
+    );
+  }
+
+}