ecabs-components 1.1.56 → 1.1.62

package/fesm2022/ecabs-components.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, HostBinding, EventEmitter, forwardRef, ViewEncapsulation, Output, Injectable, Directive, HostListener, Pipe, Optional, Self, ContentChild, Inject, Host } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, HostBinding, EventEmitter, forwardRef, ViewEncapsulation, Output, Injectable, Directive, HostListener, Pipe, Optional, Self, ContentChild, Inject, Host, signal, inject, DestroyRef, computed } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DecimalPipe, getLocaleFirstDayOfWeek } from '@angular/common';
+import { CommonModule, DecimalPipe, getLocaleFirstDayOfWeek, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/material/button';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, NgControl, FormsModule, UntypedFormControl, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, NgControl, FormsModule, UntypedFormControl, ReactiveFormsModule, UntypedFormGroup, FormControl } from '@angular/forms';
 import * as i2$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, filter, Subject, takeUntil, first, of, Observable } from 'rxjs';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, filter, Subject, takeUntil, first, of, Observable, startWith } from 'rxjs';
 import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7 from '@angular/material/form-field';
@@ -37,7 +37,7 @@ import Holidays from 'date-holidays';
 import enGbLocale from 'date-fns/locale/en-GB';
 import * as i6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
+import { Maskito } from '@maskito/core';
 import { parsePhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i7$1 from '@angular/material/menu';
@@ -51,21 +51,24 @@ import * as i3$2 from '@angular/material/radio';
 import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
 import * as i3$3 from '@angular/material/expansion';
 import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
-import * as i7$2 from '@angular/material/chips';
+import * as i2$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatTable, MatTableModule } from '@angular/material/table';
-import * as i2$3 from '@angular/material/progress-bar';
+import * as i2$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$3 from '@angular/material/paginator';
-import { map as map$1, switchMap } from 'rxjs/operators';
+import { map as map$1, switchMap, distinctUntilChanged } from 'rxjs/operators';
 import * as i3$4 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import * as i3$5 from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { Platform } from '@angular/cdk/platform';
 import { isEqual as isEqual$1 } from 'lodash';
+import * as i4$6 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { NgxPhosphorIconsLightFileModule } from 'ngx-phosphor-icons';
 
 class EcabsSpinnerComponent {
     size = 'medium';
@@ -212,15 +215,15 @@ class ButtonsV2Component {
     get buttonClasses() {
         return {
             '!w-full': this.fullWidth,
-            'loading !leading-none': this.loading
+            'loading !leading-none': this.loading,
         };
     }
     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    [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: [".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:8px;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:8px;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:8px;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\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\">\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    [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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\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    [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: [".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:8px;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:8px;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:8px;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"] }]
+            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    [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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -295,7 +298,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: [".ecabs-button-toggle{border-radius:8px;box-shadow:none;border:none;background-color:var(--color-slate-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-slate-500);border-radius:8px;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-slate-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-slate-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-slate-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-slate-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:8px;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:12px;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"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], 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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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:12px;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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsButtonToggleComponent, decorators: [{
             type: Component,
@@ -305,7 +308,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: [".ecabs-button-toggle{border-radius:8px;box-shadow:none;border:none;background-color:var(--color-slate-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-slate-500);border-radius:8px;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-slate-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-slate-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-slate-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-slate-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:8px;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:12px;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\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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:12px;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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -586,6 +589,18 @@ const errorMessages = [
         type: 'dateFromMoreThanDateTo',
         message: 'FORMS.VALIDATION.DATE_FROM_MORE_THAN_DATE_TO',
     },
+    {
+        type: 'timeFromRangeRequired',
+        message: 'FORMS.VALIDATION.TIME_FROM_RANGE_REQUIRED',
+    },
+    {
+        type: 'timeToRangeRequired',
+        message: 'FORMS.VALIDATION.TIME_TO_RANGE_REQUIRED',
+    },
+    {
+        type: 'timeFromMoreThanDateTo',
+        message: 'FORMS.VALIDATION.TIME_FROM_MORE_THAN_TIME_TO',
+    },
 ];
 
 const i18n = {
@@ -781,11 +796,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\r\n      class=\"form-field__label\"\r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\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\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"] }] });
 }
 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\r\n      class=\"form-field__label\"\r\n      [attr.for]=\"data?.name\" *ngIf=\"data?.label && data?.showLabel\"\r\n    >\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\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"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], showCloseIcon: [{
@@ -1271,6 +1286,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsInputRangeComponent extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    toInput;
+    digitsOnly;
+    allowDecimal;
+    allowHyphen;
+    min;
+    max;
+    step;
+    separatorText = 'to';
+    fromPlaceholder = '0';
+    toPlaceholder = 'Any';
+    rangeChange = new EventEmitter();
+    val = { from: null, to: null };
+    isFocused = false;
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.control.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.updateDisabledState();
+            });
+        }
+        this.updateDisabledState();
+    }
+    get value() {
+        return this.val;
+    }
+    set value(v) {
+        if (v !== this.val) {
+            this.val = v;
+            this.onChange(v);
+            this.rangeChange.emit(v);
+        }
+    }
+    setFocus(focus) {
+        this.isFocused = focus;
+    }
+    focusToInput() {
+        this.toInput.nativeElement.focus();
+    }
+    updateValue(key, val) {
+        const num = val === '' || val === null ? null : Number(val);
+        this.value = { ...this.value, [key]: num };
+        this.onTouched();
+    }
+    getFromError(value = this.val) {
+        if (value.from === null) {
+            return null;
+        }
+        const errors = {};
+        if (this.min !== undefined && value.from < this.min) {
+            errors['min'] = { min: this.min, actual: value.from };
+        }
+        if (this.max !== undefined && value.from > this.max) {
+            errors['max'] = { max: this.max, actual: value.from };
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    getToError(value = this.val) {
+        if (value.to === null) {
+            return null;
+        }
+        const errors = {};
+        const effectiveMin = value.from !== null ? value.from : this.min;
+        if (effectiveMin !== undefined && value.to < effectiveMin) {
+            errors['rangeOrder'] = { min: effectiveMin, max: value.to };
+        }
+        if (this.max !== undefined && value.to > this.max) {
+            errors['max'] = { max: this.max, actual: value.to };
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    getIncompleteRangeError(value = this.val) {
+        if (this.min === undefined || this.max === undefined) {
+            return null;
+        }
+        const hasFrom = value.from !== null;
+        const hasTo = value.to !== null;
+        if ((hasFrom && !hasTo) || (!hasFrom && hasTo)) {
+            return { incompleteRange: true };
+        }
+        return null;
+    }
+    get hasAnyError() {
+        return !!(this.control &&
+            this.showValidation &&
+            (this.control.touched ||
+                this.control.dirty ||
+                this.showValidationOnNotTouched) &&
+            this.control.invalid);
+    }
+    validate(control) {
+        const v = control.value;
+        const isEmpty = !v || (v.from === null && v.to === null);
+        if (isEmpty) {
+            const requiredValidator = control.validator?.({});
+            return requiredValidator?.['required'] ? { required: true } : null;
+        }
+        const fromErrors = this.getFromError(v);
+        const toErrors = this.getToError(v);
+        const incompleteRangeErrors = this.getIncompleteRangeError(v);
+        if (!fromErrors && !toErrors && !incompleteRangeErrors) {
+            return null;
+        }
+        return { ...fromErrors, ...toErrors, ...incompleteRangeErrors };
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        this.val = v || { from: null, to: null };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputRangeComponent, selector: "ecabs-input-range", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", min: "min", max: "max", step: "step", separatorText: "separatorText", fromPlaceholder: "fromPlaceholder", toPlaceholder: "toPlaceholder" }, outputs: { rangeChange: "rangeChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: EcabsInputRangeComponent,
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                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=\"bg-gray-100 rounded-xl p-4 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-input-range', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsInputRangeComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: EcabsInputRangeComponent,
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"bg-gray-100 rounded-xl p-4 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { toInput: [{
+                type: ViewChild,
+                args: ['toInput']
+            }], digitsOnly: [{
+                type: Input
+            }], allowDecimal: [{
+                type: Input
+            }], allowHyphen: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], separatorText: [{
+                type: Input
+            }], fromPlaceholder: [{
+                type: Input
+            }], toPlaceholder: [{
+                type: Input
+            }], rangeChange: [{
+                type: Output
+            }] } });
+
+class EcabsInputRangeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, declarations: [EcabsInputRangeComponent], imports: [CommonModule,
+            FormsModule,
+            ElementWrapperModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule,
+            EcabsButtonsV2Module], exports: [EcabsInputRangeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, imports: [CommonModule,
+            FormsModule,
+            ElementWrapperModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule,
+            EcabsButtonsV2Module] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsInputRangeComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ElementWrapperModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsMinMaxDirectiveModule,
+                        EcabsButtonsV2Module
+                    ],
+                    exports: [EcabsInputRangeComponent],
+                }]
+        }] });
+
 class EcabsTooltipIfTruncatedDirective {
     matTooltip;
     elementRef;
@@ -1784,7 +2009,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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:.25rem;border:1px solid var(--color-gray-500);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-500);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);border-color:transparent}.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:.25rem;border:1px solid var(--color-gray-500);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-500);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);border-color:transparent}.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:.75rem;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-500);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);border-color:transparent}.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{padding-top:.5rem;font-size:12px;font-size:.75rem;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.disabled input,.form-field.disabled textarea,form-field.disabled input,form-field.disabled textarea{background-color:var(--color-white-opacity-05);border-color:var(--color-gray-300)}.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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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-200);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-500);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);border-color:transparent}.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-200);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-500);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);border-color:transparent}.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-500);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);border-color:transparent}.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{padding-top:.5rem;font-size:12px;font-size:.75rem;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.disabled input,.form-field.disabled textarea,form-field.disabled input,form-field.disabled textarea{background-color:var(--color-white-opacity-05);border-color:var(--color-gray-300)}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxToggleComponent, decorators: [{
             type: Component,
@@ -1794,7 +2019,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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:.25rem;border:1px solid var(--color-gray-500);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-500);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);border-color:transparent}.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:.25rem;border:1px solid var(--color-gray-500);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-500);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);border-color:transparent}.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:.75rem;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-500);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);border-color:transparent}.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{padding-top:.5rem;font-size:12px;font-size:.75rem;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.disabled input,.form-field.disabled textarea,form-field.disabled input,form-field.disabled textarea{background-color:var(--color-white-opacity-05);border-color:var(--color-gray-300)}.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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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-200);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-500);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);border-color:transparent}.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-200);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-500);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);border-color:transparent}.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-500);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);border-color:transparent}.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{padding-top:.5rem;font-size:12px;font-size:.75rem;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.disabled input,.form-field.disabled textarea,form-field.disabled input,form-field.disabled textarea{background-color:var(--color-white-opacity-05);border-color:var(--color-gray-300)}.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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCheckbox: [{
                 type: ViewChild,
                 args: [MatCheckbox, { static: false }]
@@ -2200,6 +2425,118 @@ const WAYPOINT_SUGGESTIONS2 = [
     },
 ];
 
+class EcabsCheckboxV2Component extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    label = '';
+    showLabel = false;
+    checkboxChanged = new EventEmitter();
+    val = false;
+    get value() {
+        return this.val;
+    }
+    get hasError() {
+        return (!!this.control &&
+            this.control.invalid &&
+            (this.control.touched || this.control.dirty));
+    }
+    set value(value) {
+        if (value !== undefined && this.val !== value) {
+            this.val = value;
+        }
+    }
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.validationLabel = this.label || this.validationLabel;
+            this.control.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.updateDisabledState();
+            });
+        }
+        this.updateDisabledState();
+    }
+    toggle(event) {
+        this.value = !!event.checked;
+        this.onChange(this.value);
+        this.onTouched();
+        this.checkboxChanged.emit(this.value);
+    }
+    onRowClick() {
+        if (!this.disabled) {
+            this.value = !this.value;
+            this.onChange(this.value);
+            this.onTouched();
+            this.checkboxChanged.emit(this.value);
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.onRowClick();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value = !!value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Component, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsCheckboxV2Component, selector: "ecabs-checkbox-v2", inputs: { label: "label", showLabel: "showLabel" }, outputs: { checkboxChanged: "checkboxChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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-base pl-2\">{{ label }}</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    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{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: "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,
+            args: [{ selector: 'ecabs-checkbox-v2', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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-base pl-2\">{{ label }}</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    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{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: [{
+                type: Input
+            }], checkboxChanged: [{
+                type: Output
+            }] } });
+
+class EcabsCheckboxV2Module {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, declarations: [EcabsCheckboxV2Component], imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule], exports: [EcabsCheckboxV2Component] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsCheckboxV2Component],
+                    imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule],
+                    exports: [EcabsCheckboxV2Component],
+                }]
+        }] });
+
 class UnsubscribeService {
     issued = false;
     unsubscribe$;
@@ -2313,11 +2650,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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 {
@@ -2582,168 +2919,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['keyup', ['$event']]
             }] } });
 
