ecabs-components 1.0.86 → 1.0.87

package/fesm2022/ecabs-components.mjs

@@ -12,7 +12,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Subscription, combineLatest, map, debounceTime, Subject, takeUntil, first, filter } from 'rxjs';
 import * as i5$1 from '@angular/material/legacy-tooltip';
 import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
-import * as i7 from '@angular/material/form-field';
+import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { Overlay } from '@angular/cdk/overlay';
 import * as i4 from '@angular/material/select';
@@ -22,18 +22,18 @@ import * as i8 from 'ngx-mat-select-search';
 import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@angular/material/core';
+import * as i2$1 from '@angular/material/core';
 import * as i3 from '@angular/material/legacy-checkbox';
 import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
 import * as i4$1 from '@angular/material/legacy-slide-toggle';
 import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { format, isValid, isEqual, parse, setSeconds, setMinutes, setHours } from 'date-fns';
+import { format, isValid, parse, isEqual, setSeconds, setMinutes, setHours } from 'date-fns';
 import Holidays from 'date-holidays';
 import enGbLocale from 'date-fns/locale/en-GB';
-import * as i5$3 from '@angular/material/datepicker';
+import * as i6$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
-import * as i6$1 from 'ngx-mat-intl-tel-input';
+import * as i6$2 from 'ngx-mat-intl-tel-input';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
 import * as i3$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -41,10 +41,10 @@ import * as i4$2 from '@angular/router';
 import { RouterModule, NavigationStart, RouterLink, RouterLinkActive } from '@angular/router';
 import * as i3$2 from '@angular/material/expansion';
 import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
-import * as i7$1 from '@angular/material/chips';
+import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatLegacyTable, MatLegacyTableModule } from '@angular/material/legacy-table';
-import * as i2$1 from '@angular/material/legacy-progress-bar';
+import * as i2$2 from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -1286,7 +1286,7 @@ class EcabsSelectComponent extends ElementBaseComponent {
                 useExisting: EcabsSelectComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
@@ -1708,13 +1708,13 @@ class EcabsPickerHeaderComponent {
         this.calendar.currentView =
             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: i5$3.MatCalendar }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, deps: [{ token: i6$1.MatCalendar }, { token: i2$1.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: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.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: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}.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: i5$3.MatCalendar }, { type: i2.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; } });
