ecabs-components 1.1.4 → 1.1.6

package/fesm2022/ecabs-components.mjs

@@ -50,7 +50,9 @@ import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$3 from '@angular/material/paginator';
 import { map as map$1 } from 'rxjs/operators';
-import * as i3$3 from '@angular/platform-browser';
+import * as i3$3 from '@angular-slider/ngx-slider';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import * as i3$4 from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
 
 class EcabsSpinnerComponent {
@@ -418,6 +420,7 @@ class EcabsComponentsService {
         defaultCountries: [],
         errorMessages: [...errorMessages],
         i18n,
+        claims: [],
     };
     _config = new BehaviorSubject(this.defaultConfig);
     setConfig(config) {
@@ -442,6 +445,16 @@ class EcabsComponentsService {
         }
         this._config.next(updatedConfig);
     }
+    hasClaim(allowedClaims = []) {
+        const userClaims = this._config.getValue().claims ? this._config.getValue().claims.map((appUserClaim) => appUserClaim.claim) : undefined;
+        if (allowedClaims.includes('allow')) {
+            return true;
+        }
+        if (userClaims) {
+            return allowedClaims.every((claim) => userClaims.includes(claim));
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsComponentsService, providedIn: 'root' });
 }
@@ -606,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class DigitsOnlyDirective {
+class EcabsDigitsOnlyDirective {
     el;
     digitsOnly = false;
     allowHyphen = false;
@@ -717,13 +730,13 @@ class DigitsOnlyDirective {
     isValidDecimal(inputString) {
         return inputString.split(this.decimalSeparator).length <= 2;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appDigitsOnly]',
+                    selector: '[ecabsDigitsOnly]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { digitsOnly: [{
                 type: Input
@@ -746,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['paste', ['$event']]
             }] } });
 
-class MinDirective {
+class EcabsMinDirective {
     _validator;
     set mini(value) {
         this._validator = Validators.min(value);
@@ -754,23 +767,23 @@ class MinDirective {
     validate(control) {
         return this._validator(control);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: { mini: "mini" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: { mini: "mini" }, providers: [
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => MinDirective),
+                useExisting: forwardRef(() => EcabsMinDirective),
                 multi: true,
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mini][formControlName],[mini][formControl],[mini][ngModel]',
                     providers: [
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => MinDirective),
+                            useExisting: forwardRef(() => EcabsMinDirective),
                             multi: true,
                         },
                     ],
@@ -778,7 +791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], propDecorators: { mini: [{
                 type: Input
             }] } });
-class MaxDirective {
+class EcabsMaxDirective {
     _validator;
     set maxi(value) {
         this._validator = Validators.max(value);
@@ -786,23 +799,23 @@ class MaxDirective {
     validate(control) {
         return this._validator(control);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: { maxi: "maxi" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: { maxi: "maxi" }, providers: [
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => MinDirective),
+                useExisting: forwardRef(() => EcabsMinDirective),
                 multi: true,
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[maxi][formControlName],[maxi][formControl],[maxi][ngModel]',
                     providers: [
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => MinDirective),
+                            useExisting: forwardRef(() => EcabsMinDirective),
                             multi: true,
                         },
                     ],
@@ -878,7 +891,7 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsInputComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.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: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: MinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: MaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      ecabsDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.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: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, decorators: [{
             type: Component,
@@ -888,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsInputComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      appDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input\r\n      ecabsDigitsOnly\r\n      [digitsOnly]=\"digitsOnly\"\r\n      [decimal]=\"allowDecimal\"\r\n      [allowHyphen]=\"allowHyphen\"\r\n      class=\"form-field__input\"\r\n      [type]=\"type\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      [mini]=\"mini\"\r\n      [maxi]=\"maxi\"\r\n      [disabled]=\"disabled\"\r\n      [maxlength]=\"maxLength\"\r\n      [max]=\"max\"\r\n      [step]=\"step\"\r\n      (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -1002,31 +1015,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class DigitsOnlyDirectivesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirectivesModule, declarations: [DigitsOnlyDirective], imports: [CommonModule], exports: [DigitsOnlyDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirectivesModule, imports: [CommonModule] });
+class EcabsDigitsOnlyDirectivesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirectivesModule, declarations: [EcabsDigitsOnlyDirective], imports: [CommonModule], exports: [EcabsDigitsOnlyDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirectivesModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DigitsOnlyDirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [DigitsOnlyDirective],
-                    exports: [DigitsOnlyDirective],
+                    declarations: [EcabsDigitsOnlyDirective],
+                    exports: [EcabsDigitsOnlyDirective],
                 }]
         }] });
 
-class MinMaxDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinMaxDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MinMaxDirectiveModule, declarations: [MinDirective, MaxDirective], imports: [CommonModule], exports: [MinDirective, MaxDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinMaxDirectiveModule, imports: [CommonModule] });
+class EcabsMinMaxDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinMaxDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinMaxDirectiveModule, declarations: [EcabsMinDirective, EcabsMaxDirective], imports: [CommonModule], exports: [EcabsMinDirective, EcabsMaxDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinMaxDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinMaxDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMinMaxDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [MinDirective, MaxDirective],
-                    exports: [MinDirective, MaxDirective],
+                    declarations: [EcabsMinDirective, EcabsMaxDirective],
+                    exports: [EcabsMinDirective, EcabsMaxDirective],
                 }]
         }] });
 
