ecabs-components 0.0.54 → 0.0.56

package/fesm2020/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';
@@ -729,9 +729,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class EcabsSelectComponent extends ElementBaseComponent {
-    constructor(injector) {
+    constructor(injector, changeDetectorRef) {
         super();
         this.injector = injector;
+        this.changeDetectorRef = changeDetectorRef;
         this.multiple = false;
         this.useNoneOption = false;
         this.useOnlyDisabledClass = false;
@@ -747,14 +748,19 @@ 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 = () => { };
+        this.onChange = () => {
+        };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouch = () => { };
+        this.onTouch = () => {
+        };
     }
     get value() {
         return this.val;
@@ -762,22 +768,20 @@ class EcabsSelectComponent extends ElementBaseComponent {
     set value(val) {
         if (this.val !== val) {
             this.val = val;
+            this.setSelectedItems();
             this.onChange(val);
             this.onTouch(val);
         }
     }
     ngOnChanges(changes) {
-        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 &&
-                this.allSelected?.selected) {
+            if (this.multiple && this.useSelectAllOption && this.allSelected?.selected) {
                 setTimeout(() => {
-                    this.control.patchValue([
-                        ...this.items.map((item) => item.value),
-                        this.selectAllValue,
-                    ]);
+                    this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue], {
+                        emitEvent: false,
+                    });
                 }, 100);
             }
         }
@@ -803,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([]);
@@ -821,30 +827,42 @@ class EcabsSelectComponent extends ElementBaseComponent {
         }
     }
     togglePerOne() {
-        if (this.allSelected) {
-            if (this.allSelected.selected) {
-                this.allSelected.deselect();
-            }
-            if (this.setAllOptionAfterChosenAllItems &&
-                this.control.value.length === this.items.length) {
-                this.allSelected.select();
+        setTimeout(() => {
+            if (this.allSelected) {
+                if (this.allSelected.selected) {
+                    this.allSelected.deselect();
+                }
+                if (this.setAllOptionAfterChosenAllItems && this.control.value.length === this.items.length) {
+                    this.allSelected.select();
+                }
             }
-        }
+        });
         this.isClearAll = false;
     }
+    toggleNone() {
+        this.selectedItems = [];
+    }
     getAllSelectedChecked() {
         return this.allSelected !== undefined && this.allSelected.selected;
     }
     getLabel(val) {
-        if (this.useSelectAllOption &&
-            this.allSelected?.selected &&
-            this.items &&
-            this.items.length > 0) {
+        if (this.useSelectAllOption && this.allSelected?.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 '';
@@ -865,29 +883,99 @@ class EcabsSelectComponent extends ElementBaseComponent {
         this.selectionChange.emit($event);
     }
     filterItems() {
+        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 (!search || search === '' && !this.items?.length) {
+            if (this.useSearchOption) {
+                this.filteredItems$.next([...this.selectedItems]);
+            }
+            else {
+                this.filteredItems$.next(this.items?.slice());
+            }
+            this.showFilteredAllOption = true;
             return;
         }
         search = search.toLowerCase();
-        this.filteredItems$.next(this.items && this.items.length > 0
-            ? this.items.filter((item) => item.label.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();
+        if (this.useSearchOption) {
+            const filteredItems = this.notSelectedItems?.length > 0
+                ? this.notSelectedItems.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+                : [];
+            this.filteredItems$.next([...this.selectedItems, ...filteredItems]);
+        }
+        else {
+            this.filteredItems$.next(this.items?.length > 0
+                ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+                : []);
+        }
+    }
+    setSelectedItems() {
+        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 = this.items?.filter((item) => this.selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) === -1);
+            }
+            else {
+                this.notSelectedItems = this.items?.slice();
+            }
+        }
     }
 }
-EcabsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+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 });
 EcabsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsSelectComponent, selector: "ecabs-select", inputs: { items: "items", multiple: "multiple", useNoneOption: "useNoneOption", useOnlyDisabledClass: "useOnlyDisabledClass", searchFieldPlaceholder: "searchFieldPlaceholder", useSearchOption: "useSearchOption", useSelectAllOption: "useSelectAllOption", setAllOptionAfterChosenAllItems: "setAllOptionAfterChosenAllItems", selectAllValue: "selectAllValue", noEntriesFoundLabel: "noEntriesFoundLabel", noneLabel: "noneLabel", allLabel: "allLabel", otherLabel: "otherLabel", othersLabel: "othersLabel" }, outputs: { updateFilterItems: "updateFilterItems", selectionChange: "selectionChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             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      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\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 #allSelected *ngIf=\"useSelectAllOption\" (click)=\"toggleAllSelection()\" [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      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\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 #allSelected *ngIf=\"useSelectAllOption && showFilteredAllOption\" (click)=\"toggleAllSelection()\" [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: [
@@ -896,8 +984,8 @@ 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      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\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 #allSelected *ngIf=\"useSelectAllOption\" (click)=\"toggleAllSelection()\" [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 }]; }, propDecorators: { items: [{
+                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\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 #allSelected *ngIf=\"useSelectAllOption && showFilteredAllOption\" (click)=\"toggleAllSelection()\" [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: [{
                 type: Input