#145: finetuning and release of 1.8.0 (#167)

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.8.0
+* Enhancement: Add option to show a toggle all checkbox with `[showToggleAllCheckbox]="true"`
+  [#145](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/145)
+
+  Thanks to @blazewalker59
+
+* Enhancement: Allow custom content transclusion with `.mat-select-search-custom-header-content`
+
 ## 1.7.6
 * Bugfix: spinner not visible after reopening select panel
   [#153](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/153)

README.md

@@ -96,35 +96,46 @@ Furthermore, it provides the following inputs:
   @Input() placeholderLabel = 'Suche';
 
   /** Type of the search input field */
-  @Input() type = "text";
-  
+  @Input() type = 'text';
+
   /** Label to be shown when no entries are found. Set to null if no message should be shown. */
   @Input() noEntriesFoundLabel = 'Keine Optionen gefunden';
 
-  /** 
-    * Whether or not the search field should be cleared after the dropdown menu is closed. 
-    * Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3) 
+  /**
+    * Whether or not the search field should be cleared after the dropdown menu is closed.
+    * Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3)
     */
-  @Input() clearSearchInput = false;
-  
+  @Input() clearSearchInput = true;
+
   /** Whether to show the search-in-progress indicator */
   @Input() searching = false;
-  
+
   /** Disables initial focusing of the input field */
   @Input() disableInitialFocus = false;
-    
+
   /**
    * Prevents home / end key being propagated to mat-select,
    * allowing to move the cursor within the search input instead of navigating the options
    */
   @Input() preventHomeEndKeyPropagation = false;
-
-
+
   /** Disables scrolling to active options when option list changes. Useful for server-side search */
   @Input() disableScrollToActiveOnOptionsChanged = false;
 
   /** Adds 508 screen reader support for search box */
   @Input() ariaLabel = 'dropdown search';
+
+  /** Whether to show Select All Checkbox (for mat-select[multi=true]) */
+  @Input() showToggleAllCheckbox = false;
+
+  /** select all checkbox checked state */
+  @Input() toggleAllCheckboxChecked = false;
+
+  /** select all checkbox indeterminate state */
+  @Input() toggleAllCheckboxIndeterminate = false;
+
+  /** Output emitter to send to parent component with the toggle all boolean */
+  @Output() toggleAll = new EventEmitter<boolean>();
 ```
 
 #### Customize clear icon
@@ -135,6 +146,14 @@ In order to customize the search icon, add the `ngxMatSelectSearchClear` to your
 </ngx-mat-select-search>
 ```
 
+#### Custom content
+Custom content with the CSS class `mat-select-search-custom-header-content` can be transcluded as follows:
+```html
+<ngx-mat-select-search>
+   <div class="mat-select-search-custom-header-content">something special</div>
+</ngx-mat-select-search>
+```
+
 ## Known Problems / Solutions
 * The search input is placed outside of the visible screen if the select element is at the top of the screen 
     (in the stackblitz example, remove the header 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-mat-select-search",
   "description": "Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -14,7 +14,7 @@
     "e2e": "ng e2e",
     "build-lib": "ng-packagr -p ng-package.json"
   },
-  "author": "Esteban Marin, Bithost GmbH",
+  "author": "Esteban Gehring, Bithost GmbH",
   "bugs": {
     "url": "https://github.com/bithost-gmbh/ngx-mat-select-search/issues"
   },

src/app/app.component.html

@@ -15,14 +15,14 @@ <h2>Examples</h2>
 
   <app-multiple-selection-example></app-multiple-selection-example>
 
-  <app-multiple-selection-select-all-example></app-multiple-selection-select-all-example>
-
   <app-custom-clear-icon-example></app-custom-clear-icon-example>
 
   <app-option-groups-example></app-option-groups-example>
 
   <app-server-side-search-example></app-server-side-search-example>
 
+  <app-multiple-selection-select-all-example></app-multiple-selection-select-all-example>
+
 
   <span class="version-info">
     ngx-mat-select-search Version: {{matSelectSearchVersion}} <br/>

src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html

@@ -2,8 +2,8 @@
 <h3>Multiple selection</h3>
 <p>
   <mat-form-field>
-    <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect disableOptionCentering>
-      <ngx-mat-select-search [showToggleAllCheckbox]="false" (toggleSelectAll)="toggleSelectAll($event)" [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
+    <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect>
+      <ngx-mat-select-search [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
       <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
         {{bank.name}}
       </mat-option>

src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts

@@ -57,17 +57,6 @@ export class MultipleSelectionExampleComponent implements OnInit, AfterViewInit,
     this._onDestroy.complete();
   }
 
-  toggleSelectAll(selectAllValue: boolean){
-    this.filteredBanksMulti
-      .pipe(takeUntil(this._onDestroy))
-      .subscribe(val => {
-        if (selectAllValue)
-          this.bankMultiCtrl.patchValue(val);
-        else
-          this.bankMultiCtrl.patchValue([]);
-      }).unsubscribe();
-  }
-
   /**
    * Sets the initial value after the filteredBanks are loaded initially
    */

src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html

@@ -2,8 +2,8 @@
 <h3>Multiple selection with Select All Checkbox</h3>
 <p>
   <mat-form-field>
-    <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect disableOptionCentering>
-      <ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleSelectAll)="toggleSelectAll($event)" [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
+    <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect>
+      <ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)" [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
       <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
         {{bank.name}}
       </mat-option>

src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts

@@ -57,13 +57,15 @@ export class MultipleSelectionSelectAllExampleComponent implements OnInit, After
     this._onDestroy.complete();
   }
 
-  toggleSelectAll(selectAllValue: boolean){
-    this.filteredBanksMulti.subscribe(val => {
-      if (selectAllValue)
-        this.bankMultiCtrl.patchValue(val);
-      else
-        this.bankMultiCtrl.patchValue([]);
-    }).unsubscribe();
+  toggleSelectAll(selectAllValue: boolean) {
+    this.filteredBanksMulti.pipe(take(1), takeUntil(this._onDestroy))
+      .subscribe(val => {
+        if (selectAllValue) {
+          this.bankMultiCtrl.patchValue(val);
+        } else {
+          this.bankMultiCtrl.patchValue([]);
+        }
+      });
   }
 
   /**

src/app/mat-select-search/mat-select-search.component.html

@@ -6,7 +6,15 @@
       #innerSelectSearch
       class="mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header"
       [ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple, 'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible() }">
-  <mat-checkbox *ngIf="_isToggleAllCheckboxVisible()" color="primary" class="mat-select-all-checkbox" [formControl]="selectAllCheckbox"></mat-checkbox>
+
+  <mat-checkbox *ngIf="_isToggleAllCheckboxVisible()"
+                color="primary"
+                class="mat-select-search-toggle-all-checkbox"
+                [checked]="toggleAllCheckboxChecked"
+                [indeterminate]="toggleAllCheckboxIndeterminate"
+                (change)="_emitSelectAllBooleanToParent($event.checked)"
+  ></mat-checkbox>
+
   <input matInput
          class="mat-select-search-input"
          autocomplete="off"
@@ -34,6 +42,9 @@
       <mat-icon>close</mat-icon>
     </ng-template>
   </button>
+
+  <ng-content select=".mat-select-search-custom-header-content"></ng-content>
+
 </div>
 
 <div *ngIf="_noEntriesFound()"

src/app/mat-select-search/mat-select-search.component.scss

@@ -39,7 +39,7 @@ $mat-option-height: 3em;
       align-items: center;
     }
   }
-  
+
   .mat-input-element {
     flex-basis: auto;
     &:-ms-input-placeholder {
@@ -112,6 +112,7 @@ $mat-option-height: 3em;
   }
 }
 
-.mat-select-all-checkbox {
+.mat-select-search-toggle-all-checkbox {
   padding-left: 16px;
+  padding-bottom: 2px;
 }

src/app/mat-select-search/mat-select-search.component.ts

@@ -12,7 +12,7 @@ import {
   ViewChild,
   ContentChild, Optional, HostBinding, Output
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatOption, MatSelect, SELECT_PANEL_MAX_HEIGHT, _countGroupLabelsBeforeOption } from '@angular/material';
 import {
   A,
@@ -123,7 +123,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   @Input() placeholderLabel = 'Suche';
 
   /** Type of the search input field */
-  @Input() type = "text";
+  @Input() type = 'text';
 
   /** Label to be shown when no entries are found. Set to null if no message should be shown. */
   @Input() noEntriesFoundLabel = 'Keine Optionen gefunden';
@@ -152,12 +152,17 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   /** Adds 508 screen reader support for search box */
   @Input() ariaLabel = 'dropdown search';
 
-  /** Configurable to show Select All Checkbox */
-  @Input() showToggleAllCheckbox: boolean = false;
+  /** Whether to show Select All Checkbox (for mat-select[multi=true]) */
+  @Input() showToggleAllCheckbox = false;
 
-  /** Output emitter to send to parent component with the select all boolean */
-  @Output() toggleSelectAll = new EventEmitter<boolean>();
-  selectAllCheckbox = new FormControl();
+  /** select all checkbox checked state */
+  @Input() toggleAllCheckboxChecked = false;
+
+  /** select all checkbox indeterminate state */
+  @Input() toggleAllCheckboxIndeterminate = false;
+
+  /** Output emitter to send to parent component with the toggle all boolean */
+  @Output() toggleAll = new EventEmitter<boolean>();
 
   /** Reference to the search input field */
   @ViewChild('searchSelectInput', {read: ElementRef}) searchSelectInput: ElementRef;
@@ -211,7 +216,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
     const panelClass = 'mat-select-search-panel';
     if (this.matSelect.panelClass) {
       if (Array.isArray(this.matSelect.panelClass)) {
-        this.matSelect.panelClass.push(panelClass);
+        (<string[]>this.matSelect.panelClass).push(panelClass);
       } else if (typeof this.matSelect.panelClass === 'string') {
         this.matSelect.panelClass = [this.matSelect.panelClass, panelClass];
       } else if (typeof this.matSelect.panelClass === 'object') {
@@ -255,7 +260,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
       .subscribe(() => {
         if (this.matSelect._keyManager) {
           this.matSelect._keyManager.change.pipe(takeUntil(this._onDestroy))
-            .subscribe(() => this.adjustScrollTopToFitActiveOptionIntoView())
+            .subscribe(() => this.adjustScrollTopToFitActiveOptionIntoView());
         } else {
           console.log('_keyManager was not initialized.');
         }
@@ -308,18 +313,11 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
         }
       });
 
-    // detect when select all checkbox changes
-    this.selectAllCheckbox.valueChanges
-      .pipe(takeUntil(this._onDestroy))
-      .subscribe(() => {
-        this.emitSelectAllBooleanToParent();
-      });
-
     this.initMultipleHandling();
   }
 
-  emitSelectAllBooleanToParent() {
-    this.toggleSelectAll.emit(this.selectAllCheckbox.value);
+  _emitSelectAllBooleanToParent(state: boolean) {
+    this.toggleAll.emit(state);
   }
 
   ngOnDestroy() {

src/app/mat-select-search/ngx-mat-select-search.module.ts

@@ -9,16 +9,15 @@ import { NgModule } from '@angular/core';
 import { MatSelectSearchComponent } from './mat-select-search.component';
 import { MatButtonModule, MatInputModule, MatIconModule, MatProgressSpinnerModule, MatCheckboxModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
+
 import { MatSelectSearchClearDirective } from './mat-select-search-clear.directive';
-import { ReactiveFormsModule } from '@angular/forms';
 
-export const MatSelectSearchVersion = '1.7.5';
+export const MatSelectSearchVersion = '1.8.0';
 
 
 @NgModule({
   imports: [
     CommonModule,
-    ReactiveFormsModule,
     MatButtonModule,
     MatCheckboxModule,
     MatIconModule,