ecabs-components 2.0.0-alpha.2 → 2.0.0-alpha.3

package/fesm2022/ecabs-components.mjs

@@ -44,7 +44,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import * as i4$2 from '@angular/router';
 import { RouterModule, NavigationStart, RouterLink, RouterLinkActive } from '@angular/router';
 import * as i3$2 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
 import * as i3$3 from '@angular/material/expansion';
 import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
 import * as i6$2 from '@angular/material/chips';
@@ -2150,17 +2150,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class EcabsDatePickerActionsComponent {
     cancelLabel = 'Cancel';
     applyLabel = 'Apply';
+    isDateRange = false;
+    disabledApplyButton = false;
     apply = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDatePickerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EcabsDatePickerActionsComponent, isStandalone: false, 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$1.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i5$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EcabsDatePickerActionsComponent, isStandalone: false, selector: "ecabs-date-picker-actions", inputs: { cancelLabel: "cancelLabel", applyLabel: "applyLabel", isDateRange: "isDateRange", disabledApplyButton: "disabledApplyButton" }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"grid grid-cols-2 gap-4\">\n  @if (!isDateRange) {\n    <ecabs-buttons color=\"primary\"\n      [style]=\"'stroked'\"\n      matDatepickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n      matDatepickerApply\n      [disabled]=\"disabledApplyButton\"\n      (click)=\"apply.emit()\"\n      (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  }\n  @if (isDateRange) {\n    <ecabs-buttons color=\"primary\"\n      [style]=\"'stroked'\"\n      matDateRangePickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n      matDateRangePickerApply\n      [disabled]=\"disabledApplyButton\"\n      (click)=\"apply.emit()\"\n      (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "directive", type: i5$1.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i5$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDatePickerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-date-picker-actions', standalone: false, 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" }]
+            args: [{ selector: 'ecabs-date-picker-actions', standalone: false, template: "<div class=\"grid grid-cols-2 gap-4\">\n  @if (!isDateRange) {\n    <ecabs-buttons color=\"primary\"\n      [style]=\"'stroked'\"\n      matDatepickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n      matDatepickerApply\n      [disabled]=\"disabledApplyButton\"\n      (click)=\"apply.emit()\"\n      (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  }\n  @if (isDateRange) {\n    <ecabs-buttons color=\"primary\"\n      [style]=\"'stroked'\"\n      matDateRangePickerCancel>\n      {{ cancelLabel }}\n    </ecabs-buttons>\n    <ecabs-buttons color=\"primary\"\n      matDateRangePickerApply\n      [disabled]=\"disabledApplyButton\"\n      (click)=\"apply.emit()\"\n      (keydown.enter)=\"apply.emit()\">\n      {{ applyLabel }}\n    </ecabs-buttons>\n  }\n</div>\n" }]
         }], propDecorators: { cancelLabel: [{
                 type: Input
             }], applyLabel: [{
                 type: Input
+            }], isDateRange: [{
+                type: Input
+            }], disabledApplyButton: [{
+                type: Input
             }], apply: [{
                 type: Output
             }] } });
