ecabs-components 0.0.64 → 0.0.66

package/fesm2020/ecabs-components.mjs

@@ -8,18 +8,18 @@ import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
-import * as i5$1 from '@angular/material/tooltip';
+import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatInputModule } from '@angular/material/input';
 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 * as i8 from 'ngx-mat-select-search';
 import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil } from 'rxjs';
+import { Overlay } from '@angular/cdk/overlay';
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
+import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil } from 'rxjs';
 import * as i2 from '@angular/material/core';
-import { Overlay } from '@angular/cdk/overlay';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$2 from '@angular/material/slide-toggle';
@@ -41,7 +41,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import * as i2$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$1 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 
 class EcabsSpinnerComponent {
@@ -399,7 +399,7 @@ class ElementWrapperComponent {
     }
 }
 ElementWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElementWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div>\r\n    <label class=\"form-field__label\" [attr.for]=\"data?.name\" *ngIf=\"data?.label\">\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n      <mat-icon class=\"icon\" *ngIf=\"data?.tooltip\" [matTooltip]=\"data?.tooltip\">error_outline</mat-icon>\r\n    </label>\r\n  </div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <app-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></app-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: HintComponent, selector: "app-hint", inputs: ["element", "maxValue", "showHint"] }] });
+ElementWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div>\r\n    <label class=\"form-field__label\" [attr.for]=\"data?.name\" *ngIf=\"data?.label\">\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n      <mat-icon class=\"icon\" *ngIf=\"data?.tooltip\" [matTooltip]=\"data?.tooltip\">error_outline</mat-icon>\r\n    </label>\r\n  </div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <app-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></app-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: HintComponent, selector: "app-hint", inputs: ["element", "maxValue", "showHint"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ElementWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-element-wrapper', template: "<div\r\n  class=\"form-field\"\r\n  [ngClass]=\"{\r\n    'form-field--invalid':\r\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n    disabled: data?.disabled,\r\n    'form-field--required': data?.required && data?.showAsterisk\r\n  }\"\r\n>\r\n  <div>\r\n    <label class=\"form-field__label\" [attr.for]=\"data?.name\" *ngIf=\"data?.label\">\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n      <mat-icon class=\"icon\" *ngIf=\"data?.tooltip\" [matTooltip]=\"data?.tooltip\">error_outline</mat-icon>\r\n    </label>\r\n  </div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner class=\"spinner\" size=\"tiny\" *ngIf=\"data.loading\"></ecabs-loading-spinner>\r\n\r\n  <app-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></app-hint>\r\n\r\n  <ecabs-validations-messages\r\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n    [element]=\"data?.control\"\r\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n  >\r\n  </ecabs-validations-messages>\r\n</div>\r\n" }]
@@ -728,6 +728,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class TooltipIfTruncatedDirective {
+    constructor(matTooltip, elementRef) {
+        this.matTooltip = matTooltip;
+        this.elementRef = elementRef;
+    }
+    onMouseOver() {
+        const element = this.classNameTruncatedTooltip?.length > 0
+            ? this.elementRef.nativeElement.getElementsByClassName(this.classNameTruncatedTooltip)[0]
+            : this.elementRef.nativeElement;
+        this.matTooltip.disabled = element?.scrollWidth <= element?.clientWidth;
+    }
+}
+TooltipIfTruncatedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirective, deps: [{ token: i1$1.MatTooltip }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipIfTruncatedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: { classNameTruncatedTooltip: "classNameTruncatedTooltip" }, host: { listeners: { "mouseover": "onMouseOver()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matTooltip][appTooltipIfTruncated]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatTooltip }, { type: i0.ElementRef }]; }, propDecorators: { classNameTruncatedTooltip: [{
+                type: Input
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }] } });
+
 class EcabsSelectComponent extends ElementBaseComponent {
     constructor(injector, changeDetectorRef) {
         super();
@@ -765,6 +791,16 @@ class EcabsSelectComponent extends ElementBaseComponent {
     get value() {
         return this.val;
     }
+    get trigger() {
+        if (this.getAllSelectedChecked()) {
+            return this.allLabel;
+        }
+        const firstChosenValue = this.val && this.multiple ? this.getLabel(this.val[0]) : this.getLabel(this.val);
+        return this.multiple && this.value?.length > 1
+            ? `${firstChosenValue} (+${this.useSelectAllOption && this.allSelected?.selected ? this.value?.length - 2 : this.value?.length - 1}
+          ${this.value?.length === 2 ? this.otherLabel : this.othersLabel})`
+            : firstChosenValue;
+    }
     set value(val) {
         if (this.val !== val) {
             this.val = val;
@@ -975,7 +1011,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      [(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      [matTooltip]=\"trigger\"\r\n      appTooltipIfTruncated\r\n      [classNameTruncatedTooltip]=\"'mat-select-value'\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</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\r\n        *ngFor=\"let item of filteredItems$ | async\"\r\n        [value]=\"item.value\"\r\n        (click)=\"togglePerOne()\"\r\n        [matTooltip]=\"item.label\"\r\n        appTooltipIfTruncated\r\n        [classNameTruncatedTooltip]=\"'mat-option-text'\"\r\n      >\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: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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: i8.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: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { 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,7 +1020,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      [(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" }]
+                    ], 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      [matTooltip]=\"trigger\"\r\n      appTooltipIfTruncated\r\n      [classNameTruncatedTooltip]=\"'mat-select-value'\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</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\r\n        *ngFor=\"let item of filteredItems$ | async\"\r\n        [value]=\"item.value\"\r\n        (click)=\"togglePerOne()\"\r\n        [matTooltip]=\"item.label\"\r\n        appTooltipIfTruncated\r\n        [classNameTruncatedTooltip]=\"'mat-option-text'\"\r\n      >\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: [{
@@ -1025,6 +1061,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: [MatSelectSearchComponent]
             }] } });
 