@@ -1036,14 +1049,14 @@ class EcabsInputModule {
             MatInputModule,
             ElementWrapperModule,
             FormsModule,
-            DigitsOnlyDirectivesModule,
-            MinMaxDirectiveModule], exports: [EcabsInputComponent] });
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule], exports: [EcabsInputComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputModule, imports: [CommonModule,
             MatInputModule,
             ElementWrapperModule,
             FormsModule,
-            DigitsOnlyDirectivesModule,
-            MinMaxDirectiveModule] });
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsMinMaxDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputModule, decorators: [{
             type: NgModule,
@@ -1054,14 +1067,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatInputModule,
                         ElementWrapperModule,
                         FormsModule,
-                        DigitsOnlyDirectivesModule,
-                        MinMaxDirectiveModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsMinMaxDirectiveModule,
                     ],
                     exports: [EcabsInputComponent],
                 }]
         }] });
 
-class TooltipIfTruncatedDirective {
+class EcabsTooltipIfTruncatedDirective {
     matTooltip;
     elementRef;
     classNameTruncatedTooltip;
@@ -1075,13 +1088,13 @@ class TooltipIfTruncatedDirective {
             : this.elementRef.nativeElement;
         this.matTooltip.disabled = element?.scrollWidth <= element?.clientWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirective, deps: [{ token: i1$1.MatTooltip }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: { classNameTruncatedTooltip: "classNameTruncatedTooltip" }, host: { listeners: { "mouseover": "onMouseOver()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirective, deps: [{ token: i1$1.MatTooltip }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: { classNameTruncatedTooltip: "classNameTruncatedTooltip" }, host: { listeners: { "mouseover": "onMouseOver()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[matTooltip][appTooltipIfTruncated]',
+                    selector: '[matTooltip][ecabsTooltipIfTruncated]',
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.MatTooltip }, { type: i0.ElementRef }]; }, propDecorators: { classNameTruncatedTooltip: [{
                 type: Input
@@ -1090,17 +1103,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['mouseover']
             }] } });
 
-class TooltipIfTruncatedDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, declarations: [TooltipIfTruncatedDirective], imports: [CommonModule], exports: [TooltipIfTruncatedDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, imports: [CommonModule] });
+class EcabsTooltipIfTruncatedDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, declarations: [EcabsTooltipIfTruncatedDirective], imports: [CommonModule], exports: [EcabsTooltipIfTruncatedDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipIfTruncatedDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [TooltipIfTruncatedDirective],
-                    exports: [TooltipIfTruncatedDirective],
+                    declarations: [EcabsTooltipIfTruncatedDirective],
+                    exports: [EcabsTooltipIfTruncatedDirective],
                 }]
         }] });
 
@@ -1392,7 +1405,7 @@ class EcabsSelectComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsSelectComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipIfTruncatedDirective, selector: "[matTooltip][appTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                ecabsTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  ecabsTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
             type: Component,