+        }], ctorParameters: function () { return [{ type: i6$1.MatCalendar }, { type: i2$1.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; } });
 
 class EcabsDatePickerHeaderComponent {
     ecabsDatePickerHeaderService;
@@ -1737,7 +1737,7 @@ class EcabsDatePickerActionsComponent {
     applyLabel = 'Apply';
     apply = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: { cancelLabel: "cancelLabel", applyLabel: "applyLabel" }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-4\">\r\n  <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDatepickerCancel>\r\n    {{ cancelLabel }}\r\n  </ecabs-buttons>\r\n\r\n  <ecabs-buttons color=\"primary\"\r\n                 matDatepickerApply\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n    {{ applyLabel }}\r\n  </ecabs-buttons>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "directive", type: i5$3.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i5$3.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: { cancelLabel: "cancelLabel", applyLabel: "applyLabel" }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-4\">\r\n  <ecabs-buttons color=\"primary\"\r\n                 [style]=\"'stroked'\"\r\n                 matDatepickerCancel>\r\n    {{ cancelLabel }}\r\n  </ecabs-buttons>\r\n\r\n  <ecabs-buttons color=\"primary\"\r\n                 matDatepickerApply\r\n                 (click)=\"apply.emit()\"\r\n                 (keydown.enter)=\"apply.emit()\">\r\n    {{ applyLabel }}\r\n  </ecabs-buttons>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "directive", type: i6$1.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i6$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerActionsComponent, decorators: [{
             type: Component,
@@ -1750,10 +1750,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+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,
+        };
+    };
+}
+
+class MaskDateDirective {
+    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;
+    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);
+    }
+    ngOnDestroy() {
+        this.maskedInputController?.destroy();
+    }
+    containsNumber(value) {
+        // Check if the string contains any digit between 0 and 9
+        return /\d/.test(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MaskDateDirective, selector: "[appMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, host: { listeners: { "ngModelChange": "onNgModelChange($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appMaskDate]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isDateTimeMask: [{
+                type: Input
+            }], considerSeconds: [{
+                type: Input
+            }], onNgModelChange: [{
+                type: HostListener,
+                args: ['ngModelChange', ['$event']]
+            }] } });
+
 class EcabsDatePickerComponent extends ElementBaseComponent {
     injector;
     ecabsDatePickerHeaderService;
     unsubscribeService;
+    cd;
     minDate;
     maxDate;
     touchUi = false;
@@ -1763,25 +1941,65 @@ class EcabsDatePickerComponent extends ElementBaseComponent {
     excludeWeekends;
     specificDates;
     holidayOptions;
+    applyMinDateAuto = true;
     onblur = new EventEmitter();
     val;
     header = EcabsDatePickerHeaderComponent;
     translationConfig;
+    _date;
+    _pickerValue;
+    preventCallSetterPickerValue = false;
+    runTimeout = false;
     get value() {
         return this.val;
     }
+    get pickerValue() {
+        return this._pickerValue;
+    }
     set value(val) {
         if (this.val !== val && (!val || isValid(new Date(val)))) {
-            this.val = val;
-            this.onChange(val);
-            this.onTouch(val);
+            if (!this.preventCallSetterPickerValue) {
+                this.pickerValue = this.formatDate(val);
+            }
+            this.preventCallSetterPickerValue = false;
         }
     }
-    constructor(injector, ecabsDatePickerHeaderService, unsubscribeService) {
+    set pickerValue(val) {
+        if (val) {
+            const date = parse(val.replace('_', ''), `dd/MM/yyyy`, new Date());
+            if (isValid(date) && this._pickerValue !== val) {
+                if (this.minDate && date < this.minDate && this.applyMinDateAuto) {
+                    this.setValues(this.minDate);
+                    this._pickerValue = val;
+                    this.preventCallSetterPickerValue = true;
+                    this.value = this.minDate;
+                    this.runTimeout = true;
+                    this.refreshPickerValue(this.minDate);
+                    return;
+                }
+                if (this.maxDate && date > this.maxDate) {
+                    this.setValues(this.maxDate);
+                    this._pickerValue = val;
+                    this.preventCallSetterPickerValue = true;
+                    this.value = this.maxDate;
+                    this.runTimeout = true;
+                    this.refreshPickerValue(this.maxDate);
+                    return;
+                }
+                this.runTimeout = false;
+                this._pickerValue = val;
+                this.preventCallSetterPickerValue = true;
+                this.value = date;
+                this.setValues(date);
+            }
+        }
+    }
+    constructor(injector, ecabsDatePickerHeaderService, unsubscribeService, cd) {
         super();
         this.injector = injector;
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
         this.unsubscribeService = unsubscribeService;
+        this.cd = cd;
     }
     ngOnInit() {
         this.ecabsDatePickerHeaderService
@@ -1793,6 +2011,12 @@ class EcabsDatePickerComponent extends ElementBaseComponent {
         const ngControl = this.injector.get(NgControl, null);
         if (ngControl) {
             this.control = ngControl.control;
+            setTimeout(() => {
+                const controlDate = this.control.value;
+                if (controlDate) {
+                    this.setValues(controlDate);
+                }
+            }, 10);
         }
     }
     onChange = () => { };
@@ -1837,15 +2061,40 @@ class EcabsDatePickerComponent extends ElementBaseComponent {
         }
         return result;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerComponent, 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: EcabsDatePickerComponent, selector: "ecabs-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions" }, outputs: { onblur: "onblur" }, providers: [
+    onApply() {
+        if (this._date) {
+            this.value = this._date;
+        }
+    }
+    refreshPickerValue(date) {
+        setTimeout(() => {
+            if (this.runTimeout) {
+                this._pickerValue = this.formatDate(date);
+                this.cd.detectChanges();
+            }
+        }, 3000);
+    }
+    setValues(date) {
+        this.onChange(date);
+        this.onTouch(date);
+        this._date = date;
+    }
+    formatDate(date) {
+        let result = '';
+        if (date && isValid(new Date(date))) {
+            result = format(new Date(date), `dd/MM/yyyy`);
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerComponent, deps: [{ token: i0.Injector }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDatePickerComponent, selector: "ecabs-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions", applyMinDateAuto: "applyMinDateAuto" }, outputs: { onblur: "onblur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: EcabsDatePickerComponent,
                 multi: true,
             },
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle \r\n      matSuffix [for]=\"picker\" \r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker \r\n      [calendarHeaderComponent]=\"header\" \r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions \r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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"], outputs: ["apply"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-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      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n  <mat-datepicker #picker\r\n    [calendarHeaderComponent]=\"header\"\r\n    [touchUi]=\"touchUi\"\r\n  >\r\n    <mat-datepicker-actions>\r\n      <ecabs-date-picker-actions\r\n        [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n        [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        (apply)=\"onApply()\"\r\n      >\r\n      </ecabs-date-picker-actions>\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\"\r\n      appMaskDate\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-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: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerComponent, decorators: [{
             type: Component,
@@ -1856,8 +2105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle \r\n      matSuffix [for]=\"picker\" \r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker \r\n      [calendarHeaderComponent]=\"header\" \r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions \r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</app-element-wrapper>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
+                    ], template: "<app-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      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n  <mat-datepicker #picker\r\n    [calendarHeaderComponent]=\"header\"\r\n    [touchUi]=\"touchUi\"\r\n  >\r\n    <mat-datepicker-actions>\r\n      <ecabs-date-picker-actions\r\n        [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n        [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        (apply)=\"onApply()\"\r\n      >\r\n      </ecabs-date-picker-actions>\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\"\r\n      appMaskDate\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-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: EcabsDatePickerHeaderService }, { type: UnsubscribeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
@@ -1875,6 +2124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], holidayOptions: [{
                 type: Input
+            }], applyMinDateAuto: [{
+                type: Input
             }], onblur: [{
                 type: Output
             }] } });
@@ -1952,183 +2203,6 @@ 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,
-        };
-    };
-}
-
-class MaskDateDirective {
-    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;
-    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);
-    }
-    ngOnDestroy() {
-        this.maskedInputController?.destroy();
-    }
-    containsNumber(value) {
-        // Check if the string contains any digit between 0 and 9
-        return /\d/.test(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MaskDateDirective, selector: "[appMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, host: { listeners: { "ngModelChange": "onNgModelChange($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[appMaskDate]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isDateTimeMask: [{
-                type: Input
-            }], considerSeconds: [{
-                type: Input
-            }], onNgModelChange: [{
-                type: HostListener,
-                args: ['ngModelChange', ['$event']]
-            }] } });
-
 class EcabsDateTimePickerComponent extends ElementBaseComponent {
     injector;
     decimalPipe;
@@ -2308,7 +2382,7 @@ class EcabsDateTimePickerComponent extends ElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<app-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              appDigitsOnly\r\n              appNumberBorder\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              appDigitsOnly\r\n              appNumberBorder\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                appDigitsOnly\r\n                appNumberBorder\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\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      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-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              appDigitsOnly\r\n              appNumberBorder\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              appDigitsOnly\r\n              appNumberBorder\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                appDigitsOnly\r\n                appNumberBorder\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\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      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2579,7 +2653,7 @@ class EcabsDateRangePickerComponent extends ElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input [rangePicker]=\"picker\" (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                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</app-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-container:hover .mat-calendar-body-cell.mat-calendar-body-disabled .mat-calendar-body-cell-content{background-color:transparent!important}.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 .app-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .app-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .app-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .app-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: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i5$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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"], outputs: ["apply"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input [rangePicker]=\"picker\" (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                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</app-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-container:hover .mat-calendar-body-cell.mat-calendar-body-disabled .mat-calendar-body-cell-content{background-color:transparent!important}.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 .app-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .app-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .app-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .app-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: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6$1.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6$1.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponent, decorators: [{
             type: Component,
@@ -2690,7 +2764,8 @@ class EcabsDatePickerModule {
             EcabsPickerHeaderModule,
             MatButtonModule,
             MatInputModule,
-            EcabsDatePickerActionsModule], exports: [EcabsDatePickerComponent, EcabsDatePickerHeaderComponent] });
+            EcabsDatePickerActionsModule,
+            MaskDateDirectiveModule], exports: [EcabsDatePickerComponent, EcabsDatePickerHeaderComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerModule, imports: [CommonModule,
             ElementWrapperModule,
             MatIconModule,
@@ -2700,7 +2775,8 @@ class EcabsDatePickerModule {
             EcabsPickerHeaderModule,
             MatButtonModule,
             MatInputModule,
-            EcabsDatePickerActionsModule] });
+            EcabsDatePickerActionsModule,
+            MaskDateDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerModule, decorators: [{
             type: NgModule,
@@ -2717,6 +2793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatButtonModule,
                         MatInputModule,
                         EcabsDatePickerActionsModule,
+                        MaskDateDirectiveModule,
                     ],
                     exports: [EcabsDatePickerComponent, EcabsDatePickerHeaderComponent],
                 }]