-const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function createAutoCorrectedDatePipe(dateFormat = 'dd mm yyyy', { minYear = 1, maxYear = 9999 } = {}) {
-    const dateFormatArray = dateFormat
-        .split(/[^dmyHMS]+/)
-        .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    return function (conformedValue) {
-        const indexesOfPipedChars = [];
-        const maxValue = {
-            dd: 31,
-            mm: 12,
-            yy: 99,
-            yyyy: maxYear,
-            HH: 23,
-            MM: 59,
-            SS: 59,
-        };
-        const minValue = {
-            dd: 1,
-            mm: 1,
-            yy: 0,
-            yyyy: minYear,
-            HH: 0,
-            MM: 0,
-            SS: 0,
-        };
-        const conformedValueArr = conformedValue.split('');
-        // Check first digit
-        dateFormatArray.forEach((format) => {
-            const position = dateFormat.indexOf(format);
-            const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
-            if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
-                conformedValueArr[position + 1] = conformedValueArr[position];
-                conformedValueArr[position] = 0;
-                indexesOfPipedChars.push(position);
-            }
-        });
-        // Check for invalid date
-        let month = 0;
-        const isInvalid = dateFormatArray.some((format) => {
-            const position = dateFormat.indexOf(format);
-            const length = format.length;
-            const textValue = conformedValue
-                .substr(position, length)
-                .replace(/\D/g, '');
-            const value = parseInt(textValue, 10);
-            if (format === 'mm') {
-                // tslint:disable-next-line: strict-boolean-expressions
-                month = value || 0;
-            }
-            const maxValueForFormat = format === 'dd' ? maxValueMonth[month] : maxValue[format];
-            if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
-                const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
-                const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
-                return value < scopedMinValue || value > scopedMaxValue;
-            }
-            if (format === 'HH' || format === 'MM') {
-                const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
-                const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
-                return value < scopedMinValue || value > scopedMaxValue;
-            }
-            return (value > maxValueForFormat ||
-                (textValue.length === length && value < minValue[format]));
-        });
-        if (isInvalid) {
-            return false;
-        }
-        return {
-            value: conformedValueArr.join(''),
-            indexesOfPipedChars,
-        };
+function createTimeRangeMaskOptions() {
+    return {
+        mask: ({ value }) => {
+            const [startValue = '', endValue = ''] = value.split('-');
+            return [
+                ...buildTimeMask(startValue.trim()),
+                ' ',
+                '-',
+                ' ',
+                ...buildTimeMask(endValue.trim()),
+            ];
+        },
+    };
+}
+function createTimeMaskOptions() {
+    return {
+        mask: ({ value }) => {
+            return buildTimeMask(value);
+        },
+    };
+}
+function buildTimeMask(value) {
+    const { hoursDigits, minutesDigits } = extractDigits(value);
+    const result = [];
+    result.push(...getHourMask(hoursDigits));
+    result.push(':');
+    result.push(...getMinuteMask(minutesDigits));
+    return result;
+}
+function extractDigits(value) {
+    const [hoursPart = '', minutesPart = ''] = value.split(':');
+    const hoursDigits = hoursPart.replace(/\D/g, '').slice(0, 2);
+    const minutesDigitsFromPart = minutesPart.replace(/\D/g, '').slice(0, 2);
+    if (minutesPart) {
+        return { hoursDigits, minutesDigits: minutesDigitsFromPart };
+    }
+    const digits = value.replace(/\D/g, '');
+    const inferredHours = digits.slice(0, 2);
+    const inferredMinutes = digits.slice(2, 4);
+    return {
+        hoursDigits: hoursDigits || inferredHours,
+        minutesDigits: minutesDigitsFromPart || inferredMinutes,
     };
+}
+function getHourMask(hoursDigits) {
+    if (hoursDigits.length >= 2) {
+        return get24HourMaskStrict(hoursDigits);
+    }
+    if (!hoursDigits.length) {
+        return [/\d/, /\d?/];
+    }
+    if (hoursDigits.length === 1) {
+        const [h1] = hoursDigits;
+        if (h1 === '0' || h1 === '1') {
+            return [/[0-1]/, /\d?/];
+        }
+        if (h1 === '2') {
+            return [/2/, /[0-3]?/];
+        }
+        return ['0', /[3-9]/];
+    }
+    return [/[0-9]/, /\d?/];
+}
+function get24HourMaskStrict(hoursDigits) {
+    const [h1] = hoursDigits;
+    if (h1 === '2') {
+        return [/2/, /[0-3]/];
+    }
+    if (h1 === '0' || h1 === '1') {
+        return [/[0-1]/, /\d/];
+    }
+    return [/[0-2]/, /[0-3]/];
+}
+function getMinuteMask(minutesDigits) {
+    if (minutesDigits.length >= 2) {
+        return [/[0-5]/, /\d/];
+    }
+    if (minutesDigits.length === 1) {
+        const firstDigit = parseInt(minutesDigits[0], 10);
+        if (firstDigit > 5) {
+            return ['0', /[6-9]/];
+        }
+        return [/[0-5]/, /\d?/];
+    }
+    return [/[0-9]/, /\d?/];
 }
 
 class EcabsMaskDateDirective {
     element;
     isDateTimeMask = false;
     considerSeconds = false;
-    maskedInputController;
-    mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
-    maskDateTime = [
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        ',',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ]; // dd/mm/yyyy, hh:mm
-    maskDateTimeWithSeconds = [
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        ',',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ]; // dd/mm/yyyy, hh:mm:ss
-    config;
+    maskedInput = null;
+    timeMaskOptions = createTimeMaskOptions();
     constructor(element) {
         this.element = element;
     }
-    onNgModelChange(value) {
-        this.config.showMask = true;
-        if (!this.containsNumber(value.toString())) {
-            this.config.showMask = false;
-            this.maskedInputController.textMaskInputElement.update('');
-        }
-    }
     ngOnInit() {
-        this.config = {
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: true,
-            pipe: this.isDateTimeMask
-                ? this.considerSeconds
-                    ? createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM:SS')
-                    : createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM')
-                : createAutoCorrectedDatePipe('dd/mm/yyyy'),
-            keepCharPositions: true,
-            mask: this.isDateTimeMask
-                ? this.considerSeconds
-                    ? this.maskDateTimeWithSeconds
-                    : this.maskDateTime
-                : this.mask,
-        };
-        this.maskedInputController = textMask.maskInput(this.config);
+        this.maskedInput = new Maskito(this.element.nativeElement, {
+            mask: ({ value }) => this.buildDynamicMask(value),
+        });
     }
     ngOnDestroy() {
-        this.maskedInputController?.destroy();
+        this.maskedInput?.destroy();
+    }
+    buildDynamicMask(value) {
+        const digits = value.replace(/\D/g, '');
+        const result = [];
+        result.push(...this.getDaySegment(digits));
+        result.push('/');
+        result.push(...this.getMonthSegment(digits));
+        result.push('/');
+        result.push(/\d/, /\d/, /\d/, /\d/);
+        if (!this.isDateTimeMask) {
+            return result;
+        }
+        const timeValue = this.extractTimeValue(value);
+        const timeMaskOption = this.timeMaskOptions.mask;
+        const timeMaskRaw = typeof timeMaskOption === 'function'
+            ? timeMaskOption({
+                value: timeValue,
+                selection: [timeValue.length, timeValue.length],
+            })
+            : timeMaskOption;
+        const timeMask = Array.isArray(timeMaskRaw) ? timeMaskRaw : [timeMaskRaw];
+        result.push(',', ' ');
+        result.push(...timeMask);
+        if (this.considerSeconds) {
+            result.push(':');
+            result.push(/[0-5]/, /\d/);
+        }
+        return result;
+    }
+    getDaySegment(digits) {
+        const d1 = digits[0];
+        if (d1 === '3') {
+            return [/[0-3]/, /[0-1]/];
+        }
+        return [/[0-3]/, /\d/];
+    }
+    getMonthSegment(digits) {
+        const m1 = digits[2];
+        if (m1 === '1') {
+            return [/[0-1]/, /[0-2]/];
+        }
+        return [/[0-1]/, /\d/];
     }
-    containsNumber(value) {
-        // Check if the string contains any digit between 0 and 9
-        return /\d/.test(value);
+    extractTimeValue(value) {
+        const [, timePart = ''] = value.split(',');
+        return timePart.trimStart();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, host: { listeners: { "ngModelChange": "onNgModelChange($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirective, decorators: [{
             type: Directive,
@@ -2754,9 +3081,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], considerSeconds: [{
                 type: Input
-            }], onNgModelChange: [{
-                type: HostListener,
-                args: ['ngModelChange', ['$event']]
             }] } });
 
 class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
@@ -2790,7 +3114,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
     preventCallSetterPickerValue = false;
     runTimeout = false;
     translationConfig;
-    isEmptyFormat = '_/__/____, __:__';
+    isEmptyFormat = undefined;
     get value() {
         return this.val;
     }
@@ -2807,19 +3131,22 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
         return this._seconds;
     }
     set hours(value) {
-        if (value !== undefined && this._hours !== value) {
-            this._hours = this.roundNumber(+value);
+        if (value === undefined || this._hours === value) {
+            return;
         }
+        this._hours = this.normalizeWithAutoPad(value, 3);
     }
     set minutes(value) {
-        if (value !== undefined && this._minutes !== value) {
-            this._minutes = this.roundNumber(+value);
+        if (value === undefined || this._minutes === value) {
+            return;
         }
+        this._minutes = this.normalizeWithAutoPad(value, 6);
     }
     set seconds(value) {
-        if (value !== undefined && this._seconds !== value) {
-            this._seconds = this.roundNumber(+value);
+        if (value === undefined || this._seconds === value) {
+            return;
         }
+        this._seconds = this.normalizeWithAutoPad(value, 6);
     }
     set value(val) {
         if (val && this.val?.getTime() !== new Date(val).getTime()) {
@@ -2925,7 +3252,24 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
         }
         return result;
     }
-    roundNumber(num) {
+    normalizeWithAutoPad(rawValue, autoPadFrom) {
+        const digits = this.toDigits(rawValue, 2);
+        if (!digits) {
+            return '';
+        }
+        if (digits.length === 1) {
+            const first = parseInt(digits, 10);
+            if (first >= autoPadFrom) {
+                return this.formatTwoDigits(first);
+            }
+            return digits;
+        }
+        return this.formatTwoDigits(parseInt(digits, 10));
+    }
+    toDigits(value, maxLength) {
+        return value?.toString().replace(/\D/g, '').slice(0, maxLength) ?? '';
+    }
+    formatTwoDigits(num) {
         return this.decimalPipe.transform(num, '2.0-0') ?? '00';
     }
     setValues(date) {
@@ -2951,7 +3295,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]=\"placeholder\"\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()\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2963,7 +3307,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]=\"placeholder\"\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()\">\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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -3287,7 +3631,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: [".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)}.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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-500);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()\">\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: [".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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-500);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,
@@ -3303,7 +3647,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: [".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)}.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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-500);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()\">\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: [".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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-500);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: [{
@@ -3458,45 +3802,21 @@ class EcabsMaskTimeDirective {
     element;
     timeRange = false;
     all;
-    maskedInputController;
-    maskTimeRange = [
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ' ',
-        '-',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ];
-    maskTime = [/\d/, /\d/, ':', /\d/, /\d/];
+    maskedInput = null;
     constructor(element) {
         this.element = element;
     }
     ngOnInit() {
-        const all = this.all;
-        const timeRange = this.timeRange;
-        this.maskedInputController = textMask.maskInput({
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: false,
-            keepCharPositions: true,
-            mask: timeRange ? this.maskTimeRange : this.maskTime,
-            pipe: function (conformedValue) {
-                if (conformedValue === (timeRange ? '__:__ - __:__' : '__:__')) {
-                    return all;
-                }
-                return conformedValue;
-            },
-        });
+        const options = this.getMaskOptions();
+        this.maskedInput = new Maskito(this.element.nativeElement, options);
     }
     ngOnDestroy() {
-        this.maskedInputController.destroy();
+        this.maskedInput?.destroy();
+    }
+    getMaskOptions() {
+        return this.timeRange
+            ? createTimeRangeMaskOptions()
+            : createTimeMaskOptions();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: { timeRange: "timeRange", all: "all" }, ngImport: i0 });
@@ -3714,7 +4034,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]=\"placeholder\"\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()\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -3726,7 +4046,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]=\"placeholder\"\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()\">\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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { touchUi: [{
                 type: Input
             }], cancelLabel: [{
@@ -3874,7 +4194,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementComponent, decorators: [{
             type: Component,
@@ -3884,7 +4204,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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: [{
@@ -5426,7 +5746,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
     dayEndLabel;
     position = {};
     _data = '';
-    inputData = '';
     _timePicker;
     _input;
     listPosition = {};
@@ -5532,30 +5851,8 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
         }
         return undefined;
     }
-    updateInputData(event) {
-        this.inputData = event;
-        this.isHoverItemChanged = false;
-        if (!event) {
-            this.data = event;
-            return;
-        }
-        const newData = this.inputData.replace(new RegExp(/_/gi), '');
-        if (this.checkOutOfRangeNumber(newData)) {
-            this.data = newData;
-        }
-        if (this.data.length === 2 ||
-            (this.data.length === 1 && parseInt(this.data) > 2)) {
-            this.makeHourFull();
-            this.data += ':';
-        }
-    }
     checkSpecialKeys(key) {
         if (key === 'Tab' || key === ' ' || key === ':') {
-            if (!this.data.includes(':') && this.data.length > 0) {
-                this.makeHourFull();
-                this.data += ':';
-                return 'stop';
-            }
             if (key === 'Tab') {
                 return 'tab';
             }
@@ -5585,31 +5882,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
         }
         return false;
     }
-    makeHourFull() {
-        const hourPart = this.data.split(':')[0];
-        const minutePart = this.data.split(':').length > 1 ? this.data.split(':')[1] : '';
-        if (hourPart.length === 1) {
-            this.data = '0' + hourPart + (minutePart ? ':' + minutePart : minutePart);
-        }
-        this.inputData = this.data;
-    }
-    makeMinuteFull() {
-        const hourPart = this.data.split(':')[0];
-        const minutePart = this.data.split(':').length > 1 ? this.data.split(':')[1] : '';
-        if (minutePart.length === 0) {
-            this.data = hourPart + ':00';
-        }
-        if (minutePart.length === 1) {
-            this.data = hourPart + ':' + minutePart + '0';
-        }
-        this.inputData = this.data;
-    }
-    fixTimeToNearest() {
-        if (this.data.length > 0) {
-            this.makeHourFull();
-            this.makeMinuteFull();
-        }
-    }
     //eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, @typescript-eslint/no-empty-function
     onChangeFn = (_) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5641,10 +5913,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
     close(val = null) {
         if (val && this.isHoverItemChanged) {
             this.data = val;
-            this.inputData = val;
-        }
-        else {
-            this.fixTimeToNearest();
         }
         this.focusedFlag = false;
         this.control?.markAsTouched();
@@ -5656,7 +5924,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        [value]=\"data\"\r\n        [ngModel]=\"data\"\r\n        (ngModelChange)=\"updateInputData($event)\"\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 }\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerComponent, decorators: [{
             type: Component,
@@ -5666,7 +5934,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        [value]=\"data\"\r\n        [ngModel]=\"data\"\r\n        (ngModelChange)=\"updateInputData($event)\"\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 }\">\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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FormTimePickerService }, { type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { focusedFlag: [{
                 type: Input
             }, {
@@ -5804,7 +6072,7 @@ 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: i7$2.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>\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, decorators: [{
             type: Component,
@@ -5886,11 +6154,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], actions: [{
@@ -5932,7 +6200,7 @@ 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$3.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 }\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -6002,11 +6270,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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-warn)}.note--success{background-color:rgba(var(--color-success-rgb),.06);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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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-warn)}.note--success{background-color:rgba(var(--color-success-rgb),.06);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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}.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-warn)}.note--success{background-color:rgba(var(--color-success-rgb),.06);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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}.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-warn)}.note--success{background-color:rgba(var(--color-success-rgb),.06);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -6147,11 +6415,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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-warn)}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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-warn)}.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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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-warn)}.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\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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-warn)}.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]
@@ -6233,11 +6501,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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\"\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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\"\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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: [{
@@ -6649,42 +6917,15 @@ class EcabsTimeRangeDirective {
     isDateTimeMask = false;
     considerSeconds = false;
     all = 'All';
-    maskedInputController;
-    maskDateTime = [
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ' ',
-        '-',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ];
+    maskedInput = null;
     constructor(element) {
         this.element = element;
     }
     ngOnInit() {
-        this.maskedInputController = textMask.maskInput({
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: false,
-            keepCharPositions: true,
-            mask: this.maskDateTime,
-            pipe: function (conformedValue) {
-                if (conformedValue === '__:__ - __:__') {
-                    return this.all;
-                }
-                return conformedValue;
-            },
-        });
+        this.maskedInput = new Maskito(this.element.nativeElement, createTimeRangeMaskOptions());
     }
     ngOnDestroy() {
-        this.maskedInputController.destroy();
+        this.maskedInput?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeDirective, selector: "[ecabsTimeRange]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds", all: "all" }, ngImport: i0 });
@@ -6907,7 +7148,7 @@ 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: i7$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$2.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\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, decorators: [{
             type: Component,
@@ -7218,10 +7459,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class EcabsTruncatePipe {
     transform(value, limit = 24, trimAtWords = false, trail = '...') {
-        if (trimAtWords) {
-            limit = value.substr(0, limit).lastIndexOf(' ');
+        if (!value) {
+            return '';
         }
-        return value?.length > limit ? value.substr(0, limit) + trail : value;
+        if (value.length <= limit) {
+            return value;
+        }
+        let resultLimit = limit;
+        if (trimAtWords && value.length > limit) {
+            const trimmedAtWord = value.substring(0, limit).lastIndexOf(' ');
+            resultLimit = trimmedAtWord > 0 ? trimmedAtWord : limit;
+        }
+        return value?.length > resultLimit
+            ? value.substring(0, resultLimit) + trail
+            : value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTruncatePipe, name: "truncate" });
@@ -7248,6 +7499,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class NumberToCountryCodePipe {
+    transform(phoneNumber, type = 'iso', withFlagClass = false) {
+        if (!phoneNumber) {
+            return null;
+        }
+        const parsedPhoneNumber = parsePhoneNumberFromString(phoneNumber);
+        if (!parsedPhoneNumber?.isValid()) {
+            return null;
+        }
+        const value = type === 'calling'
+            ? parsedPhoneNumber.countryCallingCode
+            : parsedPhoneNumber.country?.toLowerCase();
+        if (!value) {
+            return null;
+        }
+        return withFlagClass ? `fi fi-${value}` : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberToCountryCodePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NumberToCountryCodePipe, isStandalone: true, name: "numberToCountryCode" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberToCountryCodePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'numberToCountryCode',
+                    standalone: true,
+                }]
+        }] });
+
 class EcabsPipesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsPipesModule, declarations: [EcabsTruncatePipe], imports: [CommonModule], exports: [EcabsTruncatePipe] });