@@ -1402,7 +1415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsSelectComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                appTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  appTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select class=\"form-field__select\"\r\n                [(ngModel)]=\"value\"\r\n                (closed)=\"onTouch()\"\r\n                [id]=\"name\"\r\n                [multiple]=\"multiple\"\r\n                [disabled]=\"disabled\"\r\n                [placeholder]=\"placeholder\"\r\n                [disableRipple]=\"true\"\r\n                (selectionChange)=\"onSelectionChanged($event)\"\r\n                [matTooltip]=\"trigger\"\r\n                ecabsTooltipIfTruncated\r\n                [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n      <mat-select-trigger>\r\n        <span>{{ trigger }}</span>\r\n      </mat-select-trigger>\r\n\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n                               [placeholderLabel]=\"searchFieldPlaceholder\"\r\n                               [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n\r\n      <mat-option *ngIf=\"useNoneOption\"\r\n                  (click)=\"toggleNone()\"\r\n                  (keydown.enter)=\"toggleNone()\">\r\n        {{ noneLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option #allSelected\r\n                  *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n                  (click)=\"toggleAllSelection()\"\r\n                  (keydown.enter)=\"toggleAllSelection()\"\r\n                  [value]=\"selectAllValue\">\r\n        {{ allLabel }}\r\n      </mat-option>\r\n\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n                  [value]=\"item.value\"\r\n                  (click)=\"togglePerOne()\"\r\n                  (keydown.enter)=\"togglePerOne()\"\r\n                  [matTooltip]=\"item.label\"\r\n                  ecabsTooltipIfTruncated\r\n                  [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }]; }, propDecorators: { items: [{
                 type: Input
             }], multiple: [{
@@ -1452,7 +1465,7 @@ class EcabsSelectModule {
             FormsModule,
             NgxMatSelectSearchModule,
             ReactiveFormsModule,
-            TooltipIfTruncatedDirectiveModule], exports: [EcabsSelectComponent] });
+            EcabsTooltipIfTruncatedDirectiveModule], exports: [EcabsSelectComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectModule, providers: [
             {
                 provide: MAT_SELECT_SCROLL_STRATEGY,
@@ -1466,7 +1479,7 @@ class EcabsSelectModule {
             FormsModule,
             NgxMatSelectSearchModule,
             ReactiveFormsModule,
-            TooltipIfTruncatedDirectiveModule] });
+            EcabsTooltipIfTruncatedDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectModule, decorators: [{
             type: NgModule,
@@ -1480,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         NgxMatSelectSearchModule,
                         ReactiveFormsModule,
-                        TooltipIfTruncatedDirectiveModule,
+                        EcabsTooltipIfTruncatedDirectiveModule,
                     ],
                     exports: [EcabsSelectComponent],
                     providers: [
@@ -2244,7 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class NumberBorderDirective {
+class EcabsNumberBorderDirective {
     el;
     maxValue;
     minValue;
@@ -2284,13 +2297,13 @@ class NumberBorderDirective {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: { maxValue: "maxValue", minValue: "minValue" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: { maxValue: "maxValue", minValue: "minValue" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appNumberBorder]',
+                    selector: '[ecabsNumberBorder]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { maxValue: [{
                 type: Input
@@ -2377,7 +2390,7 @@ function createAutoCorrectedDatePipe(dateFormat = 'dd mm yyyy', { minYear = 1, m
     };
 }
 
-class MaskDateDirective {
+class EcabsMaskDateDirective {
     element;
     isDateTimeMask = false;
     considerSeconds = false;
@@ -2461,13 +2474,13 @@ class MaskDateDirective {
         // Check if the string contains any digit between 0 and 9
         return /\d/.test(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MaskDateDirective, selector: "[appMaskDate]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds" }, host: { listeners: { "ngModelChange": "onNgModelChange($event)" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appMaskDate]',
+                    selector: '[ecabsMaskDate]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isDateTimeMask: [{
                 type: Input
@@ -2657,7 +2670,7 @@ class EcabsDateTimePickerComponent 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\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time--inputs\">\r\n            <input\r\n              class=\"form-field__input time\"\r\n              appDigitsOnly\r\n              appNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              appDigitsOnly\r\n              appNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                appDigitsOnly\r\n                appNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<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\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    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -2669,7 +2682,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              appDigitsOnly\r\n              appNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [id]=\"hours\"\r\n              [value]=\"_hours\"\r\n              [maxValue]=\"maxValueHours\"\r\n              [(ngModel)]=\"hours\"\r\n            />\r\n            <span class=\"font-bold\">:</span>\r\n            <input\r\n              class=\"form-field__input time\"\r\n              [id]=\"minutes\"\r\n              [(ngModel)]=\"minutes\"\r\n              appDigitsOnly\r\n              appNumberBorder\r\n              [digitsOnly]=\"true\"\r\n              [maxValue]=\"maxValueMinutesSeconds\"\r\n            />\r\n\r\n            <ng-container *ngIf=\"!hideSeconds\">\r\n              <span class=\"font-bold\">:</span>\r\n              <input\r\n                class=\"form-field__input time\"\r\n                [id]=\"seconds\"\r\n                [(ngModel)]=\"seconds\"\r\n                appDigitsOnly\r\n                appNumberBorder\r\n                [digitsOnly]=\"true\"\r\n                [maxValue]=\"maxValueMinutesSeconds\"\r\n              />\r\n            </ng-container>\r\n          </div>\r\n\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</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\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    <button mat-icon-button class=\"datepicker-ui__toggle text-gray-500\"\r\n            (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</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: { minDate: [{
                 type: Input
             }], maxDate: [{
@@ -2688,31 +2701,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class MaskDateDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirectiveModule, declarations: [MaskDateDirective], imports: [CommonModule], exports: [MaskDateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirectiveModule, imports: [CommonModule] });
+class EcabsMaskDateDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirectiveModule, declarations: [EcabsMaskDateDirective], imports: [CommonModule], exports: [EcabsMaskDateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskDateDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskDateDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [MaskDateDirective],
-                    exports: [MaskDateDirective],
+                    declarations: [EcabsMaskDateDirective],
+                    exports: [EcabsMaskDateDirective],
                 }]
         }] });
 
-class NumberBorderDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirectiveModule, declarations: [NumberBorderDirective], imports: [CommonModule], exports: [NumberBorderDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirectiveModule, imports: [CommonModule] });
+class EcabsNumberBorderDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirectiveModule, declarations: [EcabsNumberBorderDirective], imports: [CommonModule], exports: [EcabsNumberBorderDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberBorderDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNumberBorderDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [NumberBorderDirective],
-                    exports: [NumberBorderDirective],
+                    declarations: [EcabsNumberBorderDirective],
+                    exports: [EcabsNumberBorderDirective],
                 }]
         }] });
 
