ecabs-components 0.0.53 → 0.0.54

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 { BehaviorSubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil } from 'rxjs';
+import { ReplaySubject, 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,10 +729,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class EcabsSelectComponent extends ElementBaseComponent {
-    constructor(injector, changeDetectorRef) {
+    constructor(injector) {
         super();
         this.injector = injector;
-        this.changeDetectorRef = changeDetectorRef;
         this.multiple = false;
         this.useNoneOption = false;
         this.useOnlyDisabledClass = false;
@@ -748,12 +747,9 @@ class EcabsSelectComponent extends ElementBaseComponent {
         this.othersLabel = 'Others';
         this.updateFilterItems = new EventEmitter();
         this.selectionChange = new EventEmitter();
-        this.filteredItems$ = new BehaviorSubject([]);
+        this.filteredItems$ = new ReplaySubject(1);
         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 = () => { };
@@ -766,20 +762,22 @@ class EcabsSelectComponent extends ElementBaseComponent {
     set value(val) {
         if (this.val !== val) {
             this.val = val;
-            this.setSelectedItems();
             this.onChange(val);
             this.onTouch(val);
         }
     }
     ngOnChanges(changes) {
-        const { items } = changes;
-        if (items && items.currentValue) {
+        if (changes['items'] && changes['items'].currentValue) {
+            this.filteredItems$.next(changes['items'].currentValue.slice());
             this.filterItems();
-            if (this.multiple && this.useSelectAllOption && this.allSelected?.selected) {
+            if (this.multiple &&
+                this.useSelectAllOption &&
+                this.allSelected?.selected) {
                 setTimeout(() => {
-                    this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue], {
-                        emitEvent: false,
-                    });
+                    this.control.patchValue([
+                        ...this.items.map((item) => item.value),
+                        this.selectAllValue,
+                    ]);
                 }, 100);
             }
         }
@@ -805,19 +803,17 @@ class EcabsSelectComponent extends ElementBaseComponent {
             this.filterItems();
             this.updateFilterItems.emit(value);
             if (this.isClearAll) {
-                this.control.patchValue([], { emitEvent: false });
+                this.control.patchValue([]);
                 this.isClearAll = false;
             }
         }));
     }
     toggleAllSelection() {
         if (this.allSelected.selected) {
-            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]);
-            }
+            this.control.patchValue([
+                ...this.items.map((item) => item.value),
+                this.selectAllValue,
+            ]);
         }
         else {
             this.control.patchValue([]);
@@ -825,44 +821,30 @@ class EcabsSelectComponent extends ElementBaseComponent {
         }
     }
     togglePerOne() {
-        setTimeout(() => (this.showFilteredAllOption = true));
-        setTimeout(() => {
-            if (this.allSelected) {
-                if (this.allSelected.selected) {
-                    this.allSelected.deselect();
-                }
-                if (this.setAllOptionAfterChosenAllItems && this.control.value.length === this.items.length) {
-                    this.allSelected.select();
-                }
+        if (this.allSelected) {
+            if (this.allSelected.selected) {
+                this.allSelected.deselect();
             }
-            this.showFilteredAllOption = false;
-        });
+            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;
         }
-        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);
-                }
-            }
+        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);
             return item ? item.label : '';
         }
         return '';
@@ -883,99 +865,29 @@ 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 === '') {
-            if (this.useSearchOption) {
-                this.filteredItems$.next([...this.selectedItems]);
-            }
-            else {
-                this.filteredItems$.next(this.items?.slice());
-            }
-            this.showFilteredAllOption = true;
+            this.filteredItems$.next(this.items.slice());
             return;
         }
         search = 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();
-            }
-        }
+        this.filteredItems$.next(this.items && this.items.length > 0
+            ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+            : []);
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectComponent, deps: [{ token: i0.Injector }], 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\" (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" }] });
+    ], 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-select', providers: [
@@ -984,8 +896,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\" (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: [{
+                    ], 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: [{
                 type: Input
             }], multiple: [{
                 type: Input
@@ -3150,36 +3062,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class DialogConfirmComponent {
+class EcabsDialogConfirmComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
         this.data = data;
+        this.destroy$ = new Subject();
         this.color = 'primary';
         this.titleColor = 'primary';
     }
     ngOnInit() {
         this.dialogRef.updateSize(this.data.width || '24rem');
     }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    closeDialog() {
+        if (this.data.loading$) {
+            this.data.loading$?.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+                if (!loading) {
+                    this.dialogRef.close(true);
+                }
+            });
+        }
+        else {
+            this.dialogRef.close(true);
+        }
+    }
 }
-DialogConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DialogConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogConfirmComponent, selector: "ecabs-dialog-confirm", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  <div>{{ data?.content  }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons (click)=\"dialogRef.close(false)\" [stroked]=\"true\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons [color]=\"data?.color || color\" (click)=\"dialogRef.close(true)\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.modal-title.warn{color:var(--color-error)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["label", "disabled", "loading", "form", "size", "type", "raised", "stroked", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmComponent, decorators: [{
+EcabsDialogConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+EcabsDialogConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsDialogConfirmComponent, selector: "ecabs-dialog-confirm", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  <div>{{ data?.content  }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons (click)=\"dialogRef.close(false)\" [stroked]=\"true\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons [color]=\"data?.color || color\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.modal-title.warn{color:var(--color-error)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["label", "disabled", "loading", "form", "size", "type", "raised", "stroked", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-dialog-confirm', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  <div>{{ data?.content  }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons (click)=\"dialogRef.close(false)\" [stroked]=\"true\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons [color]=\"data?.color || color\" (click)=\"dialogRef.close(true)\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.modal-title.warn{color:var(--color-error)!important}\n"] }]
+            args: [{ selector: 'ecabs-dialog-confirm', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  <div>{{ data?.content  }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons (click)=\"dialogRef.close(false)\" [stroked]=\"true\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons [color]=\"data?.color || color\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.modal-title.warn{color:var(--color-error)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class DialogConfirmModule {
+class EcabsDialogConfirmModule {
 }
-DialogConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DialogConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmModule, declarations: [DialogConfirmComponent], imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule] });
-DialogConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmModule, imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogConfirmModule, decorators: [{
+EcabsDialogConfirmModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EcabsDialogConfirmModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmModule, declarations: [EcabsDialogConfirmComponent], imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule] });
+EcabsDialogConfirmModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmModule, imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DialogConfirmComponent],
+                    declarations: [EcabsDialogConfirmComponent],
                     imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule],
                 }]
         }] });
@@ -3190,13 +3119,30 @@ class EcabsDialogMessageComponent {
         this.data = data;
         this.color = 'primary';
         this.titleColor = 'success';
+        this.destroy$ = new Subject();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    closeDialog() {
+        if (this.data.loading$) {
+            this.data.loading$?.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+                if (!loading) {
+                    this.dialogRef.close(true);
+                }
+            });
+        }
+        else {
+            this.dialogRef.close(true);
+        }
     }
 }
 EcabsDialogMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogMessageComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-EcabsDialogMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsDialogMessageComponent, selector: "ecabs-dialog-message", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div *ngIf=\"data.title\" class=\"title font-semibold heading--xs\" [ngClass]=\"data?.titleColor || titleColor\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" (click)=\"dialogRef.close(true)\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host .title.success,:host ::ng-deep .title.success{color:var(--color-success)}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["label", "disabled", "loading", "form", "size", "type", "raised", "stroked", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+EcabsDialogMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsDialogMessageComponent, selector: "ecabs-dialog-message", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div *ngIf=\"data.title\" class=\"title font-semibold heading--xs\" [ngClass]=\"data?.titleColor || titleColor\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host .title.success,:host ::ng-deep .title.success{color:var(--color-success)}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["label", "disabled", "loading", "form", "size", "type", "raised", "stroked", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-dialog-message', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div *ngIf=\"data.title\" class=\"title font-semibold heading--xs\" [ngClass]=\"data?.titleColor || titleColor\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" (click)=\"dialogRef.close(true)\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host .title.success,:host ::ng-deep .title.success{color:var(--color-success)}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}\n"] }]