@@ -2998,7 +3075,7 @@ class EcabsDateTimeRangePickerComponent extends ElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<app-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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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      appTime\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</app-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: MaskTimeDirective, selector: "[appTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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                  appDigitsOnly\r\n                  appNumberBorder\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      appTime\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</app-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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: MaskTimeDirective, selector: "[appTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -3315,7 +3392,7 @@ class EcabsPhoneComponent extends ElementBaseComponent {
                 useExisting: EcabsPhoneComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\r\n      <ngx-mat-intl-tel-input\r\n        (focusout)=\"onBlur()\"\r\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\r\n        #phoneInput\r\n        [preferredCountries]=\"preferredCountries\"\r\n        [enablePlaceholder]=\"enablePlaceholder\"\r\n        [enableSearch]=\"enableSearch\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"'phone'\"\r\n        name=\"phone\"\r\n        [inputPlaceholder]=\"placeholder\"\r\n      >\r\n      </ngx-mat-intl-tel-input>\r\n  </form>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i6$1.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "directive", type: i5$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"phoneForm\">\r\n      <ngx-mat-intl-tel-input\r\n        (focusout)=\"onBlur()\"\r\n        [ngClass]=\"{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }\"\r\n        #phoneInput\r\n        [preferredCountries]=\"preferredCountries\"\r\n        [enablePlaceholder]=\"enablePlaceholder\"\r\n        [enableSearch]=\"enableSearch\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"'phone'\"\r\n        name=\"phone\"\r\n        [inputPlaceholder]=\"placeholder\"\r\n      >\r\n      </ngx-mat-intl-tel-input>\r\n  </form>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i6$2.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "directive", type: i5$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPhoneComponent, decorators: [{
             type: Component,
@@ -4034,7 +4111,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)}.inactive{background-color:rgba(var(--color-warn-rgb),.05);color:var(--color-warn)}.draft{background-color:var(--color-gray-200);color:var(--color-gray-500)}.published{background-color:rgba(var(--color-info-rgb),.05);color:var(--color-info)}.active{background-color:rgba(var(--color-success-rgb),.05);color:var(--color-success)}.expired{background-color:rgba(var(--color-error-rgb),.05);color:var(--color-error)}\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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.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)}.inactive{background-color:rgba(var(--color-warn-rgb),.05);color:var(--color-warn)}.draft{background-color:var(--color-gray-200);color:var(--color-gray-500)}.published{background-color:rgba(var(--color-info-rgb),.05);color:var(--color-info)}.active{background-color:rgba(var(--color-success-rgb),.05);color:var(--color-success)}.expired{background-color:rgba(var(--color-error-rgb),.05);color:var(--color-error)}\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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.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,
@@ -4157,7 +4234,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", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatLegacyTable, 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=\"!(isEmptyMessage && isEmpty); 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\r\n      *ngIf=\"!loading\"\r\n      [redirectPath]=\"redirectPath\"\r\n      [isEmptyMessage]=\"isEmptyMessage\"\r\n      [srcImage]=\"srcImageEmpty\"\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$1.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["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", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatLegacyTable, 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=\"!(isEmptyMessage && isEmpty); 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\r\n      *ngIf=\"!loading\"\r\n      [redirectPath]=\"redirectPath\"\r\n      [isEmptyMessage]=\"isEmptyMessage\"\r\n      [srcImage]=\"srcImageEmpty\"\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$2.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["isEmptyMessage", "redirectPath", "srcImage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -4417,7 +4494,7 @@ 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\" [matTooltipDisabled]=\"!flagOnly || !tooltip\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}: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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.MatLegacyTooltip, 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\" [matTooltipDisabled]=\"!flagOnly || !tooltip\">\r\n        <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n        <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n      </div>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n      <div class=\"flex items-center\">\r\n        <span [ngClass]=\"flagClass(lang)\"></span>\r\n        <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n      </div>\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}: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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLanguageSelectorComponent, decorators: [{
             type: Component,
@@ -4560,7 +4637,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$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.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: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.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,
@@ -5297,7 +5374,7 @@ class EcabsMultipleDatesPickerComponent extends ElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-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</app-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}: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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$1.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$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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"], 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: "<app-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</app-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--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: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--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)}: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: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.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.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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"], 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,