@@ -2770,9 +2783,9 @@ class EcabsDatetimePickerModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             EcabsDatePickerActionsModule], exports: [EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatetimePickerModule, imports: [CommonModule,
             ElementWrapperModule,
@@ -2783,9 +2796,9 @@ class EcabsDatetimePickerModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             EcabsDatePickerActionsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatetimePickerModule, decorators: [{
@@ -2805,9 +2818,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ReactiveFormsModule,
                         EcabsPickerHeaderModule,
                         EcabsButtonsModule,
-                        DigitsOnlyDirectivesModule,
-                        NumberBorderDirectiveModule,
-                        MaskDateDirectiveModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsNumberBorderDirectiveModule,
+                        EcabsMaskDateDirectiveModule,
                         EcabsDatePickerActionsModule,
                     ],
                     exports: [EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent],
@@ -2981,9 +2994,9 @@ class EcabsDateRangeModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             MatInputModule,
             EcabsDatePickerActionsModule], exports: [EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangeModule, imports: [CommonModule,
@@ -2995,9 +3008,9 @@ class EcabsDateRangeModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             MatInputModule,
             EcabsDatePickerActionsModule] });
 }
@@ -3018,9 +3031,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ReactiveFormsModule,
                         EcabsPickerHeaderModule,
                         EcabsButtonsModule,
-                        DigitsOnlyDirectivesModule,
-                        NumberBorderDirectiveModule,
-                        MaskDateDirectiveModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsNumberBorderDirectiveModule,
+                        EcabsMaskDateDirectiveModule,
                         MatInputModule,
                         EcabsDatePickerActionsModule,
                     ],
@@ -3087,7 +3100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class MaskTimeDirective {
+class EcabsMaskTimeDirective {
     element;
     timeRange = false;
     all;
@@ -3131,13 +3144,13 @@ class MaskTimeDirective {
     ngOnDestroy() {
         this.maskedInputController.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MaskTimeDirective, selector: "[appTime]", inputs: { timeRange: "timeRange", all: "all" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appTime]',
+                    selector: '[ecabsTime]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { timeRange: [{
                 type: Input
@@ -3347,7 +3360,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                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      appTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: MaskTimeDirective, selector: "[appTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -3359,7 +3372,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                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursFrom\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursFrom\"\r\n                />\r\n\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesFrom\"\r\n                  [(ngModel)]=\"minutesFrom\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"time--inputs\"></div>\r\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n            <div class=\"flex flex-col justify-center\">\r\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n              <div class=\"flex gap-2 justify-center items-center\">\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [id]=\"hoursTo\"\r\n                  [maxValue]=\"maxValueHours\"\r\n                  [(ngModel)]=\"hoursTo\"\r\n                />\r\n                <span class=\"font-bold\">:</span>\r\n                <input\r\n                  class=\"form-field__input time\"\r\n                  [id]=\"minutesTo\"\r\n                  [(ngModel)]=\"minutesTo\"\r\n                  appDigitsOnly\r\n                  appNumberBorder\r\n                  [digitsOnly]=\"true\"\r\n                  [maxValue]=\"maxValueMinutesSeconds\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n                                     (apply)=\"onApply()\">\r\n          </ecabs-date-picker-actions>\r\n        </div>\r\n      </mat-datepicker-actions>\r\n    </mat-datepicker>\r\n    <input\r\n      class=\"form-field__input w-full date-input\"\r\n      [id]=\"name\"\r\n      [(ngModel)]=\"pickerValue\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled || controlDate?.disabled\"\r\n      appTime\r\n      [all]=\"allLabel\"\r\n      [timeRange]=\"true\"\r\n      (blur)=\"onTouch()\"\r\n      (blur)=\"blurChange($event)\"\r\n      (keyup)=\"blurChange($event)\"\r\n      (keydown)=\"keydownChange($event)\"\r\n    />\r\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n      <mat-icon>access_time</mat-icon>\r\n    </button>\r\n  </div>\r\n</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]=\"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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { touchUi: [{
                 type: Input
             }], cancelLabel: [{
@@ -3376,17 +3389,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class MaskTimeDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirectiveModule, declarations: [MaskTimeDirective], imports: [CommonModule], exports: [MaskTimeDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirectiveModule, imports: [CommonModule] });
+class EcabsMaskTimeDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirectiveModule, declarations: [EcabsMaskTimeDirective], imports: [CommonModule], exports: [EcabsMaskTimeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskTimeDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMaskTimeDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [MaskTimeDirective],
-                    exports: [MaskTimeDirective],
+                    declarations: [EcabsMaskTimeDirective],
+                    exports: [EcabsMaskTimeDirective],
                 }]
         }] });
 
