ecabs-components 0.0.43 → 0.0.44

package/fesm2020/ecabs-components.mjs

@@ -1787,6 +1787,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class TimeRangeDirective {
+    constructor(element) {
+        this.element = element;
+        this.isDateTimeMask = false;
+        this.considerSeconds = false;
+        this.maskDateTime = [/\d/, /\d/, ':', /\d/, /\d/, ' ', '-', ' ', /\d/, /\d/, ':', /\d/, /\d/];
+    }
+    ngOnInit() {
+        const all = this.all;
+        this.maskedInputController = textMask.maskInput({
+            inputElement: this.element.nativeElement,
+            guide: true,
+            showMask: false,
+            keepCharPositions: true,
+            mask: this.maskDateTime,
+            pipe: function (conformedValue) {
+                if (conformedValue === '__:__ - __:__') {
+                    return all;
+                }
+                return conformedValue;
+            },
+        });
+    }
+    ngOnDestroy() {
+        this.maskedInputController.destroy();
+    }
+}
+TimeRangeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeRangeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TimeRangeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TimeRangeDirective, selector: "[appTimeRange]", inputs: { isDateTimeMask: "isDateTimeMask", considerSeconds: "considerSeconds", all: "all" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appTimeRange]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isDateTimeMask: [{
+                type: Input
+            }], considerSeconds: [{
+                type: Input
+            }], all: [{
+                type: Input
+            }] } });
+
 class EcabsDateTimeRangePickerComponent extends ElementBaseComponent {
     constructor(injector, decimalPipe) {
         super();
@@ -1938,7 +1980,7 @@ EcabsDateTimeRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             multi: true,
         },
         DecimalPipe,
-    ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n    <div class=\"form-field__input--wrapper w-full\">\r\n      <input\r\n        class=\"fake-input\"\r\n        [id]=\"_date\"\r\n        [(ngModel)]=\"_date\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || controlDate?.disabled\"\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker  (opened)=\"opened()\"  #picker [calendarHeaderComponent]=\"header\" [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}}</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}}</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            <div class=\"grid-picker-actions\">\r\n              <button type=\"button\" mat-stroked-button class=\"w-full cancel-button\" color=\"primary\" matDatepickerCancel>\r\n                {{ cancleLabel }}\r\n              </button>\r\n  \r\n              <button\r\n                type=\"button\"\r\n                mat-button\r\n                class=\"w-full ml-0 apply-button\"\r\n                color=\"primary\"\r\n                matDatepickerApply\r\n                (click)=\"onApply()\"\r\n              >\r\n                {{ applyLabel }}\r\n              </button>\r\n            </div>\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        appTimeRange\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=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n        <mat-icon>access_time</mat-icon>\r\n      </button>\r\n    </div>\r\n  </app-element-wrapper>\r\n  \r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.75rem)}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}:host ::ng-deep .mat-datepicker-content .mat-calendar{height:50px!important}\n"], dependencies: [{ kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4$3.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i4$3.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n    <div class=\"form-field__input--wrapper w-full\">\r\n      <input\r\n        class=\"fake-input\"\r\n        [id]=\"_date\"\r\n        [(ngModel)]=\"_date\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || controlDate?.disabled\"\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker  (opened)=\"opened()\"  #picker [calendarHeaderComponent]=\"header\" [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}}</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}}</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            <div class=\"grid-picker-actions\">\r\n              <button type=\"button\" mat-stroked-button class=\"w-full cancel-button\" color=\"primary\" matDatepickerCancel>\r\n                {{ cancleLabel }}\r\n              </button>\r\n  \r\n              <button\r\n                type=\"button\"\r\n                mat-button\r\n                class=\"w-full ml-0 apply-button\"\r\n                color=\"primary\"\r\n                matDatepickerApply\r\n                (click)=\"onApply()\"\r\n              >\r\n                {{ applyLabel }}\r\n              </button>\r\n            </div>\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        appTimeRange\r\n        [all]=\"all\"\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=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n        <mat-icon>access_time</mat-icon>\r\n      </button>\r\n    </div>\r\n  </app-element-wrapper>\r\n  \r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.75rem)}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}:host ::ng-deep .mat-datepicker-content .mat-calendar{height:50px!important}\n"], dependencies: [{ kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4$3.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i4$3.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: TimeRangeDirective, selector: "[appTimeRange]", inputs: ["isDateTimeMask", "considerSeconds", "all"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-date-time-range-picker', providers: [
@@ -1948,7 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             multi: true,
                         },
                         DecimalPipe,
-                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n    <div class=\"form-field__input--wrapper w-full\">\r\n      <input\r\n        class=\"fake-input\"\r\n        [id]=\"_date\"\r\n        [(ngModel)]=\"_date\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || controlDate?.disabled\"\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker  (opened)=\"opened()\"  #picker [calendarHeaderComponent]=\"header\" [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}}</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}}</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            <div class=\"grid-picker-actions\">\r\n              <button type=\"button\" mat-stroked-button class=\"w-full cancel-button\" color=\"primary\" matDatepickerCancel>\r\n                {{ cancleLabel }}\r\n              </button>\r\n  \r\n              <button\r\n                type=\"button\"\r\n                mat-button\r\n                class=\"w-full ml-0 apply-button\"\r\n                color=\"primary\"\r\n                matDatepickerApply\r\n                (click)=\"onApply()\"\r\n              >\r\n                {{ applyLabel }}\r\n              </button>\r\n            </div>\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        appTimeRange\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=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n        <mat-icon>access_time</mat-icon>\r\n      </button>\r\n    </div>\r\n  </app-element-wrapper>\r\n  \r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.75rem)}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}:host ::ng-deep .mat-datepicker-content .mat-calendar{height:50px!important}\n"] }]
+                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n    <div class=\"form-field__input--wrapper w-full\">\r\n      <input\r\n        class=\"fake-input\"\r\n        [id]=\"_date\"\r\n        [(ngModel)]=\"_date\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || controlDate?.disabled\"\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n      />\r\n      <mat-datepicker  (opened)=\"opened()\"  #picker [calendarHeaderComponent]=\"header\" [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}}</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}}</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            <div class=\"grid-picker-actions\">\r\n              <button type=\"button\" mat-stroked-button class=\"w-full cancel-button\" color=\"primary\" matDatepickerCancel>\r\n                {{ cancleLabel }}\r\n              </button>\r\n  \r\n              <button\r\n                type=\"button\"\r\n                mat-button\r\n                class=\"w-full ml-0 apply-button\"\r\n                color=\"primary\"\r\n                matDatepickerApply\r\n                (click)=\"onApply()\"\r\n              >\r\n                {{ applyLabel }}\r\n              </button>\r\n            </div>\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        appTimeRange\r\n        [all]=\"all\"\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=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n        <mat-icon>access_time</mat-icon>\r\n      </button>\r\n    </div>\r\n  </app-element-wrapper>\r\n  \r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.75rem)}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:after{bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}:host ::ng-deep .mat-datepicker-content .mat-calendar{height:50px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }]; }, propDecorators: { touchUi: [{
                 type: Input
             }], onblur: [{
@@ -1968,7 +2010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class EcabsDatetimeRangePickerModule {
 }
 EcabsDatetimeRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDatetimeRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EcabsDatetimeRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: EcabsDatetimeRangePickerModule, declarations: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent], imports: [CommonModule,
+EcabsDatetimeRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: EcabsDatetimeRangePickerModule, declarations: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective], imports: [CommonModule,
         ElementWrapperModule,
         MatIconModule,
         MatDatepickerModule,
@@ -1979,7 +2021,7 @@ EcabsDatetimeRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         EcabsButtonsModule,
         DigitsOnlyDirectivesModule,
         NumberBorderDirectiveModule,
-        MaskDateDirectiveModule], exports: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent] });
+        MaskDateDirectiveModule], exports: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective] });
 EcabsDatetimeRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDatetimeRangePickerModule, imports: [CommonModule,
         ElementWrapperModule,
         MatIconModule,
@@ -1995,7 +2037,7 @@ EcabsDatetimeRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "1
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsDatetimeRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent],
+                    declarations: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective],
                     imports: [
                         CommonModule,
                         ElementWrapperModule,
@@ -2010,7 +2052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         NumberBorderDirectiveModule,
                         MaskDateDirectiveModule
                     ],
-                    exports: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent],
+                    exports: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective],
                 }]
         }] });
 
@@ -3179,5 +3221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, DialogConfirmComponent, DialogConfirmModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerModule, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, FormTimePickerService, NoteComponent, NoteModule, TableComponent, ValidationComponent, ValidationModule, scrollFactory };
+export { ButtonsComponent, DialogConfirmComponent, DialogConfirmModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonsModule, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsComponentsService, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerModule, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSelectComponent, EcabsSelectModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimepickerComponent, EcabsTimepickerModule, FormTimePickerService, NoteComponent, NoteModule, TableComponent, TimeRangeDirective, ValidationComponent, ValidationModule, scrollFactory };
 //# sourceMappingURL=ecabs-components.mjs.map