@@ -2180,9 +2186,11 @@ class EcabsDatePickerComponent extends EcabsElementBaseComponent {
     specificDates;
     holidayOptions;
     onblur = new EventEmitter();
+    datepicker;
     val;
     header = EcabsDatePickerHeaderComponent;
     translationConfig;
+    disabledApplyButton = true;
     get value() {
         return this.val;
     }
@@ -2210,6 +2218,21 @@ class EcabsDatePickerComponent extends EcabsElementBaseComponent {
         if (ngControl) {
             this.control = ngControl.control;
         }
+        this.datepicker?.openedStream
+            .asObservable()
+            .pipe(takeUntil(this.unsubscribeService.subscription()))
+            .subscribe(() => {
+            setTimeout(() => {
+                const calendar = this.datepicker._componentRef?.instance
+                    ._calendar;
+                calendar?._userSelection
+                    .asObservable()
+                    .pipe(takeUntil(this.unsubscribeService.subscription()))
+                    .subscribe((lastChosenDate) => {
+                    this.disabledApplyButton = !lastChosenDate.value;
+                });
+            }, 100);
+        });
     }
     onChange = () => { };
     onTouch = () => { };
@@ -2261,7 +2284,7 @@ class EcabsDatePickerComponent extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n          [disabledApplyButton]=\"disabledApplyButton\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDatePickerComponent, decorators: [{
             type: Component,
@@ -2272,7 +2295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      class=\"form-field__input date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [matDatepickerFilter]=\"filterDateRange\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker-toggle\r\n      matSuffix [for]=\"picker\"\r\n      class=\"text-gray-500\"\r\n    >\r\n      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions\r\n          [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n          [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n          [disabledApplyButton]=\"disabledApplyButton\"\r\n        >\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }], propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -2293,6 +2316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], onblur: [{
                 type: Output
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['picker']
             }] } });
 
 class EcabsDateTimePickerHeaderComponent {
@@ -2739,7 +2765,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n        <mat-datepicker-actions>\r\n          <div class=\"actions\">\r\n            <div class=\"time--inputs\">\r\n              <input\r\n                class=\"form-field__input time\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [id]=\"hours\"\r\n                [value]=\"_hours\"\r\n                [maxValue]=\"maxValueHours\"\r\n                [(ngModel)]=\"hours\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutes\"\r\n                  [(ngModel)]=\"minutes\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                  />\r\n\r\n                  @if (!hideSeconds) {\r\n                    <span class=\"font-bold\">:</span>\r\n                    <input\r\n                      class=\"form-field__input time\"\r\n                      [id]=\"seconds\"\r\n                      [(ngModel)]=\"seconds\"\r\n                      ecabsDigitsOnly\r\n                      ecabsNumberBorder\r\n                      [digitsOnly]=\"true\"\r\n                      [maxValue]=\"maxValueMinutesSeconds\"\r\n                      />\r\n                    }\r\n                  </div>\r\n\r\n                  <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                    [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                    (apply)=\"onApply()\">\r\n                  </ecabs-date-picker-actions>\r\n                </div>\r\n              </mat-datepicker-actions>\r\n            </mat-datepicker>\r\n            <input #matCustomInput\r\n              class=\"form-field__input w-full date-input\"\r\n              [id]=\"name\"\r\n              [(ngModel)]=\"pickerValue\"\r\n              [placeholder]=\"placeholder\"\r\n              [disabled]=\"disabled\"\r\n              ecabsMaskDate\r\n              [isDateTimeMask]=\"true\"\r\n              [considerSeconds]=\"!hideSeconds\"\r\n              (blur)=\"onTouch()\"\r\n              />\r\n\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n                <mat-icon matDatepickerToggleIcon\r\n                  class=\"text-gray-500\">\r\n                  calendar_today\r\n                </mat-icon>\r\n              </mat-datepicker-toggle>\r\n            </div>\r\n          </ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n        <mat-datepicker-actions>\r\n          <div class=\"actions\">\r\n            <div class=\"time--inputs\">\r\n              <input\r\n                class=\"form-field__input time\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [id]=\"hours\"\r\n                [value]=\"_hours\"\r\n                [maxValue]=\"maxValueHours\"\r\n                [(ngModel)]=\"hours\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutes\"\r\n                  [(ngModel)]=\"minutes\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                  />\r\n\r\n                  @if (!hideSeconds) {\r\n                    <span class=\"font-bold\">:</span>\r\n                    <input\r\n                      class=\"form-field__input time\"\r\n                      [id]=\"seconds\"\r\n                      [(ngModel)]=\"seconds\"\r\n                      ecabsDigitsOnly\r\n                      ecabsNumberBorder\r\n                      [digitsOnly]=\"true\"\r\n                      [maxValue]=\"maxValueMinutesSeconds\"\r\n                      />\r\n                    }\r\n                  </div>\r\n\r\n                  <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                    [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                    (apply)=\"onApply()\">\r\n                  </ecabs-date-picker-actions>\r\n                </div>\r\n              </mat-datepicker-actions>\r\n            </mat-datepicker>\r\n            <input #matCustomInput\r\n              class=\"form-field__input w-full date-input\"\r\n              [id]=\"name\"\r\n              [(ngModel)]=\"pickerValue\"\r\n              [placeholder]=\"placeholder\"\r\n              [disabled]=\"disabled\"\r\n              ecabsMaskDate\r\n              [isDateTimeMask]=\"true\"\r\n              [considerSeconds]=\"!hideSeconds\"\r\n              (blur)=\"onTouch()\"\r\n              />\r\n\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n                <mat-icon matDatepickerToggleIcon\r\n                  class=\"text-gray-500\">\r\n                  calendar_today\r\n                </mat-icon>\r\n              </mat-datepicker-toggle>\r\n            </div>\r\n          </ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2921,6 +2947,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+const dateRangeValidator = (control) => {
+    if (control.value) {
+        const { dateFrom, dateTo } = control.value;
+        control.setErrors(null);
+        if (!dateFrom && dateTo) {
+            return { dateFromRangeRequired: true };
+        }
+        if (dateFrom && !dateTo) {
+            return { dateToRangeRequired: true };
+        }
+        if (dateFrom > dateTo) {
+            return { dateFromMoreThanDateTo: true };
+        }
+    }
+    return null;
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
     injector;
@@ -2935,10 +2978,12 @@ class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
     endDatePlaceholder;
     onblur = new EventEmitter();
     val;
+    datepicker;
     header = EcabsDateRangePickerHeaderComponent;
     _dateFrom;
     _dateTo;
     translationConfig;
+    disabledApplyButton = true;
     get value() {
         return this.val;
     }
@@ -2990,6 +3035,36 @@ class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
                 this.dateTo = this.value.dateTo;
             });
         }
