ecabs-components 1.0.17 → 1.0.18

package/README.md

@@ -24,3 +24,4 @@ Run `ng test ecabs-components` to execute the unit tests via [Karma](https://kar
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
 
 v1.0.13 - Fixed emitEvent bahavior of checkbox
+v1.0.18 - - Fixed width of date time picker 

package/esm2022/lib/ecabs-date-time-picker/ecabs-date-time-picker.component.mjs

@@ -154,7 +154,7 @@ export class EcabsDateTimePickerComponent extends ElementBaseComponent {
                 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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -1.25rem 0rem -.25rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: i8.NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: i9.MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit;left:-.125rem}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DigitsOnlyDirective, selector: "[appDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: i8.NumberBorderDirective, selector: "[appNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: i9.MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -1.25rem 0rem -.25rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit;left:-.125rem}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{

package/fesm2022/ecabs-components.mjs

@@ -1749,7 +1749,7 @@ class EcabsDateTimePickerComponent extends ElementBaseComponent {
                 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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -1.25rem 0rem -.25rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: 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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-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: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper w-full\">\r\n    <input\r\n      class=\"fake-input\"\r\n      [id]=\"_date\"\r\n      [(ngModel)]=\"_date\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [matDatepicker]=\"picker\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit;left:-.125rem}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: 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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-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: MaskDateDirective, selector: "[appMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -1760,7 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -1.25rem 0rem -.25rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\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\"\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\">\r\n      <mat-datepicker-actions>\r\n        <div class=\"actions\">\r\n          <div class=\"time-inputs 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          <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\"\r\n      appMaskDate\r\n      [isDateTimeMask]=\"true\"\r\n      [considerSeconds]=\"!hideSeconds\"\r\n      (blur)=\"onTouch()\"\r\n    />\r\n    <button type=\"button\" mat-icon-button class=\"datepicker-toggle\" (click)=\"picker.open()\">\r\n      <mat-icon>calendar_today</mat-icon>\r\n    </button>\r\n  </div>\r\n</app-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.datepicker-toggle{transform:translate(-1.25rem);background-color:inherit;left:-.125rem}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.date-input{margin:0rem -.25rem 0rem .125rem}.time--inputs{position:relative;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}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}.time-inputs{display:flex;gap:.5rem;justify-content:center;align-items:center}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}:host ::ng-deep .mat-mdc-icon-button .mat-icon{margin-top:-.25rem}.cancel-button,.apply-button{min-height:2.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DecimalPipe }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{