ngx-tethys 19.1.13 → 20.0.0-next.0

package/fesm2022/ngx-tethys-date-picker.mjs

@@ -32,10 +32,10 @@ class DateHelperService {
         this.locale = injectLocale();
         this.relyOnDatePipe = this instanceof DateHelperByDatePipe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateHelperService, providedIn: 'root', useFactory: DATE_HELPER_SERVICE_FACTORY }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateHelperService, providedIn: 'root', useFactory: DATE_HELPER_SERVICE_FACTORY }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -61,11 +61,11 @@ class CalendarHeader {
     constructor() {
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.showSuperPreBtn = input(true, { transform: coerceBooleanProperty });
-        this.showSuperNextBtn = input(true, { transform: coerceBooleanProperty });
-        this.showPreBtn = input(true, { transform: coerceBooleanProperty });
-        this.showNextBtn = input(true, { transform: coerceBooleanProperty });
-        this.value = model();
+        this.showSuperPreBtn = input(true, ...(ngDevMode ? [{ debugName: "showSuperPreBtn", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showSuperNextBtn = input(true, ...(ngDevMode ? [{ debugName: "showSuperNextBtn", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showPreBtn = input(true, ...(ngDevMode ? [{ debugName: "showPreBtn", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showNextBtn = input(true, ...(ngDevMode ? [{ debugName: "showNextBtn", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.valueChange = output();
         this.panelModeChange = output();
         this.prefixCls = 'thy-calendar';
@@ -118,12 +118,12 @@ class CalendarHeader {
         const date = this.value().nativeDate;
         return this.dateHelper.format(date, format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: CalendarHeader, isStandalone: true, inputs: { showSuperPreBtn: { classPropertyName: "showSuperPreBtn", publicName: "showSuperPreBtn", isSignal: true, isRequired: false, transformFunction: null }, showSuperNextBtn: { classPropertyName: "showSuperNextBtn", publicName: "showSuperNextBtn", isSignal: true, isRequired: false, transformFunction: null }, showPreBtn: { classPropertyName: "showPreBtn", publicName: "showPreBtn", isSignal: true, isRequired: false, transformFunction: null }, showNextBtn: { classPropertyName: "showNextBtn", publicName: "showNextBtn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", panelModeChange: "panelModeChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: CalendarHeader, isStandalone: true, inputs: { showSuperPreBtn: { classPropertyName: "showSuperPreBtn", publicName: "showSuperPreBtn", isSignal: true, isRequired: false, transformFunction: null }, showSuperNextBtn: { classPropertyName: "showSuperNextBtn", publicName: "showSuperNextBtn", isSignal: true, isRequired: false, transformFunction: null }, showPreBtn: { classPropertyName: "showPreBtn", publicName: "showPreBtn", isSignal: true, isRequired: false, transformFunction: null }, showNextBtn: { classPropertyName: "showNextBtn", publicName: "showNextBtn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", panelModeChange: "panelModeChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarHeader, decorators: [{
             type: Directive
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { showSuperPreBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSuperPreBtn", required: false }] }], showSuperNextBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSuperNextBtn", required: false }] }], showPreBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreBtn", required: false }] }], showNextBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextBtn", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], panelModeChange: [{ type: i0.Output, args: ["panelModeChange"] }] } });
 
 /**
  * @private
@@ -139,10 +139,10 @@ class MonthHeader extends CalendarHeader {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MonthHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MonthHeader, isStandalone: true, selector: "month-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MonthHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MonthHeader, isStandalone: true, selector: "month-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MonthHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MonthHeader, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'month-header', imports: [NgClass, ThyIcon], template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n" }]
         }] });
@@ -155,20 +155,20 @@ class CalendarFooter {
         /**
          * 是否支持设置时间 (时、分)
          */
-        this.showTime = input(false, { transform: coerceBooleanProperty });
+        this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否展示时间 (时、分)
          */
-        this.mustShowTime = input(false, { transform: coerceBooleanProperty });
-        this.value = model();
-        this.timeZone = input();
-        this.disableTimeConfirm = input(false, { transform: coerceBooleanProperty });
+        this.mustShowTime = input(false, ...(ngDevMode ? [{ debugName: "mustShowTime", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
+        this.disableTimeConfirm = input(false, ...(ngDevMode ? [{ debugName: "disableTimeConfirm", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         this.selectTime = output();
         this.clickOk = output();
         this.clickRemove = output();
         this.showTimePickerChange = output();
-        this.isShowTime = signal(false);
-        this.isCanTime = signal(false);
+        this.isShowTime = signal(false, ...(ngDevMode ? [{ debugName: "isShowTime" }] : []));
+        this.isCanTime = signal(false, ...(ngDevMode ? [{ debugName: "isCanTime" }] : []));
         this.locale = injectLocale('datePicker');
         effect(() => {
             this.initTimeShowMode();
@@ -212,13 +212,13 @@ class CalendarFooter {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: CalendarFooter, isStandalone: true, selector: "calendar-footer", inputs: { showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, mustShowTime: { classPropertyName: "mustShowTime", publicName: "mustShowTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, disableTimeConfirm: { classPropertyName: "disableTimeConfirm", publicName: "disableTimeConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectTime: "selectTime", clickOk: "clickOk", clickRemove: "clickRemove", showTimePickerChange: "showTimePickerChange" }, exportAs: ["calendarFooter"], ngImport: i0, template: "@let showTime = isShowTime();\n@let canTime = isCanTime();\n\n@if (showTime || canTime) {\n  <div class=\"time-picker-section\" (click)=\"$event.stopPropagation()\">\n    @if (canTime) {\n      <a href=\"javascript:;\" class=\"link-has-icon time-picker-set-btn\" (click)=\"changeTimeShowMode('show')\">\n        <thy-icon thyIconName=\"clock-circle\"></thy-icon>{{ locale().setTime }}\n      </a>\n    }\n    @if (showTime) {\n      <thy-inner-time-picker\n        class=\"time-picker-wrap\"\n        [showMeridian]=\"false\"\n        [timeZone]=\"timeZone()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onSelectTime($event)\"></thy-inner-time-picker>\n    }\n    <div class=\"time-picker-btn-wrap\">\n      @if (!canTime) {\n        <button [disabled]=\"disableTimeConfirm()\" class=\"time-picker-ok-btn\" thyButton=\"primary\" thySize=\"sm\" (click)=\"onTimeOk()\">\n          {{ locale().ok }}\n        </button>\n      }\n      <button class=\"time-picker-clear-btn\" thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"onClear()\">{{ locale().clear }}</button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInnerTimePicker, selector: "thy-inner-time-picker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowKeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "timeZone"], outputs: ["disabledChange", "isValid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CalendarFooter, isStandalone: true, selector: "calendar-footer", inputs: { showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, mustShowTime: { classPropertyName: "mustShowTime", publicName: "mustShowTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, disableTimeConfirm: { classPropertyName: "disableTimeConfirm", publicName: "disableTimeConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectTime: "selectTime", clickOk: "clickOk", clickRemove: "clickRemove", showTimePickerChange: "showTimePickerChange" }, exportAs: ["calendarFooter"], ngImport: i0, template: "@let showTime = isShowTime();\n@let canTime = isCanTime();\n\n@if (showTime || canTime) {\n  <div class=\"time-picker-section\" (click)=\"$event.stopPropagation()\">\n    @if (canTime) {\n      <a href=\"javascript:;\" class=\"link-has-icon time-picker-set-btn\" (click)=\"changeTimeShowMode('show')\">\n        <thy-icon thyIconName=\"clock-circle\"></thy-icon>{{ locale().setTime }}\n      </a>\n    }\n    @if (showTime) {\n      <thy-inner-time-picker\n        class=\"time-picker-wrap\"\n        [showMeridian]=\"false\"\n        [timeZone]=\"timeZone()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onSelectTime($event)\"></thy-inner-time-picker>\n    }\n    <div class=\"time-picker-btn-wrap\">\n      @if (!canTime) {\n        <button [disabled]=\"disableTimeConfirm()\" class=\"time-picker-ok-btn\" thyButton=\"primary\" thySize=\"sm\" (click)=\"onTimeOk()\">\n          {{ locale().ok }}\n        </button>\n      }\n      <button class=\"time-picker-clear-btn\" thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"onClear()\">{{ locale().clear }}</button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInnerTimePicker, selector: "thy-inner-time-picker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowKeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "timeZone"], outputs: ["disabledChange", "isValid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarFooter, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'calendar-footer', exportAs: 'calendarFooter', imports: [ThyIcon, ThyInnerTimePicker, FormsModule, ThyButton], template: "@let showTime = isShowTime();\n@let canTime = isCanTime();\n\n@if (showTime || canTime) {\n  <div class=\"time-picker-section\" (click)=\"$event.stopPropagation()\">\n    @if (canTime) {\n      <a href=\"javascript:;\" class=\"link-has-icon time-picker-set-btn\" (click)=\"changeTimeShowMode('show')\">\n        <thy-icon thyIconName=\"clock-circle\"></thy-icon>{{ locale().setTime }}\n      </a>\n    }\n    @if (showTime) {\n      <thy-inner-time-picker\n        class=\"time-picker-wrap\"\n        [showMeridian]=\"false\"\n        [timeZone]=\"timeZone()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onSelectTime($event)\"></thy-inner-time-picker>\n    }\n    <div class=\"time-picker-btn-wrap\">\n      @if (!canTime) {\n        <button [disabled]=\"disableTimeConfirm()\" class=\"time-picker-ok-btn\" thyButton=\"primary\" thySize=\"sm\" (click)=\"onTimeOk()\">\n          {{ locale().ok }}\n        </button>\n      }\n      <button class=\"time-picker-clear-btn\" thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"onClear()\">{{ locale().clear }}</button>\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], mustShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustShowTime", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], disableTimeConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableTimeConfirm", required: false }] }], selectTime: [{ type: i0.Output, args: ["selectTime"] }], clickOk: [{ type: i0.Output, args: ["clickOk"] }], clickRemove: [{ type: i0.Output, args: ["clickRemove"] }], showTimePickerChange: [{ type: i0.Output, args: ["showTimePickerChange"] }] } });
 
 /**
  * @deprecated
@@ -346,10 +346,10 @@ class ThyDatePickerConfigService {
     get separator() {
         return this.config.separator.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerConfigService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerConfigService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -614,18 +614,18 @@ class ThyDatePickerFormatPipe {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatPipe, isStandalone: true, name: "thyDatePickerFormat" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatPipe, isStandalone: true, name: "thyDatePickerFormat" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'thyDatePickerFormat'
                 }]
         }] });
 class ThyQuarterPickerFormatPipe {
-    constructor(datePickerConfigService) {
-        this.datePickerConfigService = datePickerConfigService;
+    constructor() {
+        this.datePickerConfigService = inject(ThyDatePickerConfigService);
     }
     transform(originalValue, formatStr, separator) {
         const { value } = transformDateValue(originalValue);
@@ -648,15 +648,15 @@ class ThyQuarterPickerFormatPipe {
                 .join(` ${(separator ?? this.datePickerConfigService.separator)?.trim()} `);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPickerFormatPipe, deps: [{ token: ThyDatePickerConfigService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPickerFormatPipe, isStandalone: true, name: "thyQuarterPickerFormat" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyQuarterPickerFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyQuarterPickerFormatPipe, isStandalone: true, name: "thyQuarterPickerFormat" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPickerFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyQuarterPickerFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'thyQuarterPickerFormat'
                 }]
-        }], ctorParameters: () => [{ type: ThyDatePickerConfigService }] });
+        }] });
 /**
  * @private
  */
@@ -665,10 +665,10 @@ class ThyDatePickerFormatStringPipe {
         const { withTime } = transformDateValue(originalValue);
         return withTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatStringPipe, isStandalone: true, name: "thyDatePickerFormatString" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatStringPipe, isStandalone: true, name: "thyDatePickerFormatString" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerFormatStringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerFormatStringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'thyDatePickerFormatString'
@@ -678,19 +678,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @private
  */
 class DatePickerAdvancedShowYearTipPipe {
-    constructor() { }
     transform(value, type) {
         return type !== 'year' && value.startValue.isSameDay(value.startValue.startOfYear());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, isStandalone: true, name: "showYearTip" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, isStandalone: true, name: "showYearTip" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerAdvancedShowYearTipPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'showYearTip'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * @private
@@ -700,7 +699,7 @@ class DateCarousel {
         this.cdr = inject(ChangeDetectorRef);
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.activeDate = input();
+        this.activeDate = input(...(ngDevMode ? [undefined, { debugName: "activeDate" }] : []));
         this.selectableData = {};
         this.selectedValue = [];
         this.initialized = false;
@@ -1044,8 +1043,8 @@ class DateCarousel {
     ngOnDestroy() {
         this.selectedValueChange$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateCarousel, isStandalone: true, selector: "date-carousel", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-date-picker-advanced-carousel" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateCarousel, isStandalone: true, selector: "date-carousel", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-date-picker-advanced-carousel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1053,7 +1052,7 @@ class DateCarousel {
             }
         ], ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"carouselItem; context: { title: locale().yearText, type: 'year', selectableData: selectableData.year }\"></ng-container>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    carouselItem;\n    context: { title: locale().quarterText, type: 'quarter', selectableData: selectableData.quarter }\n  \"></ng-container>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    carouselItem;\n    context: { title: locale().monthText, type: 'month', selectableData: selectableData.month }\n  \"></ng-container>\n\n<ng-template #carouselItem let-title=\"title\" let-selectableData=\"selectableData\" let-type=\"type\">\n  <div class=\"carousel-item carousel-item-{{ type }}\">\n    <p class=\"carousel-item-title\">{{ title }}</p>\n    <div class=\"carousel-item-content\">\n      <button thyButton=\"outline-default\" thySize=\"sm\" class=\"right-space\" (click)=\"prevClick(type)\">\n        <thy-icon thyIconName=\"angle-left\"></thy-icon>\n      </button>\n      @for (item of selectableData; track $index) {\n        <div\n          class=\"selectable-button right-space\"\n          (click)=\"selectDate(type, item)\"\n          (mouseenter)=\"onMouseenter($event, type, item)\"\n          (mouseleave)=\"onMouseleave($event, type, item)\"\n          [ngClass]=\"item.classMap\">\n          @if (item | showYearTip: type) {\n            <span class=\"year-tip\">{{ item?.startValue?.getYear() }}</span>\n          }\n          @if (item.isInRange && isSelected(item)) {\n            <thy-icon thyIconName=\"close\"></thy-icon>\n          }\n          @if (item.isInRange && !isSelected(item)) {\n            <thy-icon thyIconName=\"plus\"></thy-icon>\n          }\n          @if (!item.isInRange) {\n            <span>{{ item?.content }}</span>\n          }\n        </div>\n      }\n      <button thyButton=\"outline-default\" thySize=\"sm\" (click)=\"nextClick(type)\">\n        <thy-icon thyIconName=\"angle-right\"></thy-icon>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePickerAdvancedShowYearTipPipe, name: "showYearTip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateCarousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateCarousel, decorators: [{
             type: Component,
             args: [{ selector: 'date-carousel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1064,7 +1063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     ], host: {
                         class: 'thy-date-picker-advanced-carousel'
                     }, imports: [NgTemplateOutlet, ThyButton, ThyIcon, NgClass, DatePickerAdvancedShowYearTipPipe], template: "<ng-container\n  *ngTemplateOutlet=\"carouselItem; context: { title: locale().yearText, type: 'year', selectableData: selectableData.year }\"></ng-container>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    carouselItem;\n    context: { title: locale().quarterText, type: 'quarter', selectableData: selectableData.quarter }\n  \"></ng-container>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    carouselItem;\n    context: { title: locale().monthText, type: 'month', selectableData: selectableData.month }\n  \"></ng-container>\n\n<ng-template #carouselItem let-title=\"title\" let-selectableData=\"selectableData\" let-type=\"type\">\n  <div class=\"carousel-item carousel-item-{{ type }}\">\n    <p class=\"carousel-item-title\">{{ title }}</p>\n    <div class=\"carousel-item-content\">\n      <button thyButton=\"outline-default\" thySize=\"sm\" class=\"right-space\" (click)=\"prevClick(type)\">\n        <thy-icon thyIconName=\"angle-left\"></thy-icon>\n      </button>\n      @for (item of selectableData; track $index) {\n        <div\n          class=\"selectable-button right-space\"\n          (click)=\"selectDate(type, item)\"\n          (mouseenter)=\"onMouseenter($event, type, item)\"\n          (mouseleave)=\"onMouseleave($event, type, item)\"\n          [ngClass]=\"item.classMap\">\n          @if (item | showYearTip: type) {\n            <span class=\"year-tip\">{{ item?.startValue?.getYear() }}</span>\n          }\n          @if (item.isInRange && isSelected(item)) {\n            <thy-icon thyIconName=\"close\"></thy-icon>\n          }\n          @if (item.isInRange && !isSelected(item)) {\n            <thy-icon thyIconName=\"plus\"></thy-icon>\n          }\n          @if (!item.isInRange) {\n            <span>{{ item?.content }}</span>\n          }\n        </div>\n      }\n      <button thyButton=\"outline-default\" thySize=\"sm\" (click)=\"nextClick(type)\">\n        <thy-icon thyIconName=\"angle-right\"></thy-icon>\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }] });
+        }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }] } });
 
 /**
  * @private
@@ -1088,10 +1087,10 @@ class DateHeader extends CalendarHeader {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateHeader, isStandalone: true, selector: "date-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateHeader, isStandalone: true, selector: "date-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateHeader, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'date-header', imports: [NgClass, ThyIcon], template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n" }]
         }] });
@@ -1107,15 +1106,15 @@ class CalendarTable {
         this.bodyRows = [];
         this.MAX_ROW = 6;
         this.MAX_COL = 7;
-        this.prefixCls = input('thy-calendar');
-        this.value = model();
-        this.activeDate = model(new TinyDate());
-        this.showWeek = input(false, { transform: coerceBooleanProperty });
-        this.selectedValue = input([]);
-        this.hoverValue = input([]);
-        this.timeZone = input();
-        this.disabledDate = input();
-        this.cellRender = input();
+        this.prefixCls = input('thy-calendar', ...(ngDevMode ? [{ debugName: "prefixCls" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.activeDate = model(new TinyDate(), ...(ngDevMode ? [{ debugName: "activeDate" }] : []));
+        this.showWeek = input(false, ...(ngDevMode ? [{ debugName: "showWeek", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.selectedValue = input([], ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+        this.hoverValue = input([], ...(ngDevMode ? [{ debugName: "hoverValue" }] : []));
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
+        this.disabledDate = input(...(ngDevMode ? [undefined, { debugName: "disabledDate" }] : []));
+        this.cellRender = input(...(ngDevMode ? [undefined, { debugName: "cellRender" }] : []));
         this.valueChange = output();
         this.cellHover = output(); // Emitted when hover on a day by mouse enter
     }
@@ -1172,12 +1171,12 @@ class CalendarTable {
     isSameDate(left, right) {
         return (!left && !right) || (left && right && right.isSameDay(left));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarTable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: CalendarTable, isStandalone: true, inputs: { prefixCls: { classPropertyName: "prefixCls", publicName: "prefixCls", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, hoverValue: { classPropertyName: "hoverValue", publicName: "hoverValue", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, cellRender: { classPropertyName: "cellRender", publicName: "cellRender", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeDate: "activeDateChange", valueChange: "valueChange", cellHover: "cellHover" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarTable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: CalendarTable, isStandalone: true, inputs: { prefixCls: { classPropertyName: "prefixCls", publicName: "prefixCls", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, hoverValue: { classPropertyName: "hoverValue", publicName: "hoverValue", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, cellRender: { classPropertyName: "cellRender", publicName: "cellRender", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeDate: "activeDateChange", valueChange: "valueChange", cellHover: "cellHover" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CalendarTable, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { prefixCls: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixCls", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }, { type: i0.Output, args: ["activeDateChange"] }], showWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeek", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], hoverValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverValue", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], cellRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRender", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], cellHover: [{ type: i0.Output, args: ["cellHover"] }] } });
 
 /**
  * @private
@@ -1186,8 +1185,8 @@ class DateTableCell {
     constructor() {
         this.datePickerConfigService = inject(ThyDatePickerConfigService);
         this.isTemplateRef = isTemplateRef;
-        this.prefixCls = input();
-        this.cell = input();
+        this.prefixCls = input(...(ngDevMode ? [undefined, { debugName: "prefixCls" }] : []));
+        this.cell = input(...(ngDevMode ? [undefined, { debugName: "cell" }] : []));
         this.isNonEmptyString = (v) => isEmpty(v) && isString(v);
         this.functionRenderResult = computed(() => {
             const renderFn = this.cellRender();
@@ -1196,22 +1195,22 @@ class DateTableCell {
             }
             const result = renderFn(this.cell().value);
             return !isUndefinedOrNull(result);
-        });
+        }, ...(ngDevMode ? [{ debugName: "functionRenderResult" }] : []));
         this.cellRender = computed(() => {
             return this.cell()?.dateCellRender || this.datePickerConfigService.config?.dateCellRender;
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellRender" }] : []));
     }
     cellClick(event) {
         event.stopPropagation();
         this.cell().onClick();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateTableCell, isStandalone: true, selector: "[date-table-cell]", inputs: { prefixCls: { classPropertyName: "prefixCls", publicName: "prefixCls", isSignal: true, isRequired: false, transformFunction: null }, cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dateTableCell"], ngImport: i0, template: "@let prefixClass = prefixCls();\n@let dateCell = cell();\n@let dateCellRender = cellRender();\n\n@switch (prefixClass) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"dateCellRender; context: { $implicit: dateCell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(dateCellRender)) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"dateCellRender\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"$any(dateCellRender)(dateCell.value)\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixClass }}-date\" [attr.aria-selected]=\"dateCell.isSelected\" [attr.aria-disabled]=\"dateCell.isDisabled\">\n          {{ dateCell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixClass }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"dateCell.isToday\">\n      @if (dateCell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(dateCell.fullCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixClass }}-date-value\">\n          <span class=\"{{ prefixClass }}-date-value-today-text\">\n            <span class=\"{{ prefixClass }}-date-value-text\">{{ dateCell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixClass }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(dateCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateTableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateTableCell, isStandalone: true, selector: "[date-table-cell]", inputs: { prefixCls: { classPropertyName: "prefixCls", publicName: "prefixCls", isSignal: true, isRequired: false, transformFunction: null }, cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dateTableCell"], ngImport: i0, template: "@let prefixClass = prefixCls();\n@let dateCell = cell();\n@let dateCellRender = cellRender();\n\n@switch (prefixClass) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"dateCellRender; context: { $implicit: dateCell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(dateCellRender)) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"dateCellRender\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"$any(dateCellRender)(dateCell.value)\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixClass }}-date\" [attr.aria-selected]=\"dateCell.isSelected\" [attr.aria-disabled]=\"dateCell.isDisabled\">\n          {{ dateCell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixClass }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"dateCell.isToday\">\n      @if (dateCell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(dateCell.fullCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixClass }}-date-value\">\n          <span class=\"{{ prefixClass }}-date-value-today-text\">\n            <span class=\"{{ prefixClass }}-date-value-text\">{{ dateCell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixClass }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(dateCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateTableCell, decorators: [{
             type: Component,
             args: [{ selector: '[date-table-cell]', exportAs: 'dateTableCell', imports: [NgTemplateOutlet], template: "@let prefixClass = prefixCls();\n@let dateCell = cell();\n@let dateCellRender = cellRender();\n\n@switch (prefixClass) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"dateCellRender; context: { $implicit: dateCell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(dateCellRender)) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"dateCellRender\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span (click)=\"cellClick($event)\" [innerHTML]=\"$any(dateCellRender)(dateCell.value)\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixClass }}-date\" [attr.aria-selected]=\"dateCell.isSelected\" [attr.aria-disabled]=\"dateCell.isDisabled\">\n          {{ dateCell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixClass }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"dateCell.isToday\">\n      @if (dateCell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(dateCell.fullCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixClass }}-date-value\">\n          <span class=\"{{ prefixClass }}-date-value-today-text\">\n            <span class=\"{{ prefixClass }}-date-value-text\">{{ dateCell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixClass }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(dateCellRender); context: { $implicit: dateCell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
-        }] });
+        }], propDecorators: { prefixCls: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixCls", required: false }] }], cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: false }] }] } });
 
 /**
  * @private
@@ -1353,13 +1352,13 @@ class DateTable extends CalendarTable {
             [`${prefixCls}-in-range-cell`]: !!cell.isInRange
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DateTable, isStandalone: true, selector: "date-table", outputs: { dayHover: "dayHover" }, exportAs: ["dateTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-table\" cellSpacing=\"0\" role=\"grid\">\n  <thead>\n    <tr role=\"row\">\n      @if (showWeek()) {\n        <th role=\"columnheader\" [title]=\"locale().week\" class=\"{{ prefixClass }}-column-header {{ prefixClass }}-week-number-header\">\n          <span class=\"{{ prefixClass }}-column-header-inner\">{{ locale().prefixWeek }}</span>\n        </th>\n      }\n      @for (cell of headRow; track $index) {\n        <th role=\"columnheader\" title=\"{{ cell.title }}\" class=\"{{ prefixClass }}-column-header\">\n          @if (prefixClass === 'thy-calendar') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n          @if (prefixClass === 'thy-calendar-full') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"{{ prefixClass }}-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr [ngClass]=\"row.classMap\" role=\"row\">\n        @if (row.weekNum) {\n          <td role=\"gridcell\" class=\"{{ prefixClass }}-week-number-cell\">\n            {{ row.weekNum }}\n          </td>\n        }\n        @for (cell of row.dateCells; track $index) {\n          <td\n            role=\"gridcell\"\n            [ngClass]=\"cell.classMap\"\n            (click)=\"cell.isDisabled ? null : cell.onClick()\"\n            date-table-cell\n            [prefixCls]=\"prefixClass\"\n            [cell]=\"cell\"></td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateTableCell, selector: "[date-table-cell]", inputs: ["prefixCls", "cell"], exportAs: ["dateTableCell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateTable, isStandalone: true, selector: "date-table", outputs: { dayHover: "dayHover" }, exportAs: ["dateTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-table\" cellSpacing=\"0\" role=\"grid\">\n  <thead>\n    <tr role=\"row\">\n      @if (showWeek()) {\n        <th role=\"columnheader\" [title]=\"locale().week\" class=\"{{ prefixClass }}-column-header {{ prefixClass }}-week-number-header\">\n          <span class=\"{{ prefixClass }}-column-header-inner\">{{ locale().prefixWeek }}</span>\n        </th>\n      }\n      @for (cell of headRow; track $index) {\n        <th role=\"columnheader\" title=\"{{ cell.title }}\" class=\"{{ prefixClass }}-column-header\">\n          @if (prefixClass === 'thy-calendar') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n          @if (prefixClass === 'thy-calendar-full') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"{{ prefixClass }}-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr [ngClass]=\"row.classMap\" role=\"row\">\n        @if (row.weekNum) {\n          <td role=\"gridcell\" class=\"{{ prefixClass }}-week-number-cell\">\n            {{ row.weekNum }}\n          </td>\n        }\n        @for (cell of row.dateCells; track $index) {\n          <td\n            role=\"gridcell\"\n            [ngClass]=\"cell.classMap\"\n            (click)=\"cell.isDisabled ? null : cell.onClick()\"\n            date-table-cell\n            [prefixCls]=\"prefixClass\"\n            [cell]=\"cell\"></td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateTableCell, selector: "[date-table-cell]", inputs: ["prefixCls", "cell"], exportAs: ["dateTableCell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateTable, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'date-table', exportAs: 'dateTable', imports: [NgClass, DateTableCell], template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-table\" cellSpacing=\"0\" role=\"grid\">\n  <thead>\n    <tr role=\"row\">\n      @if (showWeek()) {\n        <th role=\"columnheader\" [title]=\"locale().week\" class=\"{{ prefixClass }}-column-header {{ prefixClass }}-week-number-header\">\n          <span class=\"{{ prefixClass }}-column-header-inner\">{{ locale().prefixWeek }}</span>\n        </th>\n      }\n      @for (cell of headRow; track $index) {\n        <th role=\"columnheader\" title=\"{{ cell.title }}\" class=\"{{ prefixClass }}-column-header\">\n          @if (prefixClass === 'thy-calendar') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n          @if (prefixClass === 'thy-calendar-full') {\n            <span class=\"{{ prefixClass }}-column-header-inner\">{{ cell.content }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"{{ prefixClass }}-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr [ngClass]=\"row.classMap\" role=\"row\">\n        @if (row.weekNum) {\n          <td role=\"gridcell\" class=\"{{ prefixClass }}-week-number-cell\">\n            {{ row.weekNum }}\n          </td>\n        }\n        @for (cell of row.dateCells; track $index) {\n          <td\n            role=\"gridcell\"\n            [ngClass]=\"cell.classMap\"\n            (click)=\"cell.isDisabled ? null : cell.onClick()\"\n            date-table-cell\n            [prefixCls]=\"prefixClass\"\n            [cell]=\"cell\"></td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dayHover: [{ type: i0.Output, args: ["dayHover"] }] } });
 
 /**
  * @private
@@ -1367,8 +1366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class DecadeHeader extends CalendarHeader {
     constructor() {
         super(...arguments);
-        this.startYear = computed(() => parseInt(`${this.value().getYear() / 100}`, 10) * 100);
-        this.endYear = computed(() => this.startYear() + 99);
+        this.startYear = computed(() => parseInt(`${this.value().getYear() / 100}`, 10) * 100, ...(ngDevMode ? [{ debugName: "startYear" }] : []));
+        this.endYear = computed(() => this.startYear() + 99, ...(ngDevMode ? [{ debugName: "endYear" }] : []));
     }
     superPrevious() {
         const newValue = this.value().addYears(-100);
@@ -1388,10 +1387,10 @@ class DecadeHeader extends CalendarHeader {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DecadeHeader, isStandalone: true, selector: "decade-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DecadeHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DecadeHeader, isStandalone: true, selector: "decade-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DecadeHeader, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'decade-header', imports: [NgClass, ThyIcon], template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n" }]
         }] });
@@ -1404,8 +1403,8 @@ class DecadeTable extends CalendarTable {
         super(...arguments);
         this.MAX_ROW = 4;
         this.MAX_COL = 3;
-        this.startYear = computed(() => parseInt(`${this.activeDate().getYear() / 100}`, 10) * 100);
-        this.endYear = computed(() => this.startYear() + 99);
+        this.startYear = computed(() => parseInt(`${this.activeDate().getYear() / 100}`, 10) * 100, ...(ngDevMode ? [{ debugName: "startYear" }] : []));
+        this.endYear = computed(() => this.startYear() + 99, ...(ngDevMode ? [{ debugName: "endYear" }] : []));
     }
     chooseDecade(startYear) {
         const newValue = (this.value() || new TinyDate()).setYear(startYear);
@@ -1462,10 +1461,10 @@ class DecadeTable extends CalendarTable {
         event.stopPropagation();
         cell.onClick();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DecadeTable, isStandalone: true, selector: "decade-table", exportAs: ["decadeTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-decade-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-decade-panel-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr role=\"row\">\n        @for (cell of row.dateCells; track $index) {\n          <td role=\"gridcell\" title=\"{{ cell.title }}\" (click)=\"cellClick($event, cell)\" [ngClass]=\"cell.classMap\">\n            <a class=\"{{ prefixClass }}-decade-panel-decade\">{{ cell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DecadeTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DecadeTable, isStandalone: true, selector: "decade-table", exportAs: ["decadeTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-decade-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-decade-panel-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr role=\"row\">\n        @for (cell of row.dateCells; track $index) {\n          <td role=\"gridcell\" title=\"{{ cell.title }}\" (click)=\"cellClick($event, cell)\" [ngClass]=\"cell.classMap\">\n            <a class=\"{{ prefixClass }}-decade-panel-decade\">{{ cell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DecadeTable, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'decade-table', exportAs: 'decadeTable', imports: [NgClass], template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-decade-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-decade-panel-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr role=\"row\">\n        @for (cell of row.dateCells; track $index) {\n          <td role=\"gridcell\" title=\"{{ cell.title }}\" (click)=\"cellClick($event, cell)\" [ngClass]=\"cell.classMap\">\n            <a class=\"{{ prefixClass }}-decade-panel-decade\">{{ cell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }] });
@@ -1555,10 +1554,10 @@ class MonthTable extends CalendarTable {
             [`${prefixCls}-month-panel-current-cell`]: new TinyDate().getYear() === this.activeDate().getYear() && cell.value.getMonth() === new TinyDate().getMonth()
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MonthTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MonthTable, isStandalone: true, selector: "month-table", exportAs: ["monthTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-month-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (monthCell of row.dateCells; track trackByBodyColumn($index, monthCell)) {\n          <td role=\"gridcell\" title=\"{{ monthCell.title }}\" (click)=\"monthCellClick($event, monthCell)\" [ngClass]=\"monthCell.classMap\">\n            @switch (prefixClass) {\n              @case ('thy-calendar') {\n                <div class=\"{{ prefixClass }}-month-panel-month\">{{ monthCell.content }}</div>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MonthTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MonthTable, isStandalone: true, selector: "month-table", exportAs: ["monthTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-month-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (monthCell of row.dateCells; track trackByBodyColumn($index, monthCell)) {\n          <td role=\"gridcell\" title=\"{{ monthCell.title }}\" (click)=\"monthCellClick($event, monthCell)\" [ngClass]=\"monthCell.classMap\">\n            @switch (prefixClass) {\n              @case ('thy-calendar') {\n                <div class=\"{{ prefixClass }}-month-panel-month\">{{ monthCell.content }}</div>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MonthTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MonthTable, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'month-table', exportAs: 'monthTable', imports: [NgClass], template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-month-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (monthCell of row.dateCells; track trackByBodyColumn($index, monthCell)) {\n          <td role=\"gridcell\" title=\"{{ monthCell.title }}\" (click)=\"monthCellClick($event, monthCell)\" [ngClass]=\"monthCell.classMap\">\n            @switch (prefixClass) {\n              @case ('thy-calendar') {\n                <div class=\"{{ prefixClass }}-month-panel-month\">{{ monthCell.content }}</div>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [] });
@@ -1649,10 +1648,10 @@ class QuarterTable extends CalendarTable {
             [`${prefixCls}-quarter-panel-current-cell`]: new TinyDate().getYear() === this.activeDate().getYear() && quarter.getQuarter() === new TinyDate().getQuarter()
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: QuarterTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: QuarterTable, isStandalone: true, selector: "quarter-table", exportAs: ["quarterTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-quarter-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-quarter-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (quarterCell of row.dateCells; track trackByBodyColumn($index, quarterCell)) {\n          <td\n            role=\"gridcell\"\n            title=\"{{ quarterCell.title }}\"\n            (click)=\"quarterCellClick($event, quarterCell)\"\n            [ngClass]=\"quarterCell.classMap\">\n            <a class=\"{{ prefixClass }}-quarter-panel-quarter\">{{ quarterCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuarterTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: QuarterTable, isStandalone: true, selector: "quarter-table", exportAs: ["quarterTable"], usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-quarter-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-quarter-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (quarterCell of row.dateCells; track trackByBodyColumn($index, quarterCell)) {\n          <td\n            role=\"gridcell\"\n            title=\"{{ quarterCell.title }}\"\n            (click)=\"quarterCellClick($event, quarterCell)\"\n            [ngClass]=\"quarterCell.classMap\">\n            <a class=\"{{ prefixClass }}-quarter-panel-quarter\">{{ quarterCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: QuarterTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuarterTable, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'quarter-table', exportAs: 'quarterTable', imports: [NgClass], template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-quarter-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-quarter-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (quarterCell of row.dateCells; track trackByBodyColumn($index, quarterCell)) {\n          <td\n            role=\"gridcell\"\n            title=\"{{ quarterCell.title }}\"\n            (click)=\"quarterCellClick($event, quarterCell)\"\n            [ngClass]=\"quarterCell.classMap\">\n            <a class=\"{{ prefixClass }}-quarter-panel-quarter\">{{ quarterCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }] });
@@ -1663,8 +1662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class YearHeader extends CalendarHeader {
     constructor() {
         super(...arguments);
-        this.startYear = computed(() => parseInt(`${this.value().getYear() / 10}`, 10) * 10);
-        this.endYear = computed(() => this.startYear() + 9);
+        this.startYear = computed(() => parseInt(`${this.value().getYear() / 10}`, 10) * 10, ...(ngDevMode ? [{ debugName: "startYear" }] : []));
+        this.endYear = computed(() => this.startYear() + 9, ...(ngDevMode ? [{ debugName: "endYear" }] : []));
     }
     superPrevious() {
         const newValue = this.value().addYears(-10);
@@ -1684,10 +1683,10 @@ class YearHeader extends CalendarHeader {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: YearHeader, isStandalone: true, selector: "year-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YearHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: YearHeader, isStandalone: true, selector: "year-header", usesInheritance: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YearHeader, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'year-header', imports: [NgClass, ThyIcon], template: "<div class=\"{{ prefixCls }}-header\">\n  <div style=\"position: relative\">\n    <a\n      class=\"{{ prefixCls }}-prev-year-btn\"\n      [ngClass]=\"showSuperPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superPrevious()\"\n      [title]=\"locale().previousYear\">\n      <thy-icon thyIconName=\"angle-double-left\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-prev-month-btn\"\n      [ngClass]=\"showPreBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"previous()\"\n      [title]=\"locale().previousMonth\">\n      <thy-icon thyIconName=\"angle-left\"></thy-icon>\n    </a>\n\n    <span class=\"{{ prefixCls }}-my-select\">\n      @for (selector of selectors; track $index) {\n        <a class=\"{{ selector.className }}\" role=\"button\" (click)=\"selectorClick($event, selector)\" title=\"{{ selector.title || null }}\">\n          {{ selector.label }}\n        </a>\n      }\n    </span>\n\n    <a\n      class=\"{{ prefixCls }}-next-month-btn\"\n      [ngClass]=\"showNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"next()\"\n      [title]=\"locale().nextMonth\">\n      <thy-icon thyIconName=\"angle-right\"></thy-icon>\n    </a>\n    <a\n      class=\"{{ prefixCls }}-next-year-btn\"\n      [ngClass]=\"showSuperNextBtn() ? 'd-block' : 'd-none'\"\n      role=\"button\"\n      (click)=\"superNext()\"\n      [title]=\"locale().nextYear\">\n      <thy-icon thyIconName=\"angle-double-right\"></thy-icon>\n    </a>\n  </div>\n</div>\n" }]
         }] });
@@ -1784,13 +1783,13 @@ class YearTable extends CalendarTable {
             [`${prefixCls}-in-range-cell`]: !!cell.isInRange
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: YearTable, isStandalone: true, selector: "year-table", outputs: { decadePanelShow: "decadePanelShow" }, usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-year-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-year-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (yearCell of row.dateCells; track trackByBodyColumn($index, yearCell)) {\n          <td role=\"gridcell\" title=\"{{ yearCell.title }}\" (click)=\"yearCellClick($event, yearCell)\" [ngClass]=\"yearCell.classMap\">\n            <a class=\"{{ prefixClass }}-year-panel-year\">{{ yearCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YearTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: YearTable, isStandalone: true, selector: "year-table", outputs: { decadePanelShow: "decadePanelShow" }, usesInheritance: true, ngImport: i0, template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-year-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-year-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (yearCell of row.dateCells; track trackByBodyColumn($index, yearCell)) {\n          <td role=\"gridcell\" title=\"{{ yearCell.title }}\" (click)=\"yearCellClick($event, yearCell)\" [ngClass]=\"yearCell.classMap\">\n            <a class=\"{{ prefixClass }}-year-panel-year\">{{ yearCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: YearTable, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'year-table', imports: [NgClass], template: "@let prefixClass = prefixCls();\n<table class=\"{{ prefixClass }}-year-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixClass }}-year-panel-tbody\">\n    @for (row of bodyRows; track trackByBodyRow($index, row)) {\n      <tr role=\"row\">\n        @for (yearCell of row.dateCells; track trackByBodyColumn($index, yearCell)) {\n          <td role=\"gridcell\" title=\"{{ yearCell.title }}\" (click)=\"yearCellClick($event, yearCell)\" [ngClass]=\"yearCell.classMap\">\n            <a class=\"{{ prefixClass }}-year-panel-year\">{{ yearCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }] });
+        }], propDecorators: { decadePanelShow: [{ type: i0.Output, args: ["decadePanelShow"] }] } });
 
 /**
  * @private
@@ -1799,27 +1798,32 @@ class InnerPopup {
     constructor() {
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.showWeek = input(false, { transform: coerceBooleanProperty });
-        this.isRange = input(false, { transform: coerceBooleanProperty });
-        this.activeDate = model();
-        this.rangeActiveDate = input(); // Range ONLY
-        this.disabledDate = input();
-        this.dateRender = input();
-        this.selectedValue = input(); // Range ONLY
-        this.hoverValue = input(); // Range ONLY
-        this.panelMode = input(null, {
-            transform: (value) => {
-                if (value === 'time') {
-                    return 'date';
+        this.showWeek = input(false, ...(ngDevMode ? [{ debugName: "showWeek", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.isRange = input(false, ...(ngDevMode ? [{ debugName: "isRange", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.activeDate = model(...(ngDevMode ? [undefined, { debugName: "activeDate" }] : []));
+        this.rangeActiveDate = input(...(ngDevMode ? [undefined, { debugName: "rangeActiveDate" }] : [])); // Range ONLY
+        this.disabledDate = input(...(ngDevMode ? [undefined, { debugName: "disabledDate" }] : []));
+        this.dateRender = input(...(ngDevMode ? [undefined, { debugName: "dateRender" }] : []));
+        this.selectedValue = input(...(ngDevMode ? [undefined, { debugName: "selectedValue" }] : [])); // Range ONLY
+        this.hoverValue = input(...(ngDevMode ? [undefined, { debugName: "hoverValue" }] : [])); // Range ONLY
+        this.panelMode = input(null, ...(ngDevMode ? [{ debugName: "panelMode", transform: (value) => {
+                    if (value === 'time') {
+                        return 'date';
+                    }
+                    return value;
+                } }] : [{
+                transform: (value) => {
+                    if (value === 'time') {
+                        return 'date';
+                    }
+                    return value;
                 }
-                return value;
-            }
-        });
-        this.timeZone = input();
-        this.showDateRangeInput = input(false, { transform: coerceBooleanProperty });
-        this.partType = input();
-        this.endPanelMode = input();
-        this.value = model();
+            }]));
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
+        this.showDateRangeInput = input(false, ...(ngDevMode ? [{ debugName: "showDateRangeInput", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.partType = input(...(ngDevMode ? [undefined, { debugName: "partType" }] : []));
+        this.endPanelMode = input(...(ngDevMode ? [undefined, { debugName: "endPanelMode" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.panelModeChange = output();
         this.headerChange = output();
         this.selectDate = output();
@@ -1928,10 +1932,10 @@ class InnerPopup {
             return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InnerPopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: InnerPopup, isStandalone: true, selector: "inner-popup", inputs: { showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, rangeActiveDate: { classPropertyName: "rangeActiveDate", publicName: "rangeActiveDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, dateRender: { classPropertyName: "dateRender", publicName: "dateRender", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, hoverValue: { classPropertyName: "hoverValue", publicName: "hoverValue", isSignal: true, isRequired: false, transformFunction: null }, panelMode: { classPropertyName: "panelMode", publicName: "panelMode", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, showDateRangeInput: { classPropertyName: "showDateRangeInput", publicName: "showDateRangeInput", isSignal: true, isRequired: false, transformFunction: null }, partType: { classPropertyName: "partType", publicName: "partType", isSignal: true, isRequired: false, transformFunction: null }, endPanelMode: { classPropertyName: "endPanelMode", publicName: "endPanelMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDate: "activeDateChange", value: "valueChange", panelModeChange: "panelModeChange", headerChange: "headerChange", selectDate: "selectDate", dayHover: "dayHover" }, host: { properties: { "class.thy-calendar-picker-inner-popup-with-range-input": "showDateRangeInput()" }, classAttribute: "thy-calendar-picker-inner-popup" }, exportAs: ["innerPopup"], ngImport: i0, template: "@if (showDateRangeInput()) {\n  <div class=\"{{ prefixCls }}-picker-inner-popup-range-input\">\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[0])\" [placeholder]=\"locale().startDate\" />\n    <span class=\"split\"></span>\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[1])\" [placeholder]=\"locale().endDate\" />\n  </div>\n}\n@switch (panelMode()) {\n  @case ('decade') {\n    <div class=\"{{ prefixCls }}-decade\">\n      <decade-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'decade')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'decade')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </decade-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <decade-table [value]=\"value()\" [activeDate]=\"activeDate()\" (valueChange)=\"onChooseDecade($event)\"></decade-table>\n      </div>\n    </div>\n  }\n  @case ('year') {\n    <div class=\"{{ prefixCls }}-year\">\n      <year-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'year')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'year')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </year-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <year-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseYear($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </year-table>\n      </div>\n    </div>\n  }\n  @case ('month') {\n    <div class=\"{{ prefixCls }}-month\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <month-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseMonth($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </month-table>\n      </div>\n    </div>\n  }\n  @case ('quarter') {\n    <div class=\"{{ prefixCls }}-quarter\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <quarter-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseQuarter($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </quarter-table>\n      </div>\n    </div>\n  }\n  @default {\n    <date-header\n      [(value)]=\"activeDate\"\n      [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'date')\"\n      [showSuperNextBtn]=\"enableSuperPrevNext('next', 'date')\"\n      [showPreBtn]=\"enablePrevNext('prev', 'date')\"\n      [showNextBtn]=\"enablePrevNext('next', 'date')\"\n      (panelModeChange)=\"panelModeChange.emit($event)\"\n      (valueChange)=\"headerChange.emit($event)\"></date-header>\n    <div class=\"{{ prefixCls }}-body\">\n      <date-table\n        [showWeek]=\"showWeek()\"\n        [value]=\"value()\"\n        [activeDate]=\"activeDate()\"\n        (valueChange)=\"onSelectDate($event)\"\n        showWeekNumber=\"false\"\n        [disabledDate]=\"disabledDate()\"\n        [cellRender]=\"dateRender()\"\n        [selectedValue]=\"selectedValue()\"\n        [hoverValue]=\"hoverValue()\"\n        [timeZone]=\"timeZone()\"\n        (dayHover)=\"dayHover.emit($event)\"></date-table>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: DecadeHeader, selector: "decade-header" }, { kind: "component", type: DecadeTable, selector: "decade-table", exportAs: ["decadeTable"] }, { kind: "component", type: YearHeader, selector: "year-header" }, { kind: "component", type: YearTable, selector: "year-table", outputs: ["decadePanelShow"] }, { kind: "component", type: MonthHeader, selector: "month-header" }, { kind: "component", type: MonthTable, selector: "month-table", exportAs: ["monthTable"] }, { kind: "component", type: QuarterTable, selector: "quarter-table", exportAs: ["quarterTable"] }, { kind: "component", type: DateHeader, selector: "date-header" }, { kind: "component", type: DateTable, selector: "date-table", outputs: ["dayHover"], exportAs: ["dateTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InnerPopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: InnerPopup, isStandalone: true, selector: "inner-popup", inputs: { showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, rangeActiveDate: { classPropertyName: "rangeActiveDate", publicName: "rangeActiveDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, dateRender: { classPropertyName: "dateRender", publicName: "dateRender", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, hoverValue: { classPropertyName: "hoverValue", publicName: "hoverValue", isSignal: true, isRequired: false, transformFunction: null }, panelMode: { classPropertyName: "panelMode", publicName: "panelMode", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, showDateRangeInput: { classPropertyName: "showDateRangeInput", publicName: "showDateRangeInput", isSignal: true, isRequired: false, transformFunction: null }, partType: { classPropertyName: "partType", publicName: "partType", isSignal: true, isRequired: false, transformFunction: null }, endPanelMode: { classPropertyName: "endPanelMode", publicName: "endPanelMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDate: "activeDateChange", value: "valueChange", panelModeChange: "panelModeChange", headerChange: "headerChange", selectDate: "selectDate", dayHover: "dayHover" }, host: { properties: { "class.thy-calendar-picker-inner-popup-with-range-input": "showDateRangeInput()" }, classAttribute: "thy-calendar-picker-inner-popup" }, exportAs: ["innerPopup"], ngImport: i0, template: "@if (showDateRangeInput()) {\n  <div class=\"{{ prefixCls }}-picker-inner-popup-range-input\">\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[0])\" [placeholder]=\"locale().startDate\" />\n    <span class=\"split\"></span>\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[1])\" [placeholder]=\"locale().endDate\" />\n  </div>\n}\n@switch (panelMode()) {\n  @case ('decade') {\n    <div class=\"{{ prefixCls }}-decade\">\n      <decade-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'decade')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'decade')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </decade-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <decade-table [value]=\"value()\" [activeDate]=\"activeDate()\" (valueChange)=\"onChooseDecade($event)\"></decade-table>\n      </div>\n    </div>\n  }\n  @case ('year') {\n    <div class=\"{{ prefixCls }}-year\">\n      <year-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'year')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'year')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </year-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <year-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseYear($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </year-table>\n      </div>\n    </div>\n  }\n  @case ('month') {\n    <div class=\"{{ prefixCls }}-month\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <month-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseMonth($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </month-table>\n      </div>\n    </div>\n  }\n  @case ('quarter') {\n    <div class=\"{{ prefixCls }}-quarter\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <quarter-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseQuarter($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </quarter-table>\n      </div>\n    </div>\n  }\n  @default {\n    <date-header\n      [(value)]=\"activeDate\"\n      [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'date')\"\n      [showSuperNextBtn]=\"enableSuperPrevNext('next', 'date')\"\n      [showPreBtn]=\"enablePrevNext('prev', 'date')\"\n      [showNextBtn]=\"enablePrevNext('next', 'date')\"\n      (panelModeChange)=\"panelModeChange.emit($event)\"\n      (valueChange)=\"headerChange.emit($event)\"></date-header>\n    <div class=\"{{ prefixCls }}-body\">\n      <date-table\n        [showWeek]=\"showWeek()\"\n        [value]=\"value()\"\n        [activeDate]=\"activeDate()\"\n        (valueChange)=\"onSelectDate($event)\"\n        showWeekNumber=\"false\"\n        [disabledDate]=\"disabledDate()\"\n        [cellRender]=\"dateRender()\"\n        [selectedValue]=\"selectedValue()\"\n        [hoverValue]=\"hoverValue()\"\n        [timeZone]=\"timeZone()\"\n        (dayHover)=\"dayHover.emit($event)\"></date-table>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: DecadeHeader, selector: "decade-header" }, { kind: "component", type: DecadeTable, selector: "decade-table", exportAs: ["decadeTable"] }, { kind: "component", type: YearHeader, selector: "year-header" }, { kind: "component", type: YearTable, selector: "year-table", outputs: ["decadePanelShow"] }, { kind: "component", type: MonthHeader, selector: "month-header" }, { kind: "component", type: MonthTable, selector: "month-table", exportAs: ["monthTable"] }, { kind: "component", type: QuarterTable, selector: "quarter-table", exportAs: ["quarterTable"] }, { kind: "component", type: DateHeader, selector: "date-header" }, { kind: "component", type: DateTable, selector: "date-table", outputs: ["dayHover"], exportAs: ["dateTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InnerPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InnerPopup, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'inner-popup', exportAs: 'innerPopup', imports: [
                         ThyInputDirective,
@@ -1948,7 +1952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-calendar-picker-inner-popup',
                         '[class.thy-calendar-picker-inner-popup-with-range-input]': 'showDateRangeInput()'
                     }, template: "@if (showDateRangeInput()) {\n  <div class=\"{{ prefixCls }}-picker-inner-popup-range-input\">\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[0])\" [placeholder]=\"locale().startDate\" />\n    <span class=\"split\"></span>\n    <input thyInput thySize=\"sm\" [value]=\"getReadableValue(selectedValue()[1])\" [placeholder]=\"locale().endDate\" />\n  </div>\n}\n@switch (panelMode()) {\n  @case ('decade') {\n    <div class=\"{{ prefixCls }}-decade\">\n      <decade-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'decade')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'decade')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </decade-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <decade-table [value]=\"value()\" [activeDate]=\"activeDate()\" (valueChange)=\"onChooseDecade($event)\"></decade-table>\n      </div>\n    </div>\n  }\n  @case ('year') {\n    <div class=\"{{ prefixCls }}-year\">\n      <year-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'year')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'year')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </year-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <year-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseYear($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </year-table>\n      </div>\n    </div>\n  }\n  @case ('month') {\n    <div class=\"{{ prefixCls }}-month\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <month-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseMonth($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </month-table>\n      </div>\n    </div>\n  }\n  @case ('quarter') {\n    <div class=\"{{ prefixCls }}-quarter\">\n      <month-header\n        [(value)]=\"activeDate\"\n        [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'month')\"\n        [showSuperNextBtn]=\"enableSuperPrevNext('next', 'month')\"\n        [showNextBtn]=\"false\"\n        [showPreBtn]=\"false\"\n        (panelModeChange)=\"panelModeChange.emit($event)\"\n        (valueChange)=\"headerChange.emit($event)\">\n      </month-header>\n      <div class=\"{{ prefixCls }}-body\">\n        <quarter-table\n          [value]=\"value()\"\n          [activeDate]=\"activeDate()\"\n          [disabledDate]=\"disabledDate()\"\n          (valueChange)=\"onChooseQuarter($event)\"\n          [selectedValue]=\"selectedValue()\">\n        </quarter-table>\n      </div>\n    </div>\n  }\n  @default {\n    <date-header\n      [(value)]=\"activeDate\"\n      [showSuperPreBtn]=\"enableSuperPrevNext('prev', 'date')\"\n      [showSuperNextBtn]=\"enableSuperPrevNext('next', 'date')\"\n      [showPreBtn]=\"enablePrevNext('prev', 'date')\"\n      [showNextBtn]=\"enablePrevNext('next', 'date')\"\n      (panelModeChange)=\"panelModeChange.emit($event)\"\n      (valueChange)=\"headerChange.emit($event)\"></date-header>\n    <div class=\"{{ prefixCls }}-body\">\n      <date-table\n        [showWeek]=\"showWeek()\"\n        [value]=\"value()\"\n        [activeDate]=\"activeDate()\"\n        (valueChange)=\"onSelectDate($event)\"\n        showWeekNumber=\"false\"\n        [disabledDate]=\"disabledDate()\"\n        [cellRender]=\"dateRender()\"\n        [selectedValue]=\"selectedValue()\"\n        [hoverValue]=\"hoverValue()\"\n        [timeZone]=\"timeZone()\"\n        (dayHover)=\"dayHover.emit($event)\"></date-table>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { showWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeek", required: false }] }], isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }, { type: i0.Output, args: ["activeDateChange"] }], rangeActiveDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeActiveDate", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], dateRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRender", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], hoverValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverValue", required: false }] }], panelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMode", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], showDateRangeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDateRangeInput", required: false }] }], partType: [{ type: i0.Input, args: [{ isSignal: true, alias: "partType", required: false }] }], endPanelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPanelMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelModeChange: [{ type: i0.Output, args: ["panelModeChange"] }], headerChange: [{ type: i0.Output, args: ["headerChange"] }], selectDate: [{ type: i0.Output, args: ["selectDate"] }], dayHover: [{ type: i0.Output, args: ["dayHover"] }] } });
 
 /**
  * @private
@@ -1958,33 +1962,33 @@ class DatePopup {
         this.cdr = inject(ChangeDetectorRef);
         this.datePickerConfigService = inject(ThyDatePickerConfigService);
         this.locale = injectLocale('datePicker');
-        this.isRange = input(false, { transform: coerceBooleanProperty });
-        this.showWeek = input(false, { transform: coerceBooleanProperty });
-        this.format = input();
-        this.disabledDate = model();
-        this.minDate = input();
-        this.maxDate = input();
-        this.showToday = input(false, { transform: coerceBooleanProperty });
+        this.isRange = input(false, ...(ngDevMode ? [{ debugName: "isRange", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showWeek = input(false, ...(ngDevMode ? [{ debugName: "showWeek", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+        this.disabledDate = model(...(ngDevMode ? [undefined, { debugName: "disabledDate" }] : []));
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+        this.showToday = input(false, ...(ngDevMode ? [{ debugName: "showToday", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否支持设置时间(时、分)
          */
-        this.showTime = input();
+        this.showTime = input(...(ngDevMode ? [undefined, { debugName: "showTime" }] : []));
         /**
          * 是否展示时间(时、分)
          */
-        this.mustShowTime = input(false, { transform: coerceBooleanProperty });
-        this.dateRender = input();
-        this.className = input();
-        this.panelMode = model(undefined);
-        this.value = model();
-        this.defaultPickerValue = input();
-        this.showShortcut = model();
-        this.shortcutPresets = model();
-        this.shortcutPosition = input();
-        this.flexible = input(false, { transform: coerceBooleanProperty });
-        this.flexibleDateGranularity = model();
-        this.timestampPrecision = input();
-        this.timeZone = input();
+        this.mustShowTime = input(false, ...(ngDevMode ? [{ debugName: "mustShowTime", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.dateRender = input(...(ngDevMode ? [undefined, { debugName: "dateRender" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.panelMode = model(undefined, ...(ngDevMode ? [{ debugName: "panelMode" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.defaultPickerValue = input(...(ngDevMode ? [undefined, { debugName: "defaultPickerValue" }] : []));
+        this.showShortcut = model(...(ngDevMode ? [undefined, { debugName: "showShortcut" }] : []));
+        this.shortcutPresets = model(...(ngDevMode ? [undefined, { debugName: "shortcutPresets" }] : []));
+        this.shortcutPosition = input(...(ngDevMode ? [undefined, { debugName: "shortcutPosition" }] : []));
+        this.flexible = input(false, ...(ngDevMode ? [{ debugName: "flexible", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.flexibleDateGranularity = model(...(ngDevMode ? [undefined, { debugName: "flexibleDateGranularity" }] : []));
+        this.timestampPrecision = input(...(ngDevMode ? [undefined, { debugName: "timestampPrecision" }] : []));
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
         this.panelModeChange = output();
         this.calendarChange = output();
         this.valueChange = output();
@@ -1997,8 +2001,8 @@ class DatePopup {
         this.hoverValue = []; // Range ONLY
         this.flexibleActiveTab = 'advanced';
         this.partTypeMap = { left: 0, right: 1 };
-        this.endPanelMode = signal(undefined);
-        this.disableTimeConfirm = signal(false);
+        this.endPanelMode = signal(undefined, ...(ngDevMode ? [{ debugName: "endPanelMode" }] : []));
+        this.disableTimeConfirm = signal(false, ...(ngDevMode ? [{ debugName: "disableTimeConfirm" }] : []));
     }
     setProperty(key, value) {
         this[key] = value;
@@ -2460,17 +2464,17 @@ class DatePopup {
     createInZoneTime(date, hours, minutes, seconds) {
         return TinyDate.createDateInTimeZone(date.getYear(), date.getMonth(), date.getDate(), hours, minutes, seconds, this.timeZone());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DatePopup, isStandalone: true, selector: "date-popup", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, mustShowTime: { classPropertyName: "mustShowTime", publicName: "mustShowTime", isSignal: true, isRequired: false, transformFunction: null }, dateRender: { classPropertyName: "dateRender", publicName: "dateRender", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, panelMode: { classPropertyName: "panelMode", publicName: "panelMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultPickerValue: { classPropertyName: "defaultPickerValue", publicName: "defaultPickerValue", isSignal: true, isRequired: false, transformFunction: null }, showShortcut: { classPropertyName: "showShortcut", publicName: "showShortcut", isSignal: true, isRequired: false, transformFunction: null }, shortcutPresets: { classPropertyName: "shortcutPresets", publicName: "shortcutPresets", isSignal: true, isRequired: false, transformFunction: null }, shortcutPosition: { classPropertyName: "shortcutPosition", publicName: "shortcutPosition", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, timestampPrecision: { classPropertyName: "timestampPrecision", publicName: "timestampPrecision", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabledDate: "disabledDateChange", panelMode: "panelModeChange", value: "valueChange", showShortcut: "showShortcutChange", shortcutPresets: "shortcutPresetsChange", flexibleDateGranularity: "flexibleDateGranularityChange", panelModeChange: "panelModeChange", calendarChange: "calendarChange", valueChange: "valueChange", resultOk: "resultOk", showTimePickerChange: "showTimePickerChange", dateValueChange: "dateValueChange" }, exportAs: ["datePopup"], usesOnChanges: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-picker-container {{ className() }}\">\n  <div\n    class=\"{{ prefixCls }} {{ showWeek() ? prefixCls + '-week-number' : '' }}\n     {{ isRange() ? prefixCls + '-range' : '' }} {{ prefixCls }}-picker-shortcut-{{ shortcutPosition() === 'left' ? 'left' : 'bottom' }}\">\n    @if (showShortcut()) {\n      <div class=\"{{ prefixCls }}-picker-shortcut\">\n        @for (item of innerShortcutPresets; track $index) {\n          <div class=\"{{ prefixCls }}-picker-shortcut-item\" [class.disabled]=\"item.disabled\" (click)=\"shortcutSetValue(item)\">\n            {{ item.title }}\n          </div>\n        }\n      </div>\n    }\n    <div class=\"{{ prefixCls }}-panel\">\n      <div class=\"{{ prefixCls }}-date-panel\">\n        @if (flexible()) {\n          <div class=\"{{ prefixCls }}-date-panel-flexible\">\n            <div class=\"{{ prefixCls }}-date-panel-flexible-tab\">\n              <thy-nav thyType=\"pulled\" thySize=\"sm\">\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'advanced'\" (click)=\"selectTab('advanced')\">{{\n                  locale().advance\n                }}</a>\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'custom'\" (click)=\"selectTab('custom')\">{{\n                  locale().custom\n                }}</a>\n              </thy-nav>\n              <button thyButtonIcon=\"sweep\" thySize=\"sm\" class=\"clear-date-button\" (click)=\"clearFlexibleValue()\"></button>\n            </div>\n            <ng-container>\n              <div class=\"{{ prefixCls }}-date-panel-advanced\" [hidden]=\"flexibleActiveTab !== 'advanced'\">\n                <date-carousel\n                  name=\"dateCarousel\"\n                  (ngModelChange)=\"changeValueFromAdvancedSelect($event)\"\n                  [(ngModel)]=\"advancedSelectedValue\"\n                  [activeDate]=\"selectedValue[0]\"></date-carousel>\n              </div>\n            </ng-container>\n            <div [hidden]=\"flexibleActiveTab !== 'custom'\">\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          </div>\n        } @else {\n          @if (isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'left' }\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'right' }\"></ng-container>\n          } @else {\n            <div>\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          }\n          @if (!isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplFooter\"></ng-container>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tplInnerPopup let-partType=\"partType\">\n  <inner-popup\n    [showWeek]=\"showWeek()\"\n    [isRange]=\"isRange()\"\n    [panelMode]=\"getPanelMode(panelMode(), partType)\"\n    [endPanelMode]=\"getPanelMode(endPanelMode(), partType)\"\n    [partType]=\"partType\"\n    [showDateRangeInput]=\"flexible() && flexibleActiveTab === 'custom'\"\n    (panelModeChange)=\"onPanelModeChange($event, partType)\"\n    [value]=\"getValueBySelector(partType)\"\n    [selectedValue]=\"selectedValue\"\n    [activeDate]=\"getActiveDate(partType)\"\n    [rangeActiveDate]=\"activeDate\"\n    [disabledDate]=\"disabledDate()\"\n    [dateRender]=\"dateRender()\"\n    [hoverValue]=\"hoverValue\"\n    [timeZone]=\"timeZone()\"\n    (dayHover)=\"onDayHover($event)\"\n    (selectDate)=\"changeValueFromSelect($event, partType)\"\n    (headerChange)=\"onHeaderChange($event, partType)\"></inner-popup>\n</ng-template>\n\n<ng-template #tplFooter>\n  <calendar-footer\n    [showTime]=\"showTime()\"\n    [mustShowTime]=\"mustShowTime()\"\n    [value]=\"value()\"\n    [timeZone]=\"timeZone()\"\n    [disableTimeConfirm]=\"disableTimeConfirm()\"\n    (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n    (selectTime)=\"onSelectTime($event)\"\n    (clickOk)=\"onClickOk()\"\n    (clickRemove)=\"onClickRemove()\"></calendar-footer>\n</ng-template>\n\n<!-- Single ONLY -->\n\n<!-- Range ONLY -->\n<ng-template #tplRangePart let-partType=\"partType\">\n  <div class=\"{{ prefixCls }}-range-part {{ prefixCls }}-range-{{ partType }}\">\n    <div style=\"outline: none\">\n      <ng-container *ngTemplateOutlet=\"tplInnerPopup; context: { partType: partType }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyNav, selector: "thy-nav", inputs: ["thyType", "thySize", "thyHorizontal", "thyVertical", "thyFill", "thyResponsive", "thyPauseReCalculate", "thyInsideClosable", "thyPopoverOptions", "thyExtra"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["id", "thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "component", type: ThyButtonIcon, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }, { kind: "component", type: DateCarousel, selector: "date-carousel", inputs: ["activeDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InnerPopup, selector: "inner-popup", inputs: ["showWeek", "isRange", "activeDate", "rangeActiveDate", "disabledDate", "dateRender", "selectedValue", "hoverValue", "panelMode", "timeZone", "showDateRangeInput", "partType", "endPanelMode", "value"], outputs: ["activeDateChange", "valueChange", "panelModeChange", "headerChange", "selectDate", "dayHover"], exportAs: ["innerPopup"] }, { kind: "component", type: CalendarFooter, selector: "calendar-footer", inputs: ["showTime", "mustShowTime", "value", "timeZone", "disableTimeConfirm"], outputs: ["valueChange", "selectTime", "clickOk", "clickRemove", "showTimePickerChange"], exportAs: ["calendarFooter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DatePopup, isStandalone: true, selector: "date-popup", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, mustShowTime: { classPropertyName: "mustShowTime", publicName: "mustShowTime", isSignal: true, isRequired: false, transformFunction: null }, dateRender: { classPropertyName: "dateRender", publicName: "dateRender", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, panelMode: { classPropertyName: "panelMode", publicName: "panelMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultPickerValue: { classPropertyName: "defaultPickerValue", publicName: "defaultPickerValue", isSignal: true, isRequired: false, transformFunction: null }, showShortcut: { classPropertyName: "showShortcut", publicName: "showShortcut", isSignal: true, isRequired: false, transformFunction: null }, shortcutPresets: { classPropertyName: "shortcutPresets", publicName: "shortcutPresets", isSignal: true, isRequired: false, transformFunction: null }, shortcutPosition: { classPropertyName: "shortcutPosition", publicName: "shortcutPosition", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, timestampPrecision: { classPropertyName: "timestampPrecision", publicName: "timestampPrecision", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabledDate: "disabledDateChange", panelMode: "panelModeChange", value: "valueChange", showShortcut: "showShortcutChange", shortcutPresets: "shortcutPresetsChange", flexibleDateGranularity: "flexibleDateGranularityChange", panelModeChange: "panelModeChange", calendarChange: "calendarChange", valueChange: "valueChange", resultOk: "resultOk", showTimePickerChange: "showTimePickerChange", dateValueChange: "dateValueChange" }, exportAs: ["datePopup"], usesOnChanges: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-picker-container {{ className() }}\">\n  <div\n    class=\"{{ prefixCls }} {{ showWeek() ? prefixCls + '-week-number' : '' }}\n     {{ isRange() ? prefixCls + '-range' : '' }} {{ prefixCls }}-picker-shortcut-{{ shortcutPosition() === 'left' ? 'left' : 'bottom' }}\">\n    @if (showShortcut()) {\n      <div class=\"{{ prefixCls }}-picker-shortcut\">\n        @for (item of innerShortcutPresets; track $index) {\n          <div class=\"{{ prefixCls }}-picker-shortcut-item\" [class.disabled]=\"item.disabled\" (click)=\"shortcutSetValue(item)\">\n            {{ item.title }}\n          </div>\n        }\n      </div>\n    }\n    <div class=\"{{ prefixCls }}-panel\">\n      <div class=\"{{ prefixCls }}-date-panel\">\n        @if (flexible()) {\n          <div class=\"{{ prefixCls }}-date-panel-flexible\">\n            <div class=\"{{ prefixCls }}-date-panel-flexible-tab\">\n              <thy-nav thyType=\"pulled\" thySize=\"sm\">\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'advanced'\" (click)=\"selectTab('advanced')\">{{\n                  locale().advance\n                }}</a>\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'custom'\" (click)=\"selectTab('custom')\">{{\n                  locale().custom\n                }}</a>\n              </thy-nav>\n              <button thyButtonIcon=\"sweep\" thySize=\"sm\" class=\"clear-date-button\" (click)=\"clearFlexibleValue()\"></button>\n            </div>\n            <ng-container>\n              <div class=\"{{ prefixCls }}-date-panel-advanced\" [hidden]=\"flexibleActiveTab !== 'advanced'\">\n                <date-carousel\n                  name=\"dateCarousel\"\n                  (ngModelChange)=\"changeValueFromAdvancedSelect($event)\"\n                  [(ngModel)]=\"advancedSelectedValue\"\n                  [activeDate]=\"selectedValue[0]\"></date-carousel>\n              </div>\n            </ng-container>\n            <div [hidden]=\"flexibleActiveTab !== 'custom'\">\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          </div>\n        } @else {\n          @if (isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'left' }\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'right' }\"></ng-container>\n          } @else {\n            <div>\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          }\n          @if (!isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplFooter\"></ng-container>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tplInnerPopup let-partType=\"partType\">\n  <inner-popup\n    [showWeek]=\"showWeek()\"\n    [isRange]=\"isRange()\"\n    [panelMode]=\"getPanelMode(panelMode(), partType)\"\n    [endPanelMode]=\"getPanelMode(endPanelMode(), partType)\"\n    [partType]=\"partType\"\n    [showDateRangeInput]=\"flexible() && flexibleActiveTab === 'custom'\"\n    (panelModeChange)=\"onPanelModeChange($event, partType)\"\n    [value]=\"getValueBySelector(partType)\"\n    [selectedValue]=\"selectedValue\"\n    [activeDate]=\"getActiveDate(partType)\"\n    [rangeActiveDate]=\"activeDate\"\n    [disabledDate]=\"disabledDate()\"\n    [dateRender]=\"dateRender()\"\n    [hoverValue]=\"hoverValue\"\n    [timeZone]=\"timeZone()\"\n    (dayHover)=\"onDayHover($event)\"\n    (selectDate)=\"changeValueFromSelect($event, partType)\"\n    (headerChange)=\"onHeaderChange($event, partType)\"></inner-popup>\n</ng-template>\n\n<ng-template #tplFooter>\n  <calendar-footer\n    [showTime]=\"showTime()\"\n    [mustShowTime]=\"mustShowTime()\"\n    [value]=\"value()\"\n    [timeZone]=\"timeZone()\"\n    [disableTimeConfirm]=\"disableTimeConfirm()\"\n    (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n    (selectTime)=\"onSelectTime($event)\"\n    (clickOk)=\"onClickOk()\"\n    (clickRemove)=\"onClickRemove()\"></calendar-footer>\n</ng-template>\n\n<!-- Single ONLY -->\n\n<!-- Range ONLY -->\n<ng-template #tplRangePart let-partType=\"partType\">\n  <div class=\"{{ prefixCls }}-range-part {{ prefixCls }}-range-{{ partType }}\">\n    <div style=\"outline: none\">\n      <ng-container *ngTemplateOutlet=\"tplInnerPopup; context: { partType: partType }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyNav, selector: "thy-nav", inputs: ["thyType", "thySize", "thyHorizontal", "thyVertical", "thyFill", "thyResponsive", "thyPauseReCalculate", "thyInsideClosable", "thyPopoverOptions", "thyExtra"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["id", "thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "component", type: ThyButtonIcon, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }, { kind: "component", type: DateCarousel, selector: "date-carousel", inputs: ["activeDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InnerPopup, selector: "inner-popup", inputs: ["showWeek", "isRange", "activeDate", "rangeActiveDate", "disabledDate", "dateRender", "selectedValue", "hoverValue", "panelMode", "timeZone", "showDateRangeInput", "partType", "endPanelMode", "value"], outputs: ["activeDateChange", "valueChange", "panelModeChange", "headerChange", "selectDate", "dayHover"], exportAs: ["innerPopup"] }, { kind: "component", type: CalendarFooter, selector: "calendar-footer", inputs: ["showTime", "mustShowTime", "value", "timeZone", "disableTimeConfirm"], outputs: ["valueChange", "selectTime", "clickOk", "clickRemove", "showTimePickerChange"], exportAs: ["calendarFooter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePopup, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'date-popup', exportAs: 'datePopup', imports: [ThyNav, ThyNavItemDirective, ThyButtonIcon, DateCarousel, FormsModule, NgTemplateOutlet, InnerPopup, CalendarFooter], template: "<div class=\"{{ prefixCls }}-picker-container {{ className() }}\">\n  <div\n    class=\"{{ prefixCls }} {{ showWeek() ? prefixCls + '-week-number' : '' }}\n     {{ isRange() ? prefixCls + '-range' : '' }} {{ prefixCls }}-picker-shortcut-{{ shortcutPosition() === 'left' ? 'left' : 'bottom' }}\">\n    @if (showShortcut()) {\n      <div class=\"{{ prefixCls }}-picker-shortcut\">\n        @for (item of innerShortcutPresets; track $index) {\n          <div class=\"{{ prefixCls }}-picker-shortcut-item\" [class.disabled]=\"item.disabled\" (click)=\"shortcutSetValue(item)\">\n            {{ item.title }}\n          </div>\n        }\n      </div>\n    }\n    <div class=\"{{ prefixCls }}-panel\">\n      <div class=\"{{ prefixCls }}-date-panel\">\n        @if (flexible()) {\n          <div class=\"{{ prefixCls }}-date-panel-flexible\">\n            <div class=\"{{ prefixCls }}-date-panel-flexible-tab\">\n              <thy-nav thyType=\"pulled\" thySize=\"sm\">\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'advanced'\" (click)=\"selectTab('advanced')\">{{\n                  locale().advance\n                }}</a>\n                <a href=\"javascript:;\" thyNavLink [thyNavLinkActive]=\"flexibleActiveTab === 'custom'\" (click)=\"selectTab('custom')\">{{\n                  locale().custom\n                }}</a>\n              </thy-nav>\n              <button thyButtonIcon=\"sweep\" thySize=\"sm\" class=\"clear-date-button\" (click)=\"clearFlexibleValue()\"></button>\n            </div>\n            <ng-container>\n              <div class=\"{{ prefixCls }}-date-panel-advanced\" [hidden]=\"flexibleActiveTab !== 'advanced'\">\n                <date-carousel\n                  name=\"dateCarousel\"\n                  (ngModelChange)=\"changeValueFromAdvancedSelect($event)\"\n                  [(ngModel)]=\"advancedSelectedValue\"\n                  [activeDate]=\"selectedValue[0]\"></date-carousel>\n              </div>\n            </ng-container>\n            <div [hidden]=\"flexibleActiveTab !== 'custom'\">\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          </div>\n        } @else {\n          @if (isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'left' }\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tplRangePart; context: { partType: 'right' }\"></ng-container>\n          } @else {\n            <div>\n              <ng-container *ngTemplateOutlet=\"tplInnerPopup\"></ng-container>\n            </div>\n          }\n          @if (!isRange()) {\n            <ng-container *ngTemplateOutlet=\"tplFooter\"></ng-container>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tplInnerPopup let-partType=\"partType\">\n  <inner-popup\n    [showWeek]=\"showWeek()\"\n    [isRange]=\"isRange()\"\n    [panelMode]=\"getPanelMode(panelMode(), partType)\"\n    [endPanelMode]=\"getPanelMode(endPanelMode(), partType)\"\n    [partType]=\"partType\"\n    [showDateRangeInput]=\"flexible() && flexibleActiveTab === 'custom'\"\n    (panelModeChange)=\"onPanelModeChange($event, partType)\"\n    [value]=\"getValueBySelector(partType)\"\n    [selectedValue]=\"selectedValue\"\n    [activeDate]=\"getActiveDate(partType)\"\n    [rangeActiveDate]=\"activeDate\"\n    [disabledDate]=\"disabledDate()\"\n    [dateRender]=\"dateRender()\"\n    [hoverValue]=\"hoverValue\"\n    [timeZone]=\"timeZone()\"\n    (dayHover)=\"onDayHover($event)\"\n    (selectDate)=\"changeValueFromSelect($event, partType)\"\n    (headerChange)=\"onHeaderChange($event, partType)\"></inner-popup>\n</ng-template>\n\n<ng-template #tplFooter>\n  <calendar-footer\n    [showTime]=\"showTime()\"\n    [mustShowTime]=\"mustShowTime()\"\n    [value]=\"value()\"\n    [timeZone]=\"timeZone()\"\n    [disableTimeConfirm]=\"disableTimeConfirm()\"\n    (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n    (selectTime)=\"onSelectTime($event)\"\n    (clickOk)=\"onClickOk()\"\n    (clickRemove)=\"onClickRemove()\"></calendar-footer>\n</ng-template>\n\n<!-- Single ONLY -->\n\n<!-- Range ONLY -->\n<ng-template #tplRangePart let-partType=\"partType\">\n  <div class=\"{{ prefixCls }}-range-part {{ prefixCls }}-range-{{ partType }}\">\n    <div style=\"outline: none\">\n      <ng-container *ngTemplateOutlet=\"tplInnerPopup; context: { partType: partType }\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }] });
+        }], propDecorators: { isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], showWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeek", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }, { type: i0.Output, args: ["disabledDateChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], mustShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustShowTime", required: false }] }], dateRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRender", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], panelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMode", required: false }] }, { type: i0.Output, args: ["panelModeChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultPickerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPickerValue", required: false }] }], showShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "showShortcut", required: false }] }, { type: i0.Output, args: ["showShortcutChange"] }], shortcutPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutPresets", required: false }] }, { type: i0.Output, args: ["shortcutPresetsChange"] }], shortcutPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutPosition", required: false }] }], flexible: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexible", required: false }] }], flexibleDateGranularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexibleDateGranularity", required: false }] }, { type: i0.Output, args: ["flexibleDateGranularityChange"] }], timestampPrecision: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestampPrecision", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], panelModeChange: [{ type: i0.Output, args: ["panelModeChange"] }], calendarChange: [{ type: i0.Output, args: ["calendarChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], resultOk: [{ type: i0.Output, args: ["resultOk"] }], showTimePickerChange: [{ type: i0.Output, args: ["showTimePickerChange"] }], dateValueChange: [{ type: i0.Output, args: ["dateValueChange"] }] } });
 
 class LibPackerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LibPackerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: LibPackerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LibPackerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LibPackerModule, imports: [CommonModule,
             FormsModule,
             ThyButtonModule,
             ThyIconModule,
@@ -2505,7 +2509,7 @@ class LibPackerModule {
             DatePopup,
             DateTableCell,
             DateCarousel] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LibPackerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LibPackerModule, imports: [CommonModule,
             FormsModule,
             ThyButtonModule,
             ThyIconModule,
@@ -2521,7 +2525,7 @@ class LibPackerModule {
             DatePopup,
             DateCarousel] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LibPackerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LibPackerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2582,33 +2586,33 @@ class ThyPicker {
         this.changeDetector = inject(ChangeDetectorRef);
         this.dateHelper = inject(DateHelperService);
         this.i18n = inject(ThyI18nService);
-        this.isRange = input(false, { transform: coerceBooleanProperty });
-        this.opened = input(undefined);
-        this.disabled = input(false, { transform: coerceBooleanProperty });
-        this.placeholder = input();
-        this.readonly = input(false, { transform: coerceBooleanProperty });
-        this.allowClear = input(false, { transform: coerceBooleanProperty });
-        this.autoFocus = input(false, { transform: coerceBooleanProperty });
-        this.className = input();
-        this.size = input();
-        this.suffixIcon = input();
-        this.placement = input('bottomLeft');
-        this.flexible = input(false, { transform: coerceBooleanProperty });
-        this.mode = input();
-        this.hasBackdrop = input(false, { transform: coerceBooleanProperty });
-        this.separator = input();
-        this.timeZone = input();
+        this.isRange = input(false, ...(ngDevMode ? [{ debugName: "isRange", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.opened = input(undefined, ...(ngDevMode ? [{ debugName: "opened" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.allowClear = input(false, ...(ngDevMode ? [{ debugName: "allowClear", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.suffixIcon = input(...(ngDevMode ? [undefined, { debugName: "suffixIcon" }] : []));
+        this.placement = input('bottomLeft', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.flexible = input(false, ...(ngDevMode ? [{ debugName: "flexible", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : []));
+        this.hasBackdrop = input(false, ...(ngDevMode ? [{ debugName: "hasBackdrop", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.separator = input(...(ngDevMode ? [undefined, { debugName: "separator" }] : []));
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
         this.blur = output();
         this.valueChange = output();
         this.openChange = output(); // Emitted when overlay's open state change
         this.inputChange = output();
-        this.origin = viewChild('origin');
-        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
-        this.pickerInput = viewChild('pickerInput');
-        this.overlayContainer = viewChild('overlayContainer');
-        this.format = input();
-        this.flexibleDateGranularity = input();
-        this.value = input();
+        this.origin = viewChild('origin', ...(ngDevMode ? [{ debugName: "origin" }] : []));
+        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "cdkConnectedOverlay" }] : []));
+        this.pickerInput = viewChild('pickerInput', ...(ngDevMode ? [{ debugName: "pickerInput" }] : []));
+        this.overlayContainer = viewChild('overlayContainer', ...(ngDevMode ? [{ debugName: "overlayContainer" }] : []));
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+        this.flexibleDateGranularity = input(...(ngDevMode ? [undefined, { debugName: "flexibleDateGranularity" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.entering = false;
         this.prefixCls = 'thy-calendar';
         this.isShowDatePopup = false;
@@ -2785,13 +2789,13 @@ class ThyPicker {
         }
         this.pickerInput().nativeElement.value = readableValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyPicker, isStandalone: true, selector: "thy-picker", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", valueChange: "valueChange", openChange: "openChange", inputChange: "inputChange" }, viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true, isSignal: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }], exportAs: ["thyPicker"], ngImport: i0, template: "<span\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  class=\"{{ prefixCls }}-picker {{ size() ? prefixCls + '-picker-' + size() : '' }} {{ className() }}\"\n  (click)=\"onClickInputBox()\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control-{{ size() }} form-control {{ prefixCls }}-picker-input\"\n      [ngClass]=\"{ 'panel-is-opened': realOpenState }\"\n      [thySize]=\"size()\"\n      [tabindex]=\"-1\"\n      [class.thy-input-disabled]=\"disabled()\"\n      [class.thy-input-readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonlyState\"\n      (blur)=\"onBlur($event)\"\n      (input)=\"onInput($event)\"\n      placeholder=\"{{ getPlaceholder() }}\"\n      thyEnter\n      (thyEnter)=\"onEnter()\" />\n    <ng-container *ngTemplateOutlet=\"tplRightRest\"></ng-container>\n  </ng-container>\n</span>\n\n<!-- Right operator icons -->\n<ng-template #tplRightRest>\n  <span class=\"{{ prefixCls }}-picker-clear\">\n    @if (!disabled() && !isEmptyValue(value()) && allowClear() && !readonly()) {\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClickClear($event)\"\n        ngClass=\"remove-link remove-link-{{ size() }}\"></thy-icon>\n    }\n  </span>\n  <span class=\"{{ prefixCls }}-picker-icon\">\n    <thy-icon [thyIconName]=\"suffixIcon()\" ngClass=\"remove-link-{{ size() ? size() : 'default' }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"realOpenState\"\n  [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (detach)=\"onOverlayDetach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    class=\"thy-picker-container\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'left' && placement() !== 'right' && placement() !== 'top' && placement() !== 'bottom' ? 'enter' : 'void'\n    \">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyPicker, isStandalone: true, selector: "thy-picker", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", valueChange: "valueChange", openChange: "openChange", inputChange: "inputChange" }, viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true, isSignal: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }], exportAs: ["thyPicker"], ngImport: i0, template: "<span\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  class=\"{{ prefixCls }}-picker {{ size() ? prefixCls + '-picker-' + size() : '' }} {{ className() }}\"\n  (click)=\"onClickInputBox()\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control-{{ size() }} form-control {{ prefixCls }}-picker-input\"\n      [ngClass]=\"{ 'panel-is-opened': realOpenState }\"\n      [thySize]=\"size()\"\n      [tabindex]=\"-1\"\n      [class.thy-input-disabled]=\"disabled()\"\n      [class.thy-input-readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonlyState\"\n      (blur)=\"onBlur($event)\"\n      (input)=\"onInput($event)\"\n      placeholder=\"{{ getPlaceholder() }}\"\n      thyEnter\n      (thyEnter)=\"onEnter()\" />\n    <ng-container *ngTemplateOutlet=\"tplRightRest\"></ng-container>\n  </ng-container>\n</span>\n\n<!-- Right operator icons -->\n<ng-template #tplRightRest>\n  <span class=\"{{ prefixCls }}-picker-clear\">\n    @if (!disabled() && !isEmptyValue(value()) && allowClear() && !readonly()) {\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClickClear($event)\"\n        ngClass=\"remove-link remove-link-{{ size() }}\"></thy-icon>\n    }\n  </span>\n  <span class=\"{{ prefixCls }}-picker-icon\">\n    <thy-icon [thyIconName]=\"suffixIcon()\" ngClass=\"remove-link-{{ size() ? size() : 'default' }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"realOpenState\"\n  [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (detach)=\"onOverlayDetach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    class=\"thy-picker-container\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'left' && placement() !== 'right' && placement() !== 'top' && placement() !== 'bottom' ? 'enter' : 'void'\n    \">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyPicker, decorators: [{
             type: Component,
             args: [{ selector: 'thy-picker', exportAs: 'thyPicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkOverlayOrigin, ThyInputDirective, ThyEnterDirective, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay], animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<span\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  class=\"{{ prefixCls }}-picker {{ size() ? prefixCls + '-picker-' + size() : '' }} {{ className() }}\"\n  (click)=\"onClickInputBox()\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control-{{ size() }} form-control {{ prefixCls }}-picker-input\"\n      [ngClass]=\"{ 'panel-is-opened': realOpenState }\"\n      [thySize]=\"size()\"\n      [tabindex]=\"-1\"\n      [class.thy-input-disabled]=\"disabled()\"\n      [class.thy-input-readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonlyState\"\n      (blur)=\"onBlur($event)\"\n      (input)=\"onInput($event)\"\n      placeholder=\"{{ getPlaceholder() }}\"\n      thyEnter\n      (thyEnter)=\"onEnter()\" />\n    <ng-container *ngTemplateOutlet=\"tplRightRest\"></ng-container>\n  </ng-container>\n</span>\n\n<!-- Right operator icons -->\n<ng-template #tplRightRest>\n  <span class=\"{{ prefixCls }}-picker-clear\">\n    @if (!disabled() && !isEmptyValue(value()) && allowClear() && !readonly()) {\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClickClear($event)\"\n        ngClass=\"remove-link remove-link-{{ size() }}\"></thy-icon>\n    }\n  </span>\n  <span class=\"{{ prefixCls }}-picker-icon\">\n    <thy-icon [thyIconName]=\"suffixIcon()\" ngClass=\"remove-link-{{ size() ? size() : 'default' }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"realOpenState\"\n  [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (detach)=\"onOverlayDetach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    class=\"thy-picker-container\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'left' && placement() !== 'right' && placement() !== 'top' && placement() !== 'bottom' ? 'enter' : 'void'\n    \">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], flexible: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexible", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], cdkConnectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], pickerInput: [{ type: i0.ViewChild, args: ['pickerInput', { isSignal: true }] }], overlayContainer: [{ type: i0.ViewChild, args: ['overlayContainer', { isSignal: true }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], flexibleDateGranularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexibleDateGranularity", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /**
  * @private
@@ -2836,112 +2840,112 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         /**
          * 是否显示清除按钮
          */
-        this.thyAllowClear = input(true, { transform: coerceBooleanProperty });
+        this.thyAllowClear = input(true, ...(ngDevMode ? [{ debugName: "thyAllowClear", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否自动获取焦点
          */
-        this.thyAutoFocus = input(false, { transform: coerceBooleanProperty });
-        this.thyOpen = input(undefined, { transform: coerceBooleanProperty });
-        this.opened = linkedSignal(this.thyOpen);
-        this.thyDisabledDate = input();
+        this.thyAutoFocus = input(false, ...(ngDevMode ? [{ debugName: "thyAutoFocus", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.thyOpen = input(undefined, ...(ngDevMode ? [{ debugName: "thyOpen", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.opened = linkedSignal(this.thyOpen, ...(ngDevMode ? [{ debugName: "opened" }] : []));
+        this.thyDisabledDate = input(...(ngDevMode ? [undefined, { debugName: "thyDisabledDate" }] : []));
         /**
          * 最小值
          */
-        this.thyMinDate = input();
+        this.thyMinDate = input(...(ngDevMode ? [undefined, { debugName: "thyMinDate" }] : []));
         /**
          * 最大值
          */
-        this.thyMaxDate = input();
+        this.thyMaxDate = input(...(ngDevMode ? [undefined, { debugName: "thyMaxDate" }] : []));
         /**
          * 输入框提示文字
          * @type string | string[]
          */
-        this.thyPlaceHolder = input(undefined);
-        this.placeholder = signal(undefined);
+        this.thyPlaceHolder = input(undefined, ...(ngDevMode ? [{ debugName: "thyPlaceHolder" }] : []));
+        this.placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         /**
          * 是否只读
          */
-        this.thyReadonly = input(false, { transform: coerceBooleanProperty });
+        this.thyReadonly = input(false, ...(ngDevMode ? [{ debugName: "thyReadonly", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 选择器 className
          */
-        this.thyOriginClassName = input();
+        this.thyOriginClassName = input(...(ngDevMode ? [undefined, { debugName: "thyOriginClassName" }] : []));
         /**
          * 弹出层 className
          */
-        this.thyPanelClassName = input();
+        this.thyPanelClassName = input(...(ngDevMode ? [undefined, { debugName: "thyPanelClassName" }] : []));
         /**
          * 输入框的大小
          */
-        this.thySize = input('default');
+        this.thySize = input('default', ...(ngDevMode ? [{ debugName: "thySize" }] : []));
         /**
          * 设置时间戳精度
          * @default seconds 10位
          */
-        this.thyTimestampPrecision = input(this.datePickerConfigService.config?.timestampPrecision || 'seconds');
+        this.thyTimestampPrecision = input(this.datePickerConfigService.config?.timestampPrecision || 'seconds', ...(ngDevMode ? [{ debugName: "thyTimestampPrecision" }] : []));
         /**
          * 展示的日期格式
          * @default yyyy-MM-dd
          */
-        this.thyFormat = model();
+        this.thyFormat = model(...(ngDevMode ? [undefined, { debugName: "thyFormat" }] : []));
         /**
          * 区间分隔符，不传值默认为 "~"
          */
-        this.thySeparator = input(this.datePickerConfigService.config?.separator);
+        this.thySeparator = input(this.datePickerConfigService.config?.separator, ...(ngDevMode ? [{ debugName: "thySeparator" }] : []));
         this.separator = computed(() => {
             return ` ${this.thySeparator()?.trim()} `;
-        });
+        }, ...(ngDevMode ? [{ debugName: "separator" }] : []));
         /**
          * @description.en-us only for range picker, Whether to automatically take the beginning and ending unixTime of the day
          * @description.zh-cn 是否取值开始日期的00:00以及截止日期的24:00
          * @default false
          */
-        this.thyAutoStartAndEnd = input(false, { transform: coerceBooleanProperty });
+        this.thyAutoStartAndEnd = input(false, ...(ngDevMode ? [{ debugName: "thyAutoStartAndEnd", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 面板默认日期
          */
-        this.thyDefaultPickerValue = input(null);
+        this.thyDefaultPickerValue = input(null, ...(ngDevMode ? [{ debugName: "thyDefaultPickerValue" }] : []));
         /**
          * 自定义的后缀图标
          */
-        this.thySuffixIcon = input('calendar');
+        this.thySuffixIcon = input('calendar', ...(ngDevMode ? [{ debugName: "thySuffixIcon" }] : []));
         /**
          * 是否展示快捷选项面板
          * @default false
          */
-        this.thyShowShortcut = input(undefined, { transform: coerceBooleanProperty });
+        this.thyShowShortcut = input(undefined, ...(ngDevMode ? [{ debugName: "thyShowShortcut", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 快捷选项面板的显示位置
          * @type left | bottom
          */
-        this.thyShortcutPosition = input('left', { transform: (value) => value || 'left' });
+        this.thyShortcutPosition = input('left', ...(ngDevMode ? [{ debugName: "thyShortcutPosition", transform: (value) => value || 'left' }] : [{ transform: (value) => value || 'left' }]));
         /**
          * 自定义快捷选项
          * @type ThyShortcutPreset[]
          */
-        this.thyShortcutPresets = input();
+        this.thyShortcutPresets = input(...(ngDevMode ? [undefined, { debugName: "thyShortcutPresets" }] : []));
         /**
          * 是否支持选择时间
          */
-        this.thyShowTime = input(false, {
-            transform: (value) => (typeof value === 'object' ? value : coerceBooleanProperty(value))
-        });
+        this.thyShowTime = input(false, ...(ngDevMode ? [{ debugName: "thyShowTime", transform: (value) => (typeof value === 'object' ? value : coerceBooleanProperty(value)) }] : [{
+                transform: (value) => (typeof value === 'object' ? value : coerceBooleanProperty(value))
+            }]));
         /**
          * 是否展示时间(时、分)
          */
-        this.thyMustShowTime = input(false, { transform: coerceBooleanProperty });
-        this.showWeek = computed(() => this.thyMode === 'week');
-        this.flexible = computed(() => this.thyMode === 'flexible');
+        this.thyMustShowTime = input(false, ...(ngDevMode ? [{ debugName: "thyMustShowTime", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showWeek = computed(() => this.thyMode === 'week', ...(ngDevMode ? [{ debugName: "showWeek" }] : []));
+        this.flexible = computed(() => this.thyMode === 'flexible', ...(ngDevMode ? [{ debugName: "flexible" }] : []));
         /**
          * 日期变化的回调
          */
         this.thyDateChange = output();
         this.thyOpenChange = output();
-        this.picker = viewChild(ThyPicker);
+        this.picker = viewChild(ThyPicker, ...(ngDevMode ? [{ debugName: "picker" }] : []));
         /**
          * 时区，不传使用默认时区
          */
-        this.thyTimeZone = input();
+        this.thyTimeZone = input(...(ngDevMode ? [undefined, { debugName: "thyTimeZone" }] : []));
         this.disabled = false;
         this.isCustomPlaceHolder = false;
         this.onlyEmitDate = false;
@@ -3099,17 +3103,17 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
     setValueByPrecision(value) {
         return setValueByTimestampPrecision(value, this.isRange, this.thyTimestampPrecision(), this.thyTimeZone());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AbstractPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: AbstractPickerComponent, isStandalone: true, inputs: { thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: false, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyAutoFocus: { classPropertyName: "thyAutoFocus", publicName: "thyAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, thyOpen: { classPropertyName: "thyOpen", publicName: "thyOpen", isSignal: true, isRequired: false, transformFunction: null }, thyDisabledDate: { classPropertyName: "thyDisabledDate", publicName: "thyDisabledDate", isSignal: true, isRequired: false, transformFunction: null }, thyMinDate: { classPropertyName: "thyMinDate", publicName: "thyMinDate", isSignal: true, isRequired: false, transformFunction: null }, thyMaxDate: { classPropertyName: "thyMaxDate", publicName: "thyMaxDate", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceHolder: { classPropertyName: "thyPlaceHolder", publicName: "thyPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, thyReadonly: { classPropertyName: "thyReadonly", publicName: "thyReadonly", isSignal: true, isRequired: false, transformFunction: null }, thyOriginClassName: { classPropertyName: "thyOriginClassName", publicName: "thyOriginClassName", isSignal: true, isRequired: false, transformFunction: null }, thyPanelClassName: { classPropertyName: "thyPanelClassName", publicName: "thyPanelClassName", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyTimestampPrecision: { classPropertyName: "thyTimestampPrecision", publicName: "thyTimestampPrecision", isSignal: true, isRequired: false, transformFunction: null }, thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thySeparator: { classPropertyName: "thySeparator", publicName: "thySeparator", isSignal: true, isRequired: false, transformFunction: null }, thyAutoStartAndEnd: { classPropertyName: "thyAutoStartAndEnd", publicName: "thyAutoStartAndEnd", isSignal: true, isRequired: false, transformFunction: null }, thyDefaultPickerValue: { classPropertyName: "thyDefaultPickerValue", publicName: "thyDefaultPickerValue", isSignal: true, isRequired: false, transformFunction: null }, thySuffixIcon: { classPropertyName: "thySuffixIcon", publicName: "thySuffixIcon", isSignal: true, isRequired: false, transformFunction: null }, thyShowShortcut: { classPropertyName: "thyShowShortcut", publicName: "thyShowShortcut", isSignal: true, isRequired: false, transformFunction: null }, thyShortcutPosition: { classPropertyName: "thyShortcutPosition", publicName: "thyShortcutPosition", isSignal: true, isRequired: false, transformFunction: null }, thyShortcutPresets: { classPropertyName: "thyShortcutPresets", publicName: "thyShortcutPresets", isSignal: true, isRequired: false, transformFunction: null }, thyShowTime: { classPropertyName: "thyShowTime", publicName: "thyShowTime", isSignal: true, isRequired: false, transformFunction: null }, thyMustShowTime: { classPropertyName: "thyMustShowTime", publicName: "thyMustShowTime", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyTimeZone: { classPropertyName: "thyTimeZone", publicName: "thyTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange", thyDateChange: "thyDateChange", thyOpenChange: "thyOpenChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ThyPicker, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AbstractPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.10", type: AbstractPickerComponent, isStandalone: true, inputs: { thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: false, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyAutoFocus: { classPropertyName: "thyAutoFocus", publicName: "thyAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, thyOpen: { classPropertyName: "thyOpen", publicName: "thyOpen", isSignal: true, isRequired: false, transformFunction: null }, thyDisabledDate: { classPropertyName: "thyDisabledDate", publicName: "thyDisabledDate", isSignal: true, isRequired: false, transformFunction: null }, thyMinDate: { classPropertyName: "thyMinDate", publicName: "thyMinDate", isSignal: true, isRequired: false, transformFunction: null }, thyMaxDate: { classPropertyName: "thyMaxDate", publicName: "thyMaxDate", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceHolder: { classPropertyName: "thyPlaceHolder", publicName: "thyPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, thyReadonly: { classPropertyName: "thyReadonly", publicName: "thyReadonly", isSignal: true, isRequired: false, transformFunction: null }, thyOriginClassName: { classPropertyName: "thyOriginClassName", publicName: "thyOriginClassName", isSignal: true, isRequired: false, transformFunction: null }, thyPanelClassName: { classPropertyName: "thyPanelClassName", publicName: "thyPanelClassName", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyTimestampPrecision: { classPropertyName: "thyTimestampPrecision", publicName: "thyTimestampPrecision", isSignal: true, isRequired: false, transformFunction: null }, thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thySeparator: { classPropertyName: "thySeparator", publicName: "thySeparator", isSignal: true, isRequired: false, transformFunction: null }, thyAutoStartAndEnd: { classPropertyName: "thyAutoStartAndEnd", publicName: "thyAutoStartAndEnd", isSignal: true, isRequired: false, transformFunction: null }, thyDefaultPickerValue: { classPropertyName: "thyDefaultPickerValue", publicName: "thyDefaultPickerValue", isSignal: true, isRequired: false, transformFunction: null }, thySuffixIcon: { classPropertyName: "thySuffixIcon", publicName: "thySuffixIcon", isSignal: true, isRequired: false, transformFunction: null }, thyShowShortcut: { classPropertyName: "thyShowShortcut", publicName: "thyShowShortcut", isSignal: true, isRequired: false, transformFunction: null }, thyShortcutPosition: { classPropertyName: "thyShortcutPosition", publicName: "thyShortcutPosition", isSignal: true, isRequired: false, transformFunction: null }, thyShortcutPresets: { classPropertyName: "thyShortcutPresets", publicName: "thyShortcutPresets", isSignal: true, isRequired: false, transformFunction: null }, thyShowTime: { classPropertyName: "thyShowTime", publicName: "thyShowTime", isSignal: true, isRequired: false, transformFunction: null }, thyMustShowTime: { classPropertyName: "thyMustShowTime", publicName: "thyMustShowTime", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyTimeZone: { classPropertyName: "thyTimeZone", publicName: "thyTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange", thyDateChange: "thyDateChange", thyOpenChange: "thyOpenChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ThyPicker, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AbstractPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AbstractPickerComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { thyMode: [{
                 type: Input
-            }], thyDisabled: [{
+            }], thyAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAllowClear", required: false }] }], thyAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoFocus", required: false }] }], thyOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOpen", required: false }] }], thyDisabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabledDate", required: false }] }], thyMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMinDate", required: false }] }], thyMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMaxDate", required: false }] }], thyPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlaceHolder", required: false }] }], thyReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyReadonly", required: false }] }], thyOriginClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOriginClassName", required: false }] }], thyPanelClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPanelClassName", required: false }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyTimestampPrecision: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTimestampPrecision", required: false }] }], thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }, { type: i0.Output, args: ["thyFormatChange"] }], thySeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySeparator", required: false }] }], thyAutoStartAndEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoStartAndEnd", required: false }] }], thyDefaultPickerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDefaultPickerValue", required: false }] }], thySuffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySuffixIcon", required: false }] }], thyShowShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowShortcut", required: false }] }], thyShortcutPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShortcutPosition", required: false }] }], thyShortcutPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShortcutPresets", required: false }] }], thyShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowTime", required: false }] }], thyMustShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMustShowTime", required: false }] }], thyDateChange: [{ type: i0.Output, args: ["thyDateChange"] }], thyOpenChange: [{ type: i0.Output, args: ["thyOpenChange"] }], picker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ThyPicker), { isSignal: true }] }], thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
-            }] } });
+            }], thyTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTimeZone", required: false }] }] } });
 
 /**
  * @private
@@ -3118,17 +3122,17 @@ class BasePicker extends AbstractPickerComponent {
     constructor() {
         super(...arguments);
         this.element = inject(ElementRef);
-        this.thyPicker = viewChild('thyPicker');
-        this.thyDateRender = input();
+        this.thyPicker = viewChild('thyPicker', ...(ngDevMode ? [{ debugName: "thyPicker" }] : []));
+        this.thyDateRender = input(...(ngDevMode ? [undefined, { debugName: "thyDateRender" }] : []));
         /**
          * 是否有幕布
          */
-        this.thyHasBackdrop = input(true, { transform: coerceBooleanProperty$1 });
+        this.thyHasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "thyHasBackdrop", transform: coerceBooleanProperty$1 }] : [{ transform: coerceBooleanProperty$1 }]));
         /**
          * 弹出位置
          * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
          */
-        this.thyPlacement = input('bottomLeft');
+        this.thyPlacement = input('bottomLeft', ...(ngDevMode ? [{ debugName: "thyPlacement" }] : []));
         this.thyOnPanelChange = output();
         this.thyOnCalendarChange = output();
         this.thyOnOk = output();
@@ -3283,10 +3287,10 @@ class BasePicker extends AbstractPickerComponent {
             (!maxDate || date.startOfDay().nativeDate <= maxDate.startOfDay().nativeDate) &&
             !disable);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BasePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: BasePicker, isStandalone: true, selector: "ng-component", inputs: { thyDateRender: { classPropertyName: "thyDateRender", publicName: "thyDateRender", isSignal: true, isRequired: false, transformFunction: null }, thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: false, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnPanelChange: "thyOnPanelChange", thyOnCalendarChange: "thyOnCalendarChange", thyOnOk: "thyOnOk" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex" } }, viewQueries: [{ propertyName: "thyPicker", first: true, predicate: ["thyPicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: BasePicker, isStandalone: true, selector: "ng-component", inputs: { thyDateRender: { classPropertyName: "thyDateRender", publicName: "thyDateRender", isSignal: true, isRequired: false, transformFunction: null }, thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: false, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnPanelChange: "thyOnPanelChange", thyOnCalendarChange: "thyOnCalendarChange", thyOnOk: "thyOnOk" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex" } }, viewQueries: [{ propertyName: "thyPicker", first: true, predicate: ["thyPicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BasePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasePicker, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -3296,9 +3300,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '(blur)': 'onBlur($event)'
                     }
                 }]
-        }], propDecorators: { thyMode: [{
+        }], propDecorators: { thyPicker: [{ type: i0.ViewChild, args: ['thyPicker', { isSignal: true }] }], thyDateRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDateRender", required: false }] }], thyMode: [{
                 type: Input
-            }] } });
+            }], thyHasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHasBackdrop", required: false }] }], thyPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlacement", required: false }] }], thyOnPanelChange: [{ type: i0.Output, args: ["thyOnPanelChange"] }], thyOnCalendarChange: [{ type: i0.Output, args: ["thyOnCalendarChange"] }], thyOnOk: [{ type: i0.Output, args: ["thyOnOk"] }] } });
 
 /**
  * 日期选择组件
@@ -3312,8 +3316,8 @@ class ThyDatePicker extends BasePicker {
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyDatePicker, isStandalone: true, selector: "thy-date-picker", host: { properties: { "attr.tabindex": "tabIndex" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyDatePicker, isStandalone: true, selector: "thy-date-picker", host: { properties: { "attr.tabindex": "tabIndex" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3321,7 +3325,7 @@ class ThyDatePicker extends BasePicker {
             }
         ], exportAs: ["thyDatePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-date-picker', exportAs: 'thyDatePicker', providers: [
                         {
@@ -3345,13 +3349,13 @@ class ThyMonthPicker extends BasePicker {
         /**
          * 展示的月份格式
          */
-        this.thyFormat = model('yyyy-MM');
+        this.thyFormat = model('yyyy-MM', ...(ngDevMode ? [{ debugName: "thyFormat" }] : []));
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
         this.thyMode = 'month';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyMonthPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyMonthPicker, isStandalone: true, selector: "thy-month-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyMonthPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyMonthPicker, isStandalone: true, selector: "thy-month-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3359,7 +3363,7 @@ class ThyMonthPicker extends BasePicker {
             }
         ], exportAs: ["thyMonthPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyMonthPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyMonthPicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-month-picker', exportAs: 'thyMonthPicker', providers: [
                         {
@@ -3368,7 +3372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             useExisting: forwardRef(() => ThyMonthPicker)
                         }
                     ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }, { type: i0.Output, args: ["thyFormatChange"] }] } });
 
 /**
  * 日期范围选择组件
@@ -3382,8 +3386,8 @@ class ThyRangePicker extends BasePicker {
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyRangePicker, isStandalone: true, selector: "thy-range-picker", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyRangePicker, isStandalone: true, selector: "thy-range-picker", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3391,7 +3395,7 @@ class ThyRangePicker extends BasePicker {
             }
         ], exportAs: ["thyRangePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyRangePicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-range-picker', exportAs: 'thyRangePicker', providers: [
                         {
@@ -3414,8 +3418,8 @@ class ThyWeekPicker extends BasePicker {
         this.hostRenderer.addClass('thy-calendar-picker');
         this.thyMode = 'week';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyWeekPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyWeekPicker, isStandalone: true, selector: "thy-week-picker", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyWeekPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyWeekPicker, isStandalone: true, selector: "thy-week-picker", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3423,7 +3427,7 @@ class ThyWeekPicker extends BasePicker {
             }
         ], exportAs: ["thyWeekPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyWeekPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyWeekPicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-week-picker', exportAs: 'thyWeekPicker', providers: [
                         {
@@ -3445,15 +3449,15 @@ class ThyYearPicker extends BasePicker {
         /**
          * 展示的年份格式
          */
-        this.thyFormat = model('yyyy');
+        this.thyFormat = model('yyyy', ...(ngDevMode ? [{ debugName: "thyFormat" }] : []));
         this.isRange = false;
         this.endPanelMode = 'year';
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
         this.thyMode = 'year';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyYearPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyYearPicker, isStandalone: true, selector: "thy-year-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyYearPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyYearPicker, isStandalone: true, selector: "thy-year-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3461,7 +3465,7 @@ class ThyYearPicker extends BasePicker {
             }
         ], exportAs: ["thyYearPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyYearPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyYearPicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-year-picker', exportAs: 'thyYearPicker', providers: [
                         {
@@ -3470,7 +3474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             useExisting: forwardRef(() => ThyYearPicker)
                         }
                     ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }, { type: i0.Output, args: ["thyFormatChange"] }] } });
 
 const DATE_PICKER_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
@@ -3482,11 +3486,13 @@ const DATE_PICKER_REQUIRED_VALIDATOR = {
  */
 class DatePickerRequiredValidator {
     constructor() {
-        this.required = input(false, {
-            transform: (value) => {
-                return value != null && value !== false && `${value}` !== 'false';
-            }
-        });
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: (value) => {
+                    return value != null && value !== false && `${value}` !== 'false';
+                } }] : [{
+                transform: (value) => {
+                    return value != null && value !== false && `${value}` !== 'false';
+                }
+            }]));
     }
     validate(control) {
         return this.required() ? this.validateRequired(control) : null;
@@ -3494,16 +3500,16 @@ class DatePickerRequiredValidator {
     validateRequired(control) {
         return isEmptyInputDateValue(control.value) ? { required: true } : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: DatePickerRequiredValidator, isStandalone: true, selector: "[thyDatePicker][required][formControlName],[thyDatePicker][required][formControl],[thyDatePicker][required][ngModel],thy-date-picker[required][formControlName],thy-date-picker[required][formControl],thy-date-picker[required][ngModel]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DATE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: DatePickerRequiredValidator, isStandalone: true, selector: "[thyDatePicker][required][formControlName],[thyDatePicker][required][formControl],[thyDatePicker][required][ngModel],thy-date-picker[required][formControlName],thy-date-picker[required][formControl],thy-date-picker[required][ngModel]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DATE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerRequiredValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerRequiredValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyDatePicker][required][formControlName],[thyDatePicker][required][formControl],[thyDatePicker][required][ngModel],thy-date-picker[required][formControlName],thy-date-picker[required][formControl],thy-date-picker[required][ngModel]',
                     providers: [DATE_PICKER_REQUIRED_VALIDATOR]
                 }]
-        }] });
+        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 const RANGE_PICKER_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => RangePickerRequiredValidator),
@@ -3514,11 +3520,13 @@ const RANGE_PICKER_REQUIRED_VALIDATOR = {
  */
 class RangePickerRequiredValidator {
     constructor() {
-        this.required = input(false, {
-            transform: (value) => {
-                return value != null && value !== false && `${value}` !== 'false';
-            }
-        });
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: (value) => {
+                    return value != null && value !== false && `${value}` !== 'false';
+                } }] : [{
+                transform: (value) => {
+                    return value != null && value !== false && `${value}` !== 'false';
+                }
+            }]));
     }
     validate(control) {
         return this.required() ? this.validateRequired(control) : null;
@@ -3526,16 +3534,16 @@ class RangePickerRequiredValidator {
     validateRequired(control) {
         return isEmptyInputRangeValue(control.value) ? { required: true } : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RangePickerRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: RangePickerRequiredValidator, isStandalone: true, selector: "[thyRangePicker][required][formControlName],[thyRangePicker][required][formControl],[thyRangePicker][required][ngModel],thy-range-picker[required][formControlName],thy-range-picker[required][formControl],thy-range-picker[required][ngModel]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [RANGE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangePickerRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: RangePickerRequiredValidator, isStandalone: true, selector: "[thyRangePicker][required][formControlName],[thyRangePicker][required][formControl],[thyRangePicker][required][ngModel],thy-range-picker[required][formControlName],thy-range-picker[required][formControl],thy-range-picker[required][ngModel]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [RANGE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RangePickerRequiredValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RangePickerRequiredValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyRangePicker][required][formControlName],[thyRangePicker][required][formControl],[thyRangePicker][required][ngModel],thy-range-picker[required][formControlName],thy-range-picker[required][formControl],thy-range-picker[required][ngModel]',
                     providers: [RANGE_PICKER_REQUIRED_VALIDATOR]
                 }]
-        }] });
+        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 function isEmptyInputRangeValue(value) {
     return value == null || (instanceOfRangeEntry(value) && (value.begin == null || value.end == null));
 }
@@ -3552,44 +3560,54 @@ class PickerDirective extends AbstractPickerComponent {
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.thyPopover = inject(ThyPopover);
-        this.thyDateRender = input();
+        this.thyDateRender = input(...(ngDevMode ? [undefined, { debugName: "thyDateRender" }] : []));
         this.thyOnPanelChange = output();
         this.thyOnCalendarChange = output();
         /**
          * 弹出位置
          * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
          */
-        this.thyPlacement = input('bottom');
+        this.thyPlacement = input('bottom', ...(ngDevMode ? [{ debugName: "thyPlacement" }] : []));
         /**
          * 弹出 DatePicker 的偏移量
          */
-        this.thyOffset = input(4, {
-            transform: (value) => {
-                if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                    warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+        this.thyOffset = input(4, ...(ngDevMode ? [{ debugName: "thyOffset", transform: (value) => {
+                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                        warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                    }
+                    return numberAttribute(value);
+                } }] : [{
+                transform: (value) => {
+                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                        warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                    }
+                    return numberAttribute(value);
                 }
-                return numberAttribute(value);
-            }
-        });
+            }]));
         /**
          * 是否有幕布
          */
-        this.thyHasBackdrop = input(true, {
-            transform: (value) => {
-                if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                    warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+        this.thyHasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "thyHasBackdrop", transform: (value) => {
+                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                        warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                    }
+                    return coerceBooleanProperty$1(value);
+                } }] : [{
+                transform: (value) => {
+                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                        warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                    }
+                    return coerceBooleanProperty$1(value);
                 }
-                return coerceBooleanProperty$1(value);
-            }
-        });
+            }]));
         /**
          * popover 的其它参数
          */
-        this.thyPopoverOptions = input();
+        this.thyPopoverOptions = input(...(ngDevMode ? [undefined, { debugName: "thyPopoverOptions" }] : []));
         /**
          * 是否阻止冒泡
          */
-        this.thyStopPropagation = input(true, { transform: coerceBooleanProperty$1 });
+        this.thyStopPropagation = input(true, ...(ngDevMode ? [{ debugName: "thyStopPropagation", transform: coerceBooleanProperty$1 }] : [{ transform: coerceBooleanProperty$1 }]));
         this.el = this.elementRef.nativeElement;
         this.$click = fromEvent(this.el, 'click').pipe(tap(e => {
             if (this.thyStopPropagation()) {
@@ -3704,12 +3722,12 @@ class PickerDirective extends AbstractPickerComponent {
     onShowTimePickerChange(show) {
         this.withTime = show;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: PickerDirective, isStandalone: true, inputs: { thyDateRender: { classPropertyName: "thyDateRender", publicName: "thyDateRender", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyOffset: { classPropertyName: "thyOffset", publicName: "thyOffset", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyPopoverOptions: { classPropertyName: "thyPopoverOptions", publicName: "thyPopoverOptions", isSignal: true, isRequired: false, transformFunction: null }, thyStopPropagation: { classPropertyName: "thyStopPropagation", publicName: "thyStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnPanelChange: "thyOnPanelChange", thyOnCalendarChange: "thyOnCalendarChange" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: PickerDirective, isStandalone: true, inputs: { thyDateRender: { classPropertyName: "thyDateRender", publicName: "thyDateRender", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyOffset: { classPropertyName: "thyOffset", publicName: "thyOffset", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyPopoverOptions: { classPropertyName: "thyPopoverOptions", publicName: "thyPopoverOptions", isSignal: true, isRequired: false, transformFunction: null }, thyStopPropagation: { classPropertyName: "thyStopPropagation", publicName: "thyStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnPanelChange: "thyOnPanelChange", thyOnCalendarChange: "thyOnCalendarChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PickerDirective, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { thyDateRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDateRender", required: false }] }], thyOnPanelChange: [{ type: i0.Output, args: ["thyOnPanelChange"] }], thyOnCalendarChange: [{ type: i0.Output, args: ["thyOnCalendarChange"] }], thyPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlacement", required: false }] }], thyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOffset", required: false }] }], thyHasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHasBackdrop", required: false }] }], thyPopoverOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPopoverOptions", required: false }] }], thyStopPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyStopPropagation", required: false }] }] } });
 
 /**
  * 日期选择指令
@@ -3721,8 +3739,8 @@ class ThyDatePickerDirective extends PickerDirective {
         super(...arguments);
         this.isRange = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyDatePickerDirective, isStandalone: true, selector: "[thyDatePicker]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyDatePickerDirective, isStandalone: true, selector: "[thyDatePicker]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3730,7 +3748,7 @@ class ThyDatePickerDirective extends PickerDirective {
             }
         ], exportAs: ["thyDatePicker"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyDatePicker]',
@@ -3755,8 +3773,8 @@ class ThyRangePickerDirective extends PickerDirective {
         super();
         this.isRange = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRangePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyRangePickerDirective, isStandalone: true, selector: "[thyRangePicker]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyRangePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyRangePickerDirective, isStandalone: true, selector: "[thyRangePicker]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3764,7 +3782,7 @@ class ThyRangePickerDirective extends PickerDirective {
             }
         ], exportAs: ["thyRangePicker"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRangePickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyRangePickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyRangePicker]',
@@ -3790,15 +3808,15 @@ class ThyQuarterPicker extends BasePicker {
         /**
          * 展示的季度格式
          */
-        this.thyFormat = model(`yyyy-${QUARTER_FORMAT}`);
+        this.thyFormat = model(`yyyy-${QUARTER_FORMAT}`, ...(ngDevMode ? [{ debugName: "thyFormat" }] : []));
         this.isRange = false;
         this.endPanelMode = 'quarter';
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
         this.thyMode = 'quarter';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyQuarterPicker, isStandalone: true, selector: "thy-quarter-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyQuarterPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyQuarterPicker, isStandalone: true, selector: "thy-quarter-picker", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyFormat: "thyFormatChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3806,7 +3824,7 @@ class ThyQuarterPicker extends BasePicker {
             }
         ], exportAs: ["thyQuarterPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyQuarterPicker, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'thy-quarter-picker', exportAs: 'thyQuarterPicker', providers: [
                         {
@@ -3815,12 +3833,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             useExisting: forwardRef(() => ThyQuarterPicker)
                         }
                     ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }, { type: i0.Output, args: ["thyFormatChange"] }] } });
 
 registerLocaleData(localeZhHans, 'zh-Hans');
 class ThyDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerModule, imports: [CommonModule,
             OverlayModule,
             LibPackerModule,
             ThyIconModule,
@@ -3853,7 +3871,7 @@ class ThyDatePickerModule {
             ThyDatePickerFormatStringPipe,
             ThyDatePickerDirective,
             ThyRangePickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerModule, providers: [ThyDatePickerConfigService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerModule, providers: [ThyDatePickerConfigService], imports: [CommonModule,
             OverlayModule,
             LibPackerModule,
             ThyIconModule,
@@ -3867,7 +3885,7 @@ class ThyDatePickerModule {
             ThyWeekPicker,
             ThyRangePicker] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [