ecabs-components 1.0.13 → 1.0.14

package/fesm2015/ecabs-components.mjs

@@ -15,7 +15,7 @@ import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i7 from 'ngx-mat-select-search';
 import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { ReplaySubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil } from 'rxjs';
+import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil } from 'rxjs';
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
 import * as i2 from '@angular/material/core';
@@ -749,10 +749,12 @@ class EcabsSelectComponent extends ElementBaseComponent {
         this.othersLabel = 'Others';
         this.updateFilterItems = new EventEmitter();
         this.selectionChange = new EventEmitter();
-        this.filteredItems$ = new ReplaySubject(1);
+        this.filteredItems$ = new BehaviorSubject([]);
         this.itemFilterCtrl = new UntypedFormControl();
         this.isClearAll = false;
         this.showFilteredAllOption = true;
+        this.selectedItems = [];
+        this.notSelectedItems = [];
         this.subscriptions = new Subscription();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
@@ -765,23 +767,21 @@ class EcabsSelectComponent extends ElementBaseComponent {
     set value(val) {
         if (this.val !== val) {
             this.val = val;
+            this.setSelectedItems();
             this.onChange(val);
             this.onTouch(val);
         }
     }
     ngOnChanges(changes) {
         var _a;
-        if (changes['items'] && changes['items'].currentValue) {
-            this.filteredItems$.next(changes['items'].currentValue.slice());
+        const { items } = changes;
+        if (items && items.currentValue) {
             this.filterItems();
-            if (this.multiple &&
-                this.useSelectAllOption &&
-                ((_a = this.allSelected) === null || _a === void 0 ? void 0 : _a.selected)) {
+            if (this.multiple && this.useSelectAllOption && ((_a = this.allSelected) === null || _a === void 0 ? void 0 : _a.selected)) {
                 setTimeout(() => {
-                    this.control.patchValue([
-                        ...this.items.map((item) => item.value),
-                        this.selectAllValue,
-                    ], { emitEvent: false });
+                    this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue], {
+                        emitEvent: false,
+                    });
                 }, 100);
             }
         }
@@ -807,17 +807,19 @@ class EcabsSelectComponent extends ElementBaseComponent {
             this.filterItems();
             this.updateFilterItems.emit(value);
             if (this.isClearAll) {
-                this.control.patchValue([]);
+                this.control.patchValue([], { emitEvent: false });
                 this.isClearAll = false;
             }
         }));
     }
     toggleAllSelection() {
         if (this.allSelected.selected) {
-            this.control.patchValue([
-                ...this.items.map((item) => item.value),
-                this.selectAllValue,
-            ]);
+            if (this.useSearchOption) {
+                this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue]);
+            }
+            else {
+                this.control.patchValue([...this.items.map((item) => item.value), this.selectAllValue]);
+            }
         }
         else {
             this.control.patchValue([]);
@@ -839,20 +841,31 @@ class EcabsSelectComponent extends ElementBaseComponent {
         });
         this.isClearAll = false;
     }
+    toggleNone() {
+        this.selectedItems = [];
+    }
     getAllSelectedChecked() {
         return this.allSelected !== undefined && this.allSelected.selected;
     }
     getLabel(val) {
         var _a;
-        if (this.useSelectAllOption &&
-            ((_a = this.allSelected) === null || _a === void 0 ? void 0 : _a.selected) &&
-            this.items &&
-            this.items.length > 0) {
+        if (this.useSelectAllOption && ((_a = this.allSelected) === null || _a === void 0 ? void 0 : _a.selected) && this.items && this.items.length > 0) {
             return this.items[0].label;
         }
-        if (val !== undefined && this.items && this.items.length > 0) {
-            // eslint-disable-next-line @typescript-eslint/no-shadow
-            const item = this.items.find((item) => item.value === val);
+        let item;
+        if (val !== undefined) {
+            if (this.useSearchOption) {
+                if (this.selectedItems && this.selectedItems.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-shadow
+                    item = this.selectedItems.find((item) => item.value === val);
+                }
+            }
+            else {
+                if (this.items && this.items.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-shadow
+                    item = this.items.find((item) => item.value === val);
+                }
+            }
             return item ? item.label : '';
         }
         return '';
@@ -873,25 +886,91 @@ class EcabsSelectComponent extends ElementBaseComponent {
         this.selectionChange.emit($event);
     }
     filterItems() {
+        var _a, _b, _c;
+        this.setSelectedItems();
         if (!this.items) {
             return;
         }
         // get the search keyword
         let search = this.itemFilterCtrl.value;
         if (!search || search === '') {
-            this.filteredItems$.next(this.items.slice());
+            if (this.useSearchOption) {
+                this.filteredItems$.next([...this.selectedItems]);
+            }
+            else {
+                this.filteredItems$.next((_a = this.items) === null || _a === void 0 ? void 0 : _a.slice());
+            }
             this.showFilteredAllOption = true;
             return;
         }
         search = search.toLowerCase();
-        this.showFilteredAllOption = this.allLabel.toLowerCase().includes(search.toLowerCase());
+        this.showFilteredAllOption =
+            this.allLabel.toLowerCase().includes(search.toLowerCase()) ||
+                (this.value instanceof Array && this.value.includes(this.selectAllValue)) ||
+                (!(this.value instanceof Array) && this.value === this.selectAllValue);
         this.changeDetectorRef.detectChanges();
-        this.filteredItems$.next(this.items && this.items.length > 0
-            ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
-            : []);
-        this.filteredItems$.next(this.items && this.items.length > 0
-            ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
-            : []);
+        if (this.useSearchOption) {
+            const filteredItems = ((_b = this.notSelectedItems) === null || _b === void 0 ? void 0 : _b.length) > 0
+                ? this.notSelectedItems.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+                : [];
+            this.filteredItems$.next([...this.selectedItems, ...filteredItems]);
+        }
+        else {
+            this.filteredItems$.next(((_c = this.items) === null || _c === void 0 ? void 0 : _c.length) > 0
+                ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+                : []);
+        }
+    }
+    setSelectedItems() {
+        var _a, _b;
+        if (this.useSearchOption) {
+            const selectedItems = [];
+            if (this.value) {
+                if (this.value instanceof Array) {
+                    const skipSteps = this.value.includes(this.selectAllValue);
+                    if (!skipSteps) {
+                        this.value.forEach((value) => {
+                            const index = this.selectedItems.findIndex((selectedItem) => selectedItem.value === value);
+                            if (index !== -1) {
+                                selectedItems.push(this.selectedItems[index]);
+                            }
+                            else {
+                                // eslint-disable-next-line @typescript-eslint/no-shadow
+                                const item = this.items.find((item) => item.value === value);
+                                if (item) {
+                                    selectedItems.push(item);
+                                }
+                            }
+                        });
+                        this.selectedItems.forEach((selectedItem) => {
+                            const index = this.value.find((value) => selectedItem.value === value);
+                            if (index === -1) {
+                                selectedItems.splice(index, 1);
+                            }
+                        });
+                    }
+                }
+                else {
+                    const index = this.selectedItems.findIndex((selectedItem) => selectedItem.value === this.value);
+                    if (index !== -1) {
+                        selectedItems.push(this.selectedItems[index]);
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-shadow
+                        const item = this.items.find((item) => item.value === this.value);
+                        // eslint-disable-next-line max-depth
+                        if (item) {
+                            selectedItems.push(item);
+                        }
+                    }
+                }
+                this.selectedItems = [...selectedItems];
+                this.notSelectedItems = (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((item) => this.selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) === -1);
+            }
+            else {
+                this.notSelectedItems = (_b = this.items) === null || _b === void 0 ? void 0 : _b.slice();
+            }
+        }
     }
 }
 EcabsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -901,7 +980,7 @@ EcabsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: EcabsSelectComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      class=\"form-field__select\"\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      [id]=\"name\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [disableRipple]=\"true\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ allLabel }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? otherLabel : othersLabel) }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search\r\n          [formControl]=\"itemFilterCtrl\"\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\">{{ noneLabel }}</mat-option>\r\n      <mat-option\r\n      #allSelected\r\n      *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n      (click)=\"toggleAllSelection()\"\r\n      [value]=\"selectAllValue\">{{\r\n        allLabel\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      class=\"form-field__select\"\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      [id]=\"name\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [disableRipple]=\"true\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ allLabel }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? otherLabel : othersLabel) }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search\r\n          [formControl]=\"itemFilterCtrl\"\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\" (click)=\"toggleNone()\">{{ noneLabel }}</mat-option>\r\n      <mat-option\r\n      #allSelected\r\n      *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n      (click)=\"toggleAllSelection()\"\r\n      [value]=\"selectAllValue\">{{\r\n        allLabel\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-select', providers: [
@@ -910,7 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: EcabsSelectComponent,
                             multi: true,
                         },
-                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      class=\"form-field__select\"\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      [id]=\"name\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [disableRipple]=\"true\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ allLabel }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? otherLabel : othersLabel) }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search\r\n          [formControl]=\"itemFilterCtrl\"\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\">{{ noneLabel }}</mat-option>\r\n      <mat-option\r\n      #allSelected\r\n      *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n      (click)=\"toggleAllSelection()\"\r\n      [value]=\"selectAllValue\">{{\r\n        allLabel\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n" }]
+                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      class=\"form-field__select\"\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      [id]=\"name\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      [disableRipple]=\"true\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ allLabel }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? otherLabel : othersLabel) }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search\r\n          [formControl]=\"itemFilterCtrl\"\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\" (click)=\"toggleNone()\">{{ noneLabel }}</mat-option>\r\n      <mat-option\r\n      #allSelected\r\n      *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n      (click)=\"toggleAllSelection()\"\r\n      [value]=\"selectAllValue\">{{\r\n        allLabel\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], multiple: [{