+class TooltipIfTruncatedDirectiveModule {
+}
+TooltipIfTruncatedDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TooltipIfTruncatedDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, declarations: [TooltipIfTruncatedDirective], imports: [CommonModule], exports: [TooltipIfTruncatedDirective] });
+TooltipIfTruncatedDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        TooltipIfTruncatedDirective,
+                    ],
+                    exports: [
+                        TooltipIfTruncatedDirective,
+                    ],
+                }]
+        }] });
+
 class EcabsSelectModule {
 }
 EcabsSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1032,9 +1086,11 @@ EcabsSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ElementWrapperModule,
         MatSelectModule,
         MatFormFieldModule,
+        MatTooltipModule,
         FormsModule,
         NgxMatSelectSearchModule,
-        ReactiveFormsModule], exports: [EcabsSelectComponent] });
+        ReactiveFormsModule,
+        TooltipIfTruncatedDirectiveModule], exports: [EcabsSelectComponent] });
 EcabsSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectModule, providers: [
         {
             provide: MAT_SELECT_SCROLL_STRATEGY,
@@ -1045,9 +1101,11 @@ EcabsSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         ElementWrapperModule,
         MatSelectModule,
         MatFormFieldModule,
+        MatTooltipModule,
         FormsModule,
         NgxMatSelectSearchModule,
-        ReactiveFormsModule] });
+        ReactiveFormsModule,
+        TooltipIfTruncatedDirectiveModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsSelectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1057,9 +1115,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         ElementWrapperModule,
                         MatSelectModule,
                         MatFormFieldModule,
+                        MatTooltipModule,
                         FormsModule,
                         NgxMatSelectSearchModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        TooltipIfTruncatedDirectiveModule
                     ],
                     exports: [EcabsSelectComponent],
                     providers: [
@@ -3190,12 +3250,12 @@ class EcabsDialogConfirmComponent {
         }
     }
 }
-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" }] });
+EcabsDialogConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogConfirmComponent, deps: [{ token: i1$2.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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.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\" [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: [{
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -3238,12 +3298,12 @@ class EcabsDialogMessageComponent {
         }
     }
 }
-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\" [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" }] });
+EcabsDialogMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDialogMessageComponent, deps: [{ token: i1$2.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\" [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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.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\" [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: [{
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -3318,7 +3378,7 @@ 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", 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" }] });
+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: i1$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 [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"] }]
@@ -3438,5 +3498,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, ValidationComponent, scrollFactory };
 //# sourceMappingURL=ecabs-components.mjs.map