ecabs-components 1.1.57 → 1.1.62

package/fesm2022/ecabs-components.mjs

@@ -37,7 +37,7 @@ import Holidays from 'date-holidays';
 import enGbLocale from 'date-fns/locale/en-GB';
 import * as i6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
+import { Maskito } from '@maskito/core';
 import { parsePhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i7$1 from '@angular/material/menu';
@@ -65,10 +65,10 @@ import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import * as i3$5 from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { Platform } from '@angular/cdk/platform';
+import { isEqual as isEqual$1 } from 'lodash';
 import * as i4$6 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { NgxPhosphorIconsLightFileModule } from 'ngx-phosphor-icons';
-import { isEqual as isEqual$1 } from 'lodash';
 
 class EcabsSpinnerComponent {
     size = 'medium';
@@ -219,11 +219,11 @@ class ButtonsV2Component {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "style.width": "this.hostWidth", "class": "this.classAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n  <button \r\n    mat-flat-button \r\n    *ngSwitchCase=\"'flat'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-stroked-button \r\n    *ngSwitchCase=\"'stroked'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    *ngSwitchCase=\"'raised'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-button \r\n    *ngSwitchCase=\"'basic'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner \r\n    size=\"tiny\" \r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "style.width": "this.hostWidth", "class": "this.classAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n  <button \r\n    mat-flat-button \r\n    *ngSwitchCase=\"'flat'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-stroked-button \r\n    *ngSwitchCase=\"'stroked'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    *ngSwitchCase=\"'raised'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-button \r\n    *ngSwitchCase=\"'basic'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner \r\n    size=\"tiny\" \r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\r\n  <button \r\n    mat-flat-button \r\n    *ngSwitchCase=\"'flat'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-stroked-button \r\n    *ngSwitchCase=\"'stroked'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    *ngSwitchCase=\"'raised'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-button \r\n    *ngSwitchCase=\"'basic'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner \r\n    size=\"tiny\" \r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:8px;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"] }]
+            args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\r\n  <button \r\n    mat-flat-button \r\n    *ngSwitchCase=\"'flat'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-stroked-button \r\n    *ngSwitchCase=\"'stroked'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    *ngSwitchCase=\"'raised'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [color]=\"color\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n  <button \r\n    mat-button \r\n    *ngSwitchCase=\"'basic'\" \r\n    [ngClass]=\"buttonClasses\" \r\n    [class]=\"sizeClass\" \r\n    [disabled]=\"disabled\" \r\n    [type]=\"type\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner \r\n    size=\"tiny\" \r\n    *ngIf=\"loading\"\r\n  >\r\n  </ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--small.mat-mdc-outlined-button,.ecabs-button-v2--small.mat-mdc-unelevated-button,.ecabs-button-v2--small.mat-mdc-raised-button{height:32px;min-width:90px;padding:0 12px;font-size:12px;font-weight:600;line-height:18px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-outlined-button,.ecabs-button-v2--medium.mat-mdc-unelevated-button,.ecabs-button-v2--medium.mat-mdc-raised-button{height:40px;min-width:120px;padding:0 16px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--large.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-outlined-button,.ecabs-button-v2--large.mat-mdc-unelevated-button,.ecabs-button-v2--large.mat-mdc-raised-button{height:48px;min-width:140px;padding:0 20px;font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;border-radius:.5rem;text-align:center}.ecabs-button-v2--small.mat-mdc-button,.ecabs-button-v2--medium.mat-mdc-button,.ecabs-button-v2--large.mat-mdc-button{color:var(--color-gray-500)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -298,7 +298,7 @@ class EcabsButtonToggleComponent {
                 useExisting: forwardRef(() => EcabsButtonToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [".ecabs-button-toggle{border-radius:8px;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:8px;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:8px;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:12px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:12px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsButtonToggleComponent, decorators: [{
             type: Component,
@@ -308,7 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsButtonToggleComponent),
                             multi: true,
                         },
-                    ], template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [".ecabs-button-toggle{border-radius:8px;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:8px;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:8px;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:12px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
+                    ], template: "<mat-button-toggle-group\r\n  class=\"ecabs-button-toggle\"\r\n  [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n  [multiple]=\"multiple\"\r\n  [value]=\"value\" \r\n  [disabled]=\"isDisabled\"\r\n  (change)=\"onGroupChange($event)\"\r\n>  \r\n  <mat-button-toggle\r\n    *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"option.disabled\">\r\n    {{ option.label }}\r\n  </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:12px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -589,6 +589,18 @@ const errorMessages = [
         type: 'dateFromMoreThanDateTo',
         message: 'FORMS.VALIDATION.DATE_FROM_MORE_THAN_DATE_TO',
     },
+    {
+        type: 'timeFromRangeRequired',
+        message: 'FORMS.VALIDATION.TIME_FROM_RANGE_REQUIRED',
+    },
+    {
+        type: 'timeToRangeRequired',
+        message: 'FORMS.VALIDATION.TIME_TO_RANGE_REQUIRED',
+    },
+    {
+        type: 'timeFromMoreThanDateTo',
+        message: 'FORMS.VALIDATION.TIME_FROM_MORE_THAN_TIME_TO',
+    },
 ];
 
 const i18n = {
@@ -1274,6 +1286,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsInputRangeComponent extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    toInput;
+    digitsOnly;
+    allowDecimal;
+    allowHyphen;
+    min;
+    max;
+    step;
+    separatorText = 'to';
+    fromPlaceholder = '0';
+    toPlaceholder = 'Any';
+    rangeChange = new EventEmitter();
+    val = { from: null, to: null };
+    isFocused = false;
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.control.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.updateDisabledState();
+            });
+        }
+        this.updateDisabledState();
+    }
+    get value() {
+        return this.val;
+    }
+    set value(v) {
+        if (v !== this.val) {
+            this.val = v;
+            this.onChange(v);
+            this.rangeChange.emit(v);
+        }
+    }
+    setFocus(focus) {
+        this.isFocused = focus;
+    }
+    focusToInput() {
+        this.toInput.nativeElement.focus();
+    }
+    updateValue(key, val) {
+        const num = val === '' || val === null ? null : Number(val);
+        this.value = { ...this.value, [key]: num };
+        this.onTouched();
+    }
+    getFromError(value = this.val) {
+        if (value.from === null) {
+            return null;
+        }
+        const errors = {};
+        if (this.min !== undefined && value.from < this.min) {
+            errors['min'] = { min: this.min, actual: value.from };
+        }
+        if (this.max !== undefined && value.from > this.max) {
+            errors['max'] = { max: this.max, actual: value.from };
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    getToError(value = this.val) {
+        if (value.to === null) {
+            return null;
+        }
+        const errors = {};
+        const effectiveMin = value.from !== null ? value.from : this.min;
+        if (effectiveMin !== undefined && value.to < effectiveMin) {
+            errors['rangeOrder'] = { min: effectiveMin, max: value.to };
+        }
+        if (this.max !== undefined && value.to > this.max) {
+            errors['max'] = { max: this.max, actual: value.to };
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    getIncompleteRangeError(value = this.val) {
+        if (this.min === undefined || this.max === undefined) {
+            return null;
+        }
+        const hasFrom = value.from !== null;
+        const hasTo = value.to !== null;
+        if ((hasFrom && !hasTo) || (!hasFrom && hasTo)) {
+            return { incompleteRange: true };
+        }
+        return null;
+    }
+    get hasAnyError() {
+        return !!(this.control &&
+            this.showValidation &&
+            (this.control.touched ||
+                this.control.dirty ||
+                this.showValidationOnNotTouched) &&
+            this.control.invalid);
+    }
+    validate(control) {
+        const v = control.value;
+        const isEmpty = !v || (v.from === null && v.to === null);
+        if (isEmpty) {
+            const requiredValidator = control.validator?.({});
+            return requiredValidator?.['required'] ? { required: true } : null;
+        }
+        const fromErrors = this.getFromError(v);
+        const toErrors = this.getToError(v);
+        const incompleteRangeErrors = this.getIncompleteRangeError(v);
+        if (!fromErrors && !toErrors && !incompleteRangeErrors) {
+            return null;
+        }
+        return { ...fromErrors, ...toErrors, ...incompleteRangeErrors };
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        this.val = v || { from: null, to: null };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputRangeComponent, selector: "ecabs-input-range", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", min: "min", max: "max", step: "step", separatorText: "separatorText", fromPlaceholder: "fromPlaceholder", toPlaceholder: "toPlaceholder" }, outputs: { rangeChange: "rangeChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: EcabsInputRangeComponent,
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: EcabsInputRangeComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"bg-gray-100 rounded-xl p-4 flex flex-col gap-4\">\r\n    <div\r\n      class=\"form-field__range--wrapper\"\r\n      [class.form-field--invalid]=\"hasAnyError\"\r\n    >\r\n      <input\r\n        #fromInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-from'\"\r\n        [mini]=\"min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"fromPlaceholder\"\r\n        [ngModel]=\"value.from\"\r\n        (ngModelChange)=\"updateValue('from', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n        (keydown.enter)=\"focusToInput()\"\r\n      />\r\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n      <input\r\n        #toInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-to'\"\r\n        [mini]=\"value.from !== null ? value.from : min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"toPlaceholder\"\r\n        [ngModel]=\"value.to\"\r\n        (ngModelChange)=\"updateValue('to', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-input-range', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsInputRangeComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: EcabsInputRangeComponent,
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"bg-gray-100 rounded-xl p-4 flex flex-col gap-4\">\r\n    <div\r\n      class=\"form-field__range--wrapper\"\r\n      [class.form-field--invalid]=\"hasAnyError\"\r\n    >\r\n      <input\r\n        #fromInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-from'\"\r\n        [mini]=\"min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"fromPlaceholder\"\r\n        [ngModel]=\"value.from\"\r\n        (ngModelChange)=\"updateValue('from', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n        (keydown.enter)=\"focusToInput()\"\r\n      />\r\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n      <input\r\n        #toInput\r\n        ecabsDigitsOnly\r\n        [digitsOnly]=\"digitsOnly\"\r\n        [decimal]=\"allowDecimal\"\r\n        [allowHyphen]=\"allowHyphen\"\r\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n        type=\"number\"\r\n        [id]=\"name + '-to'\"\r\n        [mini]=\"value.from !== null ? value.from : min\"\r\n        [maxi]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [placeholder]=\"toPlaceholder\"\r\n        [ngModel]=\"value.to\"\r\n        (ngModelChange)=\"updateValue('to', $event)\"\r\n        (focus)=\"setFocus(true)\"\r\n        (blur)=\"setFocus(false)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { toInput: [{
+                type: ViewChild,
+                args: ['toInput']
+            }], digitsOnly: [{
+                type: Input
+            }], allowDecimal: [{
+                type: Input
+            }], allowHyphen: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], separatorText: [{
+                type: Input
+            }], fromPlaceholder: [{
+                type: Input
+            }], toPlaceholder: [{
+                type: Input
+            }], rangeChange: [{
+                type: Output
+            }] } });
+
+class EcabsInputRangeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, declarations: [EcabsInputRangeComponent], imports: [CommonModule,
+            FormsModule,
+            ElementWrapperModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule,
+            EcabsButtonsV2Module], exports: [EcabsInputRangeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, imports: [CommonModule,
+            FormsModule,
+            ElementWrapperModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule,
+            EcabsButtonsV2Module] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsInputRangeComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ElementWrapperModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsMinMaxDirectiveModule,
+                        EcabsButtonsV2Module
+                    ],
+                    exports: [EcabsInputRangeComponent],
+                }]
+        }] });
+
 class EcabsTooltipIfTruncatedDirective {
     matTooltip;
     elementRef;
@@ -2203,6 +2425,118 @@ const WAYPOINT_SUGGESTIONS2 = [
     },
 ];
 
+class EcabsCheckboxV2Component extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    label = '';
+    showLabel = false;
+    checkboxChanged = new EventEmitter();
+    val = false;
+    get value() {
+        return this.val;
+    }
+    get hasError() {
+        return (!!this.control &&
+            this.control.invalid &&
+            (this.control.touched || this.control.dirty));
+    }
+    set value(value) {
+        if (value !== undefined && this.val !== value) {
+            this.val = value;
+        }
+    }
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.validationLabel = this.label || this.validationLabel;
+            this.control.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.updateDisabledState();
+            });
+        }
+        this.updateDisabledState();
+    }
+    toggle(event) {
+        this.value = !!event.checked;
+        this.onChange(this.value);
+        this.onTouched();
+        this.checkboxChanged.emit(this.value);
+    }
+    onRowClick() {
+        if (!this.disabled) {
+            this.value = !this.value;
+            this.onChange(this.value);
+            this.onTouched();
+            this.checkboxChanged.emit(this.value);
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.onRowClick();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value = !!value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Component, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsCheckboxV2Component, selector: "ecabs-checkbox-v2", inputs: { label: "label", showLabel: "showLabel" }, outputs: { checkboxChanged: "checkboxChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EcabsCheckboxV2Component),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div\r\n    class=\"ecabs-checkbox-v2\"\r\n    [class.ecabs-checkbox-v2--checked]=\"value\"\r\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    (click)=\"onRowClick()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  >\r\n    <span class=\"form-field__label text-base pl-2\">{{ label }}</span>\r\n\r\n    <mat-checkbox\r\n      class=\"ecabs-checkbox-v2__control\"\r\n      [id]=\"name\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [checked]=\"value\"\r\n      color=\"primary\"\r\n      [disableRipple]=\"true\"\r\n      (change)=\"toggle($event)\"\r\n      (blur)=\"onBlur()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-checkbox-v2', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EcabsCheckboxV2Component),
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div\r\n    class=\"ecabs-checkbox-v2\"\r\n    [class.ecabs-checkbox-v2--checked]=\"value\"\r\n    [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n    [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    (click)=\"onRowClick()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  >\r\n    <span class=\"form-field__label text-base pl-2\">{{ label }}</span>\r\n\r\n    <mat-checkbox\r\n      class=\"ecabs-checkbox-v2__control\"\r\n      [id]=\"name\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [checked]=\"value\"\r\n      color=\"primary\"\r\n      [disableRipple]=\"true\"\r\n      (change)=\"toggle($event)\"\r\n      (blur)=\"onBlur()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n    </mat-checkbox>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #075145;--color-success--opacity: #affebf;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-option-label-text-size: 14px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], checkboxChanged: [{
+                type: Output
+            }] } });
+
+class EcabsCheckboxV2Module {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, declarations: [EcabsCheckboxV2Component], imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule], exports: [EcabsCheckboxV2Component] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsCheckboxV2Component],
+                    imports: [CommonModule, ElementWrapperModule, FormsModule, MatIconModule, MatCheckboxModule],
+                    exports: [EcabsCheckboxV2Component],
+                }]
+        }] });
+
 class UnsubscribeService {
     issued = false;
     unsubscribe$;
@@ -2585,168 +2919,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['keyup', ['$event']]
             }] } });
 