+            args: [{ selector: 'ecabs-dialog-message', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n    <mat-icon\r\n      (click)=\"dialogRef.close(true)\"\r\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n      role=\"button\"\r\n    >\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div *ngIf=\"data.title\" class=\"title font-semibold heading--xs\" [ngClass]=\"data?.titleColor || titleColor\">\r\n    {{ data.title }}\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n  {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host .title.success,:host ::ng-deep .title.success{color:var(--color-success)}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3272,14 +3218,18 @@ class EcabsLanguageSelectorComponent {
     }
 }
 EcabsLanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsLanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EcabsLanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\r\n  <mat-select class=\"capitalize\" [(ngModel)]=\"selectedLang\" name=\"language\" (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div class=\"ml-2\">{{standardLang(matchSelected())}}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{standardLang(lang) | titlecase}}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host::ng-deep .mat-select{padding:0;border:0}:host::ng-deep .mat-select .mat-select-arrow{border:none}:host::ng-deep .mat-select,:host::ng-deep .mat-select .mat-option{font-size:12px}:host::ng-deep .mat-form-field-infix{width:auto}\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: "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: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+EcabsLanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage", flagOnly: "flagOnly", tooltip: "tooltip" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [ngClass]=\"{'flag-only': flagOnly}\">\r\n  <mat-select class=\"capitalize\" [(ngModel)]=\"selectedLang\" name=\"language\" (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\" [matTooltip]=\"tooltip\" [matTooltipDisabled]=\"!flagOnly || !tooltip\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{standardLang(matchSelected())}}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{standardLang(lang) | titlecase}}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host::ng-deep .mat-select{padding:0;border:0}:host::ng-deep .mat-select .mat-select-arrow{border:none}:host::ng-deep .mat-select,:host::ng-deep .mat-select .mat-option{font-size:12px}:host::ng-deep .mat-form-field-infix{width:auto}:host::ng-deep .flag-only .mat-select .mat-select-arrow-wrapper{width:0}\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: 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: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsLanguageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field>\r\n  <mat-select class=\"capitalize\" [(ngModel)]=\"selectedLang\" name=\"language\" (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div class=\"ml-2\">{{standardLang(matchSelected())}}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{standardLang(lang) | titlecase}}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host::ng-deep .mat-select{padding:0;border:0}:host::ng-deep .mat-select .mat-select-arrow{border:none}:host::ng-deep .mat-select,:host::ng-deep .mat-select .mat-option{font-size:12px}:host::ng-deep .mat-form-field-infix{width:auto}\n"] }]
+            args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field [ngClass]=\"{'flag-only': flagOnly}\">\r\n  <mat-select class=\"capitalize\" [(ngModel)]=\"selectedLang\" name=\"language\" (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\" [matTooltip]=\"tooltip\" [matTooltipDisabled]=\"!flagOnly || !tooltip\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{standardLang(matchSelected())}}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{standardLang(lang) | titlecase}}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host::ng-deep .mat-select{padding:0;border:0}:host::ng-deep .mat-select .mat-select-arrow{border:none}:host::ng-deep .mat-select,:host::ng-deep .mat-select .mat-option{font-size:12px}:host::ng-deep .mat-form-field-infix{width:auto}:host::ng-deep .flag-only .mat-select .mat-select-arrow-wrapper{width:0}\n"] }]
         }], propDecorators: { languages: [{
                 type: Input
             }], currentLanguage: [{
                 type: Input
+            }], flagOnly: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
             }], languageChanged: [{
                 type: Output
             }] } });
@@ -3291,12 +3241,14 @@ EcabsLanguageSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0
         MatSelectModule,
         MatFormFieldModule,
         FormsModule,
-        ReactiveFormsModule], exports: [EcabsLanguageSelectorComponent] });
+        ReactiveFormsModule,
+        MatTooltipModule], exports: [EcabsLanguageSelectorComponent] });
 EcabsLanguageSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsLanguageSelectorModule, imports: [CommonModule,
         MatSelectModule,
         MatFormFieldModule,
         FormsModule,
-        ReactiveFormsModule] });
+        ReactiveFormsModule,
+        MatTooltipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsLanguageSelectorModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3306,7 +3258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MatSelectModule,
                         MatFormFieldModule,
                         FormsModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        MatTooltipModule
                     ],
                     exports: [EcabsLanguageSelectorComponent],
                 }]
@@ -3385,5 +3338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveStatusFilterComponent, ButtonsComponent, DialogConfirmComponent, DialogConfirmModule, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerModule, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, NoteComponent, NoteModule, TableComponent, TimeRangeDirective, ValidationComponent, scrollFactory };
+export { ActiveStatusFilterComponent, ButtonsComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerModule, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, NoteComponent, NoteModule, TableComponent, TimeRangeDirective, ValidationComponent, scrollFactory };
 //# sourceMappingURL=ecabs-components.mjs.map