@@ -7387,11 +7666,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.badget\" class=\"badget text-white\">\r\n        {{ item.badget }}\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.badget\" class=\"badget text-white\">\r\n            {{ item.badget }}\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.badget\" class=\"badget text-white\">\r\n          {{ item.badget }}\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 .badget{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>\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" }] });
 }
 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.badget\" class=\"badget text-white\">\r\n        {{ item.badget }}\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.badget\" class=\"badget text-white\">\r\n            {{ item.badget }}\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.badget\" class=\"badget text-white\">\r\n          {{ item.badget }}\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 .badget{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>\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"] }]
         }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i4.MatIconRegistry }, { type: i3$5.DomSanitizer }, { type: i4$5.Router }]; }, propDecorators: { menuItems: [{
                 type: Input
             }], minimizeSidebar: [{
@@ -8060,7 +8339,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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: i7$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$2.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: i7$2.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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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,
@@ -8071,7 +8350,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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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);--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-900: #0f172a}: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()\">\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{--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: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--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-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-option-label-text-size: 14px}: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 }]
@@ -8198,7 +8477,15 @@ const removeEmpty = (o, exceptProperties = []) => {
         }
     }
     return o;
-};
+};
+function getRandomItems(items, count) {
+    const copy = [...items];
+    for (let i = copy.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy.slice(0, count);
+}
 
 class EcabsDateAdapter extends NativeDateAdapter {
     constructor(dateTimeLocale) {
@@ -8332,6 +8619,454 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class FormTimePickerServiceV2 {
+    config = {
+        dayEnd: 'Day End',
+        dayStart: 'Day Start',
+        iconClass: '',
+    };
+    closeSub = new Subject();
+    setConfig(c) {
+        this.config = Object.assign(this.config, c);
+    }
+    getConfig() {
+        return this.config;
+    }
+    close() {
+        this.closeSub.next(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    showCloseIcon = false;
+    listPlacement = 'auto';
+    appendTo;
+    min;
+    max;
+    showDayStart = true;
+    showDayEnd = false;
+    addSecond = true;
+    dayStartLabel;
+    dayEndLabel;
+    separatorLabel = 'to';
+    startTimePlaceholder;
+    endTimePlaceholder;
+    val;
+    _timeFrom;
+    _timeTo;
+    get value() {
+        return this.val;
+    }
+    get timeFrom() {
+        return this._timeFrom;
+    }
+    get timeTo() {
+        return this._timeTo;
+    }
+    //eslint-disable-next-line
+    set value(val) {
+        if (this.val !== val) {
+            this.val = val;
+            this.timeFrom = val.timeFrom;
+            this.timeTo = val.timeTo;
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    //eslint-disable-next-line
+    set timeFrom(val) {
+        if (this._timeFrom !== val) {
+            this._timeFrom = val;
+            this.onApply();
+        }
+    }
+    //eslint-disable-next-line
+    set timeTo(val) {
+        if (this._timeTo !== val) {
+            this._timeTo = val;
+            this.onApply();
+        }
+    }
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.control.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.timeRangeValidator(this.control));
+        }
+    }
+    onChange = () => { };
+    onTouch = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    onApply() {
+        const newValue = {
+            timeFrom: this.timeFrom,
+            timeTo: this.timeTo,
+        };
+        if (!isEqual$1(this.value, newValue)) {
+            this.value = {
+                timeFrom: this.timeFrom,
+                timeTo: this.timeTo,
+            };
+        }
+    }
+    timeRangeValidator(control) {
+        const required = control.hasValidator(Validators.required);
+        if (control.value) {
+            const { timeFrom, timeTo } = control.value;
+            control.setErrors(null);
+            if (required && (!timeFrom || timeFrom?.length === 0) && (!timeTo || timeTo?.length === 0)) {
+                control.setErrors({ required: true });
+                return;
+            }
+            if (!timeFrom && timeTo) {
+                control.setErrors({ timeFromRangeRequired: true });
+                return;
+            }
+            if (timeFrom && !timeTo) {
+                control.setErrors({ timeToRangeRequired: true });
+                return;
+            }
+            if (timeFrom > timeTo) {
+                control.setErrors({ timeFromMoreThanTimeTo: true });
+                return;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeInputV2Component, selector: "ecabs-time-range-input-v2", inputs: { showCloseIcon: "showCloseIcon", listPlacement: "listPlacement", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", addSecond: "addSecond", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", separatorLabel: "separatorLabel", startTimePlaceholder: "startTimePlaceholder", endTimePlaceholder: "endTimePlaceholder" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-time-range-input-v2', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { showCloseIcon: [{
+                type: Input
+            }], listPlacement: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], showDayStart: [{
+                type: Input
+            }], showDayEnd: [{
+                type: Input
+            }], addSecond: [{
+                type: Input
+            }], dayStartLabel: [{
+                type: Input
+            }], dayEndLabel: [{
+                type: Input
+            }], separatorLabel: [{
+                type: Input
+            }], startTimePlaceholder: [{
+                type: Input
+            }], endTimePlaceholder: [{
+                type: Input
+            }] } });
+
+class EcabsTimeRangeInputV2Module {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, declarations: [EcabsTimeRangeInputV2Component], imports: [CommonModule,
+            ElementWrapperModule,
+            EcabsTimepickerModule,
+            FormsModule], exports: [EcabsTimeRangeInputV2Component] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, imports: [CommonModule,
+            ElementWrapperModule,
+            EcabsTimepickerModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsTimeRangeInputV2Component],
+                    imports: [
+                        CommonModule,
+                        ElementWrapperModule,
+                        EcabsTimepickerModule,
+                        FormsModule,
+                    ],
+                    exports: [EcabsTimeRangeInputV2Component],
+                }]
+        }] });
+
+class EcabsChipGroupComponent {
+    options = [];
+    multiple = true;
+    disableRipple = true;
+    selectedChange = new EventEmitter();
+    _value = signal(null);
+    isDisabled = signal(false);
+    chipValueChange(value) {
+        this._value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        this.selectedChange.emit(value);
+    }
+    writeValue(value) {
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipGroupComponent, selector: "ecabs-chip-group", inputs: { options: "options", multiple: "multiple", disableRipple: "disableRipple" }, outputs: { selectedChange: "selectedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EcabsChipGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n                  [disabled]=\"isDisabled()\"\r\n                  [ngModel]=\"_value()\"\r\n                  (ngModelChange)=\"chipValueChange($event)\">\r\n  <div *ngFor=\"let option of options\">\r\n    <mat-chip-option [value]=\"option.value\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [disableRipple]=\"disableRipple\">\r\n      {{ option.label }}\r\n    </mat-chip-option>\r\n  </div>\r\n</mat-chip-listbox>\r\n", styles: [""], dependencies: [{ 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-chip-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EcabsChipGroupComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n                  [disabled]=\"isDisabled()\"\r\n                  [ngModel]=\"_value()\"\r\n                  (ngModelChange)=\"chipValueChange($event)\">\r\n  <div *ngFor=\"let option of options\">\r\n    <mat-chip-option [value]=\"option.value\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [disableRipple]=\"disableRipple\">\r\n      {{ option.label }}\r\n    </mat-chip-option>\r\n  </div>\r\n</mat-chip-listbox>\r\n" }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disableRipple: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+class EcabsChipGroupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupModule, declarations: [EcabsChipGroupComponent], imports: [CommonModule, MatChipsModule, FormsModule], exports: [EcabsChipGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupModule, imports: [CommonModule, MatChipsModule, FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsChipGroupComponent],
+                    imports: [CommonModule, MatChipsModule, FormsModule],
+                    exports: [EcabsChipGroupComponent],
+                }]
+        }] });
+
+class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
+    document;
+    inputRef;
+    visibleOptions = 8.5;
+    autoActiveFirstOption = true;
+    noResultsText = 'No results found';
+    compareFn = Object.is;
+    avatarTemplate;
+    truncateAt = 18;
+    set options(value) {
+        this._options.set(value);
+    }
+    selectionChange = new EventEmitter();
+    termChange = new EventEmitter();
+    inputControl = new FormControl('');
+    normalizedTerm$ = this.inputControl.valueChanges.pipe(startWith(''), map((value) => value ?? ''), distinctUntilChanged());
+    _options = signal([]);
+    _values = signal([]);
+    _term = toSignal(this.normalizedTerm$, { initialValue: '' });
+    destroyRef = inject(DestroyRef);
+    overlayPanelClass = 'ecabs-chip-autocomplete-overlay-panel';
+    isDisabled = signal(false);
+    selectedOptions = computed(() => this.setValidSelectedOptions(this._values(), this._options()));
+    filteredOptions = computed(() => this.setFilteredOptions(this._term(), this._values(), this._options()));
+    noMatchResult = computed(() => !!this._term().trim().length && !this.filteredOptions().length);
+    get options() {
+        return this._options();
+    }
+    constructor(document) {
+        super();
+        this.document = document;
+        this.normalizedTerm$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.termChange.emit(value);
+        });
+    }
+    setOverlayHeight() {
+        const panel = this.document.querySelector(`.${this.overlayPanelClass}`);
+        if (!panel) {
+            return;
+        }
+        panel.style.setProperty('--autocomplete-visible-options', String(this.visibleOptions));
+    }
+    setSelection(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const selectedValue = event.option.value;
+        if (selectedValue?.disabled) {
+            return;
+        }
+        const existingSelection = this._values().some((selectedOption) => this.compareFn(selectedOption, selectedValue.value));
+        if (!existingSelection) {
+            this.updateValues([...this._values(), selectedValue.value]);
+        }
+        this.clearAndRefocusInput();
+    }
+    removeSelection(option) {
+        if (this.isDisabled() || option?.disabled) {
+            return;
+        }
+        const filteredValues = this._values().filter((value) => !this.compareFn(value, option.value));
+        this.updateValues(filteredValues);
+    }
+    trackByFn(_index, option) {
+        return option.value ?? _index;
+    }
+    writeValue(value) {
+        this._values.set(Array.isArray(value) ? value : []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    blur() {
+        this.onTouched();
+    }
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
+    updateValues(values) {
+        this._values.set(values);
+        this.onChange(values);
+        this.selectionChange.emit(values);
+    }
+    clearAndRefocusInput() {
+        this.inputControl.setValue('');
+        this.inputRef?.nativeElement?.focus();
+    }
+    setValidSelectedOptions(selected, options) {
+        if (!selected || !options) {
+            return [];
+        }
+        return selected
+            .map((item) => options.find((option) => this.compareFn(option.value, item)))
+            .filter((value) => !!value);
+    }
+    setFilteredOptions(term, selected, options) {
+        if (!selected || !options) {
+            return [];
+        }
+        const normalizedTerm = term?.toLowerCase() ?? '';
+        return options.filter((option) => {
+            const existingSelection = selected.some((selectedOption) => this.compareFn(selectedOption, option.value));
+            const matchedTerm = option.label?.toLowerCase().includes(normalizedTerm) ||
+                term?.length === 0;
+            return !existingSelection && matchedTerm;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: 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           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\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 disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid [disabled]=\"isDisabled()\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"isDisabled() || 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.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: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-chip-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        EcabsInputModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        ElementWrapperModule,
+                        NgxPhosphorIconsLightFileModule,
+                        MatTooltipModule,
+                        EcabsPipesModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\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 disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid [disabled]=\"isDisabled()\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"isDisabled() || 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" }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputElem']
+            }], visibleOptions: [{
+                type: Input
+            }], autoActiveFirstOption: [{
+                type: Input
+            }], noResultsText: [{
+                type: Input
+            }], compareFn: [{
+                type: Input
+            }], avatarTemplate: [{
+                type: Input
+            }], truncateAt: [{
+                type: Input
+            }], options: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selectionChange: [{
+                type: Output
+            }], termChange: [{
+                type: Output
+            }] } });
+
 class EcabsDateRangePickerHeaderComponentV2 {
     ecabsDatePickerHeaderService;
     selectDateLabel;
@@ -8375,6 +9110,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     maxDateFrom = undefined;
     minDateTo = undefined;
     maxDateTo = undefined;
+    panelClass = 'ecabs-date-range-picker-v2';
     holidayInstance;
     get value() {
         return this.val;
@@ -8456,8 +9192,10 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     ngOnDestroy() {
         this.unsubscribeService.destroy();
     }
-    onChange = () => { };
-    onTouch = () => { };
+    onChange = () => {
+    };
+    onTouch = () => {
+    };
     writeValue(value) {
         this.value = value;
     }
@@ -8534,9 +9272,6 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
                 return;
             }
         }