@@ -3402,11 +3415,11 @@ class EcabsDatetimeRangePickerModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             EcabsDatePickerActionsModule,
-            MaskTimeDirectiveModule], exports: [EcabsDateTimeRangePickerComponent,
+            EcabsMaskTimeDirectiveModule], exports: [EcabsDateTimeRangePickerComponent,
             EcabsDateTimeRangePickerHeaderComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatetimeRangePickerModule, imports: [CommonModule,
             ElementWrapperModule,
@@ -3417,11 +3430,11 @@ class EcabsDatetimeRangePickerModule {
             ReactiveFormsModule,
             EcabsPickerHeaderModule,
             EcabsButtonsModule,
-            DigitsOnlyDirectivesModule,
-            NumberBorderDirectiveModule,
-            MaskDateDirectiveModule,
+            EcabsDigitsOnlyDirectivesModule,
+            EcabsNumberBorderDirectiveModule,
+            EcabsMaskDateDirectiveModule,
             EcabsDatePickerActionsModule,
-            MaskTimeDirectiveModule] });
+            EcabsMaskTimeDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatetimeRangePickerModule, decorators: [{
             type: NgModule,
@@ -3440,11 +3453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ReactiveFormsModule,
                         EcabsPickerHeaderModule,
                         EcabsButtonsModule,
-                        DigitsOnlyDirectivesModule,
-                        NumberBorderDirectiveModule,
-                        MaskDateDirectiveModule,
+                        EcabsDigitsOnlyDirectivesModule,
+                        EcabsNumberBorderDirectiveModule,
+                        EcabsMaskDateDirectiveModule,
                         EcabsDatePickerActionsModule,
-                        MaskTimeDirectiveModule,
+                        EcabsMaskTimeDirectiveModule,
                     ],
                     exports: [
                         EcabsDateTimeRangePickerComponent,
@@ -3507,7 +3520,7 @@ class EcabsIncrementComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsIncrementComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input appDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5)}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5)}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementComponent, decorators: [{
             type: Component,
@@ -3517,7 +3530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsIncrementComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input appDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5)}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"/>\r\n\r\n    <div class=\"incrementor\">\r\n      <mat-icon (click)=\"increment()\">add</mat-icon>\r\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--color-black: #07080d;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-100: #f5f6f9;--color-gray-200: #f8f9f9;--color-gray-300: #d9d9d9;--color-gray-400: #a6a6a6;--color-gray-500: #6b6d73;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #df3838;--color-error-opacity: #fbe4e4;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-warn: #f2994a;--color-warn-rgb: 242, 153, 74;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-warning: #f2994a;--color-warning-opacity: #fdf0e4;--color-success: #25bd3d;--color-success--opacity: #e8f8e5;--color-success-rgb: 37, 189, 61;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5)}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -3535,13 +3548,13 @@ class EcabsIncrementModule {
             MatIconModule,
             ElementWrapperModule,
             FormsModule,
-            DigitsOnlyDirectivesModule], exports: [EcabsIncrementComponent] });
+            EcabsDigitsOnlyDirectivesModule], exports: [EcabsIncrementComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementModule, imports: [CommonModule,
             MatInputModule,
             MatIconModule,
             ElementWrapperModule,
             FormsModule,
-            DigitsOnlyDirectivesModule] });
+            EcabsDigitsOnlyDirectivesModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementModule, decorators: [{
             type: NgModule,
@@ -3553,7 +3566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatIconModule,
                         ElementWrapperModule,
                         FormsModule,
-                        DigitsOnlyDirectivesModule,
+                        EcabsDigitsOnlyDirectivesModule,
                     ],
                     exports: [EcabsIncrementComponent],
                 }]
