From a2ee9ab7a89ea125bbd3341469cf509d5fbf6537 Mon Sep 17 00:00:00 2001 From: Esteban Gehring Date: Wed, 31 Jul 2019 22:28:22 +0200 Subject: [PATCH] #145: finetuning and release of 1.8.0 (#167) --- CHANGELOG.md | 8 ++++ README.md | 41 ++++++++++++++----- package-lock.json | 2 +- package.json | 4 +- src/app/app.component.html | 4 +- .../multiple-selection-example.component.html | 4 +- .../multiple-selection-example.component.ts | 11 ----- ...election-select-all-example.component.html | 4 +- ...-selection-select-all-example.component.ts | 16 ++++---- .../mat-select-search.component.html | 13 +++++- .../mat-select-search.component.scss | 5 ++- .../mat-select-search.component.ts | 34 ++++++++------- .../ngx-mat-select-search.module.ts | 5 +-- 13 files changed, 89 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 543ea3b..542eeff 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 31b8959..54f15a9 100644 --- a/README.md +++ b/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(); ``` #### Customize clear icon @@ -135,6 +146,14 @@ In order to customize the search icon, add the `ngxMatSelectSearchClear` to your ``` +#### Custom content +Custom content with the CSS class `mat-select-search-custom-header-content` can be transcluded as follows: +```html + +
something special
+ +``` + ## 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 diff --git a/package-lock.json b/package-lock.json index ee38d65..19c1c38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-mat-select-search", - "version": "1.7.6", + "version": "1.8.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 222d2a5..1302040 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 020499a..ed0e20b 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,14 +15,14 @@

Examples

- - + + ngx-mat-select-search Version: {{matSelectSearchVersion}}
diff --git a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html b/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html index f13a30e..e3db65f 100644 --- a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html +++ b/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html @@ -2,8 +2,8 @@

Multiple selection

- - + + {{bank.name}} diff --git a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts b/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts index 7293cc4..3a8dad8 100644 --- a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts +++ b/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 */ diff --git a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html b/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html index 97c2a74..a1492fa 100644 --- a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html +++ b/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html @@ -2,8 +2,8 @@

Multiple selection with Select All Checkbox

- - + + {{bank.name}} diff --git a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts b/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts index b3ad9e9..17f75b0 100644 --- a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts +++ b/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([]); + } + }); } /** diff --git a/src/app/mat-select-search/mat-select-search.component.html b/src/app/mat-select-search/mat-select-search.component.html index 0c05fdc..9a38ee8 100755 --- a/src/app/mat-select-search/mat-select-search.component.html +++ b/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() }"> - + + + close + + +

(); - 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(); /** 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); + (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() { diff --git a/src/app/mat-select-search/ngx-mat-select-search.module.ts b/src/app/mat-select-search/ngx-mat-select-search.module.ts index 128e17a..4696595 100755 --- a/src/app/mat-select-search/ngx-mat-select-search.module.ts +++ b/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,