@alauda/ui 6.5.10-beta.43 → 6.5.10-beta.44

package/fesm2022/alauda-ui.mjs

@@ -20,6 +20,7 @@ import { OverlayConfig, OverlayModule, CdkScrollable } from '@angular/cdk/overla
 import * as i2$2 from '@angular/forms';
 import { ControlContainer, NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
 import dayjs from 'dayjs';
+import { HOUR_ITEMS as HOUR_ITEMS$1, MINUTE_ITEMS as MINUTE_ITEMS$1, SECOND_ITEMS as SECOND_ITEMS$1 } from 'src/time-picker';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
 import * as i2$4 from '@angular/cdk/bidi';
@@ -3419,6 +3420,47 @@ function isTimePickerModel(item) {
         isNumberValue(item?.hour));
 }
 
+const HOUR_ITEMS = Array.from({ length: 24 }).map((_, index) => index);
+const MINUTE_ITEMS = Array.from({ length: 60 }).map((_, index) => index);
+const SECOND_ITEMS = Array.from({ length: 60 }).map((_, index) => index);
+const CONTROL_ITEM_HEIGHT = 28;
+
+function compose(...fns) {
+    return (x) => fns.reduceRight((acc, fn) => fn(acc), x);
+}
+function closestTo(num) {
+    return (prev, curr) => Math.abs(curr - num) < Math.abs(prev - num) ? curr : prev;
+}
+function validHoursFn(disableHours) {
+    const disabledHours = disableHours?.() || [];
+    const validHours = HOUR_ITEMS.filter(hour => !disabledHours.includes(hour));
+    return (result) => result.set('hour', validHours.includes(result.hour())
+        ? result.hour()
+        : validHours.reduce(closestTo(result.hour()), validHours[0]));
+}
+function validMinutesFn(disableMinutes) {
+    return (result) => {
+        const disabledMinutes = disableMinutes?.(result.hour()) || [];
+        const validMinutes = MINUTE_ITEMS.filter(minute => !disabledMinutes.includes(minute));
+        return result.set('minute', validMinutes.includes(result.minute())
+            ? result.minute()
+            : validMinutes.reduce(closestTo(result.minute()), validMinutes[0]));
+    };
+}
+function validSecondsFn(disableSeconds) {
+    return (result) => {
+        const disabledSeconds = disableSeconds?.(result.hour(), result.minute()) || [];
+        const validSeconds = SECOND_ITEMS.filter(second => !disabledSeconds.includes(second));
+        return result.set('second', validSeconds.includes(result.second())
+            ? result.second()
+            : validSeconds.reduce(closestTo(result.second()), validSeconds[0]));
+    };
+}
+function validResult(disabledTimeFn) {
+    const validResultFn = compose(validSecondsFn(disabledTimeFn?.seconds), validMinutesFn(disabledTimeFn?.minutes), validHoursFn(disabledTimeFn?.hours));
+    return (result) => validResultFn(result);
+}
+
 class InputComponent {
     elementRef;
     renderer;
@@ -3554,11 +3596,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 args: [InputComponent, { static: false }]
             }] } });
 