@@ -4238,7 +4251,7 @@ class EcabsTimepickerComponent extends EcabsElementBaseComponent {
                 useExisting: 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        appTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\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: MaskTimeDirective, selector: "[appTime]", inputs: ["timeRange", "all"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.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        [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        [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: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.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,
@@ -4248,7 +4261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: 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        appTime\r\n        [all]=\"allLabel\"\r\n        (focus)=\"show()\"\r\n        (click)=\"show()\"\r\n        (keydown)=\"inputKeyDown($event)\"\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        [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        [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: { showCloseIcon: [{
                 type: Input
             }], focusedFlag: [{
@@ -4283,11 +4296,11 @@ class EcabsTimepickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerModule, declarations: [EcabsTimepickerComponent, EcabsTimeListPanelComponent], imports: [CommonModule,
             ElementWrapperModule,
-            MaskTimeDirectiveModule,
+            EcabsMaskTimeDirectiveModule,
             FormsModule], exports: [EcabsTimeListPanelComponent, EcabsTimepickerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerModule, imports: [CommonModule,
             ElementWrapperModule,
-            MaskTimeDirectiveModule,
+            EcabsMaskTimeDirectiveModule,
             FormsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimepickerModule, decorators: [{
@@ -4297,7 +4310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     imports: [
                         CommonModule,
                         ElementWrapperModule,
-                        MaskTimeDirectiveModule,
+                        EcabsMaskTimeDirectiveModule,
                         FormsModule,
                     ],
                     exports: [EcabsTimeListPanelComponent, EcabsTimepickerComponent],
@@ -4836,7 +4849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class DynamicBgColorDirective {
+class EcabsDynamicBgColorDirective {
     elementRef;
     params;
     saturation = 36;
@@ -4858,10 +4871,10 @@ class DynamicBgColorDirective {
         const h = hash % 360;
         el.nativeElement.style.backgroundColor = `hsl(${h}, ${this.saturation}%, ${this.lightness}%)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: { params: "params", saturation: "saturation", lightness: "lightness" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: { params: "params", saturation: "saturation", lightness: "lightness" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ecabsDynamicBgColor]',
@@ -4874,17 +4887,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class DynamicBgColorDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirectiveModule, declarations: [DynamicBgColorDirective], imports: [CommonModule], exports: [DynamicBgColorDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirectiveModule, imports: [CommonModule] });
+class EcabsDynamicBgColorDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirectiveModule, declarations: [EcabsDynamicBgColorDirective], imports: [CommonModule], exports: [EcabsDynamicBgColorDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirectiveModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicBgColorDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDynamicBgColorDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: [DynamicBgColorDirective],
-                    exports: [DynamicBgColorDirective],
+                    declarations: [EcabsDynamicBgColorDirective],
+                    exports: [EcabsDynamicBgColorDirective],
                 }]
         }] });
 
@@ -5055,6 +5068,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsCheckPermissionsDirective {
+    elementRef;
+    ecabsComponentsService;
+    permissions;
+    noPermissionMessage;
+    constructor(elementRef, ecabsComponentsService) {
+        this.elementRef = elementRef;
+        this.ecabsComponentsService = ecabsComponentsService;
+    }
+    ngOnInit() {
+        if (!this.ecabsComponentsService.hasClaim(this.permissions)) {
+            if (this.noPermissionMessage) {
+                this.elementRef.nativeElement.innerHTML = this.noPermissionMessage;
+            }
+            else {
+                this.elementRef.nativeElement.remove();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionsDirective, deps: [{ token: i0.ElementRef }, { token: EcabsComponentsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsCheckPermissionsDirective, selector: "[ecabsCheckPermissions]", inputs: { permissions: "permissions", noPermissionMessage: "noPermissionMessage" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsCheckPermissions]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EcabsComponentsService }]; }, propDecorators: { permissions: [{
+                type: Input
+            }], noPermissionMessage: [{
+                type: Input
+            }] } });
+
+class EcabsCheckPermissionDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionDirectiveModule, declarations: [EcabsCheckPermissionsDirective], imports: [CommonModule], exports: [EcabsCheckPermissionsDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckPermissionDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsCheckPermissionsDirective],
+                    exports: [EcabsCheckPermissionsDirective],
+                }]
+        }] });
+
+class EcabsDomObserverDirective {
+    elementRef;
+    domChange = new EventEmitter();
+    changes;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        const element = this.elementRef.nativeElement;
+        this.changes = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => this.domChange.emit(mutation));
+        });
+        this.changes.observe(element, {
+            attributes: true,
+            childList: true,
+        });
+    }
+    ngOnDestroy() {
+        this.changes.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDomObserverDirective, selector: "[ecabsDomObserver]", outputs: { domChange: "domChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsDomObserver]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { domChange: [{
+                type: Output
+            }] } });
+
+class EcabsDomObserverDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirectiveModule, declarations: [EcabsDomObserverDirective], imports: [CommonModule], exports: [EcabsDomObserverDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDomObserverDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsDomObserverDirective],
+                    exports: [EcabsDomObserverDirective],
+                }]
+        }] });
+
+class EcabsFileDropDirective {
+    filesDropped = new EventEmitter();
+    filesHovered = new EventEmitter();
+    onDrop($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.filesDropped.emit($event.dataTransfer.files);
+        this.filesHovered.emit(false);
+    }
+    onDragOver($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.filesHovered.emit(true);
+    }
+    onDragLeave() {
+        this.filesHovered.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsFileDropDirective, selector: "[ecabsFileDrop]", outputs: { filesDropped: "filesDropped", filesHovered: "filesHovered" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsFileDrop]',
+                }]
+        }], propDecorators: { filesDropped: [{
+                type: Output
+            }], filesHovered: [{
+                type: Output
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }] } });
+
+class EcabsFileDropDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirectiveModule, declarations: [EcabsFileDropDirective], imports: [CommonModule], exports: [EcabsFileDropDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsFileDropDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsFileDropDirective],
+                    exports: [EcabsFileDropDirective],
+                }]
+        }] });
+
+class EcabsTimeRangeDirective {
+    element;
+    isDateTimeMask = false;
+    considerSeconds = false;
+    all = "All";
+    maskedInputController;
+    maskDateTime = [/\d/, /\d/, ':', /\d/, /\d/, ' ', '-', ' ', /\d/, /\d/, ':', /\d/, /\d/];
+    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;
+            },
+        });
+    }
+    ngOnDestroy() {
+        this.maskedInputController.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsTimeRange]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isDateTimeMask: [{
+                type: Input
+            }], considerSeconds: [{
+                type: Input
+            }], all: [{
+                type: Input
+            }] } });
+
+class EcabsTimeRangeDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirectiveModule, declarations: [EcabsTimeRangeDirective], imports: [CommonModule], exports: [EcabsTimeRangeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsTimeRangeDirective],
+                    exports: [EcabsTimeRangeDirective],
+                }]
+        }] });
+
+class EcabsUppercaseMaskDirective {
+    control;
+    constructor(control) {
+        this.control = control;
+    }
+    onInput(input) {
+        const position = input.selectionStart;
+        this.control.control.setValue(input.value.toUpperCase());
+        input.setSelectionRange(position, position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirective, deps: [{ token: i5$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsUppercaseMaskDirective, selector: "[formControlName][ecabsUppercaseInput]", host: { listeners: { "input": "onInput($event.target)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formControlName][ecabsUppercaseInput]',
+                }]
+        }], ctorParameters: function () { return [{ type: i5$1.NgControl }]; }, propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target']]
+            }] } });
+
+class EcabsUppercaseMaskDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirectiveModule, declarations: [EcabsUppercaseMaskDirective], imports: [CommonModule], exports: [EcabsUppercaseMaskDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsUppercaseMaskDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsUppercaseMaskDirective],
+                    exports: [EcabsUppercaseMaskDirective],
+                }]
+        }] });
+
+class EcabsAttachEmbeddedViewDirective {
+    viewContainerRef;
+    embeddedTemplate;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.viewContainerRef.createEmbeddedView(this.embeddedTemplate));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsAttachEmbeddedViewDirective, selector: "[ecabsAttachEmbeddedView]", inputs: { embeddedTemplate: "embeddedTemplate" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsAttachEmbeddedView]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { embeddedTemplate: [{
+                type: Input
+            }] } });
+
+class EcabsAttachEmbeddedViewDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirectiveModule, declarations: [EcabsAttachEmbeddedViewDirective], imports: [CommonModule], exports: [EcabsAttachEmbeddedViewDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsAttachEmbeddedViewDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsAttachEmbeddedViewDirective],
+                    exports: [EcabsAttachEmbeddedViewDirective],
+                }]
+        }] });
+
+class EcabsElementMultiplierDirective {
+    templateRef;
+    viewContainer;
+    set appElementMultiplier(times) {
+        for (let i = 0; i < times; i++) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+    }
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsElementMultiplierDirective, selector: "[ecabsElementMultiplier]", inputs: { appElementMultiplier: "appElementMultiplier" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ecabsElementMultiplier]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { appElementMultiplier: [{
+                type: Input
+            }] } });
+
+class EcabsElementMultiplierDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirectiveModule, declarations: [EcabsElementMultiplierDirective], imports: [CommonModule], exports: [EcabsElementMultiplierDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirectiveModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementMultiplierDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [EcabsElementMultiplierDirective],
+                    exports: [EcabsElementMultiplierDirective],
+                }]
+        }] });
+
 class EcabsValidationComponent {
     validations;
     form;
@@ -5146,7 +5472,7 @@ class EcabsProfileComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: { avatar: "avatar", name: "name", title: "title" }, outputs: { avatarChange: "avatarChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable-next-line -->\r\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\r\n  <li class=\"md:mr-3\">\r\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\r\n         class=\"flex h-12 w-12 rounded-full bg-gray-200 items-center justify-center text-white\">\r\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\r\n    </div>\r\n  </li>\r\n\r\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\r\n    <div class=\"font-semibold\">{{ name }}</div>\r\n    <div class=\"text-xs\">{{ title }}</div>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #avatarTpl>\r\n  <!-- eslint-disable-next-line -->\r\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\r\n</ng-template>\r\n\r\n", styles: ["img{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: ["params", "saturation", "lightness"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: { avatar: "avatar", name: "name", title: "title" }, outputs: { avatarChange: "avatarChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable-next-line -->\r\n<ul (click)=\"avatarChange.emit()\" class=\"flex text-black cursor-pointer\">\r\n  <li class=\"md:mr-3\">\r\n    <div *ngIf=\"!useAvatar; else avatarTpl\" ecabsDynamicBgColor [params]=\"name\"\r\n         class=\"flex h-12 w-12 rounded-full bg-gray-200 items-center justify-center text-white\">\r\n      <span class=\"text-xl font-medium\">{{ initials }}</span>\r\n    </div>\r\n  </li>\r\n\r\n  <li class=\"hidden md:flex flex-1 flex-col justify-center\">\r\n    <div class=\"font-semibold\">{{ name }}</div>\r\n    <div class=\"text-xs\">{{ title }}</div>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #avatarTpl>\r\n  <!-- eslint-disable-next-line -->\r\n  <img [src]=\"avatar\" class=\"rounded-full\"/>\r\n</ng-template>\r\n\r\n", styles: ["img{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EcabsDynamicBgColorDirective, selector: "[ecabsDynamicBgColor]", inputs: ["params", "saturation", "lightness"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileComponent, decorators: [{
             type: Component,
@@ -5163,14 +5489,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class EcabsProfileModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, declarations: [EcabsProfileComponent], imports: [CommonModule, DynamicBgColorDirectiveModule], exports: [EcabsProfileComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, imports: [CommonModule, DynamicBgColorDirectiveModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, declarations: [EcabsProfileComponent], imports: [CommonModule, EcabsDynamicBgColorDirectiveModule], exports: [EcabsProfileComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, imports: [CommonModule, EcabsDynamicBgColorDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsProfileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EcabsProfileComponent],
-                    imports: [CommonModule, DynamicBgColorDirectiveModule],
+                    imports: [CommonModule, EcabsDynamicBgColorDirectiveModule],
                     exports: [EcabsProfileComponent],
                 }]
         }] });
@@ -5270,6 +5596,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EcabsSliderComponent extends EcabsElementBaseComponent {
+    injector;
+    slider;
+    max;
+    point;
+    pointsConfig;
+    pointUpdated = new EventEmitter();
+    sliderForm;
+    slideSub;
+    options = {
+        floor: 0,
+        ceil: 0,
+        enforceRange: true,
+        enforceStep: true,
+    };
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    get value() {
+        return this.sliderForm.get('slider').value;
+    }
+    set value(val) {
+        if (val !== undefined && this.value !== val) {
+            this.sliderForm.setValue({ slider: val });
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    ngOnInit() {
+        this.sliderForm = new UntypedFormGroup({
+            slider: new UntypedFormControl({ value: 0 }),
+        });
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+        }
+        this.slideSub = this.sliderForm.valueChanges.subscribe((formVal) => {
+            this.value = formVal?.slider;
+            this.onChange(this.value);
+            this.onTouch(this.value);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['max'] && changes['max']?.currentValue != changes['max']?.previousValue) {
+            this.options = {
+                floor: this.pointsConfig.floor,
+                ceil: this.pointsConfig.ceil,
+                step: this.pointsConfig.step,
+                maxLimit: this.max,
+                tickStep: this.pointsConfig.tickStep,
+                showTicks: true,
+                enforceRange: true,
+                enforceStep: true,
+            };
+        }
+    }
+    onChangeValue($event) {
+        this.pointUpdated.emit($event.value);
+    }
+    ngOnDestroy() {
+        this.slideSub?.unsubscribe();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouch = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSliderComponent, selector: "ecabs-slider", inputs: { max: "max", point: "point", pointsConfig: "pointsConfig" }, outputs: { pointUpdated: "pointUpdated" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: EcabsSliderComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsSliderComponent,
+                            multi: true,
+                        },
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n    <ngx-slider\r\n      #slider\r\n      class=\"custom-slider\"\r\n      [formControlName]=\"'slider'\"\r\n      [value]=\"point\"\r\n      name=\"slider\"\r\n      (userChangeEnd)=\"onChangeValue($event)\"\r\n      [options]=\"options\"\r\n    ></ngx-slider>\r\n  </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { slider: [{
+                type: ViewChild,
+                args: ['slider']
+            }], max: [{
+                type: Input
+            }], point: [{
+                type: Input
+            }], pointsConfig: [{
+                type: Input
+            }], pointUpdated: [{
+                type: Output
+            }] } });
+
+class EcabsSliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, declarations: [EcabsSliderComponent], imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule], exports: [EcabsSliderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsSliderComponent],
+                    imports: [CommonModule, ElementWrapperModule, FormsModule, ReactiveFormsModule, NgxSliderModule],
+                    exports: [EcabsSliderComponent],
+                }]
+        }] });
+
 class EcabsTruncatePipe {
     transform(value, limit = 24, trimAtWords = false, trail = '...') {
         if (trimAtWords) {
@@ -5425,13 +5874,13 @@ class EcabsMenuItemsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i5.MatIconRegistry }, { token: i3$3.DomSanitizer }, { token: i4$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i5.MatIconRegistry }, { token: i3$4.DomSanitizer }, { token: i4$3.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-menu-items', providers: [UnsubscribeService], template: "<ul>\r\n  <li\r\n    *ngFor=\"let item of menuItems; let i = index\"\r\n    class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n    [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n  >\r\n    <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n      [routerLink]=\"item.url ? [item.url] : []\"\r\n      class=\"p-4 flex items-center h-max\"\r\n      [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n    >\r\n      <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n                class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n        {{ item.icon }}\r\n      </mat-icon>\r\n      <span *ngIf=\"!minimizeSidebar\"\r\n            class=\"inline-block align-middle\">\r\n        {{ item.title }}\r\n      </span>\r\n    </a>\r\n    <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n      <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n    </ng-container>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n  <ng-container *ngIf=\"!minimizeSidebar\">\r\n    <ul class=\"ml-12\">\r\n      <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n        <a #rla=\"routerLinkActive\"\r\n           (click)=\"toggleSubItem(item, subItems)\"\r\n           class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n           [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n           [routerLink]=\"item.url ? [item.url] : []\"\r\n           [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n        >\r\n          <span [title]=\"item.title\">\r\n            {{ item.title | truncate: truncateTo }}\r\n          </span>\r\n          <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n            <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n              keyboard_arrow_right\r\n            </mat-icon>\r\n          </div>\r\n        </a>\r\n        <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n  <ul class=\"ml-3\">\r\n    <li *ngFor=\"let item of subItems\">\r\n      <a #rla=\"routerLinkActive\"\r\n         [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n         [routerLink]=\"item.url ? [item.url] : []\"\r\n         [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n         class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n        <span>{{ item.title }}</span>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}\n"] }]
-        }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i5.MatIconRegistry }, { type: i3$3.DomSanitizer }, { type: i4$3.Router }]; }, propDecorators: { menuItems: [{
+        }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i5.MatIconRegistry }, { type: i3$4.DomSanitizer }, { type: i4$3.Router }]; }, propDecorators: { menuItems: [{
                 type: Input
             }], minimizeSidebar: [{
                 type: Input
@@ -5980,5 +6429,5 @@ const removeEmpty = (o, exceptProperties = []) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, DynamicBgColorDirective, DynamicBgColorDirectiveModule, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsSidebarComponent, EcabsSidebarModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTruncatePipe, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, MaskTimeDirective, MaskTimeDirectiveModule, MaxDirective, MinDirective, MinMaxDirectiveModule, TableComponent, TooltipIfTruncatedDirective, TooltipIfTruncatedDirectiveModule, UnsubscribeService, ValidationComponent, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
+export { ButtonsComponent, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, TableComponent, UnsubscribeService, ValidationComponent, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
 //# sourceMappingURL=ecabs-components.mjs.map