-const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function createAutoCorrectedDatePipe(dateFormat = 'dd mm yyyy', { minYear = 1, maxYear = 9999 } = {}) {
-    const dateFormatArray = dateFormat
-        .split(/[^dmyHMS]+/)
-        .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    return function (conformedValue) {
-        const indexesOfPipedChars = [];
-        const maxValue = {
-            dd: 31,
-            mm: 12,
-            yy: 99,
-            yyyy: maxYear,
-            HH: 23,
-            MM: 59,
-            SS: 59,
-        };
-        const minValue = {
-            dd: 1,
-            mm: 1,
-            yy: 0,
-            yyyy: minYear,
-            HH: 0,
-            MM: 0,
-            SS: 0,
-        };
-        const conformedValueArr = conformedValue.split('');
-        // Check first digit
-        dateFormatArray.forEach((format) => {
-            const position = dateFormat.indexOf(format);
-            const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
-            if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
-                conformedValueArr[position + 1] = conformedValueArr[position];
-                conformedValueArr[position] = 0;
-                indexesOfPipedChars.push(position);
-            }
-        });
-        // Check for invalid date
-        let month = 0;
-        const isInvalid = dateFormatArray.some((format) => {
-            const position = dateFormat.indexOf(format);
-            const length = format.length;
-            const textValue = conformedValue
-                .substr(position, length)
-                .replace(/\D/g, '');
-            const value = parseInt(textValue, 10);
-            if (format === 'mm') {
-                // tslint:disable-next-line: strict-boolean-expressions
-                month = value || 0;
-            }
-            const maxValueForFormat = format === 'dd' ? maxValueMonth[month] : maxValue[format];
-            if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
-                const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
-                const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
-                return value < scopedMinValue || value > scopedMaxValue;
-            }
-            if (format === 'HH' || format === 'MM') {
-                const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
-                const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
-                return value < scopedMinValue || value > scopedMaxValue;
-            }
-            return (value > maxValueForFormat ||
-                (textValue.length === length && value < minValue[format]));
-        });
-        if (isInvalid) {
-            return false;
-        }
-        return {
-            value: conformedValueArr.join(''),
-            indexesOfPipedChars,
-        };
+function createTimeRangeMaskOptions() {
+    return {
+        mask: ({ value }) => {
+            const [startValue = '', endValue = ''] = value.split('-');
+            return [
+                ...buildTimeMask(startValue.trim()),
+                ' ',
+                '-',
+                ' ',
+                ...buildTimeMask(endValue.trim()),
+            ];
+        },
+    };
+}
+function createTimeMaskOptions() {
+    return {
+        mask: ({ value }) => {
+            return buildTimeMask(value);
+        },
     };
+}
+function buildTimeMask(value) {
+    const { hoursDigits, minutesDigits } = extractDigits(value);
+    const result = [];
+    result.push(...getHourMask(hoursDigits));
+    result.push(':');
+    result.push(...getMinuteMask(minutesDigits));
+    return result;
+}
+function extractDigits(value) {
+    const [hoursPart = '', minutesPart = ''] = value.split(':');
+    const hoursDigits = hoursPart.replace(/\D/g, '').slice(0, 2);
+    const minutesDigitsFromPart = minutesPart.replace(/\D/g, '').slice(0, 2);
+    if (minutesPart) {
+        return { hoursDigits, minutesDigits: minutesDigitsFromPart };
+    }
+    const digits = value.replace(/\D/g, '');
+    const inferredHours = digits.slice(0, 2);
+    const inferredMinutes = digits.slice(2, 4);
+    return {
+        hoursDigits: hoursDigits || inferredHours,
+        minutesDigits: minutesDigitsFromPart || inferredMinutes,
+    };
+}
+function getHourMask(hoursDigits) {
+    if (hoursDigits.length >= 2) {
+        return get24HourMaskStrict(hoursDigits);
+    }
+    if (!hoursDigits.length) {
+        return [/\d/, /\d?/];
+    }
+    if (hoursDigits.length === 1) {
+        const [h1] = hoursDigits;
+        if (h1 === '0' || h1 === '1') {
+            return [/[0-1]/, /\d?/];
+        }
+        if (h1 === '2') {
+            return [/2/, /[0-3]?/];
+        }
+        return ['0', /[3-9]/];
+    }
+    return [/[0-9]/, /\d?/];
+}
+function get24HourMaskStrict(hoursDigits) {
+    const [h1] = hoursDigits;
+    if (h1 === '2') {
+        return [/2/, /[0-3]/];
+    }
+    if (h1 === '0' || h1 === '1') {
+        return [/[0-1]/, /\d/];
+    }
+    return [/[0-2]/, /[0-3]/];
+}
+function getMinuteMask(minutesDigits) {
+    if (minutesDigits.length >= 2) {
+        return [/[0-5]/, /\d/];
+    }
+    if (minutesDigits.length === 1) {
+        const firstDigit = parseInt(minutesDigits[0], 10);
+        if (firstDigit > 5) {
+            return ['0', /[6-9]/];
+        }
+        return [/[0-5]/, /\d?/];
+    }
+    return [/[0-9]/, /\d?/];
 }
 
 class EcabsMaskDateDirective {
     element;
     isDateTimeMask = false;
     considerSeconds = false;
-    maskedInputController;
-    mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
-    maskDateTime = [
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        ',',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ]; // dd/mm/yyyy, hh:mm
-    maskDateTimeWithSeconds = [
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        '/',
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        ',',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ]; // dd/mm/yyyy, hh:mm:ss
-    config;
+    maskedInput = null;
+    timeMaskOptions = createTimeMaskOptions();
     constructor(element) {
         this.element = element;
     }
-    onNgModelChange(value) {
-        this.config.showMask = true;
-        if (!this.containsNumber(value.toString())) {
-            this.config.showMask = false;
-            this.maskedInputController.textMaskInputElement.update('');
-        }
-    }
     ngOnInit() {
-        this.config = {
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: true,
-            pipe: this.isDateTimeMask
-                ? this.considerSeconds
-                    ? createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM:SS')
-                    : createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM')
-                : createAutoCorrectedDatePipe('dd/mm/yyyy'),
-            keepCharPositions: true,
-            mask: this.isDateTimeMask
-                ? this.considerSeconds
-                    ? this.maskDateTimeWithSeconds
-                    : this.maskDateTime
-                : this.mask,
-        };
-        this.maskedInputController = textMask.maskInput(this.config);
+        this.maskedInput = new Maskito(this.element.nativeElement, {
+            mask: ({ value }) => this.buildDynamicMask(value),
+        });
     }
     ngOnDestroy() {
-        this.maskedInputController?.destroy();
+        this.maskedInput?.destroy();
+    }
+    buildDynamicMask(value) {
+        const digits = value.replace(/\D/g, '');
+        const result = [];
+        result.push(...this.getDaySegment(digits));
+        result.push('/');
+        result.push(...this.getMonthSegment(digits));
+        result.push('/');
+        result.push(/\d/, /\d/, /\d/, /\d/);
+        if (!this.isDateTimeMask) {
+            return result;
+        }
+        const timeValue = this.extractTimeValue(value);
+        const timeMaskOption = this.timeMaskOptions.mask;
+        const timeMaskRaw = typeof timeMaskOption === 'function'
+            ? timeMaskOption({
+                value: timeValue,
+                selection: [timeValue.length, timeValue.length],
+            })
+            : timeMaskOption;
+        const timeMask = Array.isArray(timeMaskRaw) ? timeMaskRaw : [timeMaskRaw];
+        result.push(',', ' ');
+        result.push(...timeMask);
+        if (this.considerSeconds) {
+            result.push(':');
+            result.push(/[0-5]/, /\d/);
+        }
+        return result;
+    }
+    getDaySegment(digits) {
+        const d1 = digits[0];
+        if (d1 === '3') {
+            return [/[0-3]/, /[0-1]/];
+        }
+        return [/[0-3]/, /\d/];
     }
-    containsNumber(value) {
-        // Check if the string contains any digit between 0 and 9
-        return /\d/.test(value);
+    getMonthSegment(digits) {
+        const m1 = digits[2];
+        if (m1 === '1') {
+            return [/[0-1]/, /[0-2]/];
+        }
+        return [/[0-1]/, /\d/];
+    }
+    extractTimeValue(value) {
+        const [, timePart = ''] = value.split(',');
+        return timePart.trimStart();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, host: { listeners: { "ngModelChange": "onNgModelChange($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirective, decorators: [{
             type: Directive,
@@ -2757,9 +3081,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], considerSeconds: [{
                 type: Input
-            }], onNgModelChange: [{
-                type: HostListener,
-                args: ['ngModelChange', ['$event']]
             }] } });
 
 class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
@@ -2793,7 +3114,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
     preventCallSetterPickerValue = false;
     runTimeout = false;
     translationConfig;
-    isEmptyFormat = '_/__/____, __:__';
+    isEmptyFormat = undefined;
     get value() {
         return this.val;
     }
@@ -2810,19 +3131,22 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
         return this._seconds;
     }
     set hours(value) {
-        if (value !== undefined && this._hours !== value) {
-            this._hours = this.roundNumber(+value);
+        if (value === undefined || this._hours === value) {
+            return;
         }
+        this._hours = this.normalizeWithAutoPad(value, 3);
     }
     set minutes(value) {
-        if (value !== undefined && this._minutes !== value) {
-            this._minutes = this.roundNumber(+value);
+        if (value === undefined || this._minutes === value) {
+            return;
         }
+        this._minutes = this.normalizeWithAutoPad(value, 6);
     }
     set seconds(value) {
-        if (value !== undefined && this._seconds !== value) {
-            this._seconds = this.roundNumber(+value);
+        if (value === undefined || this._seconds === value) {
+            return;
         }
+        this._seconds = this.normalizeWithAutoPad(value, 6);
     }
     set value(val) {
         if (val && this.val?.getTime() !== new Date(val).getTime()) {
@@ -2928,7 +3252,24 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
         }
         return result;
     }
-    roundNumber(num) {
+    normalizeWithAutoPad(rawValue, autoPadFrom) {
+        const digits = this.toDigits(rawValue, 2);
+        if (!digits) {
+            return '';
+        }
+        if (digits.length === 1) {
+            const first = parseInt(digits, 10);
+            if (first >= autoPadFrom) {
+                return this.formatTwoDigits(first);
+            }
+            return digits;
+        }
+        return this.formatTwoDigits(parseInt(digits, 10));
+    }
+    toDigits(value, maxLength) {
+        return value?.toString().replace(/\D/g, '').slice(0, maxLength) ?? '';
+    }
+    formatTwoDigits(num) {
         return this.decimalPipe.transform(num, '2.0-0') ?? '00';
     }
     setValues(date) {
@@ -2954,7 +3295,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           [placeholder]=\"placeholder\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           placeholder=\"dd/MM/yyyy, HH:mm\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2966,7 +3307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         },
                         DecimalPipe,
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           [placeholder]=\"placeholder\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              ecabsDigitsOnly\r\n              ecabsNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                ecabsDigitsOnly\r\n                ecabsNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input #matCustomInput\r\n           class=\"form-field__input w-full date-input\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"pickerValue\"\r\n           placeholder=\"dd/MM/yyyy, HH:mm\"\r\n           [disabled]=\"disabled\"\r\n           ecabsMaskDate\r\n           [isDateTimeMask]=\"true\"\r\n           [considerSeconds]=\"!hideSeconds\"\r\n           (blur)=\"onTouch()\"\r\n    />\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n      <mat-icon matDatepickerToggleIcon\r\n                class=\"text-gray-500\">\r\n        calendar_today\r\n      </mat-icon>\r\n    </mat-datepicker-toggle>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -3461,45 +3802,21 @@ class EcabsMaskTimeDirective {
     element;
     timeRange = false;
     all;
-    maskedInputController;
-    maskTimeRange = [
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ' ',
-        '-',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ];
-    maskTime = [/\d/, /\d/, ':', /\d/, /\d/];
+    maskedInput = null;
     constructor(element) {
         this.element = element;
     }
     ngOnInit() {
-        const all = this.all;
-        const timeRange = this.timeRange;
-        this.maskedInputController = textMask.maskInput({
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: false,
-            keepCharPositions: true,
-            mask: timeRange ? this.maskTimeRange : this.maskTime,
-            pipe: function (conformedValue) {
-                if (conformedValue === (timeRange ? '__:__ - __:__' : '__:__')) {
-                    return all;
-                }
-                return conformedValue;
-            },
-        });
+        const options = this.getMaskOptions();
+        this.maskedInput = new Maskito(this.element.nativeElement, options);
     }
     ngOnDestroy() {
-        this.maskedInputController.destroy();
+        this.maskedInput?.destroy();
+    }
+    getMaskOptions() {
+        return this.timeRange
+            ? createTimeRangeMaskOptions()
+            : createTimeMaskOptions();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: { timeRange: "timeRange", all: "all" }, ngImport: i0 });
@@ -3717,7 +4034,7 @@ class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      placeholder=\"00:00 - 00:00\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -3729,7 +4046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         },
                         DecimalPipe,
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker\r\n      (opened)=\"opened()\"\r\n      #picker\r\n      [calendarHeaderComponent]=\"header\"\r\n      [touchUi]=\"touchUi\"\r\n    >\r\n      <mat-datepicker-actions>\r\n        <div class=\"flex flex-col w-full gap-y-4\">\r\n          <div class=\"flex gap-2 justify-center items-center\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"block form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  ecabsDigitsOnly\r\n                  ecabsNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      placeholder=\"00:00 - 00:00\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      ecabsTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { touchUi: [{
                 type: Input
             }], cancelLabel: [{
@@ -5429,7 +5746,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
     dayEndLabel;
     position = {};
     _data = '';
-    inputData = '';
     _timePicker;
     _input;
     listPosition = {};
@@ -5535,30 +5851,8 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
         }
         return undefined;
     }
-    updateInputData(event) {
-        this.inputData = event;
-        this.isHoverItemChanged = false;
-        if (!event) {
-            this.data = event;
-            return;
-        }
-        const newData = this.inputData.replace(new RegExp(/_/gi), '');
-        if (this.checkOutOfRangeNumber(newData)) {
-            this.data = newData;
-        }
-        if (this.data.length === 2 ||
-            (this.data.length === 1 && parseInt(this.data) > 2)) {
-            this.makeHourFull();
-            this.data += ':';
-        }
-    }
     checkSpecialKeys(key) {
         if (key === 'Tab' || key === ' ' || key === ':') {
-            if (!this.data.includes(':') && this.data.length > 0) {
-                this.makeHourFull();
-                this.data += ':';
-                return 'stop';
-            }
             if (key === 'Tab') {
                 return 'tab';
             }
@@ -5588,31 +5882,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
         }
         return false;
     }
-    makeHourFull() {
-        const hourPart = this.data.split(':')[0];
-        const minutePart = this.data.split(':').length > 1 ? this.data.split(':')[1] : '';
-        if (hourPart.length === 1) {
-            this.data = '0' + hourPart + (minutePart ? ':' + minutePart : minutePart);
-        }
-        this.inputData = this.data;
-    }
-    makeMinuteFull() {
-        const hourPart = this.data.split(':')[0];
-        const minutePart = this.data.split(':').length > 1 ? this.data.split(':')[1] : '';
-        if (minutePart.length === 0) {
-            this.data = hourPart + ':00';
-        }
-        if (minutePart.length === 1) {
-            this.data = hourPart + ':' + minutePart + '0';
-        }
-        this.inputData = this.data;
-    }
-    fixTimeToNearest() {
-        if (this.data.length > 0) {
-            this.makeHourFull();
-            this.makeMinuteFull();
-        }
-    }
     //eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, @typescript-eslint/no-empty-function
     onChangeFn = (_) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5644,10 +5913,6 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
     close(val = null) {
         if (val && this.isHoverItemChanged) {
             this.data = val;
-            this.inputData = val;
-        }
-        else {
-            this.fixTimeToNearest();
         }
         this.focusedFlag = false;
         this.control?.markAsTouched();
@@ -5659,7 +5924,7 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
                 useExisting: forwardRef(() => EcabsTimepickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [value]=\"data\"\r\n        [ngModel]=\"data\"\r\n        (ngModelChange)=\"updateInputData($event)\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: ["typedValue", "listPlacement", "listPosition", "dayStartLabel", "dayEndLabel", "appendTo", "min", "max", "showDayStart", "showDayEnd", "position"], outputs: ["onscroll", "closeMe"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [(ngModel)]=\"data\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsTimeListPanelComponent, selector: "ecabs-time-list-panel", inputs: ["typedValue", "listPlacement", "listPosition", "dayStartLabel", "dayEndLabel", "appendTo", "min", "max", "showDayStart", "showDayEnd", "position"], outputs: ["onscroll", "closeMe"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerComponent, decorators: [{
             type: Component,
@@ -5669,7 +5934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsTimepickerComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [value]=\"data\"\r\n        [ngModel]=\"data\"\r\n        (ngModelChange)=\"updateInputData($event)\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"] }]
+                    ], template: "<div [ngClass]=\"{ disabled: disabled }\">\r\n  <ecabs-element-wrapper\r\n    [data]=\"getData()\"\r\n    [showCloseIcon]=\"showCloseIcon\"\r\n    [focusedFlag]=\"focusedFlag\"\r\n    (clear)=\"clearInput()\"\r\n  >\r\n    <div class=\"relative inline-block w-full timeInputFieldWrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-field__input\"\r\n        [(ngModel)]=\"data\"\r\n        [disabled]=\"disabled\"\r\n        ecabsTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\r\n        (blur)=\"onTouchedFn()\"\r\n        [placeholder]=\"placeholder\"\r\n      />\r\n      <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n        <ng-content select=\"mat-icon\"></ng-content>\r\n      </div>\r\n      <ecabs-time-list-panel\r\n        [typedValue]=\"data\"\r\n        *ngIf=\"focusedFlag\"\r\n        [showDayStart]=\"showDayStart\"\r\n        [dayStartLabel]=\"dayStartLabel\"\r\n        [dayEndLabel]=\"dayEndLabel\"\r\n        [showDayEnd]=\"showDayEnd\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        class=\"form-time-list absolute inline-block\"\r\n        [appendTo]=\"appendTo\"\r\n        [listPosition]=\"listPosition\"\r\n        (closeMe)=\"close($event)\"\r\n      ></ecabs-time-list-panel>\r\n    </div>\r\n  </ecabs-element-wrapper>\r\n</div>\r\n", styles: [":host::ng-deep .timeInputWrapper ecabs-element-wrapper .form-field{margin-bottom:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FormTimePickerService }, { type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { focusedFlag: [{
                 type: Input
             }, {
@@ -6652,42 +6917,15 @@ class EcabsTimeRangeDirective {
     isDateTimeMask = false;
     considerSeconds = false;
     all = 'All';
-    maskedInputController;
-    maskDateTime = [
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-        ' ',
-        '-',
-        ' ',
-        /\d/,
-        /\d/,
-        ':',
-        /\d/,
-        /\d/,
-    ];
+    maskedInput = null;
     constructor(element) {
         this.element = element;
     }
     ngOnInit() {
-        this.maskedInputController = textMask.maskInput({
-            inputElement: this.element.nativeElement,
-            guide: true,
-            showMask: false,
-            keepCharPositions: true,
-            mask: this.maskDateTime,
-            pipe: function (conformedValue) {
-                if (conformedValue === '__:__ - __:__') {
-                    return this.all;
-                }
-                return conformedValue;
-            },
-        });
+        this.maskedInput = new Maskito(this.element.nativeElement, createTimeRangeMaskOptions());
     }
     ngOnDestroy() {
-        this.maskedInputController.destroy();
+        this.maskedInput?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeDirective, selector: "[ecabsTimeRange]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds", all: "all" }, ngImport: i0 });
@@ -8381,6 +8619,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class FormTimePickerServiceV2 {
+    config = {
+        dayEnd: 'Day End',
+        dayStart: 'Day Start',
+        iconClass: '',
+    };
+    closeSub = new Subject();
+    setConfig(c) {
+        this.config = Object.assign(this.config, c);
+    }
+    getConfig() {
+        return this.config;
+    }
+    close() {
+        this.closeSub.next(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormTimePickerServiceV2, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
+    injector;
+    destroyRef;
+    showCloseIcon = false;
+    listPlacement = 'auto';
+    appendTo;
+    min;
+    max;
+    showDayStart = true;
+    showDayEnd = false;
+    addSecond = true;
+    dayStartLabel;
+    dayEndLabel;
+    separatorLabel = 'to';
+    startTimePlaceholder;
+    endTimePlaceholder;
+    val;
+    _timeFrom;
+    _timeTo;
+    get value() {
+        return this.val;
+    }
+    get timeFrom() {
+        return this._timeFrom;
+    }
+    get timeTo() {
+        return this._timeTo;
+    }
+    //eslint-disable-next-line
+    set value(val) {
+        if (this.val !== val) {
+            this.val = val;
+            this.timeFrom = val.timeFrom;
+            this.timeTo = val.timeTo;
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    //eslint-disable-next-line
+    set timeFrom(val) {
+        if (this._timeFrom !== val) {
+            this._timeFrom = val;
+            this.onApply();
+        }
+    }
+    //eslint-disable-next-line
+    set timeTo(val) {
+        if (this._timeTo !== val) {
+            this._timeTo = val;
+            this.onApply();
+        }
+    }
+    constructor(injector, destroyRef) {
+        super();
+        this.injector = injector;
+        this.destroyRef = destroyRef;
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+            this.control.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.timeRangeValidator(this.control));
+        }
+    }
+    onChange = () => { };
+    onTouch = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    onApply() {
+        const newValue = {
+            timeFrom: this.timeFrom,
+            timeTo: this.timeTo,
+        };
+        if (!isEqual$1(this.value, newValue)) {
+            this.value = {
+                timeFrom: this.timeFrom,
+                timeTo: this.timeTo,
+            };
+        }
+    }
+    timeRangeValidator(control) {
+        const required = control.hasValidator(Validators.required);
+        if (control.value) {
+            const { timeFrom, timeTo } = control.value;
+            control.setErrors(null);
+            if (required && (!timeFrom || timeFrom?.length === 0) && (!timeTo || timeTo?.length === 0)) {
+                control.setErrors({ required: true });
+                return;
+            }
+            if (!timeFrom && timeTo) {
+                control.setErrors({ timeFromRangeRequired: true });
+                return;
+            }
+            if (timeFrom && !timeTo) {
+                control.setErrors({ timeToRangeRequired: true });
+                return;
+            }
+            if (timeFrom > timeTo) {
+                control.setErrors({ timeFromMoreThanTimeTo: true });
+                return;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeInputV2Component, selector: "ecabs-time-range-input-v2", inputs: { showCloseIcon: "showCloseIcon", listPlacement: "listPlacement", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", addSecond: "addSecond", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", separatorLabel: "separatorLabel", startTimePlaceholder: "startTimePlaceholder", endTimePlaceholder: "endTimePlaceholder" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EcabsTimeRangeInputV2Component),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"startTimePlaceholder\" \r\n      [(ngModel)]=\"timeFrom\" \r\n      [dayStartLabel]=\"dayStartLabel\" \r\n      [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"endTimePlaceholder\" \r\n      [(ngModel)]=\"timeTo\" \r\n      [dayStartLabel]=\"dayStartLabel\"\r\n       [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: EcabsTimepickerComponent, selector: "ecabs-timepicker", inputs: ["focusedFlag", "showCloseIcon", "listPlacement", "appendTo", "min", "max", "showDayStart", "showDayEnd", "addSecond", "dayStartLabel", "dayEndLabel"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-time-range-input-v2', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EcabsTimeRangeInputV2Component),
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"startTimePlaceholder\" \r\n      [(ngModel)]=\"timeFrom\" \r\n      [dayStartLabel]=\"dayStartLabel\" \r\n      [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <ecabs-timepicker \r\n      [label]=\"endTimePlaceholder\" \r\n      [(ngModel)]=\"timeTo\" \r\n      [dayStartLabel]=\"dayStartLabel\"\r\n       [dayEndLabel]=\"dayEndLabel\">\r\n      </ecabs-timepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>", styles: [":host::ng-deep input{border:none;padding:0;text-align:center}:host::ng-deep ecabs-timepicker .form-field{margin:0}:host::ng-deep ecabs-time-list-panel{width:calc(100% + 2rem);margin-left:-1rem;margin-top:calc(.5rem + 1px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { showCloseIcon: [{
+                type: Input
+            }], listPlacement: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], showDayStart: [{
+                type: Input
+            }], showDayEnd: [{
+                type: Input
+            }], addSecond: [{
+                type: Input
+            }], dayStartLabel: [{
+                type: Input
+            }], dayEndLabel: [{
+                type: Input
+            }], separatorLabel: [{
+                type: Input
+            }], startTimePlaceholder: [{
+                type: Input
+            }], endTimePlaceholder: [{
+                type: Input
+            }] } });
+
+class EcabsTimeRangeInputV2Module {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, declarations: [EcabsTimeRangeInputV2Component], imports: [CommonModule,
+            ElementWrapperModule,
+            EcabsTimepickerModule,
+            FormsModule], exports: [EcabsTimeRangeInputV2Component] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, imports: [CommonModule,
+            ElementWrapperModule,
+            EcabsTimepickerModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsTimeRangeInputV2Component],
+                    imports: [
+                        CommonModule,
+                        ElementWrapperModule,
+                        EcabsTimepickerModule,
+                        FormsModule,
+                    ],
+                    exports: [EcabsTimeRangeInputV2Component],
+                }]
+        }] });
+
 class EcabsChipGroupComponent {
     options = [];
     multiple = true;
@@ -8825,9 +9272,6 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
                 return;
             }
         }