-const HOUR_ITEMS = Array.from({ length: 24 }).map((_, index) => index);
-const MINUTE_ITEMS = Array.from({ length: 60 }).map((_, index) => index);
-const SECOND_ITEMS = Array.from({ length: 60 }).map((_, index) => index);
-const CONTROL_ITEM_HEIGHT = 28;
-
 const en = {
     locale: 'en',
     translation: {
@@ -3701,6 +3738,11 @@ class TimePickerPanelComponent extends CommonFormControl {
     secondRef;
     enabledColumns = 0;
     firstScrolled = false;
+    validResult = validResult({
+        hours: this.disableHours,
+        minutes: this.disableMinutes,
+        seconds: this.disableSeconds,
+    });
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
@@ -3725,7 +3767,14 @@ class TimePickerPanelComponent extends CommonFormControl {
                 : []).includes(value);
         }
     }
-    ngOnChanges({ hourStep, minuteStep, secondStep }) {
+    ngOnChanges({ hourStep, minuteStep, secondStep, disableHours, disableMinutes, disableSeconds, }) {
+        if (disableHours || disableMinutes || disableSeconds) {
+            this.validResult = validResult({
+                hours: disableHours?.currentValue,
+                minutes: disableMinutes?.currentValue,
+                seconds: disableSeconds?.currentValue,
+            });
+        }
         if (hourStep?.currentValue > 0) {
             this.HOUR_ITEM_CONFIG = HOUR_ITEMS.filter(i => i % hourStep.currentValue === 0);
         }
@@ -3753,8 +3802,8 @@ class TimePickerPanelComponent extends CommonFormControl {
         if (!type) {
             return;
         }
-        const result = (currentValue ||
-            updateDateByTimeModel(dayjs(), { hour: 0, minute: 0, second: 0 })).set(type, value);
+        const result = this.validResult((currentValue ||
+            updateDateByTimeModel(dayjs(), { hour: 0, minute: 0, second: 0 })).set(type, value));
         this.emitModel(result);
         return result;
     }
@@ -3789,6 +3838,23 @@ class TimePickerPanelComponent extends CommonFormControl {
             this.firstScrolled = true;
         }
     }
+    matchValue(value, type, currDate) {
+        return currDate?.get(type) === value;
+    }
+    getControlTypeConfig(type) {
+        return {
+            [TimePickerControlType.Hour]: this.HOUR_ITEM_CONFIG,
+            [TimePickerControlType.Minute]: this.MINUTE_ITEM_CONFIG,
+            [TimePickerControlType.Second]: this.SECOND_ITEM_CONFIG,
+        }[type];
+    }
+    selectNow() {
+        this.firstScrolled = true;
+        this.emitModel(this.validResult(dayjs()));
+    }
+    trackBy(_index, content) {
+        return content;
+    }
     scrollByValue(element, value, divideBy, duration) {
         const targetOffset = (value * CONTROL_ITEM_HEIGHT) / divideBy;
         const currentTop = element.scrollTop;
@@ -3810,23 +3876,6 @@ class TimePickerPanelComponent extends CommonFormControl {
             element.scrollTop = targetOffset;
         }
     }
-    matchValue(value, type, currDate) {
-        return currDate?.get(type) === value;
-    }
-    getControlTypeConfig(type) {
-        return {
-            [TimePickerControlType.Hour]: this.HOUR_ITEM_CONFIG,
-            [TimePickerControlType.Minute]: this.MINUTE_ITEM_CONFIG,
-            [TimePickerControlType.Second]: this.SECOND_ITEM_CONFIG,
-        }[type];
-    }
-    selectNow() {
-        this.firstScrolled = true;
-        this.emitModel(dayjs());
-    }
-    trackBy(_index, content) {
-        return content;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TimePickerPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: { format: "format", hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", footerTemplate: "footerTemplate", disableHours: "disableHours", disableMinutes: "disableMinutes", disableSeconds: "disableSeconds" }, outputs: { confirm: "confirm" }, host: { listeners: { "mousedown": "onMousedown()" } }, providers: [
             {
@@ -3896,8 +3945,12 @@ class TimePickerComponent extends CommonFormControl {
     tooltipRef;
     timeValue = null;
     timeFormatValue = '';
+    validResult = validResult({
+        hours: this.disableHours,
+        minutes: this.disableMinutes,
+        seconds: this.disableSeconds,
+    });
     writeValue(value) {
-        super.writeValue(value);
         if (!value) {
             return this.setValue(null);
         }
@@ -3909,7 +3962,20 @@ class TimePickerComponent extends CommonFormControl {
             result = dayjs(value);
             this.submit(false, result);
         }
-        this.setValue(result);
+        const validResult = this.validResult(result);
+        this.setValue(validResult);
+        super.writeValue(validResult);
+    }
+    ngOnChanges({ disableHours, disableMinutes, disableSeconds }) {
+        if (this.disableHours !== disableHours?.currentValue ||
+            this.disableMinutes !== disableMinutes?.currentValue ||
+            this.disableSeconds !== disableSeconds?.currentValue) {
+            this.validResult = validResult({
+                hours: disableHours?.currentValue,
+                minutes: disableMinutes?.currentValue,
+                seconds: disableSeconds?.currentValue,
+            });
+        }
     }
     setValue(value) {
         this.timeValue = value;
@@ -3999,7 +4065,7 @@ class TimePickerComponent extends CommonFormControl {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipVisibleChange)=\"handleTooltipVisible($event)\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative;pointer-events:none!important}.aui-time-picker__icon-container .aui-icon{margin:0!important}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__indicator{display:flex}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex;pointer-events:auto}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], dependencies: [{ kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: ["format", "hourStep", "minuteStep", "secondStep", "footerTemplate", "disableHours", "disableMinutes", "disableSeconds"], outputs: ["confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipVisibleChange)=\"handleTooltipVisible($event)\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative;pointer-events:none!important}.aui-time-picker__icon-container .aui-icon{margin:0!important}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__indicator{display:flex}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex;pointer-events:auto}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], dependencies: [{ kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: ["format", "hourStep", "minuteStep", "secondStep", "footerTemplate", "disableHours", "disableMinutes", "disableSeconds"], outputs: ["confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -4163,6 +4229,7 @@ class PickerPanelComponent {
     navRange;
     type;
     anchor = dayjs();
+    selectedTime;
     matchDates;
     disabledDate = () => false;
     set weekStartDay(day) {
@@ -4179,7 +4246,17 @@ class PickerPanelComponent {
     minDate;
     maxDate;
     get disabledDateFn() {
-        return composeDisabledDateFn(date => this.minDate && date.isBefore(this.minDate), date => this.maxDate && date.isAfter(this.maxDate), this.disabledDate);
+        return composeDisabledDateFn(date => this.minDate &&
+            date
+                .set('hour', this.selectedTime?.hour || 23)
+                .set('minute', this.selectedTime?.minute || 59)
+                .set('second', this.selectedTime?.second || 59)
+                .isBefore(this.minDate), date => this.maxDate &&
+            date
+                .set('hour', this.selectedTime?.hour || 0)
+                .set('minute', this.selectedTime?.minute || 0)
+                .set('second', this.selectedTime?.second || 0)
+                .isAfter(this.maxDate), this.disabledDate);
     }
     _weekStartDay = 0;
     panelData;
@@ -4276,7 +4353,7 @@ class PickerPanelComponent {
         return this.navRange;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PickerPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: { navRange: "navRange", type: "type", anchor: "anchor", matchDates: "matchDates", disabledDate: "disabledDate", weekStartDay: "weekStartDay", minDate: "minDate", maxDate: "maxDate" }, outputs: { select: "select", hovered: "hovered" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [class]=\"bem.element('container')\"\n  [ngClass]=\"{\n    'day-panel-container': navRange === DateNavRange.Month,\n    'month-panel-container': navRange === DateNavRange.Year,\n    'year-panel-container': navRange === DateNavRange.Decade\n  }\"\n>\n  <div\n    [class]=\"[bem.element('row'), 'week-header'].join(' ')\"\n    *ngIf=\"navRange === DateNavRange.Month\"\n  >\n    <span\n      *ngFor=\"let item of weekDefs\"\n      [class]=\"bem.element('cell')\"\n    >\n      {{ item | auiI18n }}\n    </span>\n  </div>\n  <div\n    [class]=\"bem.element('row')\"\n    *ngFor=\"let row of panelData; trackBy: trackByFn\"\n  >\n    <span\n      *ngFor=\"let item of row; trackBy: trackByFn\"\n      [class]=\"bem.element('cell')\"\n      [ngClass]=\"{\n        inRange: item.inRange && !item.isDisabled,\n        isActive: match(item.value),\n        isBackground: item.isBackground && !item.isDisabled,\n        isRangeStart: item.isRangeStart,\n        isRangeEnd: item.isRangeEnd,\n        isToday: matchToday(item.value) && !item.isBackground,\n        isDisabled: item.isDisabled\n      }\"\n      ><button\n        aui-button=\"text\"\n        [plain]=\"true\"\n        [size]=\"navRange === DateNavRange.Month ? 'mini' : 'small'\"\n        [disabled]=\"item.isDisabled\"\n        (click)=\"selectValue(item.value)\"\n        (mouseenter)=\"hovered.next(item.value)\"\n      >\n        {{ item.label\n        }}<ng-container *ngIf=\"navRange === DateNavRange.Year\">{{\n          'month_suffix' | auiI18n\n        }}</ng-container>\n      </button>\n    </span>\n  </div>\n</div>\n", styles: [".aui-picker-panel__container{height:min-content;box-sizing:border-box;justify-content:stretch;display:flex;flex-direction:column;margin:12px 9px;align-items:center}.aui-picker-panel__container .aui-button{box-sizing:border-box}.aui-picker-panel__container .aui-button__content{padding:0!important}.aui-picker-panel__container.month-panel-container button,.aui-picker-panel__container.year-panel-container button{width:56px;height:28px!important}.aui-picker-panel__container.day-panel-container{height:min-content;padding:0;margin:0}.aui-picker-panel__container.day-panel-container button{height:24px!important;width:24px!important}.aui-picker-panel__container.day-panel-container .aui-picker-panel__row+.aui-picker-panel__row{margin-top:8px}.aui-picker-panel__row+.aui-picker-panel__row{margin-top:20px}.aui-picker-panel__row{flex:1;display:flex;align-items:center;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);width:100%}.aui-picker-panel__row.week-header{color:rgb(var(--aui-color-help-text));margin-bottom:8px}.aui-picker-panel__row.week-header span{display:inline-block;margin:0;width:36px;text-align:center}.aui-picker-panel__cell{display:inline-flex;position:relative;align-items:center;justify-content:center;margin-inline:6px}.aui-picker-panel__cell button{box-sizing:content-box;transition:color .3s ease,background-color .3s ease}.aui-picker-panel__cell.inRange{background-color:rgb(var(--aui-color-p-6));box-shadow:-6px 0 0 0 rgb(var(--aui-color-p-6)),6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isRangeEnd{box-shadow:-6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isRangeStart{box-shadow:6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isDisabled{background-color:rgb(var(--aui-color-n-8));box-shadow:-6px 0 0 0 rgb(var(--aui-color-n-8)),6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.isDisabled button{color:rgb(var(--aui-color-disabled-text))!important;border-color:rgb(var(--aui-color-disabled-text))!important}.aui-picker-panel__cell.isDisabled.isActive button,.aui-picker-panel__cell.isDisabled.isToday button{color:#fff!important;border-color:rgb(var(--aui-color-p-4))!important;background-color:rgb(var(--aui-color-p-4))!important}.aui-picker-panel__cell.isDisabled+.aui-picker-panel__cell:not(.isDisabled,.isRangeStart){box-shadow:-12px 0 0 0 rgb(var(--aui-color-popper-bg))}.aui-picker-panel__cell.isDisabled+.aui-picker-panel__cell:not(.isDisabled).isRangeStart{box-shadow:-12px 0 0 0 rgb(var(--aui-color-popper-bg)),6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell:not(.isDisabled)+.aui-picker-panel__cell.isDisabled{box-shadow:6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.isToday button{border:rgb(var(--aui-color-primary)) 1px solid;color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-7))}.aui-picker-panel__cell.isActive button{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-picker-panel__cell.isBackground button{background-color:initial!important;color:rgb(var(--aui-color-disabled-text))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: { navRange: "navRange", type: "type", anchor: "anchor", selectedTime: "selectedTime", matchDates: "matchDates", disabledDate: "disabledDate", weekStartDay: "weekStartDay", minDate: "minDate", maxDate: "maxDate" }, outputs: { select: "select", hovered: "hovered" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [class]=\"bem.element('container')\"\n  [ngClass]=\"{\n    'day-panel-container': navRange === DateNavRange.Month,\n    'month-panel-container': navRange === DateNavRange.Year,\n    'year-panel-container': navRange === DateNavRange.Decade\n  }\"\n>\n  <div\n    [class]=\"[bem.element('row'), 'week-header'].join(' ')\"\n    *ngIf=\"navRange === DateNavRange.Month\"\n  >\n    <span\n      *ngFor=\"let item of weekDefs\"\n      [class]=\"bem.element('cell')\"\n    >\n      {{ item | auiI18n }}\n    </span>\n  </div>\n  <div\n    [class]=\"bem.element('row')\"\n    *ngFor=\"let row of panelData; trackBy: trackByFn\"\n  >\n    <span\n      *ngFor=\"let item of row; trackBy: trackByFn\"\n      [class]=\"bem.element('cell')\"\n      [ngClass]=\"{\n        inRange: item.inRange && !item.isDisabled,\n        isActive: match(item.value),\n        isBackground: item.isBackground && !item.isDisabled,\n        isRangeStart: item.isRangeStart,\n        isRangeEnd: item.isRangeEnd,\n        isToday: matchToday(item.value) && !item.isBackground,\n        isDisabled: item.isDisabled\n      }\"\n      ><button\n        aui-button=\"text\"\n        [plain]=\"true\"\n        [size]=\"navRange === DateNavRange.Month ? 'mini' : 'small'\"\n        [disabled]=\"item.isDisabled\"\n        (click)=\"selectValue(item.value)\"\n        (mouseenter)=\"hovered.next(item.value)\"\n      >\n        {{ item.label\n        }}<ng-container *ngIf=\"navRange === DateNavRange.Year\">{{\n          'month_suffix' | auiI18n\n        }}</ng-container>\n      </button>\n    </span>\n  </div>\n</div>\n", styles: [".aui-picker-panel__container{height:min-content;box-sizing:border-box;justify-content:stretch;display:flex;flex-direction:column;margin:12px 9px;align-items:center}.aui-picker-panel__container .aui-button{box-sizing:border-box}.aui-picker-panel__container .aui-button__content{padding:0!important}.aui-picker-panel__container.month-panel-container button,.aui-picker-panel__container.year-panel-container button{width:56px;height:28px!important}.aui-picker-panel__container.day-panel-container{height:min-content;padding:0;margin:0}.aui-picker-panel__container.day-panel-container button{height:24px!important;width:24px!important}.aui-picker-panel__container.day-panel-container .aui-picker-panel__row+.aui-picker-panel__row{margin-top:8px}.aui-picker-panel__row+.aui-picker-panel__row{margin-top:20px}.aui-picker-panel__row{flex:1;display:flex;align-items:center;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);width:100%}.aui-picker-panel__row.week-header{color:rgb(var(--aui-color-help-text));margin-bottom:8px}.aui-picker-panel__row.week-header span{display:inline-block;margin:0;width:36px;text-align:center}.aui-picker-panel__cell{display:inline-flex;position:relative;align-items:center;justify-content:center;margin-inline:6px}.aui-picker-panel__cell button{box-sizing:content-box;transition:color .3s ease,background-color .3s ease}.aui-picker-panel__cell.inRange{background-color:rgb(var(--aui-color-p-6));box-shadow:-6px 0 0 0 rgb(var(--aui-color-p-6)),6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isRangeEnd{box-shadow:-6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isRangeStart{box-shadow:6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell.isDisabled{background-color:rgb(var(--aui-color-n-8));box-shadow:-6px 0 0 0 rgb(var(--aui-color-n-8)),6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.isDisabled button{color:rgb(var(--aui-color-disabled-text))!important;border-color:rgb(var(--aui-color-disabled-text))!important}.aui-picker-panel__cell.isDisabled.isActive button,.aui-picker-panel__cell.isDisabled.isToday button{color:#fff!important;border-color:rgb(var(--aui-color-p-4))!important;background-color:rgb(var(--aui-color-p-4))!important}.aui-picker-panel__cell.isDisabled+.aui-picker-panel__cell:not(.isDisabled,.isRangeStart){box-shadow:-12px 0 0 0 rgb(var(--aui-color-popper-bg))}.aui-picker-panel__cell.isDisabled+.aui-picker-panel__cell:not(.isDisabled).isRangeStart{box-shadow:-12px 0 0 0 rgb(var(--aui-color-popper-bg)),6px 0 0 0 rgb(var(--aui-color-p-6))}.aui-picker-panel__cell:not(.isDisabled)+.aui-picker-panel__cell.isDisabled{box-shadow:6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.isToday button{border:rgb(var(--aui-color-primary)) 1px solid;color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-7))}.aui-picker-panel__cell.isActive button{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-picker-panel__cell.isBackground button{background-color:initial!important;color:rgb(var(--aui-color-disabled-text))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PickerPanelComponent, decorators: [{
             type: Component,
@@ -4287,6 +4364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Input
             }], anchor: [{
                 type: Input
+            }], selectedTime: [{
+                type: Input
             }], matchDates: [{
                 type: Input
             }], disabledDate: [{
@@ -4314,6 +4393,13 @@ class DatePickerPanelComponent extends CommonFormControl {
         return this._type;
     }
     _type;
+    set selectedTime(time) {
+        this._selectedTime = time;
+    }
+    get selectedTime() {
+        return this._selectedTime;
+    }
+    _selectedTime;
     showTime = false;
     disabledDate = () => false;
     disabledTime = () => null;
@@ -4329,7 +4415,7 @@ class DatePickerPanelComponent extends CommonFormControl {
     _cacheDisabledTimeFn;
     getDisabledTimeFn(selectedDate, type) {
         if (selectedDate !== this._cacheSelectedDate) {
-            this._cacheDisabledTimeFn = this.disabledTime(selectedDate);
+            this._cacheDisabledTimeFn = combineDisabledTimeFn(this._disabledTimeFn.bind(this), this.disabledTime)(selectedDate);
             this._cacheSelectedDate = selectedDate;
         }
         return this._cacheDisabledTimeFn?.[type];
@@ -4340,7 +4426,6 @@ class DatePickerPanelComponent extends CommonFormControl {
     }
     anchor;
     selectedDate;
-    selectedTime;
     DateNavRange = DateNavRange;
     DatePickerType = DatePickerType;
     writeValue(obj) {
@@ -4373,17 +4458,63 @@ class DatePickerPanelComponent extends CommonFormControl {
         this.selectedDate = updateDateByTimeModel(this.selectedDate, time);
         this.emitValue(this.selectedDate);
     }
+    clearValue() {
+        this.selectedTime = null;
+        this.clear.next();
+    }
     setToday() {
         this.confirmValue(dayjs(), true);
     }
+    _disabledTimeFn(selectedDate) {
+        const returnFnMap = {
+            hours: () => [],
+            minutes: () => [],
+            seconds: () => [],
+        };
+        if (selectedDate &&
+            this.minDate &&
+            selectedDate?.isSame(this.minDate, 'day')) {
+            returnFnMap.hours = () => HOUR_ITEMS$1.filter(item => item < this.minDate.hour());
+            returnFnMap.minutes = (hour) => {
+                if (hour === this.minDate.hour()) {
+                    return MINUTE_ITEMS$1.filter(item => item < this.minDate.minute());
+                }
+                return [];
+            };
+            returnFnMap.seconds = (hour, minute) => {
+                if (hour === this.minDate.hour() && minute === this.minDate.minute()) {
+                    return SECOND_ITEMS$1.filter(item => item < this.minDate.second());
+                }
+                return [];
+            };
+        }
+        if (selectedDate &&
+            this.maxDate &&
+            selectedDate?.isSame(this.maxDate, 'day')) {
+            returnFnMap.hours = () => HOUR_ITEMS$1.filter(item => item > this.maxDate.hour());
+            returnFnMap.minutes = (hour) => {
+                if (hour === this.maxDate.hour()) {
+                    return MINUTE_ITEMS$1.filter(item => item > this.maxDate.minute());
+                }
+                return [];
+            };
+            returnFnMap.seconds = (hour, minute) => {
+                if (hour === this.maxDate.hour() && minute === this.maxDate.minute()) {
+                    return SECOND_ITEMS$1.filter(item => item > this.maxDate.second());
+                }
+                return [];
+            };
+        }
+        return returnFnMap;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DatePickerPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: { clearable: "clearable", clearText: "clearText", type: "type", showTime: "showTime", disabledDate: "disabledDate", disabledTime: "disabledTime", weekStartDay: "weekStartDay", showFooter: "showFooter", footerTemplate: "footerTemplate", extraFooter: "extraFooter", minDate: "minDate", maxDate: "maxDate" }, outputs: { confirm: "confirm", clear: "clear" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: { clearable: "clearable", clearText: "clearText", type: "type", selectedTime: "selectedTime", showTime: "showTime", disabledDate: "disabledDate", disabledTime: "disabledTime", weekStartDay: "weekStartDay", showFooter: "showFooter", footerTemplate: "footerTemplate", extraFooter: "extraFooter", minDate: "minDate", maxDate: "maxDate" }, outputs: { confirm: "confirm", clear: "clear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerPanelComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <ng-container *ngIf=\"showFooter\">\n    <aui-calendar-footer\n      (clear)=\"clear.next()\"\n      (confirm)=\"confirmValue()\"\n      [clearable]=\"clearable\"\n      [clearText]=\"clearText\"\n      *ngIf=\"showTime; else today\"\n    >\n      <ng-container\n        *ngIf=\"footerTemplate; else default\"\n        [ngTemplateOutlet]=\"footerTemplate\"\n        [ngTemplateOutletContext]=\"{ context: this }\"\n      ></ng-container>\n\n      <ng-template #default>\n        <aui-time-picker\n          *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n          [showIcon]=\"false\"\n          size=\"small\"\n          [(ngModel)]=\"selectedTime\"\n          [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n          [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n          [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n          tooltipPosition=\"top start\"\n          (ngModelChange)=\"timeDateChange($event)\"\n          [placeholder]=\"'select_time' | auiI18n\"\n        ></aui-time-picker>\n      </ng-template>\n    </aui-calendar-footer>\n\n    <ng-template #today>\n      <aui-calendar-footer\n        *ngIf=\"type === DatePickerType.Day\"\n        [clearable]=\"false\"\n        [customAction]=\"todayBtn\"\n      >\n      </aui-calendar-footer>\n      <ng-template #todayBtn>\n        <button\n          aui-button=\"inline\"\n          (click)=\"setToday()\"\n        >\n          {{ 'today' | auiI18n }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".aui-date-picker-panel__wrapper{display:flex;flex-direction:column;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-picker-panel__wrapper .aui-time-picker{width:88px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [selectedTime]=\"selectedTime\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <ng-container *ngIf=\"showFooter\">\n    <aui-calendar-footer\n      (clear)=\"clearValue()\"\n      (confirm)=\"confirmValue()\"\n      [clearable]=\"clearable\"\n      [clearText]=\"clearText\"\n      *ngIf=\"showTime; else today\"\n    >\n      <ng-container\n        *ngIf=\"footerTemplate; else default\"\n        [ngTemplateOutlet]=\"footerTemplate\"\n        [ngTemplateOutletContext]=\"{ context: this }\"\n      ></ng-container>\n\n      <ng-template #default>\n        <aui-time-picker\n          *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n          [showIcon]=\"false\"\n          size=\"small\"\n          [(ngModel)]=\"selectedTime\"\n          [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n          [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n          [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n          tooltipPosition=\"top start\"\n          (ngModelChange)=\"timeDateChange($event)\"\n          [placeholder]=\"'select_time' | auiI18n\"\n        ></aui-time-picker>\n      </ng-template>\n    </aui-calendar-footer>\n\n    <ng-template #today>\n      <aui-calendar-footer\n        *ngIf=\"type === DatePickerType.Day\"\n        [clearable]=\"false\"\n        [customAction]=\"todayBtn\"\n      >\n      </aui-calendar-footer>\n      <ng-template #todayBtn>\n        <button\n          aui-button=\"inline\"\n          (click)=\"setToday()\"\n        >\n          {{ 'today' | auiI18n }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".aui-date-picker-panel__wrapper{display:flex;flex-direction:column;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-picker-panel__wrapper .aui-time-picker{width:88px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "selectedTime", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DatePickerPanelComponent, decorators: [{
             type: Component,
@@ -4393,13 +4524,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                             useExisting: forwardRef(() => DatePickerPanelComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <ng-container *ngIf=\"showFooter\">\n    <aui-calendar-footer\n      (clear)=\"clear.next()\"\n      (confirm)=\"confirmValue()\"\n      [clearable]=\"clearable\"\n      [clearText]=\"clearText\"\n      *ngIf=\"showTime; else today\"\n    >\n      <ng-container\n        *ngIf=\"footerTemplate; else default\"\n        [ngTemplateOutlet]=\"footerTemplate\"\n        [ngTemplateOutletContext]=\"{ context: this }\"\n      ></ng-container>\n\n      <ng-template #default>\n        <aui-time-picker\n          *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n          [showIcon]=\"false\"\n          size=\"small\"\n          [(ngModel)]=\"selectedTime\"\n          [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n          [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n          [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n          tooltipPosition=\"top start\"\n          (ngModelChange)=\"timeDateChange($event)\"\n          [placeholder]=\"'select_time' | auiI18n\"\n        ></aui-time-picker>\n      </ng-template>\n    </aui-calendar-footer>\n\n    <ng-template #today>\n      <aui-calendar-footer\n        *ngIf=\"type === DatePickerType.Day\"\n        [clearable]=\"false\"\n        [customAction]=\"todayBtn\"\n      >\n      </aui-calendar-footer>\n      <ng-template #todayBtn>\n        <button\n          aui-button=\"inline\"\n          (click)=\"setToday()\"\n        >\n          {{ 'today' | auiI18n }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".aui-date-picker-panel__wrapper{display:flex;flex-direction:column;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-picker-panel__wrapper .aui-time-picker{width:88px}\n"] }]
+                    ], template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [selectedTime]=\"selectedTime\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <ng-container *ngIf=\"showFooter\">\n    <aui-calendar-footer\n      (clear)=\"clearValue()\"\n      (confirm)=\"confirmValue()\"\n      [clearable]=\"clearable\"\n      [clearText]=\"clearText\"\n      *ngIf=\"showTime; else today\"\n    >\n      <ng-container\n        *ngIf=\"footerTemplate; else default\"\n        [ngTemplateOutlet]=\"footerTemplate\"\n        [ngTemplateOutletContext]=\"{ context: this }\"\n      ></ng-container>\n\n      <ng-template #default>\n        <aui-time-picker\n          *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n          [showIcon]=\"false\"\n          size=\"small\"\n          [(ngModel)]=\"selectedTime\"\n          [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n          [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n          [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n          tooltipPosition=\"top start\"\n          (ngModelChange)=\"timeDateChange($event)\"\n          [placeholder]=\"'select_time' | auiI18n\"\n        ></aui-time-picker>\n      </ng-template>\n    </aui-calendar-footer>\n\n    <ng-template #today>\n      <aui-calendar-footer\n        *ngIf=\"type === DatePickerType.Day\"\n        [clearable]=\"false\"\n        [customAction]=\"todayBtn\"\n      >\n      </aui-calendar-footer>\n      <ng-template #todayBtn>\n        <button\n          aui-button=\"inline\"\n          (click)=\"setToday()\"\n        >\n          {{ 'today' | auiI18n }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".aui-date-picker-panel__wrapper{display:flex;flex-direction:column;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-picker-panel__wrapper .aui-time-picker{width:88px}\n"] }]
         }], propDecorators: { clearable: [{
                 type: Input
             }], clearText: [{
                 type: Input
             }], type: [{
                 type: Input
+            }], selectedTime: [{
+                type: Input
             }], showTime: [{
                 type: Input
             }], disabledDate: [{
@@ -4423,6 +4556,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             }], clear: [{
                 type: Output
             }] } });
+function combineDisabledTimeFn(...disabledFnList) {
+    return (date) => ({
+        hours: () => Array.from(new Set(disabledFnList
+            .map(fn => fn(date)?.hours?.() || [])
+            .reduce((prev, cur) => [...prev, ...cur], []))),
+        minutes: (hour) => Array.from(new Set(disabledFnList
+            .map(fn => fn(date)?.minutes?.(hour) || [])
+            .reduce((prev, cur) => [...prev, ...cur], []))),
+        seconds: (hour, minute) => Array.from(new Set(disabledFnList
+            .map(fn => fn(date)?.seconds?.(hour, minute) || [])
+            .reduce((prev, cur) => [...prev, ...cur], []))),
+    });
+}
 
 const bem$3 = buildBem('aui-date-range-picker-panel');
 class DateRangePickerPanelComponent extends CommonFormControl {
@@ -4583,7 +4729,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
                 useExisting: forwardRef(() => DateRangePickerPanelComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div [class]=\"bem.element('container')\">\n  <div [class]=\"bem.element('header')\">\n    <aui-calendar-header\n      [dateNavRange]=\"leftDateRange\"\n      [anchor]=\"leftAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n      (anchorChange)=\"leftAnchor = $event\"\n      [maxAvail]=\"maxHeaderAvail\"\n      [minAvail]=\"minDate\"\n    ></aui-calendar-header>\n    <aui-calendar-header\n      [dateNavRange]=\"rightDateRange\"\n      [anchor]=\"rightAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n      (anchorChange)=\"rightAnchor = $event\"\n      [minAvail]=\"minHeaderAvail\"\n      [maxAvail]=\"maxDate\"\n    ></aui-calendar-header>\n  </div>\n  <div [class]=\"bem.element('body')\">\n    <aui-picker-panel\n      class=\"panel__wrapper\"\n      [navRange]=\"leftDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"leftAnchor\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n      [weekStartDay]=\"weekStartDay\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Left)\"\n    ></aui-picker-panel>\n    <aui-picker-panel\n      class=\"panel__wrapper\"\n      [navRange]=\"rightDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"rightAnchor\"\n      [weekStartDay]=\"weekStartDay\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Right)\"\n    ></aui-picker-panel>\n  </div>\n\n  <aui-calendar-footer\n    [class]=\"bem.element('footer')\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    (clear)=\"clear.next()\"\n    (confirm)=\"confirmValue(rangeValue)\"\n    *ngIf=\"showFooter && showTime\"\n  >\n    <div\n      [class]=\"bem.element('footer-content')\"\n      *ngIf=\"showTime\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'start_date' | auiI18n,\n          value: rangeValue[0]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        [(ngModel)]=\"startTime\"\n        size=\"small\"\n        (ngModelChange)=\"timeChange($event)\"\n        [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n        [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n        [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n      ></aui-time-picker>\n\n      <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'end_date' | auiI18n,\n          value: rangeValue[1]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        size=\"small\"\n        [(ngModel)]=\"endTime\"\n        [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n        [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n        [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n        (ngModelChange)=\"timeChange($event)\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n      ></aui-time-picker>\n    </div>\n  </aui-calendar-footer>\n</div>\n\n<ng-template\n  #datePlaceholder\n  let-placeholder=\"placeholder\"\n  let-value=\"value\"\n>\n  <span\n    *ngIf=\"!value\"\n    class=\"placeholder date-holder\"\n    >{{ placeholder }}</span\n  >\n  <span\n    *ngIf=\"value\"\n    class=\"date-value date-holder\"\n    >{{ value | date: FOOTER_DATE_FORMAT }}</span\n  >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<div [class]=\"bem.element('container')\">\n  <div [class]=\"bem.element('header')\">\n    <aui-calendar-header\n      [dateNavRange]=\"leftDateRange\"\n      [anchor]=\"leftAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n      (anchorChange)=\"leftAnchor = $event\"\n      [maxAvail]=\"maxHeaderAvail\"\n      [minAvail]=\"minDate\"\n    ></aui-calendar-header>\n    <aui-calendar-header\n      [dateNavRange]=\"rightDateRange\"\n      [anchor]=\"rightAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n      (anchorChange)=\"rightAnchor = $event\"\n      [minAvail]=\"minHeaderAvail\"\n      [maxAvail]=\"maxDate\"\n    ></aui-calendar-header>\n  </div>\n  <div [class]=\"bem.element('body')\">\n    <aui-picker-panel\n      class=\"panel__wrapper\"\n      [navRange]=\"leftDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"leftAnchor\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n      [weekStartDay]=\"weekStartDay\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Left)\"\n    ></aui-picker-panel>\n    <aui-picker-panel\n      class=\"panel__wrapper\"\n      [navRange]=\"rightDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"rightAnchor\"\n      [weekStartDay]=\"weekStartDay\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Right)\"\n    ></aui-picker-panel>\n  </div>\n\n  <aui-calendar-footer\n    [class]=\"bem.element('footer')\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    (clear)=\"clear.next()\"\n    (confirm)=\"confirmValue(rangeValue)\"\n    *ngIf=\"showFooter && showTime\"\n  >\n    <div\n      [class]=\"bem.element('footer-content')\"\n      *ngIf=\"showTime\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'start_date' | auiI18n,\n          value: rangeValue[0]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        [(ngModel)]=\"startTime\"\n        size=\"small\"\n        (ngModelChange)=\"timeChange($event)\"\n        [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n        [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n        [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n      ></aui-time-picker>\n\n      <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'end_date' | auiI18n,\n          value: rangeValue[1]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        size=\"small\"\n        [(ngModel)]=\"endTime\"\n        [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n        [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n        [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n        (ngModelChange)=\"timeChange($event)\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n      ></aui-time-picker>\n    </div>\n  </aui-calendar-footer>\n</div>\n\n<ng-template\n  #datePlaceholder\n  let-placeholder=\"placeholder\"\n  let-value=\"value\"\n>\n  <span\n    *ngIf=\"!value\"\n    class=\"placeholder date-holder\"\n    >{{ placeholder }}</span\n  >\n  <span\n    *ngIf=\"value\"\n    class=\"date-value date-holder\"\n    >{{ value | date: FOOTER_DATE_FORMAT }}</span\n  >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "selectedTime", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DateRangePickerPanelComponent, decorators: [{
             type: Component,
@@ -5652,7 +5798,7 @@ class DatePickerComponent extends CommonFormControl {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipVisibleChange)=\"tooltipVisibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: ["clearable", "clearText", "type", "showTime", "disabledDate", "disabledTime", "weekStartDay", "showFooter", "footerTemplate", "extraFooter", "minDate", "maxDate"], outputs: ["confirm", "clear"] }, { kind: "component", type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipVisibleChange)=\"tooltipVisibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: ["clearable", "clearText", "type", "selectedTime", "showTime", "disabledDate", "disabledTime", "weekStartDay", "showFooter", "footerTemplate", "extraFooter", "minDate", "maxDate"], outputs: ["confirm", "clear"] }, { kind: "component", type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,