-        if (!control.errors) {
-            control.setErrors(required ? { required: true } : null);
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, deps: [{ token: i0.Injector }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerComponentV2, selector: "ecabs-date-range-picker-v2", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", startDatePlaceholder: "startDatePlaceholder", endDatePlaceholder: "endDatePlaceholder", separatorLabel: "separatorLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions" }, outputs: { onblur: "onblur" }, providers: [
@@ -8546,7 +9281,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], 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        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\"> </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        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\"> </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .mat-datepicker-input{text-align:center}:host ::ng-deep .mat-calendar-content{padding:0 1.6rem}:host ::ng-deep input{border:none;box-shadow:none}:host ::ng-deep input:focus{outline:none;box-shadow:none}\n"], 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"] }] });
+        ], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, decorators: [{
             type: Component,
@@ -8557,7 +9292,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__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        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\"> </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        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\"> </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .mat-datepicker-input{text-align:center}:host ::ng-deep .mat-calendar-content{padding:0 1.6rem}:host ::ng-deep input{border:none;box-shadow:none}:host ::ng-deep input:focus{outline:none;box-shadow:none}\n"] }]
+                    ], 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" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -8652,5 +9387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, ButtonsV2Component, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
+export { ButtonsComponent, ButtonsV2Component, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsCheckboxV2Component, EcabsCheckboxV2Module, EcabsChipAutocompleteComponent, EcabsChipGroupComponent, EcabsChipGroupModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsInputRangeComponent, EcabsInputRangeModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimeRangeInputV2Component, EcabsTimeRangeInputV2Module, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, FormTimePickerServiceV2, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, NumberToCountryCodePipe, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, getRandomItems, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map