npm - ecabs-components - Versions diffs - 1.1.78 → 1.1.79 - Mend

ecabs-components 1.1.78 → 1.1.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (246) hide show

package/fesm2022/ecabs-components.mjs CHANGED Viewed

@@ -75,11 +75,11 @@ import { MatListModule } from '@angular/material/list';
 class EcabsSpinnerComponent {
     size = 'medium';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"loadingio-spinner-rolling {{ size }}\">\r\n  <div class=\"ldio-inner\">\r\n    <div></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{line-height:0}@keyframes ldio-inner{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.loadingio-spinner-rolling{width:27px;height:27px;display:inline-block;overflow:hidden;background:none}.loadingio-spinner-rolling .ldio-inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0}.loadingio-spinner-rolling .ldio-inner div{position:absolute;width:9px;height:9px;border:4px solid #85a2b6;border-top-color:transparent;border-radius:50%;animation:ldio-inner 1s linear infinite;top:14px;left:14px;box-sizing:content-box}.loadingio-spinner-rolling.medium{width:40px;height:40px}.loadingio-spinner-rolling.medium .ldio-inner div{width:20px;height:20px;border-width:6px;top:19px;left:19px}.loadingio-spinner-rolling.large{width:60px;height:60px}.loadingio-spinner-rolling.large .ldio-inner div{width:35px;height:35px;border-width:9px;top:29px;left:29px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"loadingio-spinner-rolling {{ size }}\">\n  <div class=\"ldio-inner\">\n    <div></div>\n  </div>\n</div>\n", styles: [":host{line-height:0}@keyframes ldio-inner{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.loadingio-spinner-rolling{width:27px;height:27px;display:inline-block;overflow:hidden;background:none}.loadingio-spinner-rolling .ldio-inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0}.loadingio-spinner-rolling .ldio-inner div{position:absolute;width:9px;height:9px;border:4px solid #85a2b6;border-top-color:transparent;border-radius:50%;animation:ldio-inner 1s linear infinite;top:14px;left:14px;box-sizing:content-box}.loadingio-spinner-rolling.medium{width:40px;height:40px}.loadingio-spinner-rolling.medium .ldio-inner div{width:20px;height:20px;border-width:6px;top:19px;left:19px}.loadingio-spinner-rolling.large{width:60px;height:60px}.loadingio-spinner-rolling.large .ldio-inner div{width:35px;height:35px;border-width:9px;top:29px;left:29px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loadingio-spinner-rolling {{ size }}\">\r\n  <div class=\"ldio-inner\">\r\n    <div></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{line-height:0}@keyframes ldio-inner{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.loadingio-spinner-rolling{width:27px;height:27px;display:inline-block;overflow:hidden;background:none}.loadingio-spinner-rolling .ldio-inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0}.loadingio-spinner-rolling .ldio-inner div{position:absolute;width:9px;height:9px;border:4px solid #85a2b6;border-top-color:transparent;border-radius:50%;animation:ldio-inner 1s linear infinite;top:14px;left:14px;box-sizing:content-box}.loadingio-spinner-rolling.medium{width:40px;height:40px}.loadingio-spinner-rolling.medium .ldio-inner div{width:20px;height:20px;border-width:6px;top:19px;left:19px}.loadingio-spinner-rolling.large{width:60px;height:60px}.loadingio-spinner-rolling.large .ldio-inner div{width:35px;height:35px;border-width:9px;top:29px;left:29px}\n"] }]