+        this.datepicker?.openedStream
+            .asObservable()
+            .pipe(takeUntil(this.unsubscribeService.subscription()))
+            .subscribe(() => {
+            setTimeout(() => {
+                const calendar = this.datepicker._componentRef?.instance
+                    ._calendar;
+                calendar?._userSelection
+                    .asObservable()
+                    .pipe(takeUntil(this.unsubscribeService.subscription()))
+                    .subscribe((lastChosenDate) => {
+                    let startRange;
+                    let endRange;
+                    const { start, end } = calendar.selected ?? {};
+                    if (lastChosenDate.value && (!start || (start && end))) {
+                        startRange = lastChosenDate.value;
+                    }
+                    if (lastChosenDate.value && start && !end) {
+                        startRange = start;
+                    }
+                    if (start > lastChosenDate.value) {
+                        startRange = lastChosenDate.value;
+                    }
+                    else if (lastChosenDate.value && start && !end) {
+                        endRange = lastChosenDate.value;
+                    }
+                    this.disabledApplyButton = !(startRange && endRange);
+                });
+            }, 100);
+        });
     }
     onChange = () => { };
     onTouch = () => { };
@@ -3018,8 +3093,13 @@ class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsDateRangePickerComponent,
                 multi: true,
             },
+            {
+                provide: NG_VALIDATORS,
+                useValue: dateRangeValidator,
+                multi: true,
+            },
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--color-black: #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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   [isDateRange]=\"true\"\r\n                                   [disabledApplyButton]=\"disabledApplyButton\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important;font-size:1rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--color-black: #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: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDateRangePickerComponent, decorators: [{
             type: Component,
@@ -3029,8 +3109,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: EcabsDateRangePickerComponent,
                             multi: true,
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useValue: dateRangeValidator,
+                            multi: true,
+                        },
                         UnsubscribeService,