-        if (!control.errors) {
-            control.setErrors(required ? { required: true } : null);
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, deps: [{ token: i0.Injector }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerComponentV2, selector: "ecabs-date-range-picker-v2", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", startDatePlaceholder: "startDatePlaceholder", endDatePlaceholder: "endDatePlaceholder", separatorLabel: "separatorLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions" }, outputs: { onblur: "onblur" }, providers: [
@@ -8837,7 +9281,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
                 multi: true,
             },
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "pickerTo", first: true, predicate: ["pickerTo"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "pickerTo", first: true, predicate: ["pickerTo"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, decorators: [{
             type: Component,
@@ -8848,7 +9292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                         },
                         UnsubscribeService,
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -8943,5 +9387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, ButtonsV2Component, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsChipAutocompleteComponent, EcabsChipGroupComponent, EcabsChipGroupModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, NumberToCountryCodePipe, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, getRandomItems, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
+export { ButtonsComponent, ButtonsV2Component, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsCheckboxV2Component, EcabsCheckboxV2Module, EcabsChipAutocompleteComponent, EcabsChipGroupComponent, EcabsChipGroupModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsInputRangeComponent, EcabsInputRangeModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimeRangeInputV2Component, EcabsTimeRangeInputV2Module, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, FormTimePickerServiceV2, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, NumberToCountryCodePipe, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, getRandomItems, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map