+            args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loadingio-spinner-rolling {{ size }}\">\n  <div class=\"ldio-inner\">\n    <div></div>\n  </div>\n</div>\n", styles: [":host{line-height:0}@keyframes ldio-inner{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.loadingio-spinner-rolling{width:27px;height:27px;display:inline-block;overflow:hidden;background:none}.loadingio-spinner-rolling .ldio-inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0}.loadingio-spinner-rolling .ldio-inner div{position:absolute;width:9px;height:9px;border:4px solid #85a2b6;border-top-color:transparent;border-radius:50%;animation:ldio-inner 1s linear infinite;top:14px;left:14px;box-sizing:content-box}.loadingio-spinner-rolling.medium{width:40px;height:40px}.loadingio-spinner-rolling.medium .ldio-inner div{width:20px;height:20px;border-width:6px;top:19px;left:19px}.loadingio-spinner-rolling.large{width:60px;height:60px}.loadingio-spinner-rolling.large .ldio-inner div{width:35px;height:35px;border-width:9px;top:29px;left:29px}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -89,11 +89,11 @@ class EcabsLoadingComponent {
     backgroundColor = 'white';
     size = 'medium';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLoadingComponent, selector: "ecabs-loading", inputs: { loading: "loading", backgroundColor: "backgroundColor", size: "size" }, ngImport: i0, template: "<div\r\n  class=\"flex absolute left-0 top-0 right-0 bottom-0 z-50 items-center justify-center\"\r\n  [ngStyle]=\"{ backgroundColor: backgroundColor }\"\r\n  *ngIf=\"loading\"\r\n>\r\n  <ecabs-loading-spinner [size]=\"size\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLoadingComponent, selector: "ecabs-loading", inputs: { loading: "loading", backgroundColor: "backgroundColor", size: "size" }, ngImport: i0, template: "<div\n  class=\"flex absolute left-0 top-0 right-0 bottom-0 z-50 items-center justify-center\"\n  [ngStyle]=\"{ backgroundColor: backgroundColor }\"\n  *ngIf=\"loading\"\n>\n  <ecabs-loading-spinner [size]=\"size\" *ngIf=\"loading\"></ecabs-loading-spinner>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-loading', template: "<div\r\n  class=\"flex absolute left-0 top-0 right-0 bottom-0 z-50 items-center justify-center\"\r\n  [ngStyle]=\"{ backgroundColor: backgroundColor }\"\r\n  *ngIf=\"loading\"\r\n>\r\n  <ecabs-loading-spinner [size]=\"size\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-loading', template: "<div\n  class=\"flex absolute left-0 top-0 right-0 bottom-0 z-50 items-center justify-center\"\n  [ngStyle]=\"{ backgroundColor: backgroundColor }\"\n  *ngIf=\"loading\"\n>\n  <ecabs-loading-spinner [size]=\"size\" *ngIf=\"loading\"></ecabs-loading-spinner>\n</div>\n" }]
         }], propDecorators: { loading: [{
                 type: Input
             }], backgroundColor: [{
@@ -147,11 +147,11 @@ class ButtonsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsComponent, selector: "ecabs-buttons", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", full: "full", color: "color" }, host: { properties: { "style.width": "this.borderWidth", "class": "this.classAttr" } }, viewQueries: [{ propertyName: "matButton", first: true, predicate: MatButton, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'flat'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-stroked-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'stroked'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'raised'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchDefault\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsComponent, selector: "ecabs-buttons", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", full: "full", color: "color" }, host: { properties: { "style.width": "this.borderWidth", "class": "this.classAttr" } }, viewQueries: [{ propertyName: "matButton", first: true, predicate: MatButton, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'flat'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-stroked-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'stroked'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-raised-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'raised'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchDefault\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n", styles: [""], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-buttons', template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'flat'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-stroked-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'stroked'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'raised'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchDefault\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'ecabs-buttons', template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'flat'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-stroked-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'stroked'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-raised-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'raised'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchDefault\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n" }]
         }], propDecorators: { matButton: [{
                 type: ViewChild,
                 args: [MatButton, { static: false }]
@@ -221,11 +221,11 @@ class ButtonsV2Component {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "style.width": "this.hostWidth", "class": "this.classAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    *ngSwitchCase=\"'flat'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-stroked-button\r\n    *ngSwitchCase=\"'stroked'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-raised-button\r\n    *ngSwitchCase=\"'raised'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-button\r\n    *ngSwitchCase=\"'basic'\"\r\n    [color]=\"color\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner\r\n    size=\"tiny\"\r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "style.width": "this.hostWidth", "class": "this.classAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    *ngSwitchCase=\"'flat'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-stroked-button\n    *ngSwitchCase=\"'stroked'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-raised-button\n    *ngSwitchCase=\"'raised'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-button\n    *ngSwitchCase=\"'basic'\"\n    [color]=\"color\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner\n    size=\"tiny\"\n    *ngIf=\"loading\"\n  >\n  </ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    *ngSwitchCase=\"'flat'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-stroked-button\r\n    *ngSwitchCase=\"'stroked'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-raised-button\r\n    *ngSwitchCase=\"'raised'\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button\r\n    mat-button\r\n    *ngSwitchCase=\"'basic'\"\r\n    [color]=\"color\"\r\n    [ngClass]=\"buttonClasses\"\r\n    [class]=\"sizeClass\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner\r\n    size=\"tiny\"\r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}\n"] }]
+            args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    *ngSwitchCase=\"'flat'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-stroked-button\n    *ngSwitchCase=\"'stroked'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-raised-button\n    *ngSwitchCase=\"'raised'\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n  <button\n    mat-button\n    *ngSwitchCase=\"'basic'\"\n    [color]=\"color\"\n    [ngClass]=\"buttonClasses\"\n    [class]=\"sizeClass\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner\n    size=\"tiny\"\n    *ngIf=\"loading\"\n  >\n  </ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -305,7 +305,7 @@ class EcabsButtonToggleComponent {
                 useExisting: forwardRef(() => EcabsButtonToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\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: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-button-toggle-group\n  class=\"ecabs-button-toggle\"\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\n  [multiple]=\"multiple\"\n  [value]=\"value\" \n  [disabled]=\"isDisabled\"\n  (change)=\"onGroupChange($event)\"\n>  \n  <mat-button-toggle\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\">\n    {{ option.label }}\n  </mat-button-toggle>\n</mat-button-toggle-group>", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\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: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsButtonToggleComponent, decorators: [{
             type: Component,
@@ -315,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsButtonToggleComponent),
                             multi: true,
                         },
-                    ], template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
+                    ], template: "<mat-button-toggle-group\n  class=\"ecabs-button-toggle\"\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\n  [multiple]=\"multiple\"\n  [value]=\"value\" \n  [disabled]=\"isDisabled\"\n  (change)=\"onGroupChange($event)\"\n>  \n  <mat-button-toggle\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\">\n    {{ option.label }}\n  </mat-button-toggle>\n</mat-button-toggle-group>", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -747,11 +747,11 @@ class ValidationComponent {
         return this.messages[key];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationComponent, deps: [{ token: EcabsComponentsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: { element: "element", label: "label", showValidationOnNotTouched: "showValidationOnNotTouched", updatedErrors: "updatedErrors" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"form-field__validation\"\r\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\r\n>\r\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\r\n    {{ getMessageDetail(item.key) }}\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: { element: "element", label: "label", showValidationOnNotTouched: "showValidationOnNotTouched", updatedErrors: "updatedErrors" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"form-field__validation\"\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\n>\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\n    {{ getMessageDetail(item.key) }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-validations-messages', template: "<div\r\n  class=\"form-field__validation\"\r\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\r\n>\r\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\r\n    {{ getMessageDetail(item.key) }}\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-validations-messages', template: "<div\n  class=\"form-field__validation\"\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\n>\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\n    {{ getMessageDetail(item.key) }}\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: EcabsComponentsService }]; }, propDecorators: { element: [{
                 type: Input
             }], label: [{
@@ -767,11 +767,11 @@ class EcabsHintComponent {
     maxValue;
     showHint = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHintComponent, selector: "ecabs-hint", inputs: { element: "element", maxValue: "maxValue", showHint: "showHint" }, ngImport: i0, template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHintComponent, selector: "ecabs-hint", inputs: { element: "element", maxValue: "maxValue", showHint: "showHint" }, ngImport: i0, template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-hint', template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\r\n" }]
+            args: [{ selector: 'ecabs-hint', template: "<div class=\"hint\" *ngIf=\"element && showHint\">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>\n" }]
         }], propDecorators: { element: [{
                 type: Input
             }], maxValue: [{
@@ -803,11 +803,11 @@ class EcabsElementWrapperComponent {
         this.decrease.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsElementWrapperComponent, selector: "ecabs-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 class=\"flex\">\r\n    <label *ngIf=\"data?.label && data?.showLabel\"\r\n           class=\"form-field__label\"\r\n           [attr.for]=\"data?.name || data?.label\">\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n              [matTooltip]=\"data?.tooltip\">error_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\r\n                         class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\r\n\r\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-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", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\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: EcabsHintComponent, selector: "ecabs-hint", inputs: ["element", "maxValue", "showHint"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsElementWrapperComponent, selector: "ecabs-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\n  class=\"form-field\"\n  [ngClass]=\"{\n    'form-field--invalid':\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\n    disabled: data?.disabled,\n    'form-field--required': data?.required && data?.showAsterisk\n  }\"\n>\n  <div class=\"flex\">\n    <label *ngIf=\"data?.label && data?.showLabel\"\n           class=\"form-field__label\"\n           [attr.for]=\"data?.name || data?.label\">\n      <span [innerHTML]=\"data?.label\"></span>\n    </label>\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\n              [matTooltip]=\"data?.tooltip\">error_outline\n    </mat-icon>\n  </div>\n\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\n\n  <ng-content></ng-content>\n\n  <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\n                         class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\n\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\n\n  <ecabs-validations-messages\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\n    [element]=\"data?.control\"\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\n  >\n  </ecabs-validations-messages>\n</div>\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\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: EcabsHintComponent, selector: "ecabs-hint", inputs: ["element", "maxValue", "showHint"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-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 class=\"flex\">\r\n    <label *ngIf=\"data?.label && data?.showLabel\"\r\n           class=\"form-field__label\"\r\n           [attr.for]=\"data?.name || data?.label\">\r\n      <span [innerHTML]=\"data?.label\"></span>\r\n    </label>\r\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n              [matTooltip]=\"data?.tooltip\">error_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\r\n                         class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\r\n\r\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-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", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"] }]
+            args: [{ selector: 'ecabs-element-wrapper', template: "<div\n  class=\"form-field\"\n  [ngClass]=\"{\n    'form-field--invalid':\n      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\n    disabled: data?.disabled,\n    'form-field--required': data?.required && data?.showAsterisk\n  }\"\n>\n  <div class=\"flex\">\n    <label *ngIf=\"data?.label && data?.showLabel\"\n           class=\"form-field__label\"\n           [attr.for]=\"data?.name || data?.label\">\n      <span [innerHTML]=\"data?.label\"></span>\n    </label>\n    <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\n              [matTooltip]=\"data?.tooltip\">error_outline\n    </mat-icon>\n  </div>\n\n  <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\n\n  <ng-content></ng-content>\n\n  <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\n                         class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\n\n  <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\n\n  <ecabs-validations-messages\n    *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\n    [element]=\"data?.control\"\n    [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\n    [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\n  >\n  </ecabs-validations-messages>\n</div>\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], showCloseIcon: [{
@@ -832,6 +832,7 @@ class EcabsDigitsOnlyDirective {
     el;
     digitsOnly = false;
     allowHyphen = false;
+    allowRange = false;
     decimal = false;
     decimalSeparator = '.';
     unit = 0;
@@ -839,6 +840,7 @@ class EcabsDigitsOnlyDirective {
     minus = '-';
     minusCounter = 0;
     regex;
+    rangeRegex;
     decimalCounter = 0;
     navigationKeys = [
         'Backspace',
@@ -872,18 +874,19 @@ class EcabsDigitsOnlyDirective {
                 (this.decimal &&
                     e.key === this.decimalSeparator &&
                     this.decimalCounter <= 1) || // Allow: only one decimal point
-                (this.decimal && e.key === this.minus && this.minusCounter < 1) // Allow: only one minus
+                (e.key === this.minus && this.isMinusAllowed()) // Allow: leading minus and/or range separator
             ) {
                 return;
             }
-            // Ensure that it is a number and stop the keypress
-            if (e.key === ' ' || !this.regex.test(e.key)) {
+            if (e.key === ' ' || e.key === this.minus || !this.regex.test(e.key)) {
                 e.preventDefault();
             }
         }
     }
     onKeyUp() {
         if (this.digitsOnly) {
+            this.minusCounter =
+                this.el.nativeElement.value.split(this.minus).length - 1;
             if (!this.decimal) {
                 const regex = /[.,]/g;
                 this.inputElement.value = this.inputElement.value.replace(regex, '');
@@ -891,9 +894,9 @@ class EcabsDigitsOnlyDirective {
             }
             this.decimalCounter =
                 this.el.nativeElement.value.split(this.decimalSeparator).length - 1;
-            this.minusCounter =
-                this.el.nativeElement.value.split(this.minus).length - 1;
-            if (isNaN(+this.inputElement.value)) {
+            if (isNaN(+this.inputElement.value) &&
+                !this.isPartialNegative(this.inputElement.value) &&
+                !this.isPartialRange(this.inputElement.value)) {
                 this.inputElement.value = this.sanitizeInput(this.inputElement.value);
             }
         }
@@ -909,7 +912,16 @@ class EcabsDigitsOnlyDirective {
         event.preventDefault();
     }
     ngOnInit() {
-        this.regex = new RegExp(this.allowHyphen ? '^[\\d -]+$' : '\\d');
+        this.regex = new RegExp(this.allowHyphen || this.allowRange ? '^[\\d -]+$' : '\\d');
+        if (this.allowRange) {
+            const sep = this.escapeRegExp(this.decimalSeparator);
+            const head = this.decimal ? `\\d+(${sep}\\d*)?` : '\\d+';
+            const tail = this.decimal ? `\\d*(${sep}\\d*)?` : '\\d*';
+            // When combined with `allowHyphen`, a leading minus (negative lower
+            // bound) is allowed, e.g. "-5-20".
+            const lead = this.allowHyphen ? `${this.minus}?` : '';
+            this.rangeRegex = new RegExp(`^${lead}${head}(${this.minus}${tail})?$`);
+        }
     }
     pasteData(pastedContent) {
         const sanitizedContent = isNaN(+pastedContent)
@@ -922,28 +934,126 @@ class EcabsDigitsOnlyDirective {
         }
     }
     sanitizeInput(input) {
-        let result = '';
-        if (this.decimal && this.isValidDecimal(input)) {
-            //eslint-disable-next-line
-            const regex = new RegExp(`^[\d -${this.decimalSeparator}]+$`, 'g');
-            result = input.replace(regex, '');
-        }
-        else {
-            result = input.replace(`/${this.regex}/g`, '');
+        if (this.allowRange) {
+            return this.sanitizeRange(input);
+        }
+        const separator = this.decimalSeparator;
+        // Drop every character that isn't allowed, then keep only a single leading
+        // hyphen and a single decimal separator.
+        const allowed = ['\\d'];
+        if (this.allowHyphen) {
+            allowed.push('\\-');
+        }
+        if (this.decimal) {
+            allowed.push(this.escapeRegExp(separator));
+        }
+        let result = input.replace(new RegExp(`[^${allowed.join('')}]`, 'g'), '');
+        if (this.allowHyphen) {
+            const isNegative = result.startsWith(this.minus);
+            result = (isNegative ? this.minus : '') + result.split(this.minus).join('');
+        }
+        if (this.decimal) {
+            result = this.keepFirstSeparator(result, separator);
+        }
+        return this.applyMaxLength(result);
+    }
+    sanitizeRange(input) {
+        const separator = this.decimalSeparator;
+        const allowed = ['\\d', '\\-'];
+        if (this.decimal) {
+            allowed.push(this.escapeRegExp(separator));
+        }
+        let result = input.replace(new RegExp(`[^${allowed.join('')}]`, 'g'), '');
+        const hasLeadingMinus = this.allowHyphen && result.startsWith(this.minus);
+        let body = hasLeadingMinus ? result.slice(1) : result;
+        body = body.replace(/^-+/, '');
+        const firstHyphen = body.indexOf(this.minus);
+        if (firstHyphen !== -1) {
+            body =
+                body.slice(0, firstHyphen + 1) +
+                    body.slice(firstHyphen + 1).split(this.minus).join('');
+        }
+        if (this.decimal) {
+            body = body
+                .split(this.minus)
+                .map((segment) => this.keepFirstSeparator(segment, separator))
+                .join(this.minus);
+        }
+        result = (hasLeadingMinus ? this.minus : '') + body;
+        return this.applyMaxLength(result);
+    }
+    keepFirstSeparator(value, separator) {
+        const firstSeparator = value.indexOf(separator);
+        if (firstSeparator === -1) {
+            return value;
         }
+        return (value.slice(0, firstSeparator + 1) +
+            value.slice(firstSeparator + 1).split(separator).join(''));
+    }
+    applyMaxLength(result) {
         const maxLength = this.inputElement.maxLength;
         if (maxLength > 0) {
             // the input element has maxLength limit
             const allowedLength = maxLength - this.inputElement.value.length;
-            result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
+            return allowedLength > 0 ? result.substring(0, allowedLength) : '';
         }
         return result;
     }
-    isValidDecimal(inputString) {
-        return inputString.split(this.decimalSeparator).length <= 2;
+    escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    isMinusAllowed() {
+        const value = this.inputElement.value;
+        // Combined mode: a single leading minus (negative lower bound) plus one
+        // range separator, e.g. "-5-20".
+        if (this.allowHyphen && this.allowRange) {
+            if (this.isCaretAtStart()) {
+                return !value.startsWith(this.minus);
+            }
+            return this.hasDigitBeforeCaret() && !this.hasRangeSeparator();
+        }
+        // Hyphen only: a single leading minus.
+        if (this.allowHyphen) {
+            return this.minusCounter < 1 && this.isCaretAtStart();
+        }
+        // Range only: a single separator, never leading.
+        if (this.allowRange) {
+            return this.minusCounter < 1 && this.hasDigitBeforeCaret();
+        }
+        return false;
+    }
+    hasRangeSeparator() {
+        const value = this.inputElement.value;
+        const body = value.startsWith(this.minus) ? value.slice(1) : value;
+        return body.includes(this.minus);
+    }
+    isCaretAtStart() {
+        const caret = this.inputElement.selectionStart;
+        return caret === null || caret === 0;
+    }
+    hasDigitBeforeCaret() {
+        const caret = this.inputElement.selectionStart;
+        const value = this.inputElement.value;
+        const before = caret === null ? value : value.slice(0, caret);
+        return /\d/.test(before);
+    }
+    isPartialRange(value) {
+        return !!this.allowRange && !!this.rangeRegex && this.rangeRegex.test(value);
+    }
+    isPartialNegative(value) {
+        if (!this.allowHyphen || !value.startsWith(this.minus)) {
+            return false;
+        }
+        const remainder = value.slice(1);
+        if (remainder.includes(this.minus)) {
+            return false;
+        }
+        return (remainder === '' ||
+            remainder === this.decimalSeparator ||
+            !isNaN(+remainder));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", allowRange: "allowRange", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, decorators: [{
             type: Directive,
@@ -954,6 +1064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHyphen: [{
                 type: Input
+            }], allowRange: [{
+                type: Input
             }], decimal: [{
                 type: Input
             }], decimalSeparator: [{
@@ -1046,6 +1158,7 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
     digitsOnly;
     allowDecimal;
     allowHyphen;
+    allowRange;
     max;
     mini;
     maxi;
@@ -1101,13 +1214,13 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
         this.onblur.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputComponent, selector: "ecabs-input", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputComponent, selector: "ecabs-input", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", allowRange: "allowRange", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: EcabsInputComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           [allowRange]=\"allowRange\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, decorators: [{
             type: Component,
@@ -1117,7 +1230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsInputComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           [allowRange]=\"allowRange\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -1127,6 +1240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHyphen: [{
                 type: Input
+            }], allowRange: [{
+                type: Input
             }], max: [{
                 type: Input
             }], mini: [{
@@ -1431,7 +1546,7 @@ class EcabsInputRangeComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsInputRangeComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"rounded-xl flex flex-col gap-4\">\r\n    <div\r\n      class=\"form-field__range--wrapper\"\r\n      [class.form-field--invalid]=\"hasAnyError\"\r\n    >\r\n      <input\r\n        #fromInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-from'\"\r\n        [mini]=\"min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"fromPlaceholder\"\r\n        [ngModel]=\"value.from\"\r\n        (ngModelChange)=\"updateValue('from', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n        (keydown.enter)=\"focusToInput()\"\r\n      />\r\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n      <input\r\n        #toInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-to'\"\r\n        [mini]=\"value.from !== null ? value.from : min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"toPlaceholder\"\r\n        [ngModel]=\"value.to\"\r\n        (ngModelChange)=\"updateValue('to', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"rounded-xl flex flex-col gap-4\">\n    <div\n      class=\"form-field__range--wrapper\"\n      [class.form-field--invalid]=\"hasAnyError\"\n    >\n      <input\n        #fromInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-from'\"\n        [mini]=\"min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"fromPlaceholder\"\n        [ngModel]=\"value.from\"\n        (ngModelChange)=\"updateValue('from', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n        (keydown.enter)=\"focusToInput()\"\n      />\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\n      <input\n        #toInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-to'\"\n        [mini]=\"value.from !== null ? value.from : min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"toPlaceholder\"\n        [ngModel]=\"value.to\"\n        (ngModelChange)=\"updateValue('to', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n      />\n    </div>\n  </div>\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, decorators: [{
             type: Component,
@@ -1446,7 +1561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsInputRangeComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"rounded-xl flex flex-col gap-4\">\r\n    <div\r\n      class=\"form-field__range--wrapper\"\r\n      [class.form-field--invalid]=\"hasAnyError\"\r\n    >\r\n      <input\r\n        #fromInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-from'\"\r\n        [mini]=\"min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"fromPlaceholder\"\r\n        [ngModel]=\"value.from\"\r\n        (ngModelChange)=\"updateValue('from', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n        (keydown.enter)=\"focusToInput()\"\r\n      />\r\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n      <input\r\n        #toInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-to'\"\r\n        [mini]=\"value.from !== null ? value.from : min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"toPlaceholder\"\r\n        [ngModel]=\"value.to\"\r\n        (ngModelChange)=\"updateValue('to', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"rounded-xl flex flex-col gap-4\">\n    <div\n      class=\"form-field__range--wrapper\"\n      [class.form-field--invalid]=\"hasAnyError\"\n    >\n      <input\n        #fromInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-from'\"\n        [mini]=\"min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"fromPlaceholder\"\n        [ngModel]=\"value.from\"\n        (ngModelChange)=\"updateValue('from', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n        (keydown.enter)=\"focusToInput()\"\n      />\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\n      <input\n        #toInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-to'\"\n        [mini]=\"value.from !== null ? value.from : min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"toPlaceholder\"\n        [ngModel]=\"value.to\"\n        (ngModelChange)=\"updateValue('to', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n      />\n    </div>\n  </div>\n</ecabs-element-wrapper>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { toInput: [{
                 type: ViewChild,
                 args: ['toInput']
@@ -1589,7 +1704,7 @@ class EcabsSelectComponent extends EcabsElementBaseComponent {
         return this.multiple && this.value?.length > 1
             ? `${firstChosenValue} (+${this.useSelectAllOption && this.allSelected?.selected
                 ? this.value?.length - 2
-                : this.value?.length - 1}
+                : this.value?.length - 1}
           ${this.value?.length === 2 ? this.otherLabel : this.othersLabel})`
             : firstChosenValue;
     }
@@ -1834,7 +1949,7 @@ class EcabsSelectComponent extends EcabsElementBaseComponent {
                 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: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                ecabsTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  ecabsTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.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", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { 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: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\n    <mat-select class=\"form-field__select\"\n                [(ngModel)]=\"value\"\n                (closed)=\"onTouch()\"\n                [id]=\"name\"\n                [multiple]=\"multiple\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [disableRipple]=\"true\"\n                (selectionChange)=\"onSelectionChanged($event)\"\n                [matTooltip]=\"trigger\"\n                ecabsTooltipIfTruncated\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\n      <mat-select-trigger>\n        <span>{{ trigger }}</span>\n      </mat-select-trigger>\n\n      <mat-option *ngIf=\"useSearchOption\">\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\n        </ngx-mat-select-search>\n      </mat-option>\n\n      <mat-option *ngIf=\"useNoneOption\"\n                  (click)=\"toggleNone()\"\n                  (keydown.enter)=\"toggleNone()\">\n        {{ noneLabel }}\n      </mat-option>\n\n      <mat-option #allSelected\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\n                  (click)=\"toggleAllSelection()\"\n                  (keydown.enter)=\"toggleAllSelection()\"\n                  [value]=\"selectAllValue\">\n        {{ allLabel }}\n      </mat-option>\n\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\n                  [value]=\"item.value\"\n                  (click)=\"togglePerOne()\"\n                  (keydown.enter)=\"togglePerOne()\"\n                  [matTooltip]=\"item.label\"\n                  ecabsTooltipIfTruncated\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\n        {{ item.label }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</ecabs-element-wrapper>\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.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", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
@@ -1844,7 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsSelectComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                ecabsTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  ecabsTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\n    <mat-select class=\"form-field__select\"\n                [(ngModel)]=\"value\"\n                (closed)=\"onTouch()\"\n                [id]=\"name\"\n                [multiple]=\"multiple\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [disableRipple]=\"true\"\n                (selectionChange)=\"onSelectionChanged($event)\"\n                [matTooltip]=\"trigger\"\n                ecabsTooltipIfTruncated\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\n      <mat-select-trigger>\n        <span>{{ trigger }}</span>\n      </mat-select-trigger>\n\n      <mat-option *ngIf=\"useSearchOption\">\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\n        </ngx-mat-select-search>\n      </mat-option>\n\n      <mat-option *ngIf=\"useNoneOption\"\n                  (click)=\"toggleNone()\"\n                  (keydown.enter)=\"toggleNone()\">\n        {{ noneLabel }}\n      </mat-option>\n\n      <mat-option #allSelected\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\n                  (click)=\"toggleAllSelection()\"\n                  (keydown.enter)=\"toggleAllSelection()\"\n                  [value]=\"selectAllValue\">\n        {{ allLabel }}\n      </mat-option>\n\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\n                  [value]=\"item.value\"\n                  (click)=\"togglePerOne()\"\n                  (keydown.enter)=\"togglePerOne()\"\n                  [matTooltip]=\"item.label\"\n                  ecabsTooltipIfTruncated\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\n        {{ item.label }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }]; }, propDecorators: { items: [{
                 type: Input
             }], multiple: [{
@@ -2016,7 +2131,7 @@ class EcabsCheckboxToggleComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsCheckboxToggleComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <mat-checkbox\r\n      (change)=\"change($event)\"\r\n      (click)=\"onClick($event)\"\r\n      (blur)=\"onBlur()\"\r\n      [checked]=\"checked\"\r\n      [indeterminate]=\"indeterminate\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [id]=\"name\"\r\n      [labelPosition]=\"labelPosition\"\r\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n      *ngSwitchCase=\"'checkbox'\"\r\n    >\r\n      {{ text }}\r\n    </mat-checkbox>\r\n\r\n    <mat-slide-toggle\r\n      (change)=\"change($event)\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [labelPosition]=\"labelPosition\"\r\n      *ngSwitchCase=\"'toggle'\"\r\n      >{{ text }}</mat-slide-toggle\r\n    >\r\n  </ng-container>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
+        ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxToggleComponent, decorators: [{
             type: Component,
@@ -2026,7 +2141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsCheckboxToggleComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <mat-checkbox\r\n      (change)=\"change($event)\"\r\n      (click)=\"onClick($event)\"\r\n      (blur)=\"onBlur()\"\r\n      [checked]=\"checked\"\r\n      [indeterminate]=\"indeterminate\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [id]=\"name\"\r\n      [labelPosition]=\"labelPosition\"\r\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n      *ngSwitchCase=\"'checkbox'\"\r\n    >\r\n      {{ text }}\r\n    </mat-checkbox>\r\n\r\n    <mat-slide-toggle\r\n      (change)=\"change($event)\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [labelPosition]=\"labelPosition\"\r\n      *ngSwitchCase=\"'toggle'\"\r\n      >{{ text }}</mat-slide-toggle\r\n    >\r\n  </ng-container>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCheckbox: [{
                 type: ViewChild,
                 args: [MatCheckbox, { static: false }]
@@ -2199,11 +2314,11 @@ class EcabsSelectV2Component extends EcabsElementBaseComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectV2Component, deps: [{ token: i3.NgControl, optional: true, self: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectV2Component, selector: "ecabs-select-v2", inputs: { appearance: "appearance", appendTo: "appendTo", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", editableSearchTerm: "editableSearchTerm", searchable: "searchable", clearable: "clearable", multiple: "multiple", notFoundText: "notFoundText", hideSelected: "hideSelected", clearOnBackspace: "clearOnBackspace", clearSearchOnAdd: "clearSearchOnAdd", trackByFn: "trackByFn", minLength: "minLength", searchPlaceholder: "searchPlaceholder", typeahead: "typeahead", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", selectAllLabel: "selectAllLabel", otherLabel: "otherLabel", othersLabel: "othersLabel" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <ng-select class=\"form-field__select\"\r\n             [appearance]=\"appearance\"\r\n             [appendTo]=\"appendTo\"\r\n             [labelForId]=\"name\"\r\n             [bindLabel]=\"bindLabel || null\"\r\n             [bindValue]=\"bindValue || null\"\r\n             [searchable]=\"searchable\"\r\n             [clearable]=\"clearable\"\r\n             [clearSearchOnAdd]=\"clearSearchOnAdd\"\r\n             [groupBy]=\"groupByKey\"\r\n             [selectableGroup]=\"true\"\r\n             [selectableGroupAsModel]=\"false\"\r\n             [items]=\"itemsList\"\r\n             [multiple]=\"multiple\"\r\n             [(ngModel)]=\"value\"\r\n             [placeholder]=\"placeholder\"\r\n             (blur)=\"onBlur()\"\r\n             [hideSelected]=\"hideSelected\"\r\n             [trackByFn]=\"trackByFn\"\r\n             [minTermLength]=\"minLength\"\r\n             [typeToSearchText]=\"searchPlaceholder\"\r\n             [typeahead]=\"typeahead\"\r\n             [loading]=\"loading\"\r\n             [closeOnSelect]=\"closeOnSelect\"\r\n             [clearOnBackspace]=\"clearOnBackspace\"\r\n             [editableSearchTerm]=\"editableSearchTerm\"\r\n             (open)=\"this.isOpen = true\"\r\n             (close)=\"this.isOpen = false\"\r\n             (change)=\"changed($event)\"\r\n             [notFoundText]=\"notFoundText\"\r\n             [clearAllText]=\"clearAllText\"\r\n             [readonly]=\"this.disabled\">\r\n\r\n    <ng-container *ngIf=\"!typeahead\">\r\n      <ng-option *ngFor=\"let item of itemsList\" [value]=\"item?.value\">\r\n        {{ item?.label }}\r\n      </ng-option>\r\n    </ng-container>\r\n\r\n    <ng-template ng-loadingspinner-tmp>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\r\n      <ng-template ng-multi-label-tmp let-items=\"items\">\r\n        <!--#Custom display of first selected item and (+1 more) pattern -->\r\n        <ng-container *ngIf=\"!isOpen\">\r\n          <div *ngFor=\"let item of items | slice:0:1\">\r\n            {{ item?.['label'] }} <span *ngIf=\"items.length > 1\">\r\n            (+{{ items.length - 1 }}\r\n            {{ (items?.length === 2 ? otherLabel : othersLabel) }})\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"multiple\">\r\n      <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\r\n      <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\r\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n                        [name]=\"index\"\r\n                        [text]=\"selectAllLabel\">\r\n        </ecabs-checkbox>\r\n      </ng-template>\r\n\r\n      <ng-template ng-option-tmp let-item$=\"item$\" let-index=\"index\">\r\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n                        [name]=\"index\"\r\n                        [text]=\"item$?.['label']\">\r\n        </ecabs-checkbox>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-select>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { 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: i4$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$4.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i4$4.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4$4.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectV2Component, selector: "ecabs-select-v2", inputs: { appearance: "appearance", appendTo: "appendTo", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", editableSearchTerm: "editableSearchTerm", searchable: "searchable", clearable: "clearable", multiple: "multiple", notFoundText: "notFoundText", hideSelected: "hideSelected", clearOnBackspace: "clearOnBackspace", clearSearchOnAdd: "clearSearchOnAdd", trackByFn: "trackByFn", minLength: "minLength", searchPlaceholder: "searchPlaceholder", typeahead: "typeahead", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", selectAllLabel: "selectAllLabel", otherLabel: "otherLabel", othersLabel: "othersLabel" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-select class=\"form-field__select\"\n             [appearance]=\"appearance\"\n             [appendTo]=\"appendTo\"\n             [labelForId]=\"name\"\n             [bindLabel]=\"bindLabel || null\"\n             [bindValue]=\"bindValue || null\"\n             [searchable]=\"searchable\"\n             [clearable]=\"clearable\"\n             [clearSearchOnAdd]=\"clearSearchOnAdd\"\n             [groupBy]=\"groupByKey\"\n             [selectableGroup]=\"true\"\n             [selectableGroupAsModel]=\"false\"\n             [items]=\"itemsList\"\n             [multiple]=\"multiple\"\n             [(ngModel)]=\"value\"\n             [placeholder]=\"placeholder\"\n             (blur)=\"onBlur()\"\n             [hideSelected]=\"hideSelected\"\n             [trackByFn]=\"trackByFn\"\n             [minTermLength]=\"minLength\"\n             [typeToSearchText]=\"searchPlaceholder\"\n             [typeahead]=\"typeahead\"\n             [loading]=\"loading\"\n             [closeOnSelect]=\"closeOnSelect\"\n             [clearOnBackspace]=\"clearOnBackspace\"\n             [editableSearchTerm]=\"editableSearchTerm\"\n             (open)=\"this.isOpen = true\"\n             (close)=\"this.isOpen = false\"\n             (change)=\"changed($event)\"\n             [notFoundText]=\"notFoundText\"\n             [clearAllText]=\"clearAllText\"\n             [readonly]=\"this.disabled\">\n\n    <ng-container *ngIf=\"!typeahead\">\n      <ng-option *ngFor=\"let item of itemsList\" [value]=\"item?.value\">\n        {{ item?.label }}\n      </ng-option>\n    </ng-container>\n\n    <ng-template ng-loadingspinner-tmp>\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\n    </ng-template>\n\n    <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\n      <ng-template ng-multi-label-tmp let-items=\"items\">\n        <!--#Custom display of first selected item and (+1 more) pattern -->\n        <ng-container *ngIf=\"!isOpen\">\n          <div *ngFor=\"let item of items | slice:0:1\">\n            {{ item?.['label'] }} <span *ngIf=\"items.length > 1\">\n            (+{{ items.length - 1 }}\n            {{ (items?.length === 2 ? otherLabel : othersLabel) }})\n            </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"multiple\">\n      <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\n      <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\n                        [name]=\"index\"\n                        [text]=\"selectAllLabel\">\n        </ecabs-checkbox>\n      </ng-template>\n\n      <ng-template ng-option-tmp let-item$=\"item$\" let-index=\"index\">\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\n                        [name]=\"index\"\n                        [text]=\"item$?.['label']\">\n        </ecabs-checkbox>\n      </ng-template>\n    </ng-container>\n  </ng-select>\n</ecabs-element-wrapper>\n", styles: [""], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { 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: i4$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$4.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i4$4.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4$4.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-select-v2', template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <ng-select class=\"form-field__select\"\r\n             [appearance]=\"appearance\"\r\n             [appendTo]=\"appendTo\"\r\n             [labelForId]=\"name\"\r\n             [bindLabel]=\"bindLabel || null\"\r\n             [bindValue]=\"bindValue || null\"\r\n             [searchable]=\"searchable\"\r\n             [clearable]=\"clearable\"\r\n             [clearSearchOnAdd]=\"clearSearchOnAdd\"\r\n             [groupBy]=\"groupByKey\"\r\n             [selectableGroup]=\"true\"\r\n             [selectableGroupAsModel]=\"false\"\r\n             [items]=\"itemsList\"\r\n             [multiple]=\"multiple\"\r\n             [(ngModel)]=\"value\"\r\n             [placeholder]=\"placeholder\"\r\n             (blur)=\"onBlur()\"\r\n             [hideSelected]=\"hideSelected\"\r\n             [trackByFn]=\"trackByFn\"\r\n             [minTermLength]=\"minLength\"\r\n             [typeToSearchText]=\"searchPlaceholder\"\r\n             [typeahead]=\"typeahead\"\r\n             [loading]=\"loading\"\r\n             [closeOnSelect]=\"closeOnSelect\"\r\n             [clearOnBackspace]=\"clearOnBackspace\"\r\n             [editableSearchTerm]=\"editableSearchTerm\"\r\n             (open)=\"this.isOpen = true\"\r\n             (close)=\"this.isOpen = false\"\r\n             (change)=\"changed($event)\"\r\n             [notFoundText]=\"notFoundText\"\r\n             [clearAllText]=\"clearAllText\"\r\n             [readonly]=\"this.disabled\">\r\n\r\n    <ng-container *ngIf=\"!typeahead\">\r\n      <ng-option *ngFor=\"let item of itemsList\" [value]=\"item?.value\">\r\n        {{ item?.label }}\r\n      </ng-option>\r\n    </ng-container>\r\n\r\n    <ng-template ng-loadingspinner-tmp>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\r\n      <ng-template ng-multi-label-tmp let-items=\"items\">\r\n        <!--#Custom display of first selected item and (+1 more) pattern -->\r\n        <ng-container *ngIf=\"!isOpen\">\r\n          <div *ngFor=\"let item of items | slice:0:1\">\r\n            {{ item?.['label'] }} <span *ngIf=\"items.length > 1\">\r\n            (+{{ items.length - 1 }}\r\n            {{ (items?.length === 2 ? otherLabel : othersLabel) }})\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"multiple\">\r\n      <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\r\n      <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\r\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n                        [name]=\"index\"\r\n                        [text]=\"selectAllLabel\">\r\n        </ecabs-checkbox>\r\n      </ng-template>\r\n\r\n      <ng-template ng-option-tmp let-item$=\"item$\" let-index=\"index\">\r\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n                        [name]=\"index\"\r\n                        [text]=\"item$?.['label']\">\r\n        </ecabs-checkbox>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-select>\r\n</ecabs-element-wrapper>\r\n" }]
+            args: [{ selector: 'ecabs-select-v2', template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-select class=\"form-field__select\"\n             [appearance]=\"appearance\"\n             [appendTo]=\"appendTo\"\n             [labelForId]=\"name\"\n             [bindLabel]=\"bindLabel || null\"\n             [bindValue]=\"bindValue || null\"\n             [searchable]=\"searchable\"\n             [clearable]=\"clearable\"\n             [clearSearchOnAdd]=\"clearSearchOnAdd\"\n             [groupBy]=\"groupByKey\"\n             [selectableGroup]=\"true\"\n             [selectableGroupAsModel]=\"false\"\n             [items]=\"itemsList\"\n             [multiple]=\"multiple\"\n             [(ngModel)]=\"value\"\n             [placeholder]=\"placeholder\"\n             (blur)=\"onBlur()\"\n             [hideSelected]=\"hideSelected\"\n             [trackByFn]=\"trackByFn\"\n             [minTermLength]=\"minLength\"\n             [typeToSearchText]=\"searchPlaceholder\"\n             [typeahead]=\"typeahead\"\n             [loading]=\"loading\"\n             [closeOnSelect]=\"closeOnSelect\"\n             [clearOnBackspace]=\"clearOnBackspace\"\n             [editableSearchTerm]=\"editableSearchTerm\"\n             (open)=\"this.isOpen = true\"\n             (close)=\"this.isOpen = false\"\n             (change)=\"changed($event)\"\n             [notFoundText]=\"notFoundText\"\n             [clearAllText]=\"clearAllText\"\n             [readonly]=\"this.disabled\">\n\n    <ng-container *ngIf=\"!typeahead\">\n      <ng-option *ngFor=\"let item of itemsList\" [value]=\"item?.value\">\n        {{ item?.label }}\n      </ng-option>\n    </ng-container>\n\n    <ng-template ng-loadingspinner-tmp>\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\n    </ng-template>\n\n    <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\n      <ng-template ng-multi-label-tmp let-items=\"items\">\n        <!--#Custom display of first selected item and (+1 more) pattern -->\n        <ng-container *ngIf=\"!isOpen\">\n          <div *ngFor=\"let item of items | slice:0:1\">\n            {{ item?.['label'] }} <span *ngIf=\"items.length > 1\">\n            (+{{ items.length - 1 }}\n            {{ (items?.length === 2 ? otherLabel : othersLabel) }})\n            </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"multiple\">\n      <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\n      <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\n                        [name]=\"index\"\n                        [text]=\"selectAllLabel\">\n        </ecabs-checkbox>\n      </ng-template>\n\n      <ng-template ng-option-tmp let-item$=\"item$\" let-index=\"index\">\n        <ecabs-checkbox [ngModel]=\"item$.selected\"\n                        [name]=\"index\"\n                        [text]=\"item$?.['label']\">\n        </ecabs-checkbox>\n      </ng-template>\n    </ng-container>\n  </ng-select>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2372,7 +2487,7 @@ class EcabsTextareaComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsTextareaComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <textarea #matCustomInput\r\n            class=\"form-field__textarea\"\r\n            [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n            [id]=\"name\"\r\n            [(ngModel)]=\"value\"\r\n            [placeholder]=\"placeholder\"\r\n            (blur)=\"onTouch()\"\r\n            [disabled]=\"disabled\"\r\n            [maxlength]=\"maxLength\"\r\n            [rows]=\"rows\"\r\n  >\r\n  </textarea>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <textarea #matCustomInput\n            class=\"form-field__textarea\"\n            [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n            [id]=\"name\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"placeholder\"\n            (blur)=\"onTouch()\"\n            [disabled]=\"disabled\"\n            [maxlength]=\"maxLength\"\n            [rows]=\"rows\"\n  >\n  </textarea>\n</ecabs-element-wrapper>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTextareaComponent, decorators: [{
             type: Component,
@@ -2382,7 +2497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsTextareaComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <textarea #matCustomInput\r\n            class=\"form-field__textarea\"\r\n            [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n            [id]=\"name\"\r\n            [(ngModel)]=\"value\"\r\n            [placeholder]=\"placeholder\"\r\n            (blur)=\"onTouch()\"\r\n            [disabled]=\"disabled\"\r\n            [maxlength]=\"maxLength\"\r\n            [rows]=\"rows\"\r\n  >\r\n  </textarea>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <textarea #matCustomInput\n            class=\"form-field__textarea\"\n            [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n            [id]=\"name\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"placeholder\"\n            (blur)=\"onTouch()\"\n            [disabled]=\"disabled\"\n            [maxlength]=\"maxLength\"\n            [rows]=\"rows\"\n  >\n  </textarea>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -2509,7 +2624,7 @@ class EcabsCheckboxV2Component extends EcabsElementBaseComponent {
                 useExisting: forwardRef(() => EcabsCheckboxV2Component),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div\r\n    class=\"ecabs-checkbox-v2\"\r\n    [class.ecabs-checkbox-v2--checked]=\"value\"\r\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    (click)=\"onRowClick()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  >\r\n    <span class=\"form-field__label text-sm pl-2\"\r\n          [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n      {{ label }}\r\n    </span>\r\n\r\n    <mat-checkbox\r\n      class=\"ecabs-checkbox-v2__control\"\r\n      [id]=\"name\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [checked]=\"value\"\r\n      color=\"primary\"\r\n      [disableRipple]=\"true\"\r\n      (change)=\"toggle($event)\"\r\n      (blur)=\"onBlur()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown.enter)=\"$event.stopPropagation()\"\r\n    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div\n    class=\"ecabs-checkbox-v2\"\n    [class.ecabs-checkbox-v2--checked]=\"value\"\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\n    [attr.tabindex]=\"disabled ? null : 0\"\n    (click)=\"onRowClick()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"form-field__label text-sm pl-2\"\n          [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\n      {{ label }}\n    </span>\n\n    <mat-checkbox\n      class=\"ecabs-checkbox-v2__control\"\n      [id]=\"name\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      color=\"primary\"\n      [disableRipple]=\"true\"\n      (change)=\"toggle($event)\"\n      (blur)=\"onBlur()\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown.enter)=\"$event.stopPropagation()\"\n    >\n    </mat-checkbox>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Component, decorators: [{
             type: Component,
@@ -2519,7 +2634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsCheckboxV2Component),
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div\r\n    class=\"ecabs-checkbox-v2\"\r\n    [class.ecabs-checkbox-v2--checked]=\"value\"\r\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    (click)=\"onRowClick()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  >\r\n    <span class=\"form-field__label text-sm pl-2\"\r\n          [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n      {{ label }}\r\n    </span>\r\n\r\n    <mat-checkbox\r\n      class=\"ecabs-checkbox-v2__control\"\r\n      [id]=\"name\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [checked]=\"value\"\r\n      color=\"primary\"\r\n      [disableRipple]=\"true\"\r\n      (change)=\"toggle($event)\"\r\n      (blur)=\"onBlur()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (keydown.enter)=\"$event.stopPropagation()\"\r\n    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div\n    class=\"ecabs-checkbox-v2\"\n    [class.ecabs-checkbox-v2--checked]=\"value\"\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\n    [attr.tabindex]=\"disabled ? null : 0\"\n    (click)=\"onRowClick()\"\n    (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"form-field__label text-sm pl-2\"\n          [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\n      {{ label }}\n    </span>\n\n    <mat-checkbox\n      class=\"ecabs-checkbox-v2__control\"\n      [id]=\"name\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      color=\"primary\"\n      [disableRipple]=\"true\"\n      (change)=\"toggle($event)\"\n      (blur)=\"onBlur()\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown.enter)=\"$event.stopPropagation()\"\n    >\n    </mat-checkbox>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { label: [{
                 type: Input
             }], showLabel: [{
@@ -2671,11 +2786,11 @@ class EcabsPickerHeaderComponent {
             this.calendar.currentView === 'month' ? 'multi-year' : 'month';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, deps: [{ token: i6.MatCalendar }, { token: i4$2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header", providers: [UnsubscribeService], ngImport: i0, template: "<div class=\"header\">\r\n  <button mat-icon-button (click)=\"previousClicked()\">\r\n    <mat-icon>keyboard_arrow_left</mat-icon>\r\n  </button>\r\n  <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n    <span >{{ periodLabel }}</span>\r\n  </button>\r\n\r\n  <button mat-icon-button (click)=\"nextClicked()\">\r\n    <mat-icon>keyboard_arrow_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header", providers: [UnsubscribeService], ngImport: i0, template: "<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n  <button mat-flat-button (click)=\"currentPeriodClicked()\">\n    <span >{{ periodLabel }}</span>\n  </button>\n\n  <button mat-icon-button (click)=\"nextClicked()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UnsubscribeService], template: "<div class=\"header\">\r\n  <button mat-icon-button (click)=\"previousClicked()\">\r\n    <mat-icon>keyboard_arrow_left</mat-icon>\r\n  </button>\r\n  <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n    <span >{{ periodLabel }}</span>\r\n  </button>\r\n\r\n  <button mat-icon-button (click)=\"nextClicked()\">\r\n    <mat-icon>keyboard_arrow_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"] }]
+            args: [{ selector: 'ecabs-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UnsubscribeService], template: "<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n  <button mat-flat-button (click)=\"currentPeriodClicked()\">\n    <span >{{ periodLabel }}</span>\n  </button>\n\n  <button mat-icon-button (click)=\"nextClicked()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i6.MatCalendar }, { type: i4$2.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; } });
 class EcabsDatePickerHeaderComponent {
@@ -2685,11 +2800,11 @@ class EcabsDatePickerHeaderComponent {
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerHeaderComponent, deps: [{ token: EcabsDatePickerHeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerHeaderComponent, selector: "ecabs-date-picker-header", inputs: { selectDateLabel: "selectDateLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerHeaderComponent, selector: "ecabs-date-picker-header", inputs: { selectDateLabel: "selectDateLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n" }]
+            args: [{ selector: 'ecabs-date-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n" }]
         }], ctorParameters: function () { return [{ type: EcabsDatePickerHeaderService }]; }, propDecorators: { selectDateLabel: [{
                 type: Input
             }] } });
@@ -2701,11 +2816,11 @@ class EcabsDatePickerActionsComponent {
     disabledApplyButton = false;
     apply = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: { cancelLabel: "cancelLabel", applyLabel: "applyLabel", isDateRange: "isDateRange", disabledApplyButton: "disabledApplyButton" }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-4\">\r\n  <ng-container *ngIf=\"!isDateRange\">\r\n    <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDatepickerCancel>\r\n      {{ cancelLabel }}\r\n    </ecabs-buttons>\r\n    <ecabs-buttons color=\"primary\"\r\n                 matDatepickerApply\r\n                 [disabled]=\"disabledApplyButton\"\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n      {{ applyLabel }}\r\n    </ecabs-buttons>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"isDateRange\">\r\n        <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDateRangePickerCancel>\r\n      {{ cancelLabel }}\r\n    </ecabs-buttons>\r\n    <ecabs-buttons color=\"primary\"\r\n                 matDateRangePickerApply\r\n                 [disabled]=\"disabledApplyButton\"\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n      {{ applyLabel }}\r\n    </ecabs-buttons>\r\n  </ng-container>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "directive", type: i6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: { cancelLabel: "cancelLabel", applyLabel: "applyLabel", isDateRange: "isDateRange", disabledApplyButton: "disabledApplyButton" }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-4\">\n  <ng-container *ngIf=\"!isDateRange\">\n    <ecabs-buttons color=\"primary\"\n                 [style]=\"'stroked'\"\n                 matDatepickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n                 matDatepickerApply\n                 [disabled]=\"disabledApplyButton\"\n                 (click)=\"apply.emit()\"\n                 (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  </ng-container>\n  <ng-container *ngIf=\"isDateRange\">\n        <ecabs-buttons color=\"primary\"\n                 [style]=\"'stroked'\"\n                 matDateRangePickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n                 matDateRangePickerApply\n                 [disabled]=\"disabledApplyButton\"\n                 (click)=\"apply.emit()\"\n                 (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "directive", type: i6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-picker-actions', template: "<div class=\"grid grid-cols-2 gap-4\">\r\n  <ng-container *ngIf=\"!isDateRange\">\r\n    <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDatepickerCancel>\r\n      {{ cancelLabel }}\r\n    </ecabs-buttons>\r\n    <ecabs-buttons color=\"primary\"\r\n                 matDatepickerApply\r\n                 [disabled]=\"disabledApplyButton\"\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n      {{ applyLabel }}\r\n    </ecabs-buttons>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"isDateRange\">\r\n        <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDateRangePickerCancel>\r\n      {{ cancelLabel }}\r\n    </ecabs-buttons>\r\n    <ecabs-buttons color=\"primary\"\r\n                 matDateRangePickerApply\r\n                 [disabled]=\"disabledApplyButton\"\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n      {{ applyLabel }}\r\n    </ecabs-buttons>\r\n  </ng-container>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-date-picker-actions', template: "<div class=\"grid grid-cols-2 gap-4\">\n  <ng-container *ngIf=\"!isDateRange\">\n    <ecabs-buttons color=\"primary\"\n                 [style]=\"'stroked'\"\n                 matDatepickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n                 matDatepickerApply\n                 [disabled]=\"disabledApplyButton\"\n                 (click)=\"apply.emit()\"\n                 (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  </ng-container>\n  <ng-container *ngIf=\"isDateRange\">\n        <ecabs-buttons color=\"primary\"\n                 [style]=\"'stroked'\"\n                 matDateRangePickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n                 matDateRangePickerApply\n                 [disabled]=\"disabledApplyButton\"\n                 (click)=\"apply.emit()\"\n                 (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { cancelLabel: [{
                 type: Input
             }], applyLabel: [{
@@ -2830,7 +2945,7 @@ class EcabsDatePickerComponent extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n          [disabledApplyButton]=\"disabledApplyButton\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input\n      class=\"form-field__input date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [matDatepickerFilter]=\"filterDateRange\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker-toggle\n      matSuffix [for]=\"picker\"\n      class=\"text-gray-500\"\n    >\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n          [disabledApplyButton]=\"disabledApplyButton\"\n        >\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n  </div>\n</ecabs-element-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerComponent, decorators: [{
             type: Component,
@@ -2841,7 +2956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n          [disabledApplyButton]=\"disabledApplyButton\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input\n      class=\"form-field__input date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [matDatepickerFilter]=\"filterDateRange\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker-toggle\n      matSuffix [for]=\"picker\"\n      class=\"text-gray-500\"\n    >\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n          [disabledApplyButton]=\"disabledApplyButton\"\n        >\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n  </div>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -2874,11 +2989,11 @@ class EcabsDateTimePickerHeaderComponent {
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerHeaderComponent, deps: [{ token: EcabsDatePickerHeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateTimePickerHeaderComponent, selector: "ecabs-time-date-picker-header", inputs: { headerLabel: "headerLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeLabel }}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n", styles: [".select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}\n"], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateTimePickerHeaderComponent, selector: "ecabs-time-date-picker-header", inputs: { headerLabel: "headerLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeLabel }}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n", styles: [".select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}\n"], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-time-date-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeLabel }}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n", styles: [".select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}\n"] }]
+            args: [{ selector: 'ecabs-time-date-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeLabel }}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n", styles: [".select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}\n"] }]
         }], ctorParameters: function () { return [{ type: EcabsDatePickerHeaderService }]; }, propDecorators: { headerLabel: [{
                 type: Input
             }] } });
@@ -3316,7 +3431,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           placeholder=\"dd/MM/yyyy, HH:mm\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\n      <mat-datepicker-actions>\n        <div class=\"actions\">\n          <div class=\"time--inputs\">\n            <input\n              class=\"form-field__input time\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [id]=\"hours\"\n              [value]=\"_hours\"\n              [maxValue]=\"maxValueHours\"\n              [(ngModel)]=\"hours\"\n            />\n            <span class=\"font-bold\">:</span>\n            <input\n              class=\"form-field__input time\"\n              [id]=\"minutes\"\n              [(ngModel)]=\"minutes\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [maxValue]=\"maxValueMinutesSeconds\"\n            />\n\n            <ng-container *ngIf=\"!hideSeconds\">\n              <span class=\"font-bold\">:</span>\n              <input\n                class=\"form-field__input time\"\n                [id]=\"seconds\"\n                [(ngModel)]=\"seconds\"\n                ecabsDigitsOnly\n                ecabsNumberBorder\n                [digitsOnly]=\"true\"\n                [maxValue]=\"maxValueMinutesSeconds\"\n              />\n            </ng-container>\n          </div>\n\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input #matCustomInput\n           class=\"form-field__input w-full date-input\"\n           [id]=\"name\"\n           [(ngModel)]=\"pickerValue\"\n           placeholder=\"dd/MM/yyyy, HH:mm\"\n           [disabled]=\"disabled\"\n           ecabsMaskDate\n           [isDateTimeMask]=\"true\"\n           [considerSeconds]=\"!hideSeconds\"\n           (blur)=\"onTouch()\"\n    />\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon\n                class=\"text-gray-500\">\n        calendar_today\n      </mat-icon>\n    </mat-datepicker-toggle>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -3328,7 +3443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         },
                         DecimalPipe,
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           placeholder=\"dd/MM/yyyy, HH:mm\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\n      <mat-datepicker-actions>\n        <div class=\"actions\">\n          <div class=\"time--inputs\">\n            <input\n              class=\"form-field__input time\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [id]=\"hours\"\n              [value]=\"_hours\"\n              [maxValue]=\"maxValueHours\"\n              [(ngModel)]=\"hours\"\n            />\n            <span class=\"font-bold\">:</span>\n            <input\n              class=\"form-field__input time\"\n              [id]=\"minutes\"\n              [(ngModel)]=\"minutes\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [maxValue]=\"maxValueMinutesSeconds\"\n            />\n\n            <ng-container *ngIf=\"!hideSeconds\">\n              <span class=\"font-bold\">:</span>\n              <input\n                class=\"form-field__input time\"\n                [id]=\"seconds\"\n                [(ngModel)]=\"seconds\"\n                ecabsDigitsOnly\n                ecabsNumberBorder\n                [digitsOnly]=\"true\"\n                [maxValue]=\"maxValueMinutesSeconds\"\n              />\n            </ng-container>\n          </div>\n\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input #matCustomInput\n           class=\"form-field__input w-full date-input\"\n           [id]=\"name\"\n           [(ngModel)]=\"pickerValue\"\n           placeholder=\"dd/MM/yyyy, HH:mm\"\n           [disabled]=\"disabled\"\n           ecabsMaskDate\n           [isDateTimeMask]=\"true\"\n           [considerSeconds]=\"!hideSeconds\"\n           (blur)=\"onTouch()\"\n    />\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon\n                class=\"text-gray-500\">\n        calendar_today\n      </mat-icon>\n    </mat-datepicker-toggle>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -3489,11 +3604,11 @@ class EcabsDateRangePickerHeaderComponent {
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerHeaderComponent, deps: [{ token: EcabsDatePickerHeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerHeaderComponent, selector: "ecabs-date-range-picker-header", inputs: { selectDateRangeLabel: "selectDateRangeLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{selectDateRangeLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateRangeLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerHeaderComponent, selector: "ecabs-date-range-picker-header", inputs: { selectDateRangeLabel: "selectDateRangeLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{selectDateRangeLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateRangeLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-range-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{selectDateRangeLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateRangeLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n" }]
+            args: [{ selector: 'ecabs-date-range-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{selectDateRangeLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateRangeLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n" }]
         }], ctorParameters: function () { return [{ type: EcabsDatePickerHeaderService }]; }, propDecorators: { selectDateRangeLabel: [{
                 type: Input
             }] } });
@@ -3652,7 +3767,7 @@ class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   [isDateRange]=\"true\"\r\n                                   [disabledApplyButton]=\"disabledApplyButton\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <mat-date-range-input \n      [rangePicker]=\"picker\" \n      [min]=\"minDate\"\n      [max]=\"maxDate\" \n      (blur)=\"onTouch()\">\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                   [isDateRange]=\"true\"\n                                   [disabledApplyButton]=\"disabledApplyButton\"\n                                   (apply)=\"onApply()\">\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponent, decorators: [{
             type: Component,
@@ -3668,7 +3783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   [isDateRange]=\"true\"\r\n                                   [disabledApplyButton]=\"disabledApplyButton\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <mat-date-range-input \n      [rangePicker]=\"picker\" \n      [min]=\"minDate\"\n      [max]=\"maxDate\" \n      (blur)=\"onTouch()\">\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                   [isDateRange]=\"true\"\n                                   [disabledApplyButton]=\"disabledApplyButton\"\n                                   (apply)=\"onApply()\">\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -3810,11 +3925,11 @@ class EcabsDateTimeRangePickerHeaderComponent {
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerHeaderComponent, deps: [{ token: EcabsDatePickerHeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateTimeRangePickerHeaderComponent, selector: "ecabs-date-time-range-picker-header", inputs: { headerLabel: "headerLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeRangeLabel}}\r\n  </div>\r\n  <ecabs-picker-header ></ecabs-picker-header>\r\n", styles: [":host ::ng-deep ecabs-picker-header{display:none!important}\n"], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateTimeRangePickerHeaderComponent, selector: "ecabs-date-time-range-picker-header", inputs: { headerLabel: "headerLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeRangeLabel}}\n  </div>\n  <ecabs-picker-header ></ecabs-picker-header>\n", styles: [":host ::ng-deep ecabs-picker-header{display:none!important}\n"], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-time-range-picker-header', template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeRangeLabel}}\r\n  </div>\r\n  <ecabs-picker-header ></ecabs-picker-header>\r\n", styles: [":host ::ng-deep ecabs-picker-header{display:none!important}\n"] }]
+            args: [{ selector: 'ecabs-date-time-range-picker-header', template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ headerLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateTimeRangeLabel}}\n  </div>\n  <ecabs-picker-header ></ecabs-picker-header>\n", styles: [":host ::ng-deep ecabs-picker-header{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: EcabsDatePickerHeaderService }]; }, propDecorators: { headerLabel: [{
                 type: Input
             }] } });
@@ -4055,7 +4170,7 @@ class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      placeholder=\"00:00 - 00:00\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      [matDatepicker]=\"picker\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker\n      (opened)=\"opened()\"\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <div class=\"flex flex-col w-full gap-y-4\">\n          <div class=\"flex gap-2 justify-center items-center\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"block form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursFrom\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursFrom\"\n                />\n\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesFrom\"\n                  [(ngModel)]=\"minutesFrom\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"time--inputs\"></div>\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursTo\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursTo\"\n                />\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesTo\"\n                  [(ngModel)]=\"minutesTo\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input\n      class=\"form-field__input w-full date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"pickerValue\"\n      placeholder=\"00:00 - 00:00\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      ecabsTime\n      [all]=\"allLabel\"\n      [timeRange]=\"true\"\n      (blur)=\"onTouch()\"\n      (blur)=\"blurChange($event)\"\n      (keyup)=\"blurChange($event)\"\n      (keydown)=\"keydownChange($event)\"\n    />\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\n      <mat-icon>access_time</mat-icon>\n    </button>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -4067,7 +4182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         },
                         DecimalPipe,
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      placeholder=\"00:00 - 00:00\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      [matDatepicker]=\"picker\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker\n      (opened)=\"opened()\"\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <div class=\"flex flex-col w-full gap-y-4\">\n          <div class=\"flex gap-2 justify-center items-center\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"block form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursFrom\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursFrom\"\n                />\n\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesFrom\"\n                  [(ngModel)]=\"minutesFrom\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"time--inputs\"></div>\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursTo\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursTo\"\n                />\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesTo\"\n                  [(ngModel)]=\"minutesTo\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input\n      class=\"form-field__input w-full date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"pickerValue\"\n      placeholder=\"00:00 - 00:00\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      ecabsTime\n      [all]=\"allLabel\"\n      [timeRange]=\"true\"\n      (blur)=\"onTouch()\"\n      (blur)=\"blurChange($event)\"\n      (keyup)=\"blurChange($event)\"\n      (keydown)=\"keydownChange($event)\"\n    />\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\n      <mat-icon>access_time</mat-icon>\n    </button>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { touchUi: [{
                 type: Input
             }], cancelLabel: [{
@@ -4215,7 +4330,7 @@ class EcabsIncrementComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsIncrementComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"/>\n\n    <div class=\"incrementor\">\n      <mat-icon (click)=\"increment()\">add</mat-icon>\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementComponent, decorators: [{
             type: Component,
@@ -4225,7 +4340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsIncrementComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"/>\n\n    <div class=\"incrementor\">\n      <mat-icon (click)=\"increment()\">add</mat-icon>\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -5195,7 +5310,7 @@ class EcabsBasePhoneComponent extends _NgxMatIntlTelInputMixinBase {
                 useValue: phoneNumberValidator,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecabs-tel-input-container\">\r\n  <button\r\n    type=\"button\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    class=\"country-selector\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n    <span\r\n      class=\"country-selector-flag flag\"\r\n      [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\r\n    ></span>\r\n    <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\r\n    >+{{ selectedCountry.dialCode }}</span\r\n    >\r\n  </button>\r\n  <mat-menu #menu=\"matMenu\"\r\n            class=\"ecabs-tel-input-mat-menu-panel\"\r\n            backdropClass=\"ecabs-tel-input-overlay-backdrop\"\r\n            overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\r\n    <input\r\n      #searchInput\r\n      *ngIf=\"enableSearch\"\r\n      class=\"country-search\"\r\n      [(ngModel)]=\"searchCriteria\"\r\n      (ngModelChange)=\"onSearchInput()\"\r\n      type=\"text\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n    <ng-container *ngIf=\"!searchCriteria\">\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        class=\"country-list-button\"\r\n        *ngFor=\"let country of preferredCountriesInDropDown\"\r\n        (click)=\"onCountrySelect(country)\"\r\n      >\r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"flag\"\r\n          [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n        </div>\r\n        <div class=\"label-wrapper\">\r\n          {{ country.name }}\r\n          <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\r\n        </div>\r\n      </button>\r\n      <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let country of allCountries\">\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        class=\"country-list-button\"\r\n        *ngIf=\"country | search: searchCriteria\"\r\n        (click)=\"onCountrySelect(country)\"\r\n      >\r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n        </div>\r\n        <div class=\"label-wrapper\">\r\n          {{ country.name }} +{{ country.dialCode }}\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n\r\n  <input #matCustomInput\r\n    matInput\r\n    type=\"tel\"\r\n    autocomplete=\"tel\"\r\n    [ngClass]=\"cssClass\"\r\n    (blur)=\"onTouched()\"\r\n    (keypress)=\"onInputKeyPress($event)\"\r\n    [(ngModel)]=\"phoneNumber\"\r\n    (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\r\n    [errorStateMatcher]=\"errorStateMatcher\"\r\n    [placeholder]=\"inputPlaceholder\"\r\n    [disabled]=\"disabled\"\r\n    [aria-describedby]=\"describedBy\"\r\n  />\r\n</div>\r\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\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: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecabs-tel-input-container\">\n  <button\n    type=\"button\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    class=\"country-selector\"\n    [disabled]=\"disabled\"\n  >\n    <span\n      class=\"country-selector-flag flag\"\n      [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\n    ></span>\n    <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\n    >+{{ selectedCountry.dialCode }}</span\n    >\n  </button>\n  <mat-menu #menu=\"matMenu\"\n            class=\"ecabs-tel-input-mat-menu-panel\"\n            backdropClass=\"ecabs-tel-input-overlay-backdrop\"\n            overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\n    <input\n      #searchInput\n      *ngIf=\"enableSearch\"\n      class=\"country-search\"\n      [(ngModel)]=\"searchCriteria\"\n      (ngModelChange)=\"onSearchInput()\"\n      type=\"text\"\n      [placeholder]=\"searchPlaceholder\"\n      (click)=\"$event.stopPropagation()\"\n    />\n    <ng-container *ngIf=\"!searchCriteria\">\n      <button\n        type=\"button\"\n        mat-menu-item\n        class=\"country-list-button\"\n        *ngFor=\"let country of preferredCountriesInDropDown\"\n        (click)=\"onCountrySelect(country)\"\n      >\n        <div class=\"icon-wrapper\">\n          <div class=\"flag\"\n          [ngClass]=\"flagClass(country.flagClass)\"></div>\n        </div>\n        <div class=\"label-wrapper\">\n          {{ country.name }}\n          <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\n        </div>\n      </button>\n      <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\n    </ng-container>\n    <ng-container *ngFor=\"let country of allCountries\">\n      <button\n        type=\"button\"\n        mat-menu-item\n        class=\"country-list-button\"\n        *ngIf=\"country | search: searchCriteria\"\n        (click)=\"onCountrySelect(country)\"\n      >\n        <div class=\"icon-wrapper\">\n          <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\n        </div>\n        <div class=\"label-wrapper\">\n          {{ country.name }} +{{ country.dialCode }}\n        </div>\n      </button>\n    </ng-container>\n  </mat-menu>\n\n  <input #matCustomInput\n    matInput\n    type=\"tel\"\n    autocomplete=\"tel\"\n    [ngClass]=\"cssClass\"\n    (blur)=\"onTouched()\"\n    (keypress)=\"onInputKeyPress($event)\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [placeholder]=\"inputPlaceholder\"\n    [disabled]=\"disabled\"\n    [aria-describedby]=\"describedBy\"\n  />\n</div>\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\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: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBasePhoneComponent, decorators: [{
             type: Component,
@@ -5207,7 +5322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useValue: phoneNumberValidator,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ecabs-tel-input-container\">\r\n  <button\r\n    type=\"button\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    class=\"country-selector\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n    <span\r\n      class=\"country-selector-flag flag\"\r\n      [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\r\n    ></span>\r\n    <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\r\n    >+{{ selectedCountry.dialCode }}</span\r\n    >\r\n  </button>\r\n  <mat-menu #menu=\"matMenu\"\r\n            class=\"ecabs-tel-input-mat-menu-panel\"\r\n            backdropClass=\"ecabs-tel-input-overlay-backdrop\"\r\n            overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\r\n    <input\r\n      #searchInput\r\n      *ngIf=\"enableSearch\"\r\n      class=\"country-search\"\r\n      [(ngModel)]=\"searchCriteria\"\r\n      (ngModelChange)=\"onSearchInput()\"\r\n      type=\"text\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    />\r\n    <ng-container *ngIf=\"!searchCriteria\">\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        class=\"country-list-button\"\r\n        *ngFor=\"let country of preferredCountriesInDropDown\"\r\n        (click)=\"onCountrySelect(country)\"\r\n      >\r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"flag\"\r\n          [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n        </div>\r\n        <div class=\"label-wrapper\">\r\n          {{ country.name }}\r\n          <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\r\n        </div>\r\n      </button>\r\n      <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let country of allCountries\">\r\n      <button\r\n        type=\"button\"\r\n        mat-menu-item\r\n        class=\"country-list-button\"\r\n        *ngIf=\"country | search: searchCriteria\"\r\n        (click)=\"onCountrySelect(country)\"\r\n      >\r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n        </div>\r\n        <div class=\"label-wrapper\">\r\n          {{ country.name }} +{{ country.dialCode }}\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n\r\n  <input #matCustomInput\r\n    matInput\r\n    type=\"tel\"\r\n    autocomplete=\"tel\"\r\n    [ngClass]=\"cssClass\"\r\n    (blur)=\"onTouched()\"\r\n    (keypress)=\"onInputKeyPress($event)\"\r\n    [(ngModel)]=\"phoneNumber\"\r\n    (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\r\n    [errorStateMatcher]=\"errorStateMatcher\"\r\n    [placeholder]=\"inputPlaceholder\"\r\n    [disabled]=\"disabled\"\r\n    [aria-describedby]=\"describedBy\"\r\n  />\r\n</div>\r\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ecabs-tel-input-container\">\n  <button\n    type=\"button\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    class=\"country-selector\"\n    [disabled]=\"disabled\"\n  >\n    <span\n      class=\"country-selector-flag flag\"\n      [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\n    ></span>\n    <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\n    >+{{ selectedCountry.dialCode }}</span\n    >\n  </button>\n  <mat-menu #menu=\"matMenu\"\n            class=\"ecabs-tel-input-mat-menu-panel\"\n            backdropClass=\"ecabs-tel-input-overlay-backdrop\"\n            overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\n    <input\n      #searchInput\n      *ngIf=\"enableSearch\"\n      class=\"country-search\"\n      [(ngModel)]=\"searchCriteria\"\n      (ngModelChange)=\"onSearchInput()\"\n      type=\"text\"\n      [placeholder]=\"searchPlaceholder\"\n      (click)=\"$event.stopPropagation()\"\n    />\n    <ng-container *ngIf=\"!searchCriteria\">\n      <button\n        type=\"button\"\n        mat-menu-item\n        class=\"country-list-button\"\n        *ngFor=\"let country of preferredCountriesInDropDown\"\n        (click)=\"onCountrySelect(country)\"\n      >\n        <div class=\"icon-wrapper\">\n          <div class=\"flag\"\n          [ngClass]=\"flagClass(country.flagClass)\"></div>\n        </div>\n        <div class=\"label-wrapper\">\n          {{ country.name }}\n          <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\n        </div>\n      </button>\n      <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\n    </ng-container>\n    <ng-container *ngFor=\"let country of allCountries\">\n      <button\n        type=\"button\"\n        mat-menu-item\n        class=\"country-list-button\"\n        *ngIf=\"country | search: searchCriteria\"\n        (click)=\"onCountrySelect(country)\"\n      >\n        <div class=\"icon-wrapper\">\n          <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\n        </div>\n        <div class=\"label-wrapper\">\n          {{ country.name }} +{{ country.dialCode }}\n        </div>\n      </button>\n    </ng-container>\n  </mat-menu>\n\n  <input #matCustomInput\n    matInput\n    type=\"tel\"\n    autocomplete=\"tel\"\n    [ngClass]=\"cssClass\"\n    (blur)=\"onTouched()\"\n    (keypress)=\"onInputKeyPress($event)\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [placeholder]=\"inputPlaceholder\"\n    [disabled]=\"disabled\"\n    [aria-describedby]=\"describedBy\"\n  />\n</div>\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CountryCode }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -5372,7 +5487,7 @@ class EcabsPhoneComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsPhoneComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\r\n      <ecabs-base-phone\r\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\r\n        #phoneInput\r\n        [preferredCountries]=\"preferredCountries\"\r\n        [enablePlaceholder]=\"enablePlaceholder\"\r\n        [enableSearch]=\"enableSearch\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"'phone'\"\r\n        [inputPlaceholder]=\"placeholder\"\r\n        [debounceTimeMs]=\"debounceTimeMs\"\r\n        name=\"phone\"\r\n        (focusout)=\"onBlur()\"\r\n      >\r\n      </ecabs-base-phone>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EcabsBasePhoneComponent, selector: "ecabs-base-phone", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "debounceTimeMs", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] });
+        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\n      <ecabs-base-phone\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\n        #phoneInput\n        [preferredCountries]=\"preferredCountries\"\n        [enablePlaceholder]=\"enablePlaceholder\"\n        [enableSearch]=\"enableSearch\"\n        [disabled]=\"disabled\"\n        [formControlName]=\"'phone'\"\n        [inputPlaceholder]=\"placeholder\"\n        [debounceTimeMs]=\"debounceTimeMs\"\n        name=\"phone\"\n        (focusout)=\"onBlur()\"\n      >\n      </ecabs-base-phone>\n  </form>\n</ecabs-element-wrapper>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EcabsBasePhoneComponent, selector: "ecabs-base-phone", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "debounceTimeMs", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPhoneComponent, decorators: [{
             type: Component,
@@ -5382,7 +5497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsPhoneComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\r\n      <ecabs-base-phone\r\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\r\n        #phoneInput\r\n        [preferredCountries]=\"preferredCountries\"\r\n        [enablePlaceholder]=\"enablePlaceholder\"\r\n        [enableSearch]=\"enableSearch\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"'phone'\"\r\n        [inputPlaceholder]=\"placeholder\"\r\n        [debounceTimeMs]=\"debounceTimeMs\"\r\n        name=\"phone\"\r\n        (focusout)=\"onBlur()\"\r\n      >\r\n      </ecabs-base-phone>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\n      <ecabs-base-phone\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\n        #phoneInput\n        [preferredCountries]=\"preferredCountries\"\n        [enablePlaceholder]=\"enablePlaceholder\"\n        [enableSearch]=\"enableSearch\"\n        [disabled]=\"disabled\"\n        [formControlName]=\"'phone'\"\n        [inputPlaceholder]=\"placeholder\"\n        [debounceTimeMs]=\"debounceTimeMs\"\n        name=\"phone\"\n        (focusout)=\"onBlur()\"\n      >\n      </ecabs-base-phone>\n  </form>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsComponentsService }, { type: i0.DestroyRef }]; }, propDecorators: { preferredCountries: [{
                 type: Input
             }], enablePlaceholder: [{
@@ -5526,7 +5641,7 @@ class EcabsRadioButtonListComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsRadioButtonListComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matRadioGroup", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-radio-group\r\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    [id]=\"name\"\r\n    [name]=\"name\"\r\n    (change)=\"changed.emit($event)\"\r\n  >\r\n    <mat-radio-button\r\n      [disabled]=\"item.disabled\"\r\n      [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n      class=\"mr-4\"\r\n      *ngFor=\"let item of items\"\r\n      [value]=\"item.value\"\r\n    >\r\n      {{ item.label }}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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"] }] });
+        ], viewQueries: [{ propertyName: "matRadioGroup", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-radio-group\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [id]=\"name\"\n    [name]=\"name\"\n    (change)=\"changed.emit($event)\"\n  >\n    <mat-radio-button\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\n      class=\"mr-4\"\n      *ngFor=\"let item of items\"\n      [value]=\"item.value\"\n    >\n      {{ item.label }}\n    </mat-radio-button>\n  </mat-radio-group>\n</ecabs-element-wrapper>\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsRadioButtonListComponent, decorators: [{
             type: Component,
@@ -5536,7 +5651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsRadioButtonListComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-radio-group\r\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    [id]=\"name\"\r\n    [name]=\"name\"\r\n    (change)=\"changed.emit($event)\"\r\n  >\r\n    <mat-radio-button\r\n      [disabled]=\"item.disabled\"\r\n      [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n      class=\"mr-4\"\r\n      *ngFor=\"let item of items\"\r\n      [value]=\"item.value\"\r\n    >\r\n      {{ item.label }}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-radio-group\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [id]=\"name\"\n    [name]=\"name\"\n    (change)=\"changed.emit($event)\"\n  >\n    <mat-radio-button\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\n      class=\"mr-4\"\n      *ngFor=\"let item of items\"\n      [value]=\"item.value\"\n    >\n      {{ item.label }}\n    </mat-radio-button>\n  </mat-radio-group>\n</ecabs-element-wrapper>\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { matRadioGroup: [{
                 type: ViewChild,
                 args: [MatRadioGroup, { static: false }]
@@ -5713,11 +5828,11 @@ class EcabsTimeListPanelComponent {
         this.closeMe.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeListPanelComponent, deps: [{ token: i0.ElementRef }, { token: FormTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: { typedValue: "typedValue", listPlacement: "listPlacement", listPosition: "listPosition", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", position: "position" }, outputs: { onscroll: "onscroll", closeMe: "closeMe" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list\">\r\n  <div class=\"inner-scroll\">\r\n    <div class=\"inner\">\r\n      <ul>\r\n        <!-- eslint-disable-next-line -->\r\n        <li\r\n          *ngFor=\"let i of timeList; let counter = index\"          \r\n          (click)=\"setTime(i.value)\"\r\n          (mouseenter)=\"hoveredItemIndex = counter\"\r\n          [ngClass]=\"{ active: typedValue === i.value, hovered: counter === hoveredItemIndex }\"\r\n        >\r\n          {{ i.title }}\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: { typedValue: "typedValue", listPlacement: "listPlacement", listPosition: "listPosition", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", position: "position" }, outputs: { onscroll: "onscroll", closeMe: "closeMe" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list\">\n  <div class=\"inner-scroll\">\n    <div class=\"inner\">\n      <ul>\n        <!-- eslint-disable-next-line -->\n        <li\n          *ngFor=\"let i of timeList; let counter = index\"          \n          (click)=\"setTime(i.value)\"\n          (mouseenter)=\"hoveredItemIndex = counter\"\n          [ngClass]=\"{ active: typedValue === i.value, hovered: counter === hoveredItemIndex }\"\n        >\n          {{ i.title }}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeListPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-time-list-panel', template: "<div class=\"list\">\r\n  <div class=\"inner-scroll\">\r\n    <div class=\"inner\">\r\n      <ul>\r\n        <!-- eslint-disable-next-line -->\r\n        <li\r\n          *ngFor=\"let i of timeList; let counter = index\"          \r\n          (click)=\"setTime(i.value)\"\r\n          (mouseenter)=\"hoveredItemIndex = counter\"\r\n          [ngClass]=\"{ active: typedValue === i.value, hovered: counter === hoveredItemIndex }\"\r\n        >\r\n          {{ i.title }}\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-time-list-panel', template: "<div class=\"list\">\n  <div class=\"inner-scroll\">\n    <div class=\"inner\">\n      <ul>\n        <!-- eslint-disable-next-line -->\n        <li\n          *ngFor=\"let i of timeList; let counter = index\"          \n          (click)=\"setTime(i.value)\"\n          (mouseenter)=\"hoveredItemIndex = counter\"\n          [ngClass]=\"{ active: typedValue === i.value, hovered: counter === hoveredItemIndex }\"\n        >\n          {{ i.title }}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FormTimePickerService }]; }, propDecorators: { typedValue: [{
                 type: Input
             }], listPlacement: [{
@@ -5945,7 +6060,7 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
                 useExisting: forwardRef(() => EcabsTimepickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [(ngModel)]=\"data\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: ["typedValue", "listPlacement", "listPosition", "dayStartLabel", "dayEndLabel", "appendTo", "min", "max", "showDayStart", "showDayEnd", "position"], outputs: ["onscroll", "closeMe"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ disabled: disabled }\">\n  <ecabs-element-wrapper\n    [data]=\"getData()\"\n    [showCloseIcon]=\"showCloseIcon\"\n    [focusedFlag]=\"focusedFlag\"\n    (clear)=\"clearInput()\"\n  >\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\n      <input\n        type=\"text\"\n        class=\"form-field__input\"\n        [(ngModel)]=\"data\"\n        [disabled]=\"disabled\"\n        ecabsTime\n        [all]=\"allLabel\"\n        (focus)=\"show()\"\n        (click)=\"show()\"\n        (keydown)=\"inputKeyDown($event)\"\n        (blur)=\"onTouchedFn()\"\n        [placeholder]=\"placeholder\"\n      />\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\n        <ng-content select=\"mat-icon\"></ng-content>\n      </div>\n      <ecabs-time-list-panel\n        [typedValue]=\"data\"\n        *ngIf=\"focusedFlag\"\n        [showDayStart]=\"showDayStart\"\n        [dayStartLabel]=\"dayStartLabel\"\n        [dayEndLabel]=\"dayEndLabel\"\n        [showDayEnd]=\"showDayEnd\"\n        [min]=\"min\"\n        [max]=\"max\"\n        class=\"form-time-list absolute inline-block\"\n        [appendTo]=\"appendTo\"\n        [listPosition]=\"listPosition\"\n        (closeMe)=\"close($event)\"\n      ></ecabs-time-list-panel>\n    </div>\n  </ecabs-element-wrapper>\n</div>\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: ["typedValue", "listPlacement", "listPosition", "dayStartLabel", "dayEndLabel", "appendTo", "min", "max", "showDayStart", "showDayEnd", "position"], outputs: ["onscroll", "closeMe"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerComponent, decorators: [{
             type: Component,
@@ -5955,7 +6070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsTimepickerComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [(ngModel)]=\"data\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"] }]
+                    ], template: "<div [ngClass]=\"{ disabled: disabled }\">\n  <ecabs-element-wrapper\n    [data]=\"getData()\"\n    [showCloseIcon]=\"showCloseIcon\"\n    [focusedFlag]=\"focusedFlag\"\n    (clear)=\"clearInput()\"\n  >\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\n      <input\n        type=\"text\"\n        class=\"form-field__input\"\n        [(ngModel)]=\"data\"\n        [disabled]=\"disabled\"\n        ecabsTime\n        [all]=\"allLabel\"\n        (focus)=\"show()\"\n        (click)=\"show()\"\n        (keydown)=\"inputKeyDown($event)\"\n        (blur)=\"onTouchedFn()\"\n        [placeholder]=\"placeholder\"\n      />\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\n        <ng-content select=\"mat-icon\"></ng-content>\n      </div>\n      <ecabs-time-list-panel\n        [typedValue]=\"data\"\n        *ngIf=\"focusedFlag\"\n        [showDayStart]=\"showDayStart\"\n        [dayStartLabel]=\"dayStartLabel\"\n        [dayEndLabel]=\"dayEndLabel\"\n        [showDayEnd]=\"showDayEnd\"\n        [min]=\"min\"\n        [max]=\"max\"\n        class=\"form-time-list absolute inline-block\"\n        [appendTo]=\"appendTo\"\n        [listPosition]=\"listPosition\"\n        (closeMe)=\"close($event)\"\n      ></ecabs-time-list-panel>\n    </div>\n  </ecabs-element-wrapper>\n</div>\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FormTimePickerService }, { type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { focusedFlag: [{
                 type: Input
             }, {
@@ -6027,11 +6142,11 @@ class EcabsEmptyPlaceholderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsEmptyPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: { title: "title", isEmptyMessage: "isEmptyMessage", redirectPath: "redirectPath", srcImage: "srcImage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\r\n  <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\r\n\r\n  <ng-container *ngIf=\"title\">\r\n    <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"isEmptyMessage\">\r\n    <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\r\n    {{ redirectPath.title }}\r\n  </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: { title: "title", isEmptyMessage: "isEmptyMessage", redirectPath: "redirectPath", srcImage: "srcImage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\n  <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\n\n  <ng-container *ngIf=\"title\">\n    <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\n  </ng-container>\n\n  <ng-container *ngIf=\"isEmptyMessage\">\n    <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\n  </ng-container>\n\n  <ng-content></ng-content>\n\n  <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\n    {{ redirectPath.title }}\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsEmptyPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-empty-placeholder', template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\r\n  <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\r\n\r\n  <ng-container *ngIf=\"title\">\r\n    <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"isEmptyMessage\">\r\n    <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\r\n    {{ redirectPath.title }}\r\n  </a>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-empty-placeholder', template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\n  <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\n\n  <ng-container *ngIf=\"title\">\n    <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\n  </ng-container>\n\n  <ng-container *ngIf=\"isEmptyMessage\">\n    <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\n  </ng-container>\n\n  <ng-content></ng-content>\n\n  <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\n    {{ redirectPath.title }}\n  </a>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], isEmptyMessage: [{
@@ -6093,11 +6208,11 @@ class EcabsExpansionPanelComponent {
         this.checked.emit(this.expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\r\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n    <mat-expansion-panel-header *ngIf=\"title\">\r\n      <mat-panel-title>\r\n        <div>\r\n          <div class=\"flex flex-row\">\r\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n              {{ index }}\r\n            </div>\r\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\r\n            </div>\r\n            <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n              <mat-icon color=\"warn\">warning</mat-icon>\r\n            </div>\r\n            {{ title }}\r\n            <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\r\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n                                       (click)=\"toggleAction($event)\"></ecabs-checkbox>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n        </div>\r\n      </mat-panel-title>\r\n      <mat-panel-description>{{ description }}\r\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n          {{ status | titlecase }}\r\n        </mat-chip>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"actionTitle\">\r\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\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: 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: i3$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\n    <mat-expansion-panel-header *ngIf=\"title\">\n      <mat-panel-title>\n        <div>\n          <div class=\"flex flex-row\">\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\n              {{ index }}\n            </div>\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\n            </div>\n            <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\n              <mat-icon color=\"warn\">warning</mat-icon>\n            </div>\n            {{ title }}\n            <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\n                                       (click)=\"toggleAction($event)\"></ecabs-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>{{ description }}\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\n          {{ status | titlecase }}\n        </mat-chip>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <mat-expansion-panel-header *ngIf=\"actionTitle\">\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\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: 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: i3$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-expansion-panel', template: "<mat-accordion class=\"example-headers-align\" multi>\r\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n    <mat-expansion-panel-header *ngIf=\"title\">\r\n      <mat-panel-title>\r\n        <div>\r\n          <div class=\"flex flex-row\">\r\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n              {{ index }}\r\n            </div>\r\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\r\n            </div>\r\n            <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n              <mat-icon color=\"warn\">warning</mat-icon>\r\n            </div>\r\n            {{ title }}\r\n            <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\r\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n                                       (click)=\"toggleAction($event)\"></ecabs-checkbox>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n        </div>\r\n      </mat-panel-title>\r\n      <mat-panel-description>{{ description }}\r\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n          {{ status | titlecase }}\r\n        </mat-chip>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"actionTitle\">\r\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\n"] }]
+            args: [{ selector: 'ecabs-expansion-panel', template: "<mat-accordion class=\"example-headers-align\" multi>\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\n    <mat-expansion-panel-header *ngIf=\"title\">\n      <mat-panel-title>\n        <div>\n          <div class=\"flex flex-row\">\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\n              {{ index }}\n            </div>\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\n            </div>\n            <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\n              <mat-icon color=\"warn\">warning</mat-icon>\n            </div>\n            {{ title }}\n            <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\n                                       (click)=\"toggleAction($event)\"></ecabs-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>{{ description }}\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\n          {{ status | titlecase }}\n        </mat-chip>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <mat-expansion-panel-header *ngIf=\"actionTitle\">\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -6175,11 +6290,11 @@ class EcabsTableFilterWrapperComponent {
     title;
     actions;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTableFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTableFilterWrapperComponent, selector: "ecabs-table-filter-wrapper", inputs: { title: "title", actions: "actions" }, ngImport: i0, template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n  <ng-content></ng-content>\r\n\r\n  <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n    <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n  </div>\r\n</ecabs-expansion-panel>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\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: "component", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: ["title", "description", "actionTitle", "index", "expanded", "disabled", "errorMessage", "showErrorMessage", "closePanel", "showIcon", "iconName", "showCheckbox", "showStatus", "status", "hideToggle"], outputs: ["checked", "opened"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTableFilterWrapperComponent, selector: "ecabs-table-filter-wrapper", inputs: { title: "title", actions: "actions" }, ngImport: i0, template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\n  <ng-content></ng-content>\n\n  <div *ngIf=\"actions\" class=\"flex justify-end\">\n    <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\n  </div>\n</ecabs-expansion-panel>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\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: "component", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: ["title", "description", "actionTitle", "index", "expanded", "disabled", "errorMessage", "showErrorMessage", "closePanel", "showIcon", "iconName", "showCheckbox", "showStatus", "status", "hideToggle"], outputs: ["checked", "opened"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTableFilterWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-table-filter-wrapper', template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n  <ng-content></ng-content>\r\n\r\n  <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n    <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n  </div>\r\n</ecabs-expansion-panel>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"] }]
+            args: [{ selector: 'ecabs-table-filter-wrapper', template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\n  <ng-content></ng-content>\n\n  <div *ngIf=\"actions\" class=\"flex justify-end\">\n    <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\n  </div>\n</ecabs-expansion-panel>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], actions: [{
@@ -6221,11 +6336,11 @@ class TableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ecabs-table", inputs: { header: "header", paginator: "paginator", bordered: "bordered", loading: "loading", isEmpty: "isEmpty", isEmptyMessage: "isEmptyMessage", isEmptyMessageTitle: "isEmptyMessageTitle", isEmptyExtrasTemplate: "isEmptyExtrasTemplate", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], ngImport: i0, template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\r\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\r\n\r\n  <div *ngIf=\"header\" class=\"table-ui__header\">\r\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\r\n    <ng-content></ng-content>\r\n\r\n    <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\r\n      <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!--#For Empty state -->\r\n  <ng-template #noDataTemplate>\r\n    <ecabs-empty-placeholder *ngIf=\"!loading\"\r\n                             [redirectPath]=\"redirectPath\"\r\n                             [title]=\"isEmptyMessageTitle\"\r\n                             [isEmptyMessage]=\"isEmptyMessage\"\r\n                             [srcImage]=\"srcImageEmpty\">\r\n      <ng-container *ngIf=\"isEmptyExtrasTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\r\n      </ng-container>\r\n    </ecabs-empty-placeholder>\r\n  </ng-template>\r\n</section>\r\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["title", "isEmptyMessage", "redirectPath", "srcImage"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ecabs-table", inputs: { header: "header", paginator: "paginator", bordered: "bordered", loading: "loading", isEmpty: "isEmpty", isEmptyMessage: "isEmptyMessage", isEmptyMessageTitle: "isEmptyMessageTitle", isEmptyExtrasTemplate: "isEmptyExtrasTemplate", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], ngImport: i0, template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\n\n  <div *ngIf=\"header\" class=\"table-ui__header\">\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\n    <ng-content></ng-content>\n\n    <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\n      <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n    </div>\n  </ng-container>\n\n  <!--#For Empty state -->\n  <ng-template #noDataTemplate>\n    <ecabs-empty-placeholder *ngIf=\"!loading\"\n                             [redirectPath]=\"redirectPath\"\n                             [title]=\"isEmptyMessageTitle\"\n                             [isEmptyMessage]=\"isEmptyMessage\"\n                             [srcImage]=\"srcImageEmpty\">\n      <ng-container *ngIf=\"isEmptyExtrasTemplate\">\n        <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\n      </ng-container>\n    </ecabs-empty-placeholder>\n  </ng-template>\n</section>\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["title", "isEmptyMessage", "redirectPath", "srcImage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-table', template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\r\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\r\n\r\n  <div *ngIf=\"header\" class=\"table-ui__header\">\r\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\r\n    <ng-content></ng-content>\r\n\r\n    <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\r\n      <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!--#For Empty state -->\r\n  <ng-template #noDataTemplate>\r\n    <ecabs-empty-placeholder *ngIf=\"!loading\"\r\n                             [redirectPath]=\"redirectPath\"\r\n                             [title]=\"isEmptyMessageTitle\"\r\n                             [isEmptyMessage]=\"isEmptyMessage\"\r\n                             [srcImage]=\"srcImageEmpty\">\r\n      <ng-container *ngIf=\"isEmptyExtrasTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\r\n      </ng-container>\r\n    </ecabs-empty-placeholder>\r\n  </ng-template>\r\n</section>\r\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\n"] }]
+            args: [{ selector: 'ecabs-table', template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\n\n  <div *ngIf=\"header\" class=\"table-ui__header\">\n    <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\n    <ng-content></ng-content>\n\n    <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\n      <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n    </div>\n  </ng-container>\n\n  <!--#For Empty state -->\n  <ng-template #noDataTemplate>\n    <ecabs-empty-placeholder *ngIf=\"!loading\"\n                             [redirectPath]=\"redirectPath\"\n                             [title]=\"isEmptyMessageTitle\"\n                             [isEmptyMessage]=\"isEmptyMessage\"\n                             [srcImage]=\"srcImageEmpty\">\n      <ng-container *ngIf=\"isEmptyExtrasTemplate\">\n        <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\n      </ng-container>\n    </ecabs-empty-placeholder>\n  </ng-template>\n</section>\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\n"] }]
         }], propDecorators: { table: [{
                 type: ContentChild,
                 args: [MatTable]
@@ -6291,11 +6406,11 @@ class EcabsNoteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsNoteComponent, selector: "ecabs-note", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n  <div class=\"flex ml-2\">\r\n    <mat-icon>info_outline</mat-icon>\r\n  </div>\r\n  <div class=\"ml-4 w-full\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsNoteComponent, selector: "ecabs-note", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\n  <div class=\"flex ml-2\">\n    <mat-icon>info_outline</mat-icon>\n  </div>\n  <div class=\"ml-4 w-full\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNoteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-note', template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n  <div class=\"flex ml-2\">\r\n    <mat-icon>info_outline</mat-icon>\r\n  </div>\r\n  <div class=\"ml-4 w-full\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"] }]
+            args: [{ selector: 'ecabs-note', template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\n  <div class=\"flex ml-2\">\n    <mat-icon>info_outline</mat-icon>\n  </div>\n  <div class=\"ml-4 w-full\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -6371,11 +6486,11 @@ class EcabsDialogConfirmComponent {
         this.dialogRef.close(this.data.popoverResult ?? false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: UnsubscribeService }, { token: EcabsComponentsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmComponent, selector: "ecabs-dialog-confirm", providers: [UnsubscribeService], ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\r\n  <div class=\"flex items-center justify-between modal-title\">\r\n    <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\r\n\r\n    <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\r\n              (keydown.enter)=\"closeOnPopover()\"\r\n              class=\"mat-icon material-icons-outlined justify-end icon--close\">\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n</div>\r\n\r\n\r\n<ng-template #title>\r\n  <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 (click)=\"closeOnPopover()\"\r\n                (keydown.enter)=\"closeOnPopover()\"\r\n                class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\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</ng-template>\r\n\r\n\r\n<div mat-dialog-content>\r\n  <div *ngIf=\"data?.content\">{{ data?.content }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\r\n  <div mat-dialog-actions\r\n       [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\r\n       class=\"btn__group flex justify-end w-full\">\r\n    <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\r\n                   [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n                   [full]=\"data?.useFullButtonSize\"\r\n                   (click)=\"closeFalsey()\"\r\n                   (keydown.enter)=\"closeFalsey()\"\r\n                   [style]=\"data?.cancelStyle || 'stroked'\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\r\n                   [ngClass]=\"{'flex-1':  data?.splitButtonsWidth}\"\r\n                   [full]=\"data?.useFullButtonSize\"\r\n                   [color]=\"data?.color || color\"\r\n                   [style]=\"data?.confirmStyle || 'flat'\"\r\n                   [loading]=\"data?.loading$ | async\"\r\n                   (click)=\"closeDialog()\"\r\n                   [disabled]=\"data?.disableConfirm$ | async\"\r\n                   (keydown.enter)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\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.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]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmComponent, selector: "ecabs-dialog-confirm", providers: [UnsubscribeService], ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\n  <div class=\"flex items-center justify-between modal-title\">\n    <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\n\n    <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\n              (keydown.enter)=\"closeOnPopover()\"\n              class=\"mat-icon material-icons-outlined justify-end icon--close\">\n      close\n    </mat-icon>\n  </div>\n</div>\n\n\n<ng-template #title>\n  <div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\n    <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\n      <mat-icon (click)=\"closeOnPopover()\"\n                (keydown.enter)=\"closeOnPopover()\"\n                class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\n        close\n      </mat-icon>\n    </div>\n\n    <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\n      {{ data.title }}\n    </div>\n  </div>\n</ng-template>\n\n\n<div mat-dialog-content>\n  <div *ngIf=\"data?.content\">{{ data?.content }}</div>\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\n</div>\n\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\n  <div mat-dialog-actions\n       [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\n       class=\"btn__group flex justify-end w-full\">\n    <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\n                   [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\n                   [full]=\"data?.useFullButtonSize\"\n                   (click)=\"closeFalsey()\"\n                   (keydown.enter)=\"closeFalsey()\"\n                   [style]=\"data?.cancelStyle || 'stroked'\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\n                   [ngClass]=\"{'flex-1':  data?.splitButtonsWidth}\"\n                   [full]=\"data?.useFullButtonSize\"\n                   [color]=\"data?.color || color\"\n                   [style]=\"data?.confirmStyle || 'flat'\"\n                   [loading]=\"data?.loading$ | async\"\n                   (click)=\"closeDialog()\"\n                   [disabled]=\"data?.disableConfirm$ | async\"\n                   (keydown.enter)=\"closeDialog()\">\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\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.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]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "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: "16.2.12", ngImport: i0, type: EcabsDialogConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-dialog-confirm', providers: [UnsubscribeService], template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\r\n  <div class=\"flex items-center justify-between modal-title\">\r\n    <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\r\n\r\n    <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\r\n              (keydown.enter)=\"closeOnPopover()\"\r\n              class=\"mat-icon material-icons-outlined justify-end icon--close\">\r\n      close\r\n    </mat-icon>\r\n  </div>\r\n</div>\r\n\r\n\r\n<ng-template #title>\r\n  <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 (click)=\"closeOnPopover()\"\r\n                (keydown.enter)=\"closeOnPopover()\"\r\n                class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\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</ng-template>\r\n\r\n\r\n<div mat-dialog-content>\r\n  <div *ngIf=\"data?.content\">{{ data?.content }}</div>\r\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\r\n  <div mat-dialog-actions\r\n       [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\r\n       class=\"btn__group flex justify-end w-full\">\r\n    <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\r\n                   [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n                   [full]=\"data?.useFullButtonSize\"\r\n                   (click)=\"closeFalsey()\"\r\n                   (keydown.enter)=\"closeFalsey()\"\r\n                   [style]=\"data?.cancelStyle || 'stroked'\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\r\n                   [ngClass]=\"{'flex-1':  data?.splitButtonsWidth}\"\r\n                   [full]=\"data?.useFullButtonSize\"\r\n                   [color]=\"data?.color || color\"\r\n                   [style]=\"data?.confirmStyle || 'flat'\"\r\n                   [loading]=\"data?.loading$ | async\"\r\n                   (click)=\"closeDialog()\"\r\n                   [disabled]=\"data?.disableConfirm$ | async\"\r\n                   (keydown.enter)=\"closeDialog()\">\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\n"] }]
+            args: [{ selector: 'ecabs-dialog-confirm', providers: [UnsubscribeService], template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\n  <div class=\"flex items-center justify-between modal-title\">\n    <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\n\n    <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\n              (keydown.enter)=\"closeOnPopover()\"\n              class=\"mat-icon material-icons-outlined justify-end icon--close\">\n      close\n    </mat-icon>\n  </div>\n</div>\n\n\n<ng-template #title>\n  <div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\n    <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\n      <mat-icon (click)=\"closeOnPopover()\"\n                (keydown.enter)=\"closeOnPopover()\"\n                class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\n        close\n      </mat-icon>\n    </div>\n\n    <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\n      {{ data.title }}\n    </div>\n  </div>\n</ng-template>\n\n\n<div mat-dialog-content>\n  <div *ngIf=\"data?.content\">{{ data?.content }}</div>\n  <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\n</div>\n\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\n  <div mat-dialog-actions\n       [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\n       class=\"btn__group flex justify-end w-full\">\n    <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\n                   [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\n                   [full]=\"data?.useFullButtonSize\"\n                   (click)=\"closeFalsey()\"\n                   (keydown.enter)=\"closeFalsey()\"\n                   [style]=\"data?.cancelStyle || 'stroked'\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\n                   [ngClass]=\"{'flex-1':  data?.splitButtonsWidth}\"\n                   [full]=\"data?.useFullButtonSize\"\n                   [color]=\"data?.color || color\"\n                   [style]=\"data?.confirmStyle || 'flat'\"\n                   [loading]=\"data?.loading$ | async\"\n                   (click)=\"closeDialog()\"\n                   [disabled]=\"data?.disableConfirm$ | async\"\n                   (keydown.enter)=\"closeDialog()\">\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -6436,11 +6551,11 @@ class EcabsDialogMessageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogMessageComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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(false)\"\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=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\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: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-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%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\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]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogMessageComponent, selector: "ecabs-dialog-message", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\n    <mat-icon\n      (click)=\"dialogRef.close(false)\"\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\n      role=\"button\"\n    >\n      close\n    </mat-icon>\n  </div>\n\n  <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\n    {{ data.title }}\n  </div>\n</div>\n\n<div mat-dialog-content>\n  {{data?.message}}\n</div>\n\n<div class=\"pb-6\">\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\"  [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-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%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\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]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "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: "16.2.12", 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(false)\"\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=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\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: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-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%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"] }]
+            args: [{ selector: 'ecabs-dialog-message', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\n  <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\n    <mat-icon\n      (click)=\"dialogRef.close(false)\"\n      class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\n      role=\"button\"\n    >\n      close\n    </mat-icon>\n  </div>\n\n  <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\n    {{ data.title }}\n  </div>\n</div>\n\n<div mat-dialog-content>\n  {{data?.message}}\n</div>\n\n<div class=\"pb-6\">\n  <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\n    <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\"  [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-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%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -6462,11 +6577,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class EcabsBreadcrumbComponent {
     breadcrumb;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n  <li\r\n    *ngFor=\"let item of breadcrumb; let counter = index\"\r\n    [routerLink]=\"item.url\"\r\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n    class=\"flex\"\r\n  >\r\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n    <span>{{ item.title }}</span>\r\n  </li>\r\n</ul>\r\n", styles: [""], 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\n  <li\n    *ngFor=\"let item of breadcrumb; let counter = index\"\n    [routerLink]=\"item.url\"\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\n    class=\"flex\"\n  >\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\n    <span>{{ item.title }}</span>\n  </li>\n</ul>\n", styles: [""], 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n  <li\r\n    *ngFor=\"let item of breadcrumb; let counter = index\"\r\n    [routerLink]=\"item.url\"\r\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n    class=\"flex\"\r\n  >\r\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n    <span>{{ item.title }}</span>\r\n  </li>\r\n</ul>\r\n" }]
+            args: [{ selector: 'ecabs-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"flex text-gray-500 text-sm\">\n  <li\n    *ngFor=\"let item of breadcrumb; let counter = index\"\n    [routerLink]=\"item.url\"\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\n    class=\"flex\"\n  >\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\n    <span>{{ item.title }}</span>\n  </li>\n</ul>\n" }]
         }], propDecorators: { breadcrumb: [{
                 type: Input
             }] } });
@@ -6522,11 +6637,11 @@ class EcabsLanguageSelectorComponent {
         return lang.of(code);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage", showLabelTitle: "showLabelTitle", flagOnly: "flagOnly", tooltip: "tooltip" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\"\r\n                [ngClass]=\"{'flag-only': flagOnly}\">\r\n  <mat-label></mat-label>\r\n  <mat-select class=\"capitalize\"\r\n              [(ngModel)]=\"selectedLang\"\r\n              name=\"language\"\r\n              (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\" [matTooltip]=\"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) }}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border: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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage", showLabelTitle: "showLabelTitle", flagOnly: "flagOnly", tooltip: "tooltip" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\"\n                [ngClass]=\"{'flag-only': flagOnly}\">\n  <mat-label></mat-label>\n  <mat-select class=\"capitalize\"\n              [(ngModel)]=\"selectedLang\"\n              name=\"language\"\n              (ngModelChange)=\"toggleLang()\"\n              panelClass=\"wide-select\">\n    <mat-select-trigger>\n      <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\n      </div>\n    </mat-select-trigger>\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\n      <div class=\"flex items-center\">\n        <span [ngClass]=\"flagClass(lang)\"></span>\n        <div class=\"ml-2\">{{ standardLang(lang) }}</div>\n      </div>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border: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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLanguageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field appearance=\"outline\"\r\n                [ngClass]=\"{'flag-only': flagOnly}\">\r\n  <mat-label></mat-label>\r\n  <mat-select class=\"capitalize\"\r\n              [(ngModel)]=\"selectedLang\"\r\n              name=\"language\"\r\n              (ngModelChange)=\"toggleLang()\"\r\n              panelClass=\"wide-select\">\r\n    <mat-select-trigger>\r\n      <div class=\"flex items-center\" [matTooltip]=\"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) }}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"] }]
+            args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field appearance=\"outline\"\n                [ngClass]=\"{'flag-only': flagOnly}\">\n  <mat-label></mat-label>\n  <mat-select class=\"capitalize\"\n              [(ngModel)]=\"selectedLang\"\n              name=\"language\"\n              (ngModelChange)=\"toggleLang()\"\n              panelClass=\"wide-select\">\n    <mat-select-trigger>\n      <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\n      </div>\n    </mat-select-trigger>\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\n      <div class=\"flex items-center\">\n        <span [ngClass]=\"flagClass(lang)\"></span>\n        <div class=\"ml-2\">{{ standardLang(lang) }}</div>\n      </div>\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"] }]
         }], propDecorators: { languages: [{
                 type: Input
             }], currentLanguage: [{
@@ -7130,11 +7245,11 @@ class EcabsValidationComponent {
     form;
     title;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsValidationComponent, selector: "ecabs-validation", inputs: { validations: "validations", form: "form", title: "title" }, ngImport: i0, template: "<div class=\"form-validations\">\r\n  <div class=\"header font-medium\">{{ title }}</div>\r\n  <ecabs-validations-messages\r\n    *ngFor=\"let validation of validations\"\r\n    [showValidationOnNotTouched]=\"true\"\r\n    [element]=\"form.controls[validation.controlName]\"\r\n    [updatedErrors]=\"validation.errors\"\r\n  ></ecabs-validations-messages>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}:host ::ng-deep .form-validations{background-color:var(--color-white);box-shadow:0 0 10px #0000001a;border-radius:.5rem;padding:1.5rem;line-height:1.125rem}:host ::ng-deep .form-validations .form-field__validation__item{font-size:1rem!important;color:var(--color-black)}:host ::ng-deep .form-field--invalid{transform:translateY(.825rem)}:host ::ng-deep .header{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsValidationComponent, selector: "ecabs-validation", inputs: { validations: "validations", form: "form", title: "title" }, ngImport: i0, template: "<div class=\"form-validations\">\n  <div class=\"header font-medium\">{{ title }}</div>\n  <ecabs-validations-messages\n    *ngFor=\"let validation of validations\"\n    [showValidationOnNotTouched]=\"true\"\n    [element]=\"form.controls[validation.controlName]\"\n    [updatedErrors]=\"validation.errors\"\n  ></ecabs-validations-messages>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}:host ::ng-deep .form-validations{background-color:var(--color-white);box-shadow:0 0 10px #0000001a;border-radius:.5rem;padding:1.5rem;line-height:1.125rem}:host ::ng-deep .form-validations .form-field__validation__item{font-size:1rem!important;color:var(--color-black)}:host ::ng-deep .form-field--invalid{transform:translateY(.825rem)}:host ::ng-deep .header{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsValidationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-validation', template: "<div class=\"form-validations\">\r\n  <div class=\"header font-medium\">{{ title }}</div>\r\n  <ecabs-validations-messages\r\n    *ngFor=\"let validation of validations\"\r\n    [showValidationOnNotTouched]=\"true\"\r\n    [element]=\"form.controls[validation.controlName]\"\r\n    [updatedErrors]=\"validation.errors\"\r\n  ></ecabs-validations-messages>\r\n</div>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}:host ::ng-deep .form-validations{background-color:var(--color-white);box-shadow:0 0 10px #0000001a;border-radius:.5rem;padding:1.5rem;line-height:1.125rem}:host ::ng-deep .form-validations .form-field__validation__item{font-size:1rem!important;color:var(--color-black)}:host ::ng-deep .form-field--invalid{transform:translateY(.825rem)}:host ::ng-deep .header{color:var(--color-error)}\n"] }]
+            args: [{ selector: 'ecabs-validation', template: "<div class=\"form-validations\">\n  <div class=\"header font-medium\">{{ title }}</div>\n  <ecabs-validations-messages\n    *ngFor=\"let validation of validations\"\n    [showValidationOnNotTouched]=\"true\"\n    [element]=\"form.controls[validation.controlName]\"\n    [updatedErrors]=\"validation.errors\"\n  ></ecabs-validations-messages>\n</div>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}:host ::ng-deep .form-validations{background-color:var(--color-white);box-shadow:0 0 10px #0000001a;border-radius:.5rem;padding:1.5rem;line-height:1.125rem}:host ::ng-deep .form-validations .form-field__validation__item{font-size:1rem!important;color:var(--color-black)}:host ::ng-deep .form-field--invalid{transform:translateY(.825rem)}:host ::ng-deep .header{color:var(--color-error)}\n"] }]
         }], propDecorators: { validations: [{
                 type: Input
             }], form: [{
@@ -7169,11 +7284,11 @@ class EcabsActiveStatusFilterComponent {
         return this.initialStatus === status;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\r\n  <mat-chip-listbox>\r\n    <mat-chip-option *ngFor=\"let status of statuses\"\r\n                     class=\"!rounded-full\"\r\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n                     [selected]=\"checkSelectableStatus(status?.value)\"\r\n                     (keydown.enter)=\"onFilter(status?.value)\"\r\n                     (click)=\"onFilter(status?.value)\">\r\n      {{ status.text }}\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [""], 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: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\n  <mat-chip-listbox>\n    <mat-chip-option *ngFor=\"let status of statuses\"\n                     class=\"!rounded-full\"\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\n                     [selected]=\"checkSelectableStatus(status?.value)\"\n                     (keydown.enter)=\"onFilter(status?.value)\"\n                     (click)=\"onFilter(status?.value)\">\n      {{ status.text }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [""], 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: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-active-status-filter', template: "<div class=\"mb-5 mt-10\">\r\n  <mat-chip-listbox>\r\n    <mat-chip-option *ngFor=\"let status of statuses\"\r\n                     class=\"!rounded-full\"\r\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n                     [selected]=\"checkSelectableStatus(status?.value)\"\r\n                     (keydown.enter)=\"onFilter(status?.value)\"\r\n                     (click)=\"onFilter(status?.value)\">\r\n      {{ status.text }}\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\r\n</div>\r\n" }]
+            args: [{ selector: 'ecabs-active-status-filter', template: "<div class=\"mb-5 mt-10\">\n  <mat-chip-listbox>\n    <mat-chip-option *ngFor=\"let status of statuses\"\n                     class=\"!rounded-full\"\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\n                     [selected]=\"checkSelectableStatus(status?.value)\"\n                     (keydown.enter)=\"onFilter(status?.value)\"\n                     (click)=\"onFilter(status?.value)\">\n      {{ status.text }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n" }]
         }], propDecorators: { statuses: [{
                 type: Input
             }], initialStatus: [{
@@ -7216,11 +7331,11 @@ class EcabsProfileComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: { avatar: "avatar", name: "name", title: "title" }, outputs: { avatarChange: "avatarChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable-next-line -->\r\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\r\n  <li class=\"md:mr-3\">\r\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\r\n         class=\"flex h-12 w-12 rounded-full bg-gray-50 items-center justify-center text-white\">\r\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\r\n    </div>\r\n  </li>\r\n\r\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\r\n    <div class=\"font-semibold\">{{ name }}</div>\r\n    <div class=\"text-xs\">{{ title }}</div>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #avatarTpl>\r\n  <!-- eslint-disable-next-line -->\r\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\r\n</ng-template>\r\n\r\n", styles: ["img{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EcabsDynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: ["params", "saturation", "lightness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: { avatar: "avatar", name: "name", title: "title" }, outputs: { avatarChange: "avatarChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable-next-line -->\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\n  <li class=\"md:mr-3\">\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\n         class=\"flex h-12 w-12 rounded-full bg-gray-50 items-center justify-center text-white\">\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\n    </div>\n  </li>\n\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\n    <div class=\"font-semibold\">{{ name }}</div>\n    <div class=\"text-xs\">{{ title }}</div>\n  </li>\n</ul>\n\n<ng-template #avatarTpl>\n  <!-- eslint-disable-next-line -->\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\n</ng-template>\n\n", styles: ["img{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EcabsDynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: ["params", "saturation", "lightness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-profile', template: "<!-- eslint-disable-next-line -->\r\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\r\n  <li class=\"md:mr-3\">\r\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\r\n         class=\"flex h-12 w-12 rounded-full bg-gray-50 items-center justify-center text-white\">\r\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\r\n    </div>\r\n  </li>\r\n\r\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\r\n    <div class=\"font-semibold\">{{ name }}</div>\r\n    <div class=\"text-xs\">{{ title }}</div>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #avatarTpl>\r\n  <!-- eslint-disable-next-line -->\r\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\r\n</ng-template>\r\n\r\n", styles: ["img{width:40px;height:40px}\n"] }]
+            args: [{ selector: 'ecabs-profile', template: "<!-- eslint-disable-next-line -->\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\n  <li class=\"md:mr-3\">\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\n         class=\"flex h-12 w-12 rounded-full bg-gray-50 items-center justify-center text-white\">\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\n    </div>\n  </li>\n\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\n    <div class=\"font-semibold\">{{ name }}</div>\n    <div class=\"text-xs\">{{ title }}</div>\n  </li>\n</ul>\n\n<ng-template #avatarTpl>\n  <!-- eslint-disable-next-line -->\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\n</ng-template>\n\n", styles: ["img{width:40px;height:40px}\n"] }]
         }], propDecorators: { avatar: [{
                 type: Input
             }], name: [{
@@ -7293,11 +7408,11 @@ class EcabsHeaderComponent {
         this.subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHeaderComponent, deps: [{ token: HeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHeaderComponent, selector: "ecabs-header", inputs: { header: "header", user: "user", avatar: "avatar", loading: "loading" }, outputs: { avatarChange: "avatarChange", toggleNav: "toggleNav" }, viewQueries: [{ propertyName: "basicHeader", first: true, predicate: ["basicHeader"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\r\n\r\n<ul class=\"flex pb-4 pt-3 px-10\">\r\n  <li class=\"flex flex-col flex-1 justify-center\">\r\n    <div class=\"sm:hidden md:block\">\r\n      <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\r\n    </div>\r\n\r\n    <div class=\"heading--lg text-brand-dark font-medium\">\r\n      <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\r\n\r\n      <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n      <div #basicHeader></div>\r\n    </div>\r\n  </li>\r\n\r\n  <li>\r\n    <div class=\"flex items-center\">\r\n      <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\r\n                     (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\r\n    </div>\r\n  </li>\r\n</ul>\r\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: ["avatar", "name", "title"], outputs: ["avatarChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHeaderComponent, selector: "ecabs-header", inputs: { header: "header", user: "user", avatar: "avatar", loading: "loading" }, outputs: { avatarChange: "avatarChange", toggleNav: "toggleNav" }, viewQueries: [{ propertyName: "basicHeader", first: true, predicate: ["basicHeader"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\n\n<ul class=\"flex pb-4 pt-3 px-10\">\n  <li class=\"flex flex-col flex-1 justify-center\">\n    <div class=\"sm:hidden md:block\">\n      <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\n    </div>\n\n    <div class=\"heading--lg text-brand-dark font-medium\">\n      <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\n\n      <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      <div #basicHeader></div>\n    </div>\n  </li>\n\n  <li>\n    <div class=\"flex items-center\">\n      <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\n                     (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\n    </div>\n  </li>\n</ul>\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: ["avatar", "name", "title"], outputs: ["avatarChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-header', template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\r\n\r\n<ul class=\"flex pb-4 pt-3 px-10\">\r\n  <li class=\"flex flex-col flex-1 justify-center\">\r\n    <div class=\"sm:hidden md:block\">\r\n      <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\r\n    </div>\r\n\r\n    <div class=\"heading--lg text-brand-dark font-medium\">\r\n      <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\r\n\r\n      <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n      <div #basicHeader></div>\r\n    </div>\r\n  </li>\r\n\r\n  <li>\r\n    <div class=\"flex items-center\">\r\n      <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\r\n                     (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\r\n    </div>\r\n  </li>\r\n</ul>\r\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"] }]
+            args: [{ selector: 'ecabs-header', template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\n\n<ul class=\"flex pb-4 pt-3 px-10\">\n  <li class=\"flex flex-col flex-1 justify-center\">\n    <div class=\"sm:hidden md:block\">\n      <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\n    </div>\n\n    <div class=\"heading--lg text-brand-dark font-medium\">\n      <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\n\n      <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      <div #basicHeader></div>\n    </div>\n  </li>\n\n  <li>\n    <div class=\"flex items-center\">\n      <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\n                     (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\n    </div>\n  </li>\n</ul>\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"] }]
         }], ctorParameters: function () { return [{ type: HeaderService }]; }, propDecorators: { basicHeader: [{
                 type: ViewChild,
                 args: ['basicHeader', { static: true }]
@@ -7426,7 +7541,7 @@ class EcabsSliderComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsSliderComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\n    <ngx-slider\n      #slider\n      class=\"custom-slider\"\n      [formControlName]=\"'slider'\"\n      [value]=\"point\"\n      name=\"slider\"\n      (userChangeEnd)=\"onChangeValue($event)\"\n      [options]=\"options\"\n    ></ngx-slider>\n  </form>\n</ecabs-element-wrapper>\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, decorators: [{
             type: Component,
@@ -7436,7 +7551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsSliderComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\n    <ngx-slider\n      #slider\n      class=\"custom-slider\"\n      [formControlName]=\"'slider'\"\n      [value]=\"point\"\n      name=\"slider\"\n      (userChangeEnd)=\"onChangeValue($event)\"\n      [options]=\"options\"\n    ></ngx-slider>\n  </form>\n</ecabs-element-wrapper>\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { slider: [{
                 type: ViewChild,
                 args: ['slider']
@@ -7729,11 +7844,11 @@ class EcabsMenuItemsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i4.MatIconRegistry }, { token: i3$5.DomSanitizer }, { token: i4$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n      <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n        {{ item.badge }}\r\n      </div>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n            {{ item.badge }}\r\n          </div>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n        <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n          {{ item.badge }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\n  <li\n    *ngFor=\"let item of menuItems; let i = index\"\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\n  >\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\n      [routerLink]=\"item.url ? [item.url] : []\"\n      class=\"p-4 flex items-center h-max\"\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\n    >\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\n        {{ item.icon }}\n      </mat-icon>\n      <span *ngIf=\"!minimizeSidebar\"\n            class=\"inline-block align-middle\">\n        {{ item.title }}\n      </span>\n      <div *ngIf=\"item.badge\" class=\"badge text-white\">\n        {{ item.badge }}\n      </div>\n    </a>\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\n    </ng-container>\n  </li>\n</ul>\n\n<ng-template #firstChildren let-subItems=\"subItems\">\n  <ng-container *ngIf=\"!minimizeSidebar\">\n    <ul class=\"ml-12\">\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\n        <a #rla=\"routerLinkActive\"\n           (click)=\"toggleSubItem(item, subItems)\"\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\n           [routerLink]=\"item.url ? [item.url] : []\"\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\n        >\n          <span [title]=\"item.title\">\n            {{ item.title | truncate: truncateTo }}\n          </span>\n          <div *ngIf=\"item.badge\" class=\"badge text-white\">\n            {{ item.badge }}\n          </div>\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\n              keyboard_arrow_right\n            </mat-icon>\n          </div>\n        </a>\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\n        </ng-container>\n      </li>\n    </ul>\n  </ng-container>\n</ng-template>\n\n<ng-template #secondChildren let-subItems=\"subItems\">\n  <ul class=\"ml-3\">\n    <li *ngFor=\"let item of subItems\">\n      <a #rla=\"routerLinkActive\"\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\n         [routerLink]=\"item.url ? [item.url] : []\"\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\n        <span>{{ item.title }}</span>\n        <div *ngIf=\"item.badge\" class=\"badge text-white\">\n          {{ item.badge }}\n        </div>\n      </a>\n    </li>\n  </ul>\n</ng-template>\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-menu-items', providers: [UnsubscribeService], template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n      <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n        {{ item.badge }}\r\n      </div>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n            {{ item.badge }}\r\n          </div>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n        <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n          {{ item.badge }}\r\n        </div>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\n"] }]
+            args: [{ selector: 'ecabs-menu-items', providers: [UnsubscribeService], template: "<ul>\n  <li\n    *ngFor=\"let item of menuItems; let i = index\"\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\n  >\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\n      [routerLink]=\"item.url ? [item.url] : []\"\n      class=\"p-4 flex items-center h-max\"\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\n    >\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\n        {{ item.icon }}\n      </mat-icon>\n      <span *ngIf=\"!minimizeSidebar\"\n            class=\"inline-block align-middle\">\n        {{ item.title }}\n      </span>\n      <div *ngIf=\"item.badge\" class=\"badge text-white\">\n        {{ item.badge }}\n      </div>\n    </a>\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\n    </ng-container>\n  </li>\n</ul>\n\n<ng-template #firstChildren let-subItems=\"subItems\">\n  <ng-container *ngIf=\"!minimizeSidebar\">\n    <ul class=\"ml-12\">\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\n        <a #rla=\"routerLinkActive\"\n           (click)=\"toggleSubItem(item, subItems)\"\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\n           [routerLink]=\"item.url ? [item.url] : []\"\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\n        >\n          <span [title]=\"item.title\">\n            {{ item.title | truncate: truncateTo }}\n          </span>\n          <div *ngIf=\"item.badge\" class=\"badge text-white\">\n            {{ item.badge }}\n          </div>\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\n              keyboard_arrow_right\n            </mat-icon>\n          </div>\n        </a>\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\n        </ng-container>\n      </li>\n    </ul>\n  </ng-container>\n</ng-template>\n\n<ng-template #secondChildren let-subItems=\"subItems\">\n  <ul class=\"ml-3\">\n    <li *ngFor=\"let item of subItems\">\n      <a #rla=\"routerLinkActive\"\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\n         [routerLink]=\"item.url ? [item.url] : []\"\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\n        <span>{{ item.title }}</span>\n        <div *ngIf=\"item.badge\" class=\"badge text-white\">\n          {{ item.badge }}\n        </div>\n      </a>\n    </li>\n  </ul>\n</ng-template>\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\n"] }]
         }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i4.MatIconRegistry }, { type: i3$5.DomSanitizer }, { type: i4$5.Router }]; }, propDecorators: { menuItems: [{
                 type: Input
             }], minimizeSidebar: [{
@@ -7761,11 +7876,11 @@ class EcabsSidebarComponent {
         this.sidebarChange.emit(this.minimizeSidebar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSidebarComponent, selector: "ecabs-sidebar", inputs: { allMenuItems: "allMenuItems", logoutText: "logoutText", secondaryMenu: "secondaryMenu", logo: "logo" }, outputs: { logout: "logout", langChange: "langChange", sidebarChange: "sidebarChange" }, ngImport: i0, template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\r\n  <ul class=\"relative h-full p-2 flex flex-col\">\r\n    <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\r\n      <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n    </li>\r\n\r\n    <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\r\n      <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\r\n                        (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\r\n    </li>\r\n\r\n    <li class=\"mt-auto\">\r\n      <ul>\r\n        <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\r\n          <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\r\n        </li>\r\n\r\n        <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\r\n          <!-- eslint-disable-next-line -->\r\n          <a class=\"text-gray-500\" (click)=\"onLogout()\">\r\n            <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\r\n            <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </li>\r\n  </ul>\r\n\r\n  <!--#::TODO Find alternative to display correctly -->\r\n<!--  <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\r\n<!--   rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\r\n<!--       (click)=\"toggle()\">-->\r\n<!--    <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\r\n<!--  </div>-->\r\n</section>\r\n", styles: [""], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: ["menuItems", "minimizeSidebar", "truncateTo"], outputs: ["toggleSidebar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSidebarComponent, selector: "ecabs-sidebar", inputs: { allMenuItems: "allMenuItems", logoutText: "logoutText", secondaryMenu: "secondaryMenu", logo: "logo" }, outputs: { logout: "logout", langChange: "langChange", sidebarChange: "sidebarChange" }, ngImport: i0, template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\n  <ul class=\"relative h-full p-2 flex flex-col\">\n    <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\n      <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\n    </li>\n\n    <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\n      <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\n                        (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\n    </li>\n\n    <li class=\"mt-auto\">\n      <ul>\n        <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\n          <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\n        </li>\n\n        <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\n          <!-- eslint-disable-next-line -->\n          <a class=\"text-gray-500\" (click)=\"onLogout()\">\n            <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\n            <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\n          </a>\n        </li>\n      </ul>\n    </li>\n  </ul>\n\n  <!--#::TODO Find alternative to display correctly -->\n<!--  <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\n<!--   rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\n<!--       (click)=\"toggle()\">-->\n<!--    <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\n<!--  </div>-->\n</section>\n", styles: [""], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: ["menuItems", "minimizeSidebar", "truncateTo"], outputs: ["toggleSidebar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-sidebar', template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\r\n  <ul class=\"relative h-full p-2 flex flex-col\">\r\n    <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\r\n      <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n    </li>\r\n\r\n    <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\r\n      <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\r\n                        (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\r\n    </li>\r\n\r\n    <li class=\"mt-auto\">\r\n      <ul>\r\n        <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\r\n          <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\r\n        </li>\r\n\r\n        <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\r\n          <!-- eslint-disable-next-line -->\r\n          <a class=\"text-gray-500\" (click)=\"onLogout()\">\r\n            <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\r\n            <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </li>\r\n  </ul>\r\n\r\n  <!--#::TODO Find alternative to display correctly -->\r\n<!--  <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\r\n<!--   rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\r\n<!--       (click)=\"toggle()\">-->\r\n<!--    <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\r\n<!--  </div>-->\r\n</section>\r\n" }]
+            args: [{ selector: 'ecabs-sidebar', template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\n  <ul class=\"relative h-full p-2 flex flex-col\">\n    <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\n      <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\n    </li>\n\n    <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\n      <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\n                        (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\n    </li>\n\n    <li class=\"mt-auto\">\n      <ul>\n        <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\n          <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\n        </li>\n\n        <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\n          <!-- eslint-disable-next-line -->\n          <a class=\"text-gray-500\" (click)=\"onLogout()\">\n            <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\n            <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\n          </a>\n        </li>\n      </ul>\n    </li>\n  </ul>\n\n  <!--#::TODO Find alternative to display correctly -->\n<!--  <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\n<!--   rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\n<!--       (click)=\"toggle()\">-->\n<!--    <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\n<!--  </div>-->\n</section>\n" }]
         }], propDecorators: { allMenuItems: [{
                 type: Input
             }], logoutText: [{
@@ -7814,11 +7929,11 @@ class EcabsLogoComponent {
     subtitle;
     logoAlt;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLogoComponent, selector: "ecabs-logo", inputs: { collapsed: "collapsed", logo: "logo", subtitle: "subtitle", logoAlt: "logoAlt" }, ngImport: i0, template: "<ul *ngIf=\"logo || subtitle\">\r\n  <li *ngIf=\"logo\" class=\"w-full\">\r\n    <img [src]=\"logo\" [alt]=\"logoAlt\"/>\r\n  </li>\r\n\r\n  <li *ngIf=\"subtitle\" [ngClass]=\"collapsed ? 'text-collapse' : 'text-sm'\" class=\"text-brand-dark mt-2\">\r\n    {{ subtitle }}\r\n  </li>\r\n</ul>\r\n", styles: [":host::ng-deep .text-collapse{font-size:9px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLogoComponent, selector: "ecabs-logo", inputs: { collapsed: "collapsed", logo: "logo", subtitle: "subtitle", logoAlt: "logoAlt" }, ngImport: i0, template: "<ul *ngIf=\"logo || subtitle\">\n  <li *ngIf=\"logo\" class=\"w-full\">\n    <img [src]=\"logo\" [alt]=\"logoAlt\"/>\n  </li>\n\n  <li *ngIf=\"subtitle\" [ngClass]=\"collapsed ? 'text-collapse' : 'text-sm'\" class=\"text-brand-dark mt-2\">\n    {{ subtitle }}\n  </li>\n</ul>\n", styles: [":host::ng-deep .text-collapse{font-size:9px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-logo', template: "<ul *ngIf=\"logo || subtitle\">\r\n  <li *ngIf=\"logo\" class=\"w-full\">\r\n    <img [src]=\"logo\" [alt]=\"logoAlt\"/>\r\n  </li>\r\n\r\n  <li *ngIf=\"subtitle\" [ngClass]=\"collapsed ? 'text-collapse' : 'text-sm'\" class=\"text-brand-dark mt-2\">\r\n    {{ subtitle }}\r\n  </li>\r\n</ul>\r\n", styles: [":host::ng-deep .text-collapse{font-size:9px!important}\n"] }]
+            args: [{ selector: 'ecabs-logo', template: "<ul *ngIf=\"logo || subtitle\">\n  <li *ngIf=\"logo\" class=\"w-full\">\n    <img [src]=\"logo\" [alt]=\"logoAlt\"/>\n  </li>\n\n  <li *ngIf=\"subtitle\" [ngClass]=\"collapsed ? 'text-collapse' : 'text-sm'\" class=\"text-brand-dark mt-2\">\n    {{ subtitle }}\n  </li>\n</ul>\n", styles: [":host::ng-deep .text-collapse{font-size:9px!important}\n"] }]
         }], propDecorators: { collapsed: [{
                 type: Input
             }], logo: [{
@@ -7975,7 +8090,7 @@ class EcabsPlaceAutocompleteComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsPlaceAutocompleteComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input #matCustomAutocompleteInput\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [id]=\"name\"\r\n      class=\"form-field__input w-full\"\r\n      autocorrect=\"off\"\r\n      autocapitalize=\"off\"\r\n      spellcheck=\"off\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\r\n      <mat-icon *ngIf=\"showDeleteItem\"\r\n                class=\"suffix cursor-pointer delete-button\"\r\n                (click)=\"onDeleteItem()\">\r\n        delete\r\n      </mat-icon>\r\n      <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input #matCustomAutocompleteInput\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      class=\"form-field__input w-full\"\n      autocorrect=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"off\"\n      (blur)=\"onTouch()\"\n    />\n    <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\n      <mat-icon *ngIf=\"showDeleteItem\"\n                class=\"suffix cursor-pointer delete-button\"\n                (click)=\"onDeleteItem()\">\n        delete\n      </mat-icon>\n      <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteComponent, decorators: [{
             type: Component,
@@ -7986,7 +8101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsPlaceAutocompleteComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input #matCustomAutocompleteInput\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [(ngModel)]=\"value\"\r\n      [id]=\"name\"\r\n      class=\"form-field__input w-full\"\r\n      autocorrect=\"off\"\r\n      autocapitalize=\"off\"\r\n      spellcheck=\"off\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\r\n      <mat-icon *ngIf=\"showDeleteItem\"\r\n                class=\"suffix cursor-pointer delete-button\"\r\n                (click)=\"onDeleteItem()\">\r\n        delete\r\n      </mat-icon>\r\n      <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input #matCustomAutocompleteInput\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      class=\"form-field__input w-full\"\n      autocorrect=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"off\"\n      (blur)=\"onTouch()\"\n    />\n    <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\n      <mat-icon *ngIf=\"showDeleteItem\"\n                class=\"suffix cursor-pointer delete-button\"\n                (click)=\"onDeleteItem()\">\n        delete\n      </mat-icon>\n      <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: UnsubscribeService }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomAutocompleteInput', { static: false }]
@@ -8248,7 +8363,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
                 useExisting: EcabsPlaceAutocompleteV2Component,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"autocomplete-ui w-full\">\r\n    <section class=\"form-field__input--wrapper w-full\">\r\n      <input #matCustomAutocompleteInput\r\n             cdkOverlayOrigin\r\n             #trigger=\"cdkOverlayOrigin\"\r\n             [placeholder]=\"placeholder\"\r\n             [disabled]=\"disabled\"\r\n             [(ngModel)]=\"value\"\r\n             [id]=\"name\"\r\n             class=\"form-field__input w-full\"\r\n             autocorrect=\"off\"\r\n             autocapitalize=\"off\"\r\n             spellcheck=\"off\"\r\n             (focus)=\"onFocus()\"\r\n             (keydown)=\"onKeyDown($event)\"\r\n             (ngModelChange)=\"onUserInput($event)\"\r\n             (blur)=\"onBlur()\"\r\n      />\r\n      <div *ngIf=\"showSuffix\"\r\n           class=\"form-field__input--suffix\">\r\n        <mat-icon *ngIf=\"showDeleteItem\"\r\n                  class=\"suffix cursor-pointer delete-button\"\r\n                  (keydown.enter)=\"delete()\"\r\n                  (click)=\"delete()\">\r\n          delete\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n                  class=\"suffix cursor-pointer\"\r\n                  (keydown.enter)=\"clear()\"\r\n                  (click)=\"clear()\">\r\n          close\r\n        </mat-icon>\r\n      </div>\r\n    </section>\r\n    <!-- Custom dropdown -->\r\n    <ng-template cdkConnectedOverlay\r\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n      <ul class=\"autocomplete-ui__container\">\r\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n            [class.active]=\"i === selectedIndex\"\r\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n            <div class=\"w-full truncate\">\r\n              {{ suggestion?.additional_info }}\r\n            </div>\r\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n            </mat-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #purePlaceResultTpl>\r\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n              <li>\r\n                {{ suggestion?.prediction_term?.[0]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n                  class=\"text-xs text-gray-600 truncate\">\r\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\r\n                {{ suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n            </ul>\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </ng-template>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"autocomplete-ui w-full\">\n    <section class=\"form-field__input--wrapper w-full\">\n      <input #matCustomAutocompleteInput\n             cdkOverlayOrigin\n             #trigger=\"cdkOverlayOrigin\"\n             [placeholder]=\"placeholder\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"value\"\n             [id]=\"name\"\n             class=\"form-field__input w-full\"\n             autocorrect=\"off\"\n             autocapitalize=\"off\"\n             spellcheck=\"off\"\n             (focus)=\"onFocus()\"\n             (keydown)=\"onKeyDown($event)\"\n             (ngModelChange)=\"onUserInput($event)\"\n             (blur)=\"onBlur()\"\n      />\n      <div *ngIf=\"showSuffix\"\n           class=\"form-field__input--suffix\">\n        <mat-icon *ngIf=\"showDeleteItem\"\n                  class=\"suffix cursor-pointer delete-button\"\n                  (keydown.enter)=\"delete()\"\n                  (click)=\"delete()\">\n          delete\n        </mat-icon>\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\n                  class=\"suffix cursor-pointer\"\n                  (keydown.enter)=\"clear()\"\n                  (click)=\"clear()\">\n          close\n        </mat-icon>\n      </div>\n    </section>\n    <!-- Custom dropdown -->\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\n      <ul class=\"autocomplete-ui__container\">\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\n            [class.active]=\"i === selectedIndex\"\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\n            <div class=\"w-full truncate\">\n              {{ suggestion?.additional_info }}\n            </div>\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\n            </mat-icon>\n          </ng-container>\n\n          <ng-template #purePlaceResultTpl>\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\n              <li>\n                {{ suggestion?.prediction_term?.[0]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\n                  class=\"text-xs text-gray-600 truncate\">\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\n                {{ suggestion?.prediction_term?.[2]?.value }}\n              </li>\n            </ul>\n          </ng-template>\n        </li>\n      </ul>\n    </ng-template>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteV2Component, decorators: [{
             type: Component,
@@ -8258,7 +8373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsPlaceAutocompleteV2Component,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"autocomplete-ui w-full\">\r\n    <section class=\"form-field__input--wrapper w-full\">\r\n      <input #matCustomAutocompleteInput\r\n             cdkOverlayOrigin\r\n             #trigger=\"cdkOverlayOrigin\"\r\n             [placeholder]=\"placeholder\"\r\n             [disabled]=\"disabled\"\r\n             [(ngModel)]=\"value\"\r\n             [id]=\"name\"\r\n             class=\"form-field__input w-full\"\r\n             autocorrect=\"off\"\r\n             autocapitalize=\"off\"\r\n             spellcheck=\"off\"\r\n             (focus)=\"onFocus()\"\r\n             (keydown)=\"onKeyDown($event)\"\r\n             (ngModelChange)=\"onUserInput($event)\"\r\n             (blur)=\"onBlur()\"\r\n      />\r\n      <div *ngIf=\"showSuffix\"\r\n           class=\"form-field__input--suffix\">\r\n        <mat-icon *ngIf=\"showDeleteItem\"\r\n                  class=\"suffix cursor-pointer delete-button\"\r\n                  (keydown.enter)=\"delete()\"\r\n                  (click)=\"delete()\">\r\n          delete\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n                  class=\"suffix cursor-pointer\"\r\n                  (keydown.enter)=\"clear()\"\r\n                  (click)=\"clear()\">\r\n          close\r\n        </mat-icon>\r\n      </div>\r\n    </section>\r\n    <!-- Custom dropdown -->\r\n    <ng-template cdkConnectedOverlay\r\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n      <ul class=\"autocomplete-ui__container\">\r\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n            [class.active]=\"i === selectedIndex\"\r\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n            <div class=\"w-full truncate\">\r\n              {{ suggestion?.additional_info }}\r\n            </div>\r\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n            </mat-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #purePlaceResultTpl>\r\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n              <li>\r\n                {{ suggestion?.prediction_term?.[0]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n                  class=\"text-xs text-gray-600 truncate\">\r\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\r\n                {{ suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n            </ul>\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </ng-template>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"autocomplete-ui w-full\">\n    <section class=\"form-field__input--wrapper w-full\">\n      <input #matCustomAutocompleteInput\n             cdkOverlayOrigin\n             #trigger=\"cdkOverlayOrigin\"\n             [placeholder]=\"placeholder\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"value\"\n             [id]=\"name\"\n             class=\"form-field__input w-full\"\n             autocorrect=\"off\"\n             autocapitalize=\"off\"\n             spellcheck=\"off\"\n             (focus)=\"onFocus()\"\n             (keydown)=\"onKeyDown($event)\"\n             (ngModelChange)=\"onUserInput($event)\"\n             (blur)=\"onBlur()\"\n      />\n      <div *ngIf=\"showSuffix\"\n           class=\"form-field__input--suffix\">\n        <mat-icon *ngIf=\"showDeleteItem\"\n                  class=\"suffix cursor-pointer delete-button\"\n                  (keydown.enter)=\"delete()\"\n                  (click)=\"delete()\">\n          delete\n        </mat-icon>\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\n                  class=\"suffix cursor-pointer\"\n                  (keydown.enter)=\"clear()\"\n                  (click)=\"clear()\">\n          close\n        </mat-icon>\n      </div>\n    </section>\n    <!-- Custom dropdown -->\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\n      <ul class=\"autocomplete-ui__container\">\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\n            [class.active]=\"i === selectedIndex\"\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\n            <div class=\"w-full truncate\">\n              {{ suggestion?.additional_info }}\n            </div>\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\n            </mat-icon>\n          </ng-container>\n\n          <ng-template #purePlaceResultTpl>\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\n              <li>\n                {{ suggestion?.prediction_term?.[0]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\n                  class=\"text-xs text-gray-600 truncate\">\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\n                {{ suggestion?.prediction_term?.[2]?.value }}\n              </li>\n            </ul>\n          </ng-template>\n        </li>\n      </ul>\n    </ng-template>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomAutocompleteInput', { static: false }]
@@ -8441,7 +8556,7 @@ class EcabsMultipleDatesPickerComponent extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <mat-chip-grid\r\n      #chipList aria-label=\"Choose a date\"\r\n      (click)=\"picker.open()\"\r\n      class=\"w-full\"\r\n    >\r\n      <mat-chip-option\r\n        class=\"form-field__input\"\r\n        *ngFor=\"let value of model\"\r\n        [selectable]=\"false\" [removable]=\"true\"\r\n        (removed)=\"remove(value)\"\r\n      >\r\n        {{ value | date: 'dd/MM/yyyy' }}\r\n        <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n      </mat-chip-option>\r\n      <input\r\n        class=\"form-field__input fake-input\"\r\n        [value]=\"resetModel\"\r\n        [(ngModel)]=\"value\"\r\n        [matDatepicker]=\"picker\"\r\n        placeholder=\"Select dates\"\r\n        (dateChange)=\"dateChanged($event)\"\r\n        [matChipInputFor]=\"chipList\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n      />\r\n    </mat-chip-grid>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n      [dateClass]=\"dateClass\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+        ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <mat-chip-grid\n      #chipList aria-label=\"Choose a date\"\n      (click)=\"picker.open()\"\n      class=\"w-full\"\n    >\n      <mat-chip-option\n        class=\"form-field__input\"\n        *ngFor=\"let value of model\"\n        [selectable]=\"false\" [removable]=\"true\"\n        (removed)=\"remove(value)\"\n      >\n        {{ value | date: 'dd/MM/yyyy' }}\n        <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\n      </mat-chip-option>\n      <input\n        class=\"form-field__input fake-input\"\n        [value]=\"resetModel\"\n        [(ngModel)]=\"value\"\n        [matDatepicker]=\"picker\"\n        placeholder=\"Select dates\"\n        (dateChange)=\"dateChanged($event)\"\n        [matChipInputFor]=\"chipList\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n        [matDatepickerFilter]=\"filterDateRange\"\n      />\n    </mat-chip-grid>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n      [dateClass]=\"dateClass\"\n    >\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n        >\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"], dependencies: [{ 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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMultipleDatesPickerComponent, decorators: [{
             type: Component,
@@ -8452,7 +8567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <mat-chip-grid\r\n      #chipList aria-label=\"Choose a date\"\r\n      (click)=\"picker.open()\"\r\n      class=\"w-full\"\r\n    >\r\n      <mat-chip-option\r\n        class=\"form-field__input\"\r\n        *ngFor=\"let value of model\"\r\n        [selectable]=\"false\" [removable]=\"true\"\r\n        (removed)=\"remove(value)\"\r\n      >\r\n        {{ value | date: 'dd/MM/yyyy' }}\r\n        <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n      </mat-chip-option>\r\n      <input\r\n        class=\"form-field__input fake-input\"\r\n        [value]=\"resetModel\"\r\n        [(ngModel)]=\"value\"\r\n        [matDatepicker]=\"picker\"\r\n        placeholder=\"Select dates\"\r\n        (dateChange)=\"dateChanged($event)\"\r\n        [matChipInputFor]=\"chipList\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n      />\r\n    </mat-chip-grid>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n      [dateClass]=\"dateClass\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <mat-chip-grid\n      #chipList aria-label=\"Choose a date\"\n      (click)=\"picker.open()\"\n      class=\"w-full\"\n    >\n      <mat-chip-option\n        class=\"form-field__input\"\n        *ngFor=\"let value of model\"\n        [selectable]=\"false\" [removable]=\"true\"\n        (removed)=\"remove(value)\"\n      >\n        {{ value | date: 'dd/MM/yyyy' }}\n        <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\n      </mat-chip-option>\n      <input\n        class=\"form-field__input fake-input\"\n        [value]=\"resetModel\"\n        [(ngModel)]=\"value\"\n        [matDatepicker]=\"picker\"\n        placeholder=\"Select dates\"\n        (dateChange)=\"dateChanged($event)\"\n        [matChipInputFor]=\"chipList\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n        [matDatepickerFilter]=\"filterDateRange\"\n      />\n    </mat-chip-grid>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n      [dateClass]=\"dateClass\"\n    >\n      <mat-datepicker-actions>\n        <ecabs-date-picker-actions\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n        >\n        </ecabs-date-picker-actions>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { _picker: [{
                 type: ViewChild,
                 args: ['picker', { static: true }]
@@ -8681,11 +8796,11 @@ class EcabsDialogConfirmationDeletionComponent {
         this.dialogRef.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.UntypedFormBuilder }, { token: EcabsComponentsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmationDeletionComponent, selector: "ecabs-dialog-confirm-deletion", ngImport: i0, template: "<div class=\"p-6\">\r\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\r\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\r\n  </h3>\r\n  <div class=\"mt-1\">\r\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\r\n      <span class=\"alert-text\">\r\n        {{ data.alertText }}\r\n      </span>\r\n    </div>\r\n\r\n    <form [formGroup]=\"form\" class=\"mt-1\">\r\n      <ecabs-input\r\n        [placeholder]=\"data.entityNamePlaceholder\"\r\n        [label]=\"data.entityNameLabel\"\r\n        name=\"name\"\r\n        formControlName=\"name\"\r\n      ></ecabs-input>\r\n    </form>\r\n  </div>\r\n\r\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\r\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons\r\n      class=\"grow\"\r\n      [color]=\"data?.color || color\"\r\n      (click)=\"onConfirm()\"\r\n      [disabled]=\"form.value.name !== data.comparisonText\"\r\n    >\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: EcabsInputComponent, selector: "ecabs-input", inputs: ["digitsOnly", "allowDecimal", "allowHyphen", "max", "mini", "maxi", "step"], outputs: ["onblur"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmationDeletionComponent, selector: "ecabs-dialog-confirm-deletion", ngImport: i0, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\n      <span class=\"alert-text\">\n        {{ data.alertText }}\n      </span>\n    </div>\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n    >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: EcabsInputComponent, selector: "ecabs-input", inputs: ["digitsOnly", "allowDecimal", "allowHyphen", "allowRange", "max", "mini", "maxi", "step"], outputs: ["onblur"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-dialog-confirm-deletion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-6\">\r\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\r\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\r\n  </h3>\r\n  <div class=\"mt-1\">\r\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\r\n      <span class=\"alert-text\">\r\n        {{ data.alertText }}\r\n      </span>\r\n    </div>\r\n\r\n    <form [formGroup]=\"form\" class=\"mt-1\">\r\n      <ecabs-input\r\n        [placeholder]=\"data.entityNamePlaceholder\"\r\n        [label]=\"data.entityNameLabel\"\r\n        name=\"name\"\r\n        formControlName=\"name\"\r\n      ></ecabs-input>\r\n    </form>\r\n  </div>\r\n\r\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\r\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\r\n      {{ data?.cancelLabel }}\r\n    </ecabs-buttons>\r\n\r\n    <ecabs-buttons\r\n      class=\"grow\"\r\n      [color]=\"data?.color || color\"\r\n      (click)=\"onConfirm()\"\r\n      [disabled]=\"form.value.name !== data.comparisonText\"\r\n    >\r\n      {{ data?.confirmLabel }}\r\n    </ecabs-buttons>\r\n  </div>\r\n</div>\r\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"] }]
+            args: [{ selector: 'ecabs-dialog-confirm-deletion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\n      <span class=\"alert-text\">\n        {{ data.alertText }}\n      </span>\n    </div>\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n    >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -8876,7 +8991,7 @@ class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
                 useExisting: forwardRef(() => EcabsTimeRangeInputV2Component),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"startTimePlaceholder\" \r\n      [(ngModel)]=\"timeFrom\" \r\n      [dayStartLabel]=\"dayStartLabel\" \r\n      [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"endTimePlaceholder\" \r\n      [(ngModel)]=\"timeTo\" \r\n      [dayStartLabel]=\"dayStartLabel\"\r\n       [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: EcabsTimepickerComponent, selector: "ecabs-timepicker", inputs: ["focusedFlag", "showCloseIcon", "listPlacement", "appendTo", "min", "max", "showDayStart", "showDayEnd", "addSecond", "dayStartLabel", "dayEndLabel"] }, { 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"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__range--wrapper\">\n    <div class=\"form-field__range\">\n      <ecabs-timepicker \n      [label]=\"startTimePlaceholder\" \n      [(ngModel)]=\"timeFrom\" \n      [dayStartLabel]=\"dayStartLabel\" \n      [dayEndLabel]=\"dayEndLabel\">\n      </ecabs-timepicker>\n    </div>\n\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\n    <div class=\"form-field__range\">\n      <ecabs-timepicker \n      [label]=\"endTimePlaceholder\" \n      [(ngModel)]=\"timeTo\" \n      [dayStartLabel]=\"dayStartLabel\"\n       [dayEndLabel]=\"dayEndLabel\">\n      </ecabs-timepicker>\n    </div>\n  </div>\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: EcabsTimepickerComponent, selector: "ecabs-timepicker", inputs: ["focusedFlag", "showCloseIcon", "listPlacement", "appendTo", "min", "max", "showDayStart", "showDayEnd", "addSecond", "dayStartLabel", "dayEndLabel"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, decorators: [{
             type: Component,
@@ -8886,7 +9001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsTimeRangeInputV2Component),
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"startTimePlaceholder\" \r\n      [(ngModel)]=\"timeFrom\" \r\n      [dayStartLabel]=\"dayStartLabel\" \r\n      [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"endTimePlaceholder\" \r\n      [(ngModel)]=\"timeTo\" \r\n      [dayStartLabel]=\"dayStartLabel\"\r\n       [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__range--wrapper\">\n    <div class=\"form-field__range\">\n      <ecabs-timepicker \n      [label]=\"startTimePlaceholder\" \n      [(ngModel)]=\"timeFrom\" \n      [dayStartLabel]=\"dayStartLabel\" \n      [dayEndLabel]=\"dayEndLabel\">\n      </ecabs-timepicker>\n    </div>\n\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\n    <div class=\"form-field__range\">\n      <ecabs-timepicker \n      [label]=\"endTimePlaceholder\" \n      [(ngModel)]=\"timeTo\" \n      [dayStartLabel]=\"dayStartLabel\"\n       [dayEndLabel]=\"dayEndLabel\">\n      </ecabs-timepicker>\n    </div>\n  </div>\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { showCloseIcon: [{
                 type: Input
             }], listPlacement: [{
@@ -8979,7 +9094,7 @@ class EcabsChipGroupComponent {
                 useExisting: forwardRef(() => EcabsChipGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n                  [compareWith]=\"compareFn\"\r\n                  [disabled]=\"isDisabled()\"\r\n                  [ngModel]=\"_value()\"\r\n                  (ngModelChange)=\"chipValueChange($event)\">\r\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\r\n                   [value]=\"option.value\"\r\n                   [disabled]=\"option.disabled\"\r\n                   [disableRipple]=\"disableRipple\">\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n  </mat-chip-option>\r\n</mat-chip-listbox>\r\n", styles: [""], dependencies: [{ 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: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { 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: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [compareWith]=\"compareFn\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n", styles: [""], dependencies: [{ 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: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { 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: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, decorators: [{
             type: Component,
@@ -8989,7 +9104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsChipGroupComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n                  [compareWith]=\"compareFn\"\r\n                  [disabled]=\"isDisabled()\"\r\n                  [ngModel]=\"_value()\"\r\n                  (ngModelChange)=\"chipValueChange($event)\">\r\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\r\n                   [value]=\"option.value\"\r\n                   [disabled]=\"option.disabled\"\r\n                   [disableRipple]=\"disableRipple\">\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n  </mat-chip-option>\r\n</mat-chip-listbox>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [compareWith]=\"compareFn\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -9189,7 +9304,7 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
                 useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }, { kind: "ngmodule", type: EcabsLoadingModule }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input matInput\n           [id]=\"label\"\n           [name]=\"label\"\n           class=\"form-field__input\"\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           #inputElem\n           [matChipInputFor]=\"chipGrid\"\n           [matAutocomplete]=\"auto\"\n           [formControl]=\"inputControl\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"blur()\"/>\n  </div>\n</ecabs-element-wrapper>\n\n<mat-autocomplete #auto=\"matAutocomplete\"\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                  (optionSelected)=\"setSelection($event)\"\n                  (opened)=\"setOverlayHeight()\"\n                  [class]=\"overlayPanelClass\">\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\n              [value]=\"option\"\n              [disabled]=\"option.disabled ?? false\">\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n    {{ option.label }}\n  </mat-option>\n\n  <mat-option *ngIf=\"loading\" disabled>\n    <div class=\"flex items-center\">\n      <div class=\"mr-2\">{{ loadingText }}</div>\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\n    </div>\n  </mat-option>\n\n  <mat-option disabled *ngIf=\"noMatchResult()\">\n    {{ noResultsText }}\n  </mat-option>\n</mat-autocomplete>\n\n<mat-chip-grid #chipGrid\n               [disabled]=\"disabled\"\n               [class.mt-4]=\"selectedOptions().length > 0\">\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\n                [disabled]=\"disabled || option.disabled\"\n                (removed)=\"removeSelection(option)\">\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n    <mat-icon matChipRemove\n              svgIcon=\"ph-light:x\">\n    </mat-icon>\n  </mat-chip-row>\n</mat-chip-grid>\n\n<ng-template #avatarContext let-option>\n  <ng-container *ngIf=\"avatarTemplate\">\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }, { kind: "ngmodule", type: EcabsLoadingModule }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
             type: Component,
@@ -9211,7 +9326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input matInput\n           [id]=\"label\"\n           [name]=\"label\"\n           class=\"form-field__input\"\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           #inputElem\n           [matChipInputFor]=\"chipGrid\"\n           [matAutocomplete]=\"auto\"\n           [formControl]=\"inputControl\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"blur()\"/>\n  </div>\n</ecabs-element-wrapper>\n\n<mat-autocomplete #auto=\"matAutocomplete\"\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                  (optionSelected)=\"setSelection($event)\"\n                  (opened)=\"setOverlayHeight()\"\n                  [class]=\"overlayPanelClass\">\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\n              [value]=\"option\"\n              [disabled]=\"option.disabled ?? false\">\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n    {{ option.label }}\n  </mat-option>\n\n  <mat-option *ngIf=\"loading\" disabled>\n    <div class=\"flex items-center\">\n      <div class=\"mr-2\">{{ loadingText }}</div>\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\n    </div>\n  </mat-option>\n\n  <mat-option disabled *ngIf=\"noMatchResult()\">\n    {{ noResultsText }}\n  </mat-option>\n</mat-autocomplete>\n\n<mat-chip-grid #chipGrid\n               [disabled]=\"disabled\"\n               [class.mt-4]=\"selectedOptions().length > 0\">\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\n                [disabled]=\"disabled || option.disabled\"\n                (removed)=\"removeSelection(option)\">\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n    <mat-icon matChipRemove\n              svgIcon=\"ph-light:x\">\n    </mat-icon>\n  </mat-chip-row>\n</mat-chip-grid>\n\n<ng-template #avatarContext let-option>\n  <ng-container *ngIf=\"avatarTemplate\">\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\n    </ng-container>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9252,11 +9367,11 @@ class EcabsDateRangePickerHeaderComponentV2 {
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerHeaderComponentV2, deps: [{ token: EcabsDatePickerHeaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerHeaderComponentV2, selector: "ecabs-date-range-picker-header-v2", inputs: { selectDateLabel: "selectDateLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerHeaderComponentV2, selector: "ecabs-date-range-picker-header-v2", inputs: { selectDateLabel: "selectDateLabel" }, ngImport: i0, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n", styles: [""], dependencies: [{ kind: "component", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerHeaderComponentV2, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-range-picker-header-v2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\r\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\r\n</div>\r\n<ecabs-picker-header></ecabs-picker-header>\r\n" }]
+            args: [{ selector: 'ecabs-date-range-picker-header-v2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-date-label text-xl font-semibold\">\n  {{ selectDateLabel ?? (ecabsDatePickerHeaderService.getConfig() | async)?.selectDateLabel}}\n</div>\n<ecabs-picker-header></ecabs-picker-header>\n" }]
         }], ctorParameters: function () { return [{ type: EcabsDatePickerHeaderService }]; }, propDecorators: { selectDateLabel: [{
                 type: Input
             }] } });
@@ -9460,7 +9575,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
                 useExisting: EcabsDateRangePickerComponentV2,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "pickerTo", first: true, predicate: ["pickerTo"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
+        ], viewQueries: [{ propertyName: "pickerTo", first: true, predicate: ["pickerTo"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__range--wrapper\">\n    <div class=\"form-field__range\">\n      <input\n        class=\"border-none w-full\"\n        id=\"{{ name + 'dateFrom' }}\"\n        [(ngModel)]=\"dateFrom\"\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\n        [disabled]=\"disabled\"\n        [matDatepicker]=\"pickerFrom\"\n        [min]=\"minDateFrom\"\n        [max]=\"maxDateFrom\"\n        [matDatepickerFilter]=\"filterDateRange\"\n        ecabsMaskDate\n        (blur)=\"onTouch()\"\n        (click)=\"pickerFrom.open()\"\n      />\n      <mat-datepicker #pickerFrom\n                      [panelClass]=\"panelClass\"\n                      [calendarHeaderComponent]=\"header\"\n                      [touchUi]=\"touchUi\">\n      </mat-datepicker>\n    </div>\n\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\n    <div class=\"form-field__range\">\n      <input\n        class=\"border-none w-full\"\n        id=\"{{ name + 'dateTo' }}\"\n        [(ngModel)]=\"dateTo\"\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\n        [disabled]=\"disabled\"\n        [matDatepicker]=\"pickerTo\"\n        [min]=\"minDateTo\"\n        [max]=\"maxDateTo\"\n        [matDatepickerFilter]=\"filterDateRange\"\n        ecabsMaskDate\n        (blur)=\"onTouch()\"\n        (click)=\"pickerTo.open()\"\n      />\n      <mat-datepicker #pickerTo\n                      [panelClass]=\"panelClass\"\n                      [calendarHeaderComponent]=\"header\"\n                      [touchUi]=\"touchUi\">\n      </mat-datepicker>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, decorators: [{
             type: Component,
@@ -9470,7 +9585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsDateRangePickerComponentV2,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__range--wrapper\">\n    <div class=\"form-field__range\">\n      <input\n        class=\"border-none w-full\"\n        id=\"{{ name + 'dateFrom' }}\"\n        [(ngModel)]=\"dateFrom\"\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\n        [disabled]=\"disabled\"\n        [matDatepicker]=\"pickerFrom\"\n        [min]=\"minDateFrom\"\n        [max]=\"maxDateFrom\"\n        [matDatepickerFilter]=\"filterDateRange\"\n        ecabsMaskDate\n        (blur)=\"onTouch()\"\n        (click)=\"pickerFrom.open()\"\n      />\n      <mat-datepicker #pickerFrom\n                      [panelClass]=\"panelClass\"\n                      [calendarHeaderComponent]=\"header\"\n                      [touchUi]=\"touchUi\">\n      </mat-datepicker>\n    </div>\n\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\n    <div class=\"form-field__range\">\n      <input\n        class=\"border-none w-full\"\n        id=\"{{ name + 'dateTo' }}\"\n        [(ngModel)]=\"dateTo\"\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\n        [disabled]=\"disabled\"\n        [matDatepicker]=\"pickerTo\"\n        [min]=\"minDateTo\"\n        [max]=\"maxDateTo\"\n        [matDatepickerFilter]=\"filterDateRange\"\n        ecabsMaskDate\n        (blur)=\"onTouch()\"\n        (click)=\"pickerTo.open()\"\n      />\n      <mat-datepicker #pickerTo\n                      [panelClass]=\"panelClass\"\n                      [calendarHeaderComponent]=\"header\"\n                      [touchUi]=\"touchUi\">\n      </mat-datepicker>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: i0.DestroyRef }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -9570,11 +9685,11 @@ class EcabsSegmentComponent {
     subtitle;
     showTitleDivider = true;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider" }, ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>{{ title }}</mat-card-title>\r\n    <mat-card-subtitle *ngIf=\"subtitle\">\r\n      {{ subtitle }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n\r\n  <mat-divider *ngIf=\"showTitleDivider\"\r\n               class=\"card__title--divider\"></mat-divider>\r\n\r\n  <ng-content></ng-content>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>{{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle\">\n      {{ subtitle }}\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <mat-divider *ngIf=\"showTitleDivider\"\n               class=\"card__title--divider\"></mat-divider>\n\n  <ng-content></ng-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-segment', standalone: true, imports: [CommonModule, MatCardModule, MatListModule], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>{{ title }}</mat-card-title>\r\n    <mat-card-subtitle *ngIf=\"subtitle\">\r\n      {{ subtitle }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n\r\n  <mat-divider *ngIf=\"showTitleDivider\"\r\n               class=\"card__title--divider\"></mat-divider>\r\n\r\n  <ng-content></ng-content>\r\n</mat-card>\r\n" }]
+            args: [{ selector: 'ecabs-segment', standalone: true, imports: [CommonModule, MatCardModule, MatListModule], template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>{{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle\">\n      {{ subtitle }}\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <mat-divider *ngIf=\"showTitleDivider\"\n               class=\"card__title--divider\"></mat-divider>\n\n  <ng-content></ng-content>\n</mat-card>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{