-                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--color-black: #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"] }]
+                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <mat-date-range-input \r\n      [rangePicker]=\"picker\" \r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\" \r\n      (blur)=\"onTouch()\">\r\n      <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n      <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                   [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                   [isDateRange]=\"true\"\r\n                                   [disabledApplyButton]=\"disabledApplyButton\"\r\n                                   (apply)=\"onApply()\">\r\n        </ecabs-date-picker-actions>\r\n      </mat-datepicker-actions>\r\n    </mat-date-range-picker>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important;font-size:1rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--color-black: #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"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }], propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -3047,6 +3132,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], onblur: [{
                 type: Output
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['picker']
             }] } });
 
 const MATERIAL_DATETIMEPICKER_FORMATS = {
@@ -3439,7 +3527,7 @@ class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -4848,6 +4936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class EcabsRadioButtonListComponent extends EcabsElementBaseComponent {
     injector;
+    matRadioGroup;
     items;
     direction = 'horizontal';
     changed = new EventEmitter();
@@ -4890,7 +4979,7 @@ class EcabsRadioButtonListComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsRadioButtonListComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-radio-group\r\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    [id]=\"name\"\r\n    (change)=\"changed.emit($event.value)\"\r\n    >\r\n    @for (item of items; track item) {\r\n      <mat-radio-button\r\n        [disabled]=\"item.disabled\"\r\n        [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n        class=\"mr-4\"\r\n        [value]=\"item.value\"\r\n        >\r\n        {{ item.label }}\r\n      </mat-radio-button>\r\n    }\r\n  </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "matRadioGroup", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-radio-group\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [id]=\"name\"\n    [name]=\"name\"\n    (change)=\"changed.emit($event)\"\n    >\n    @for (item of items; track item) {\n      <mat-radio-button\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\n        class=\"mr-4\"\n        [value]=\"item.value\"\n        >\n        {{ item.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</ecabs-element-wrapper>", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsRadioButtonListComponent, decorators: [{
             type: Component,
@@ -4900,8 +4989,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: EcabsRadioButtonListComponent,
                             multi: true,
                         },
-                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-radio-group\r\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n    [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\"\r\n    [id]=\"name\"\r\n    (change)=\"changed.emit($event.value)\"\r\n    >\r\n    @for (item of items; track item) {\r\n      <mat-radio-button\r\n        [disabled]=\"item.disabled\"\r\n        [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n        class=\"mr-4\"\r\n        [value]=\"item.value\"\r\n        >\r\n        {{ item.label }}\r\n      </mat-radio-button>\r\n    }\r\n  </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { items: [{
+                    ], standalone: false, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <mat-radio-group\n    [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [id]=\"name\"\n    [name]=\"name\"\n    (change)=\"changed.emit($event)\"\n    >\n    @for (item of items; track item) {\n      <mat-radio-button\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\n        class=\"mr-4\"\n        [value]=\"item.value\"\n        >\n        {{ item.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</ecabs-element-wrapper>", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { matRadioGroup: [{
+                type: ViewChild,
+                args: [MatRadioGroup, { static: false }]
+            }], items: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -5743,7 +5835,6 @@ class EcabsDialogConfirmComponent {
     }
     translations;
     ngOnInit() {
-        this.dialogRef.updateSize(this.data.width || '24rem');
         this.componentsService
             .getConfig()
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -7506,7 +7597,7 @@ class EcabsMultipleDatesPickerComponent extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <mat-chip-grid\r\n      #chipList aria-label=\"Choose a date\"\r\n      (click)=\"picker.open()\"\r\n      class=\"w-full\"\r\n      >\r\n      @for (value of model; track value) {\r\n        <mat-chip-option\r\n          class=\"form-field__input\"\r\n          [selectable]=\"false\" [removable]=\"true\"\r\n          (removed)=\"remove(value)\"\r\n          >\r\n          {{ value | date: 'dd/MM/yyyy' }}\r\n          @if (true) {\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          }\r\n        </mat-chip-option>\r\n      }\r\n      <input\r\n        class=\"form-field__input fake-input\"\r\n        [value]=\"resetModel\"\r\n        [(ngModel)]=\"value\"\r\n        [matDatepicker]=\"picker\"\r\n        placeholder=\"Select dates\"\r\n        (dateChange)=\"dateChanged($event)\"\r\n        [matChipInputFor]=\"chipList\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        />\r\n      </mat-chip-grid>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker\r\n        #picker\r\n        [calendarHeaderComponent]=\"header\"\r\n        [touchUi]=\"touchUi\"\r\n        [dateClass]=\"dateClass\"\r\n        >\r\n        <mat-datepicker-actions>\r\n          <ecabs-date-picker-actions\r\n            [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n            [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n            >\r\n          </ecabs-date-picker-actions>\r\n        </mat-datepicker-actions>\r\n      </mat-datepicker>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #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: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i6$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <mat-chip-grid\r\n      #chipList aria-label=\"Choose a date\"\r\n      (click)=\"picker.open()\"\r\n      class=\"w-full\"\r\n      >\r\n      @for (value of model; track value) {\r\n        <mat-chip-option\r\n          class=\"form-field__input\"\r\n          [selectable]=\"false\" [removable]=\"true\"\r\n          (removed)=\"remove(value)\"\r\n          >\r\n          {{ value | date: 'dd/MM/yyyy' }}\r\n          @if (true) {\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          }\r\n        </mat-chip-option>\r\n      }\r\n      <input\r\n        class=\"form-field__input fake-input\"\r\n        [value]=\"resetModel\"\r\n        [(ngModel)]=\"value\"\r\n        [matDatepicker]=\"picker\"\r\n        placeholder=\"Select dates\"\r\n        (dateChange)=\"dateChanged($event)\"\r\n        [matChipInputFor]=\"chipList\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        />\r\n      </mat-chip-grid>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker\r\n        #picker\r\n        [calendarHeaderComponent]=\"header\"\r\n        [touchUi]=\"touchUi\"\r\n        [dateClass]=\"dateClass\"\r\n        >\r\n        <mat-datepicker-actions>\r\n          <ecabs-date-picker-actions\r\n            [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n            [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n            >\r\n          </ecabs-date-picker-actions>\r\n        </mat-datepicker-actions>\r\n      </mat-datepicker>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #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: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i6$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsMultipleDatesPickerComponent, decorators: [{
             type: Component,
@@ -7698,9 +7789,87 @@ var WaypointTypeEnum;
     WaypointTypeEnum["LOCATION"] = "LOCATION";
 })(WaypointTypeEnum || (WaypointTypeEnum = {}));
 
+class EcabsDialogConfirmationDeletionComponent {
+    dialogRef;
+    data;
+    fb;
+    componentsService;
+    destroyRef;
+    form;
+    color = 'warn';
+    constructor(dialogRef, data, fb, componentsService, destroyRef) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.fb = fb;
+        this.componentsService = componentsService;
+        this.destroyRef = destroyRef;
+    }
+    ngOnInit() {
+        this.form = this.fb.group({
+            name: [null, Validators.required],
+        });
+        this.componentsService
+            .getConfig()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((config) => {
+            const { i18n } = config ?? {};
+            const { confirmLabel, cancelLabel } = this.data ?? {};
+            if (i18n) {
+                this.data.confirmLabel = confirmLabel || i18n?.confirmLabel;
+                this.data.cancelLabel = cancelLabel || i18n?.cancelLabel;
+            }
+        });
+    }
+    onConfirm() {
+        this.dialogRef.close(true);
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.UntypedFormBuilder }, { token: EcabsComponentsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EcabsDialogConfirmationDeletionComponent, isStandalone: false, selector: "ecabs-dialog-confirm-deletion", ngImport: i0, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    @if (data.alertText && data.alertText.length > 0) {\n      <div class=\"alert-item\">\n        <span class=\"alert-text\">\n          {{ data.alertText }}\n        </span>\n      </div>\n    }\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n      >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: EcabsInputComponent, selector: "ecabs-input", inputs: ["digitsOnly", "allowDecimal", "allowHyphen", "max", "mini", "maxi", "step"], outputs: ["onblur"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-dialog-confirm-deletion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    @if (data.alertText && data.alertText.length > 0) {\n      <div class=\"alert-item\">\n        <span class=\"alert-text\">\n          {{ data.alertText }}\n        </span>\n      </div>\n    }\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n      >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2.UntypedFormBuilder }, { type: EcabsComponentsService }, { type: i0.DestroyRef }] });
+
+class EcabsDialogConfirmDeletionModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmDeletionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmDeletionModule, declarations: [EcabsDialogConfirmationDeletionComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatDialogModule,
+            EcabsButtonsModule,
+            EcabsInputModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmDeletionModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatDialogModule,
+            EcabsButtonsModule,
+            EcabsInputModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EcabsDialogConfirmDeletionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsDialogConfirmationDeletionComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatDialogModule,
+                        EcabsButtonsModule,
+                        EcabsInputModule,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, TableComponent, UnsubscribeService, ValidationComponent, WaypointTypeEnum, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
+export { ButtonsComponent, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, TableComponent, UnsubscribeService, ValidationComponent, WaypointTypeEnum, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map