ngx-tethys 19.1.0-next.1 → 19.1.0-next.10

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

@@ -1,10 +1,10 @@
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { formatDate, NgClass, NgTemplateOutlet, CommonModule, isPlatformBrowser, registerLocaleData } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, HostBinding, NgModule, ViewChild, computed, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
+import { Injectable, inject, input, model, output, effect, Directive, ChangeDetectionStrategy, Component, signal, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, computed, NgModule, viewChild, DestroyRef, linkedSignal, Input, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
 import localeZhHans from '@angular/common/locales/zh-Hans';
-import { TinyDate, coerceBooleanProperty, subDays, startOfDay, startOfWeek, addDays, addWeeks, helpers, coerceArray, isTemplateRef, isEmpty, isString, valueFunctionProp, isUndefinedOrNull, isFunction, endOfDay, sortRangeValue, elementMatchClosest, warnDeprecation } from 'ngx-tethys/util';
-import { injectLocale, ThyI18nService, ThyLocaleType } from 'ngx-tethys/i18n';
+import { coerceBooleanProperty, TinyDate, subDays, startOfDay, startOfWeek, addDays, addWeeks, helpers, coerceArray, isTemplateRef, isEmpty, isString, isFunction, isUndefinedOrNull, valueFunctionProp, endOfDay, sortRangeValue, elementMatchClosest, warnDeprecation } from 'ngx-tethys/util';
+import { injectLocale, ThyI18nService } from 'ngx-tethys/i18n';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -19,7 +19,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThyEnterDirective } from 'ngx-tethys/shared';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
-import { tap, mapTo, takeUntil, debounceTime } from 'rxjs/operators';
+import { tap, mapTo, debounceTime } from 'rxjs/operators';
 
 function DATE_HELPER_SERVICE_FACTORY() {
     return new DateHelperByDatePipe();
@@ -61,23 +61,21 @@ class CalendarHeader {
     constructor() {
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.showSuperPreBtn = true;
-        this.showSuperNextBtn = true;
-        this.showPreBtn = true;
-        this.showNextBtn = true;
-        this.valueChange = new EventEmitter();
-        this.panelModeChange = new EventEmitter();
+        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.valueChange = output();
+        this.panelModeChange = output();
         this.prefixCls = 'thy-calendar';
+        effect(() => {
+            this.render();
+        });
     }
     ngOnInit() {
-        if (!this.value) {
-            this.value = new TinyDate();
-        }
-        this.selectors = this.getSelectors();
-    }
-    ngOnChanges(changes) {
-        if (changes.value) {
-            this.render();
+        if (!this.value()) {
+            this.value.set(new TinyDate());
         }
     }
     superPrevious() {
@@ -100,46 +98,32 @@ class CalendarHeader {
         return selector ? selector.onClick() : null;
     }
     render() {
-        if (this.value) {
+        if (this.value()) {
             this.selectors = this.getSelectors();
         }
     }
     gotoMonth(amount) {
-        this.changeValue(this.value.addMonths(amount));
+        this.changeValue(this.value().addMonths(amount));
     }
     gotoYear(amount) {
-        this.changeValue(this.value.addYears(amount));
+        this.changeValue(this.value().addYears(amount));
     }
     changeValue(value) {
-        if (this.value !== value) {
-            this.value = value;
-            this.valueChange.emit(this.value);
-            this.render();
+        if (this.value() !== value) {
+            this.value.set(value);
+            this.valueChange.emit(value);
         }
     }
     formatDateTime(format) {
-        return this.dateHelper.format(this.value.nativeDate, format);
+        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: "14.0.0", version: "19.2.8", type: CalendarHeader, isStandalone: true, inputs: { showSuperPreBtn: "showSuperPreBtn", showSuperNextBtn: "showSuperNextBtn", showPreBtn: "showPreBtn", showNextBtn: "showNextBtn", value: "value" }, outputs: { valueChange: "valueChange", panelModeChange: "panelModeChange" }, usesOnChanges: true, ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarHeader, decorators: [{
             type: Directive
-        }], propDecorators: { showSuperPreBtn: [{
-                type: Input
-            }], showSuperNextBtn: [{
-                type: Input
-            }], showPreBtn: [{
-                type: Input
-            }], showNextBtn: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], panelModeChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * @private
@@ -156,11 +140,11 @@ 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
+            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" }]
         }] });
 
 /**
@@ -168,91 +152,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class CalendarFooter {
     constructor() {
-        this.showTime = false;
-        this.mustShowTime = false;
-        this.disableTimeConfirm = false;
-        this.selectTime = new EventEmitter();
-        this.clickOk = new EventEmitter();
-        this.clickRemove = new EventEmitter();
-        this.showTimePickerChange = new EventEmitter();
-        this.isShowTime = false;
-        this.isCanTime = false;
+        /**
+         * 是否支持设置时间 (时、分)
+         */
+        this.showTime = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否展示时间 (时、分)
+         */
+        this.mustShowTime = input(false, { transform: coerceBooleanProperty });
+        this.value = model();
+        this.timeZone = input();
+        this.disableTimeConfirm = input(false, { transform: coerceBooleanProperty });
+        this.selectTime = output();
+        this.clickOk = output();
+        this.clickRemove = output();
+        this.showTimePickerChange = output();
+        this.isShowTime = signal(false);
+        this.isCanTime = signal(false);
         this.locale = injectLocale('datePicker');
+        effect(() => {
+            this.initTimeShowMode();
+        });
     }
     ngOnInit() {
-        this._initTimeShowMode();
-        if (!this.value) {
-            this.value = new TinyDate(undefined, this.timeZone);
-        }
+        this.initValue();
     }
-    ngOnChanges(changes) {
-        if (changes.mustShowTime) {
-            this._initTimeShowMode();
+    initValue() {
+        if (!this.value()) {
+            const defaultDate = new TinyDate(undefined, this.timeZone());
+            this.value.set(defaultDate);
         }
     }
     onSelectTime(date) {
-        this.selectTime.emit(new TinyDate(date, this.timeZone));
+        this.selectTime.emit(new TinyDate(date, this.timeZone()));
     }
     onTimeOk() {
-        if (this.disableTimeConfirm) {
+        if (this.disableTimeConfirm()) {
             return;
         }
-        this.selectTime.emit(this.value);
+        this.selectTime.emit(this.value());
         this.clickOk.emit();
     }
     onClear() {
-        this.value = null;
+        this.value.set(null);
         this.clickRemove.emit();
     }
     changeTimeShowMode(type) {
-        switch (type) {
-            case 'can':
-                this.isCanTime = true;
-                this.isShowTime = false;
-                break;
-            case 'show':
-                this.isCanTime = false;
-                this.isShowTime = true;
-                break;
-        }
-        this.showTimePickerChange.emit(this.isShowTime);
+        this.isCanTime.set(type === 'can');
+        this.isShowTime.set(type === 'show');
+        this.showTimePickerChange.emit(this.isShowTime());
     }
-    _initTimeShowMode() {
-        if (this.mustShowTime) {
+    initTimeShowMode() {
+        if (this.mustShowTime()) {
             this.changeTimeShowMode('show');
         }
         else {
-            if (this.showTime) {
+            if (this.showTime()) {
                 this.changeTimeShowMode('can');
             }
         }
     }
     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: "showTime", mustShowTime: "mustShowTime", value: "value", timeZone: "timeZone", disableTimeConfirm: ["disableTimeConfirm", "disableTimeConfirm", coerceBooleanProperty] }, outputs: { selectTime: "selectTime", clickOk: "clickOk", clickRemove: "clickRemove", showTimePickerChange: "showTimePickerChange" }, exportAs: ["calendarFooter"], usesOnChanges: true, ngImport: i0, template: "@if (isShowTime || isCanTime) {\n  <div class=\"time-picker-section\" (click)=\"$event.stopPropagation()\">\n    @if (isCanTime) {\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 (isShowTime) {\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 (!isCanTime) {\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: ["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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarFooter, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'calendar-footer', exportAs: 'calendarFooter', imports: [ThyIcon, ThyInnerTimePicker, FormsModule, ThyButton], template: "@if (isShowTime || isCanTime) {\n  <div class=\"time-picker-section\" (click)=\"$event.stopPropagation()\">\n    @if (isCanTime) {\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 (isShowTime) {\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 (!isCanTime) {\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" }]
-        }], propDecorators: { showTime: [{
-                type: Input
-            }], mustShowTime: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], disableTimeConfirm: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], selectTime: [{
-                type: Output
-            }], clickOk: [{
-                type: Output
-            }], clickRemove: [{
-                type: Output
-            }], showTimePickerChange: [{
-                type: Output
-            }] } });
+            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: () => [] });
 
 /**
  * @deprecated
@@ -300,6 +266,7 @@ const DEFAULT_DATE_PICKER_CONFIG = {
         ];
     }
 };
+const QUARTER_FORMAT = "'Q'q";
 const THY_DATE_PICKER_CONFIG = new InjectionToken('thy-date-picker-config');
 function useDatePickerDefaultConfig() {
     const locale = injectLocale('datePicker');
@@ -440,7 +407,7 @@ function getFlexibleAdvancedReadableValue(tinyDates, flexibleDateGranularity, se
     }
     switch (flexibleDateGranularity) {
         case 'year':
-            const yearFormatStr = locale()?.id === ThyLocaleType.zhHans ? `yyyy年` : `yyyy`;
+            const yearFormatStr = locale().datePicker.yearFormat;
             if (tinyDates[0].isSameYear(tinyDates[1])) {
                 value = `${tinyDates[0].format(yearFormatStr)}`;
             }
@@ -449,7 +416,7 @@ function getFlexibleAdvancedReadableValue(tinyDates, flexibleDateGranularity, se
             }
             break;
         case 'quarter':
-            const quarterFormatStr = locale()?.id === ThyLocaleType.zhHans ? `yyyy年 qqq` : `yyyy-qqq`;
+            const quarterFormatStr = locale().datePicker.yearQuarterFormat;
             if (tinyDates[0].isSameQuarter(tinyDates[1])) {
                 value = `${tinyDates[0].format(quarterFormatStr)}`;
             }
@@ -458,7 +425,7 @@ function getFlexibleAdvancedReadableValue(tinyDates, flexibleDateGranularity, se
             }
             break;
         case 'month':
-            const monthFormatStr = locale()?.id === ThyLocaleType.zhHans ? `yyyy年 MM月` : `yyyy-MM`;
+            const monthFormatStr = locale().datePicker.yearMonthFormat;
             if (tinyDates[0].isSameMonth(tinyDates[1])) {
                 value = `${tinyDates[0].format(monthFormatStr)}`;
             }
@@ -657,9 +624,9 @@ class ThyQuarterPickerFormatPipe {
         this.datePickerConfigService = datePickerConfigService;
     }
     transform(originalValue, formatStr, separator) {
-        const { value, withTime } = transformDateValue(originalValue);
+        const { value } = transformDateValue(originalValue);
         if (!formatStr) {
-            formatStr = 'yyyy-qqq';
+            formatStr = `yyyy-${QUARTER_FORMAT}`;
         }
         if (!value) {
             return;
@@ -690,9 +657,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @private
  */
 class ThyDatePickerFormatStringPipe {
-    constructor() {
-        this.dateHelper = inject(DateHelperService);
-    }
     transform(originalValue) {
         const { withTime } = transformDateValue(originalValue);
         return withTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
@@ -732,7 +696,7 @@ class DateCarousel {
         this.cdr = inject(ChangeDetectorRef);
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.className = 'thy-date-picker-advanced-carousel';
+        this.activeDate = input();
         this.selectableData = {};
         this.selectedValue = [];
         this.initialized = false;
@@ -914,7 +878,7 @@ class DateCarousel {
         this.cdr.markForCheck();
     }
     getSelectableYear(currentDate, preOrNextcount = 0) {
-        currentDate = currentDate || this.activeDate || new TinyDate().startOfYear();
+        currentDate = currentDate || this.activeDate() || new TinyDate().startOfYear();
         return {
             type: 'year',
             content: `${currentDate.addYears(preOrNextcount).getYear()}`,
@@ -924,17 +888,17 @@ class DateCarousel {
         };
     }
     getSelectableQuarter(currentDate, preOrNextcount = 0) {
-        currentDate = currentDate || this.activeDate || new TinyDate().startOfQuarter();
+        currentDate = currentDate || this.activeDate() || new TinyDate().startOfQuarter();
         return {
             type: 'quarter',
-            content: `${currentDate.addQuarters(preOrNextcount).format('qqq')}`,
+            content: `${currentDate.addQuarters(preOrNextcount).format(QUARTER_FORMAT)}`,
             startValue: currentDate.addQuarters(preOrNextcount).startOfQuarter(),
             endValue: currentDate.addQuarters(preOrNextcount).endOfQuarter(),
             classMap: {}
         };
     }
     getSelectableMonth(currentDate, preOrNextcount = 0) {
-        currentDate = currentDate || this.activeDate || new TinyDate().startOfMonth();
+        currentDate = currentDate || this.activeDate() || new TinyDate().startOfMonth();
         // Selectable months for advanced range selector
         const cell = {
             type: 'month',
@@ -1077,7 +1041,7 @@ class DateCarousel {
         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: "activeDate" }, host: { properties: { "class": "this.className" } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1093,13 +1057,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => DateCarousel)
                         }
-                    ], 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: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }], activeDate: [{
-                type: Input
-            }] } });
+                    ], 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" }]
+        }] });
 
 /**
  * @private
@@ -1124,11 +1085,11 @@ 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
+            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" }]
         }] });
 
 /**
@@ -1142,16 +1103,20 @@ class CalendarTable {
         this.bodyRows = [];
         this.MAX_ROW = 6;
         this.MAX_COL = 7;
-        this.prefixCls = 'thy-calendar';
-        this.activeDate = new TinyDate();
-        this.showWeek = false;
-        this.selectedValue = []; // Range ONLY
-        this.hoverValue = []; // Range ONLY
-        this.valueChange = new EventEmitter();
-        this.cellHover = new EventEmitter(); // Emitted when hover on a day by mouse enter
+        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.valueChange = output();
+        this.cellHover = output(); // Emitted when hover on a day by mouse enter
     }
     render() {
-        if (this.activeDate) {
+        if (this.activeDate()) {
             this.headRow = this.makeHeadRow();
             this.bodyRows = this.makeBodyRows();
         }
@@ -1163,14 +1128,14 @@ class CalendarTable {
         return item.trackByIndex;
     }
     hasRangeValue() {
-        return this.selectedValue?.length > 0 || this.hoverValue?.length > 0;
+        return this.selectedValue()?.length > 0 || this.hoverValue()?.length > 0;
     }
     ngOnInit() {
         this.render();
     }
     ngOnChanges(changes) {
         if (changes.activeDate && !changes.activeDate.currentValue) {
-            this.activeDate = new TinyDate(undefined, this.timeZone);
+            this.activeDate.set(new TinyDate(undefined, this.timeZone()));
         }
         if (changes.disabledDate ||
             changes.locale ||
@@ -1204,55 +1169,41 @@ class CalendarTable {
         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: "14.0.0", version: "19.2.8", type: CalendarTable, isStandalone: true, inputs: { prefixCls: "prefixCls", value: "value", activeDate: "activeDate", showWeek: "showWeek", selectedValue: "selectedValue", hoverValue: "hoverValue", timeZone: "timeZone", disabledDate: "disabledDate", cellRender: "cellRender", fullCellRender: "fullCellRender" }, outputs: { valueChange: "valueChange", cellHover: "cellHover" }, usesOnChanges: true, ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CalendarTable, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { prefixCls: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], activeDate: [{
-                type: Input
-            }], showWeek: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], hoverValue: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], disabledDate: [{
-                type: Input
-            }], cellRender: [{
-                type: Input
-            }], fullCellRender: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], cellHover: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * @private
  */
 class DateTableCell {
     constructor() {
+        this.datePickerConfigService = inject(ThyDatePickerConfigService);
         this.isTemplateRef = isTemplateRef;
+        this.prefixCls = input();
+        this.cell = input();
         this.isNonEmptyString = (v) => isEmpty(v) && isString(v);
+        this.functionRenderResult = computed(() => {
+            const renderFn = this.cellRender();
+            if (!isFunction(renderFn)) {
+                return false;
+            }
+            const result = renderFn(this.cell().value);
+            return !isUndefinedOrNull(result);
+        });
+        this.cellRender = computed(() => {
+            return this.cell()?.dateCellRender || this.datePickerConfigService.config?.dateCellRender;
+        });
     }
     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: "prefixCls", cell: "cell" }, exportAs: ["dateTableCell"], ngImport: i0, template: "\n@switch (prefixCls) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cell.dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: { $implicit: cell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cell.dateCellRender)) {\n        <span [innerHTML]=\"cell.dateCellRender\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls }}-date\" [attr.aria-selected]=\"cell.isSelected\" [attr.aria-disabled]=\"cell.isDisabled\">\n          {{ cell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell.isToday\"\n      >\n      @if (cell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell.fullCellRender); context: { $implicit: cell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls }}-date-value\">\n          <span class=\"{{ prefixCls }}-date-value-today-text\">\n            <span class=\"{{ prefixCls }}-date-value-text\">{{ cell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cell.dateCellRender); context: { $implicit: cell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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 [innerHTML]=\"dateCellRender\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span [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: [{
             type: Component,
-            args: [{ selector: '[date-table-cell]', exportAs: 'dateTableCell', imports: [NgTemplateOutlet], template: "\n@switch (prefixCls) {\n  @case ('thy-calendar') {\n    @switch (true) {\n      @case (isTemplateRef(cell.dateCellRender)) {\n        <ng-container *ngTemplateOutlet=\"cell.dateCellRender; context: { $implicit: cell.value }\"></ng-container>\n      }\n      @case (isNonEmptyString(cell.dateCellRender)) {\n        <span [innerHTML]=\"cell.dateCellRender\"></span>\n      }\n      @default {\n        <div class=\"{{ prefixCls }}-date\" [attr.aria-selected]=\"cell.isSelected\" [attr.aria-disabled]=\"cell.isDisabled\">\n          {{ cell.content }}\n        </div>\n      }\n    }\n  }\n  @case ('thy-calendar-full') {\n    <div\n      tabindex=\"0\"\n      class=\"{{ prefixCls }}-date thy-calendar-full-cell-inner\"\n      [class.thy-calendar-full-calendar-date-today]=\"cell.isToday\"\n      >\n      @if (cell.fullCellRender) {\n        <ng-container *ngTemplateOutlet=\"$any(cell.fullCellRender); context: { $implicit: cell.value }\"> </ng-container>\n      } @else {\n        <div class=\"{{ prefixCls }}-date-value\">\n          <span class=\"{{ prefixCls }}-date-value-today-text\">\n            <span class=\"{{ prefixCls }}-date-value-text\">{{ cell.content }}</span>\n          </span>\n        </div>\n        <div class=\"{{ prefixCls }}-date-content\">\n          <ng-container *ngTemplateOutlet=\"$any(cell.dateCellRender); context: { $implicit: cell.value }\"> </ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
-        }], propDecorators: { prefixCls: [{
-                type: Input
-            }], cell: [{
-                type: Input
-            }] } });
+            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 [innerHTML]=\"dateCellRender\"></span>\n      }\n      @case (functionRenderResult()) {\n        <span [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" }]
+        }] });
 
 /**
  * @private
@@ -1262,17 +1213,19 @@ class DateTable extends CalendarTable {
         super();
         this.dateHelper = inject(DateHelperService);
         this.datePickerConfigService = inject(ThyDatePickerConfigService);
-        this.dayHover = new EventEmitter(); // Emitted when hover on a day by mouse enter
+        this.dayHover = output(); // Emitted when hover on a day by mouse enter
     }
     chooseDate(value) {
         // Only change date not change time
-        const date = new TinyDate(TinyDate.createDateInTimeZone(value.getFullYear(), value.getMonth(), value.getDate(), this.activeDate?.getHours(), this.activeDate?.getMinutes(), this.activeDate?.getSeconds(), this.timeZone), this.timeZone);
-        this.activeDate = date.clone();
+        const activeDate = this.activeDate();
+        const timeZone = this.timeZone();
+        const date = new TinyDate(TinyDate.createDateInTimeZone(value.getFullYear(), value.getMonth(), value.getDate(), activeDate?.getHours(), activeDate?.getMinutes(), activeDate?.getSeconds(), timeZone), timeZone);
+        this.activeDate.set(date.clone());
         this.valueChange.emit(date);
     }
     makeHeadRow() {
         const weekDays = [];
-        const start = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
+        const start = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
         for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
             const day = start.addDays(colIndex);
             weekDays[colIndex] = {
@@ -1288,13 +1241,15 @@ class DateTable extends CalendarTable {
     }
     getVeryShortWeekFormat() {
         if (this.dateHelper.relyOnDatePipe) {
-            return this.prefixCls === 'thy-calendar-full' ? this.locale().fullWeekFormat : this.locale().weekFormat;
+            const locale = this.locale();
+            const prefixCls = this.prefixCls();
+            return prefixCls === 'thy-calendar-full' ? locale.fullWeekFormat : locale.weekFormat;
         }
         return 'dd';
     }
     makeBodyRows() {
         const dateRows = [];
-        const firstDayOfMonth = this.activeDate.calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
+        const firstDayOfMonth = this.activeDate().calendarStart({ weekStartsOn: this.datePickerConfigService.config.weekStartsOn });
         for (let week = 0; week < this.MAX_ROW; week++) {
             const weekStart = firstDayOfMonth.addDays(week * 7);
             const row = {
@@ -1315,21 +1270,22 @@ class DateTable extends CalendarTable {
                     isDisabled: false,
                     isToday: false,
                     title: title,
-                    dateCellRender: valueFunctionProp(this.cellRender, date),
+                    dateCellRender: valueFunctionProp(this.cellRender(), date),
                     content: `${date.getDate()}`,
                     onClick: () => this.chooseDate(date),
                     onMouseEnter: () => this.dayHover.emit(date)
                 };
                 this.addCellProperty(cell, date);
-                if (this.showWeek && !row.weekNum) {
+                if (this.showWeek() && !row.weekNum) {
                     row.weekNum = this.dateHelper.getISOWeek(date.nativeDate);
                 }
                 if (date.isToday()) {
                     cell.isToday = true;
                     row.isCurrent = true;
                 }
-                if (this.selectedValue?.length > 0) {
-                    const [startSelected, endSelected] = this.selectedValue;
+                const selectedValue = this.selectedValue();
+                if (selectedValue?.length > 0) {
+                    const [startSelected, endSelected] = selectedValue;
                     if (date.isSameDay(startSelected)) {
                         row.isActive = true;
                     }
@@ -1337,22 +1293,24 @@ class DateTable extends CalendarTable {
                         row.isActive = true;
                     }
                 }
-                else if (date.isSameDay(this.value)) {
+                else if (date.isSameDay(this.value())) {
                     row.isActive = true;
                 }
                 row.dateCells.push(cell);
             }
+            const prefixCls = this.prefixCls();
             row.classMap = {
-                [`${this.prefixCls}-current-week`]: row.isCurrent,
-                [`${this.prefixCls}-active-week`]: row.isActive
+                [`${prefixCls}-current-week`]: row.isCurrent,
+                [`${prefixCls}-active-week`]: row.isActive
             };
             dateRows.push(row);
         }
         return dateRows;
     }
     addCellProperty(cell, date) {
-        if (this.selectedValue?.length > 0) {
-            const [startSelected, endSelected] = this.selectedValue;
+        const selectedValue = this.selectedValue();
+        if (selectedValue?.length > 0) {
+            const [startSelected, endSelected] = selectedValue;
             if (startSelected?.isSameDay(date)) {
                 cell.isSelected = true;
             }
@@ -1364,55 +1322,53 @@ class DateTable extends CalendarTable {
             cell.isInRange = startSelected?.isBeforeDay(date) && date.isBeforeDay(endSelected);
         }
         else {
-            cell.isSelected = date.isSameDay(this.value);
+            cell.isSelected = date.isSameDay(this.value());
         }
-        cell.isLastMonthCell = date.isBeforeMonth(this.activeDate);
-        cell.isNextMonthCell = date.isAfterMonth(this.activeDate);
+        const activeDate = this.activeDate();
+        cell.isLastMonthCell = date.isBeforeMonth(activeDate);
+        cell.isNextMonthCell = date.isAfterMonth(activeDate);
         cell.isToday = date.isToday();
-        cell.isDisabled = !!this.disabledDate?.(date.nativeDate);
+        cell.isDisabled = !!this.disabledDate()?.(date.nativeDate);
         cell.classMap = this.getClassMap(cell);
     }
     getClassMap(cell) {
+        const prefixCls = this.prefixCls();
         return {
-            [`${this.prefixCls}-cell`]: true,
-            [`${this.prefixCls}-today`]: cell.isToday,
-            [`${this.prefixCls}-last-month-cell`]: cell.isLastMonthCell,
-            [`${this.prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
-            [`${this.prefixCls}-selected-day`]: cell.isSelected,
-            [`${this.prefixCls}-disabled-cell`]: cell.isDisabled,
-            [`${this.prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
-            [`${this.prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
-            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
+            [`${prefixCls}-cell`]: true,
+            [`${prefixCls}-today`]: cell.isToday,
+            [`${prefixCls}-last-month-cell`]: cell.isLastMonthCell,
+            [`${prefixCls}-next-month-btn-day`]: cell.isNextMonthCell,
+            [`${prefixCls}-selected-day`]: cell.isSelected,
+            [`${prefixCls}-disabled-cell`]: cell.isDisabled,
+            [`${prefixCls}-selected-start-date`]: !!cell.isSelectedStartDate,
+            [`${prefixCls}-selected-end-date`]: !!cell.isSelectedEndDate,
+            [`${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: "<table class=\"{{ prefixCls }}-table\" cellSpacing=\"0\" role=\"grid\">\n  <thead>\n    <tr role=\"row\">\n      @if (showWeek) {\n        <th role=\"columnheader\" [title]=\"locale().week\" class=\"{{ prefixCls }}-column-header {{ prefixCls }}-week-number-header\">\n          <span class=\"{{ prefixCls }}-column-header-inner\">{{ locale().prefixWeek }}</span>\n        </th>\n      }\n      @for (cell of headRow; track $index) {\n        <th role=\"columnheader\" title=\"{{ cell.title }}\" class=\"{{ prefixCls }}-column-header\">\n          @if (prefixCls === 'thy-calendar') {\n            <span class=\"{{ prefixCls }}-column-header-inner\">{{ cell.content }}</span>\n          }\n          @if (prefixCls === 'thy-calendar-full') {\n            <span class=\"{{ prefixCls }}-column-header-inner\">{{ cell.content }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"{{ prefixCls }}-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr [ngClass]=\"row.classMap\" role=\"row\">\n        @if (row.weekNum) {\n          <td role=\"gridcell\" class=\"{{ prefixCls }}-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]=\"prefixCls\"\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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateTable, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'date-table', exportAs: 'dateTable', imports: [NgClass, DateTableCell], template: "<table class=\"{{ prefixCls }}-table\" cellSpacing=\"0\" role=\"grid\">\n  <thead>\n    <tr role=\"row\">\n      @if (showWeek) {\n        <th role=\"columnheader\" [title]=\"locale().week\" class=\"{{ prefixCls }}-column-header {{ prefixCls }}-week-number-header\">\n          <span class=\"{{ prefixCls }}-column-header-inner\">{{ locale().prefixWeek }}</span>\n        </th>\n      }\n      @for (cell of headRow; track $index) {\n        <th role=\"columnheader\" title=\"{{ cell.title }}\" class=\"{{ prefixCls }}-column-header\">\n          @if (prefixCls === 'thy-calendar') {\n            <span class=\"{{ prefixCls }}-column-header-inner\">{{ cell.content }}</span>\n          }\n          @if (prefixCls === 'thy-calendar-full') {\n            <span class=\"{{ prefixCls }}-column-header-inner\">{{ cell.content }}</span>\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"{{ prefixCls }}-tbody\">\n    @for (row of bodyRows; track $index) {\n      <tr [ngClass]=\"row.classMap\" role=\"row\">\n        @if (row.weekNum) {\n          <td role=\"gridcell\" class=\"{{ prefixCls }}-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]=\"prefixCls\"\n            [cell]=\"cell\"></td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [], propDecorators: { dayHover: [{
-                type: Output
-            }] } });
+            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: () => [] });
 
 /**
  * @private
  */
 class DecadeHeader extends CalendarHeader {
     constructor() {
-        super();
-    }
-    get startYear() {
-        return parseInt(`${this.value.getYear() / 100}`, 10) * 100;
-    }
-    get endYear() {
-        return this.startYear + 99;
+        super(...arguments);
+        this.startYear = computed(() => parseInt(`${this.value().getYear() / 100}`, 10) * 100);
+        this.endYear = computed(() => this.startYear() + 99);
     }
     superPrevious() {
-        this.changeValue(this.value.addYears(-100));
+        const newValue = this.value().addYears(-100);
+        this.changeValue(newValue);
     }
     superNext() {
-        this.changeValue(this.value.addYears(100));
+        const newValue = this.value().addYears(100);
+        this.changeValue(newValue);
     }
     getSelectors() {
         return [
@@ -1420,45 +1376,42 @@ class DecadeHeader extends CalendarHeader {
                 className: `${this.prefixCls}-decade-btn`,
                 title: '',
                 onClick: () => { },
-                label: `${this.startYear}-${this.endYear}`
+                label: `${this.startYear()}-${this.endYear()}`
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeHeader, deps: [], 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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
-        }], ctorParameters: () => [] });
+            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" }]
+        }] });
 
 /**
  * @private
  */
 class DecadeTable extends CalendarTable {
-    get startYear() {
-        return parseInt(`${this.activeDate.getYear() / 100}`, 10) * 100;
-    }
-    get endYear() {
-        return this.startYear + 99;
-    }
     constructor() {
-        super();
+        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);
     }
     chooseDecade(startYear) {
-        this.value = (this.value || new TinyDate()).setYear(startYear);
-        this.valueChange.emit(this.value);
+        const newValue = (this.value() || new TinyDate()).setYear(startYear);
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
     }
     makeHeadRow() {
         return [];
     }
     makeBodyRows() {
         const decades = [];
-        const currentYear = this.value && this.value.getYear();
-        const startYear = this.startYear;
-        const endYear = this.endYear;
+        const currentYear = this.value() && this.value().getYear();
+        const startYear = this.startYear();
+        const endYear = this.endYear();
         const previousYear = startYear - 10;
         let index = 0;
         for (let rowIndex = 0; rowIndex < this.MAX_ROW; rowIndex++) {
@@ -1489,24 +1442,25 @@ class DecadeTable extends CalendarTable {
         return decades;
     }
     getClassMap(cell) {
+        const prefixCls = this.prefixCls();
         return {
-            [`${this.prefixCls}-decade-panel-cell`]: true,
-            [`${this.prefixCls}-decade-panel-selected-cell`]: cell.isSelected,
-            [`${this.prefixCls}-decade-panel-last-century-cell`]: cell.isLowerThanStart,
-            [`${this.prefixCls}-decade-panel-next-century-cell`]: cell.isBiggerThanEnd
+            [`${prefixCls}-decade-panel-cell`]: true,
+            [`${prefixCls}-decade-panel-selected-cell`]: cell.isSelected,
+            [`${prefixCls}-decade-panel-last-century-cell`]: cell.isLowerThanStart,
+            [`${prefixCls}-decade-panel-next-century-cell`]: cell.isBiggerThanEnd
         };
     }
     cellClick(event, cell) {
         event.stopPropagation();
         cell.onClick();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeTable, deps: [], 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: "<table class=\"{{ prefixCls }}-decade-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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=\"{{ prefixCls }}-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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DecadeTable, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'decade-table', exportAs: 'decadeTable', imports: [NgClass], template: "<table class=\"{{ prefixCls }}-decade-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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=\"{{ prefixCls }}-decade-panel-decade\">{{ cell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [] });
+            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" }]
+        }] });
 
 /**
  * @private
@@ -1519,8 +1473,9 @@ class MonthTable extends CalendarTable {
         this.MAX_COL = 3;
     }
     chooseMonth(month) {
-        this.value = this.activeDate.setMonth(month);
-        this.valueChange.emit(this.value);
+        const newValue = this.activeDate().setMonth(month);
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
         this.render();
     }
     makeHeadRow() {
@@ -1535,9 +1490,9 @@ class MonthTable extends CalendarTable {
                 trackByIndex: rowIndex
             };
             for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
-                const month = this.activeDate.setMonth(monthValue);
-                const monthFormat = this.locale().zhMonthFormat;
-                const isDisabled = this.disabledDate ? this.disabledDate(this.activeDate.setMonth(monthValue).nativeDate) : false;
+                const month = this.activeDate().setMonth(monthValue);
+                const monthFormat = this.locale().monthFormat;
+                const isDisabled = this.disabledDate ? this.disabledDate()(this.activeDate().setMonth(monthValue).nativeDate) : false;
                 const content = this.dateHelper.format(month.nativeDate, monthFormat);
                 const cell = {
                     trackByIndex: colIndex,
@@ -1546,7 +1501,7 @@ class MonthTable extends CalendarTable {
                     content,
                     title: content,
                     classMap: null,
-                    isSelected: month.isSameMonth(this.value),
+                    isSelected: month.isSameMonth(this.value()),
                     onClick: () => this.chooseMonth(cell.value.getMonth()),
                     onMouseEnter: () => { }
                 };
@@ -1559,8 +1514,8 @@ class MonthTable extends CalendarTable {
         return months;
     }
     addCellProperty(cell, month) {
-        if (this.selectedValue?.length > 0) {
-            const [startSelected, endSelected] = this.selectedValue;
+        if (this.selectedValue()?.length > 0) {
+            const [startSelected, endSelected] = this.selectedValue();
             if (startSelected?.isSameMonth(month)) {
                 cell.isSelectedStartDate = true;
                 cell.isSelected = true;
@@ -1573,7 +1528,7 @@ class MonthTable extends CalendarTable {
             cell.isEndSingle = !startSelected && !!endSelected;
             cell.isInRange = startSelected?.isBeforeMonth(month) && month?.isBeforeMonth(endSelected);
         }
-        else if (month.isSameMonth(this.value)) {
+        else if (month.isSameMonth(this.value())) {
             cell.isSelected = true;
         }
         cell.classMap = this.getClassMap(cell);
@@ -1583,20 +1538,21 @@ class MonthTable extends CalendarTable {
         return monthCell.isDisabled ? null : monthCell.onClick();
     }
     getClassMap(cell) {
+        const prefixCls = this.prefixCls();
         return {
-            [`${this.prefixCls}-month-panel-cell`]: true,
-            [`${this.prefixCls}-month-panel-cell-disabled`]: cell.isDisabled,
-            [`${this.prefixCls}-month-panel-selected-cell`]: cell.isSelected,
-            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange,
-            [`${this.prefixCls}-month-panel-current-cell`]: new TinyDate().getYear() === this.activeDate.getYear() && cell.value.getMonth() === new TinyDate().getMonth()
+            [`${prefixCls}-month-panel-cell`]: true,
+            [`${prefixCls}-month-panel-cell-disabled`]: cell.isDisabled,
+            [`${prefixCls}-month-panel-selected-cell`]: cell.isSelected,
+            [`${prefixCls}-in-range-cell`]: !!cell.isInRange,
+            [`${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: "<table class=\"{{ prefixCls }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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\n            role=\"gridcell\"\n            title=\"{{ monthCell.title }}\"\n            (click)=\"monthCellClick($event, monthCell)\"\n            [ngClass]=\"monthCell.classMap\"\n            >\n            @switch (prefixCls) {\n              @case ('thy-calendar') {\n                <div class=\"{{ prefixCls }}-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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MonthTable, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'month-table', exportAs: 'monthTable', imports: [NgClass], template: "<table class=\"{{ prefixCls }}-month-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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\n            role=\"gridcell\"\n            title=\"{{ monthCell.title }}\"\n            (click)=\"monthCellClick($event, monthCell)\"\n            [ngClass]=\"monthCell.classMap\"\n            >\n            @switch (prefixCls) {\n              @case ('thy-calendar') {\n                <div class=\"{{ prefixCls }}-month-panel-month\">{{ monthCell.content }}</div>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            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: () => [] });
 
 /**
@@ -1604,14 +1560,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class QuarterTable extends CalendarTable {
     constructor() {
-        super();
-        this.dateHelper = inject(DateHelperService);
+        super(...arguments);
         this.MAX_ROW = 1;
         this.MAX_COL = 4;
     }
     chooseQuarter(quarter) {
-        this.value = this.activeDate.setQuarter(quarter);
-        this.valueChange.emit(this.value);
+        const newValue = this.activeDate().setQuarter(quarter);
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
         this.render();
     }
     makeHeadRow() {
@@ -1626,9 +1582,9 @@ class QuarterTable extends CalendarTable {
                 trackByIndex: rowIndex
             };
             for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
-                const quarter = this.activeDate.setQuarter(quarterValue + 1);
-                const isDisabled = this.disabledDate ? this.disabledDate(quarter.nativeDate) : false;
-                const content = `${quarter.format('qqq')}`;
+                const quarter = this.activeDate().setQuarter(quarterValue + 1);
+                const isDisabled = this.disabledDate ? this.disabledDate()(quarter.nativeDate) : false;
+                const content = `${quarter.format(QUARTER_FORMAT)}`;
                 const cell = {
                     trackByIndex: colIndex,
                     value: quarter.nativeDate,
@@ -1636,7 +1592,7 @@ class QuarterTable extends CalendarTable {
                     content,
                     title: content,
                     classMap: null,
-                    isSelected: quarter.isSameQuarter(this.value),
+                    isSelected: quarter.isSameQuarter(this.value()),
                     onClick: () => {
                         this.chooseQuarter(quarter.getQuarter());
                     },
@@ -1651,8 +1607,9 @@ class QuarterTable extends CalendarTable {
         return quarters;
     }
     addCellProperty(cell, quarter) {
-        if (this.selectedValue?.length > 0) {
-            const [startSelected, endSelected] = this.selectedValue;
+        const selectedValue = this.selectedValue();
+        if (selectedValue?.length > 0) {
+            const [startSelected, endSelected] = selectedValue;
             if (startSelected?.isSameQuarter(quarter)) {
                 cell.isSelectedStartDate = true;
                 cell.isSelected = true;
@@ -1665,7 +1622,7 @@ class QuarterTable extends CalendarTable {
             cell.isEndSingle = !startSelected && !!endSelected;
             cell.isInRange = startSelected?.isBeforeQuarter(quarter) && quarter?.isBeforeQuarter(endSelected);
         }
-        else if (quarter.isSameQuarter(this.value)) {
+        else if (quarter.isSameQuarter(this.value())) {
             cell.isSelected = true;
         }
         cell.classMap = this.getClassMap(cell, quarter);
@@ -1675,37 +1632,39 @@ class QuarterTable extends CalendarTable {
         return quarterCell.isDisabled ? null : quarterCell.onClick();
     }
     getClassMap(cell, quarter) {
+        const prefixCls = this.prefixCls();
         return {
-            [`${this.prefixCls}-quarter-panel-cell`]: true,
-            [`${this.prefixCls}-quarter-panel-cell-disabled`]: cell.isDisabled,
-            [`${this.prefixCls}-quarter-panel-selected-cell`]: cell.isSelected,
-            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange,
-            [`${this.prefixCls}-quarter-panel-current-cell`]: new TinyDate().getYear() === this.activeDate.getYear() && quarter.getQuarter() === new TinyDate().getQuarter()
+            [`${prefixCls}-quarter-panel-cell`]: true,
+            [`${prefixCls}-quarter-panel-cell-disabled`]: cell.isDisabled,
+            [`${prefixCls}-quarter-panel-selected-cell`]: cell.isSelected,
+            [`${prefixCls}-in-range-cell`]: !!cell.isInRange,
+            [`${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: [], 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: "<table class=\"{{ prefixCls }}-quarter-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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=\"{{ prefixCls }}-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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: QuarterTable, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'quarter-table', exportAs: 'quarterTable', imports: [NgClass], template: "<table class=\"{{ prefixCls }}-quarter-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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=\"{{ prefixCls }}-quarter-panel-quarter\">{{ quarterCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [] });
+            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" }]
+        }] });
 
 /**
  * @private
  */
 class YearHeader extends CalendarHeader {
-    get startYear() {
-        return parseInt(`${this.value.getYear() / 10}`, 10) * 10;
-    }
-    get endYear() {
-        return this.startYear + 9;
+    constructor() {
+        super(...arguments);
+        this.startYear = computed(() => parseInt(`${this.value().getYear() / 10}`, 10) * 10);
+        this.endYear = computed(() => this.startYear() + 9);
     }
     superPrevious() {
-        this.changeValue(this.value.addYears(-10));
+        const newValue = this.value().addYears(-10);
+        this.changeValue(newValue);
     }
     superNext() {
-        this.changeValue(this.value.addYears(10));
+        const newValue = this.value().addYears(10);
+        this.changeValue(newValue);
     }
     getSelectors() {
         return [
@@ -1713,16 +1672,16 @@ class YearHeader extends CalendarHeader {
                 className: `${this.prefixCls}-year-btn`,
                 title: '',
                 onClick: () => this.changePanel('decade'),
-                label: `${this.startYear}-${this.endYear}`
+                label: `${this.startYear()}-${this.endYear()}`
             }
         ];
     }
     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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
+            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" }]
         }] });
 
 /**
@@ -1730,14 +1689,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class YearTable extends CalendarTable {
     constructor() {
-        super();
+        super(...arguments);
         this.MAX_ROW = 4;
         this.MAX_COL = 3;
-        this.decadePanelShow = new EventEmitter();
+        this.decadePanelShow = output();
     }
     chooseYear(year) {
-        this.value = this.activeDate.setYear(year);
-        this.valueChange.emit(this.value);
+        const newValue = this.activeDate().setYear(year);
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
         this.render();
     }
     makeHeadRow() {
@@ -1745,7 +1705,8 @@ class YearTable extends CalendarTable {
     }
     makeBodyRows() {
         const years = [];
-        const currentYear = this.activeDate && this.activeDate.getYear();
+        const activeDate = this.activeDate();
+        const currentYear = activeDate && activeDate.getYear();
         const startYear = parseInt(`${currentYear / 10}`, 10) * 10;
         const endYear = startYear + 9;
         const previousYear = startYear - 1;
@@ -1757,16 +1718,18 @@ class YearTable extends CalendarTable {
             };
             for (let colIndex = 0; colIndex < this.MAX_COL; colIndex++) {
                 const yearNum = previousYear + yearValue;
-                const year = this.activeDate.setYear(yearNum);
+                const year = activeDate.setYear(yearNum);
                 const content = String(yearNum);
-                const isDisabled = this.disabledDate ? this.disabledDate(year.nativeDate) : false;
+                const disabledDate = this.disabledDate();
+                const isDisabled = disabledDate ? disabledDate(year.nativeDate) : false;
+                const value = this.value();
                 const cell = {
                     trackByIndex: colIndex,
                     isDisabled,
                     content,
                     value: year.nativeDate,
                     title: content,
-                    isSelected: yearNum === (this.value && this.value.getYear()),
+                    isSelected: yearNum === (value && value.getYear()),
                     isSameDecade: yearNum >= startYear && yearNum <= endYear,
                     classMap: {},
                     onClick: () => this.chooseYear(cell.value?.getFullYear()),
@@ -1781,8 +1744,9 @@ class YearTable extends CalendarTable {
         return years;
     }
     addCellProperty(cell, year) {
-        if (this.selectedValue?.length > 0) {
-            const [startSelected, endSelected] = this.selectedValue;
+        const selectedValue = this.selectedValue();
+        if (selectedValue?.length > 0) {
+            const [startSelected, endSelected] = selectedValue;
             if (startSelected?.isSameYear(year)) {
                 cell.isSelected = true;
             }
@@ -1793,7 +1757,7 @@ class YearTable extends CalendarTable {
             cell.isEndSingle = !startSelected && !!endSelected;
             cell.isInRange = startSelected?.isBeforeYear(year) && year?.isBeforeYear(endSelected);
         }
-        else if (year.isSameYear(this.value)) {
+        else if (year.isSameYear(this.value())) {
             cell.isSelected = true;
         }
         cell.classMap = this.getClassMap(cell);
@@ -1803,23 +1767,22 @@ class YearTable extends CalendarTable {
         return yearCell.isDisabled ? null : yearCell.onClick();
     }
     getClassMap(cell) {
+        const prefixCls = this.prefixCls();
         return {
-            [`${this.prefixCls}-year-panel-cell`]: true,
-            [`${this.prefixCls}-year-panel-selected-cell`]: cell.isSelected,
-            [`${this.prefixCls}-year-panel-cell-disabled`]: cell.isDisabled,
-            [`${this.prefixCls}-year-panel-cell-in-view`]: cell.isSameDecade,
-            [`${this.prefixCls}-in-range-cell`]: !!cell.isInRange
+            [`${prefixCls}-year-panel-cell`]: true,
+            [`${prefixCls}-year-panel-selected-cell`]: cell.isSelected,
+            [`${prefixCls}-year-panel-cell-disabled`]: cell.isDisabled,
+            [`${prefixCls}-year-panel-cell-in-view`]: cell.isSameDecade,
+            [`${prefixCls}-in-range-cell`]: !!cell.isInRange
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearTable, deps: [], 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: "<table class=\"{{ prefixCls }}-year-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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\n            role=\"gridcell\"\n            title=\"{{ yearCell.title }}\"\n            (click)=\"yearCellClick($event, yearCell)\"\n            [ngClass]=\"yearCell.classMap\"\n            >\n            <a class=\"{{ prefixCls }}-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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: YearTable, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'year-table', imports: [NgClass], template: "<table class=\"{{ prefixCls }}-year-panel-table\" cellSpacing=\"0\" role=\"grid\">\n  <tbody class=\"{{ prefixCls }}-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\n            role=\"gridcell\"\n            title=\"{{ yearCell.title }}\"\n            (click)=\"yearCellClick($event, yearCell)\"\n            [ngClass]=\"yearCell.classMap\"\n            >\n            <a class=\"{{ prefixCls }}-year-panel-year\">{{ yearCell.content }}</a>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [], propDecorators: { decadePanelShow: [{
-                type: Output
-            }] } });
+            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" }]
+        }] });
 
 /**
  * @private
@@ -1828,72 +1791,90 @@ class InnerPopup {
     constructor() {
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('datePicker');
-        this.className = true;
-        this._showDateRangeInput = false;
-        this.panelModeChange = new EventEmitter();
-        this.headerChange = new EventEmitter();
-        this.selectDate = new EventEmitter();
-        this.dayHover = new EventEmitter();
+        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';
+                }
+                return value;
+            }
+        });
+        this.timeZone = input();
+        this.showDateRangeInput = input(false, { transform: coerceBooleanProperty });
+        this.partType = input();
+        this.endPanelMode = input();
+        this.value = model();
+        this.panelModeChange = output();
+        this.headerChange = output();
+        this.selectDate = output();
+        this.dayHover = output();
         this.prefixCls = 'thy-calendar';
-    }
-    set showDateRangeInput(value) {
-        this._showDateRangeInput = value;
-    }
-    get showDateRangeInput() {
-        return this._showDateRangeInput;
-    }
-    ngOnChanges(changes) {
-        if (changes.activeDate && !changes.activeDate.currentValue) {
-            this.activeDate = new TinyDate(undefined, this.timeZone);
-        }
-        if (changes.panelMode && changes.panelMode.currentValue === 'time') {
-            this.panelMode = 'date';
-        }
+        effect(() => {
+            if (!this.activeDate()) {
+                this.activeDate.set(new TinyDate(undefined, this.timeZone()));
+            }
+        });
     }
     getReadableValue(value) {
         return value ? this.dateHelper.format(value.nativeDate, 'yyyy-MM-dd') : '';
     }
     onSelectDate(date) {
-        const value = date instanceof TinyDate ? date : new TinyDate(date, this.timeZone);
+        const value = date instanceof TinyDate ? date : new TinyDate(date, this.timeZone());
         this.selectDate.emit(value);
     }
     onChooseMonth(value) {
-        this.activeDate = this.activeDate.setMonth(value.getMonth());
-        if (this.endPanelMode === 'month') {
-            this.value = value;
+        const activeDate = this.activeDate().setMonth(value.getMonth());
+        const endPanelMode = this.endPanelMode();
+        this.activeDate.set(activeDate);
+        if (endPanelMode === 'month') {
+            this.value.set(value);
             this.selectDate.emit(value);
         }
         else {
             this.headerChange.emit(value);
-            this.panelModeChange.emit(this.endPanelMode);
+            this.panelModeChange.emit(endPanelMode);
         }
     }
     onChooseQuarter(value) {
-        this.activeDate = this.activeDate.setQuarter(value.getQuarter());
-        if (this.endPanelMode === 'quarter') {
-            this.value = value;
+        const activeDate = this.activeDate().setQuarter(value.getQuarter());
+        const endPanelMode = this.endPanelMode();
+        this.activeDate.set(activeDate);
+        if (endPanelMode === 'quarter') {
+            this.value.set(value);
             this.selectDate.emit(value);
         }
         else {
             this.headerChange.emit(value);
-            this.panelModeChange.emit(this.endPanelMode);
+            this.panelModeChange.emit(endPanelMode);
         }
     }
     onChooseYear(value) {
-        this.activeDate = this.activeDate.setYear(value.getYear());
-        if (this.endPanelMode === 'year') {
-            this.value = value;
+        const activeDate = this.activeDate().setYear(value.getYear());
+        const endPanelMode = this.endPanelMode();
+        this.activeDate.set(activeDate);
+        if (endPanelMode === 'year') {
+            this.value.set(value);
             this.selectDate.emit(value);
         }
         else {
             this.headerChange.emit(value);
-            this.panelModeChange.emit(this.endPanelMode);
+            this.panelModeChange.emit(endPanelMode);
         }
     }
     onChooseDecade(value) {
-        this.activeDate = this.activeDate.setYear(value.getYear());
-        if (this.endPanelMode === 'decade') {
-            this.value = value;
+        const activeDate = this.activeDate().setYear(value.getYear());
+        const endPanelMode = this.endPanelMode();
+        this.activeDate.set(activeDate);
+        if (endPanelMode === 'decade') {
+            this.value.set(value);
             this.selectDate.emit(value);
         }
         else {
@@ -1902,9 +1883,10 @@ class InnerPopup {
         }
     }
     enablePrevNext(direction, mode) {
-        if (this.isRange) {
-            if ((this.partType === 'left' && direction === 'next') || (this.partType === 'right' && direction === 'prev')) {
-                const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
+        if (this.isRange()) {
+            const partType = this.partType();
+            if ((partType === 'left' && direction === 'next') || (partType === 'right' && direction === 'prev')) {
+                const [headerLeftDate, headerRightDate] = this.rangeActiveDate();
                 return isAfterMoreThanOneMonth(headerRightDate, headerLeftDate);
             }
             else {
@@ -1916,9 +1898,10 @@ class InnerPopup {
         }
     }
     enableSuperPrevNext(direction, panelMode) {
-        if (this.isRange) {
-            if ((this.partType === 'left' && direction === 'next') || (this.partType === 'right' && direction === 'prev')) {
-                const [headerLeftDate, headerRightDate] = this.rangeActiveDate;
+        if (this.isRange()) {
+            const partType = this.partType();
+            if ((partType === 'left' && direction === 'next') || (partType === 'right' && direction === 'prev')) {
+                const [headerLeftDate, headerRightDate] = this.rangeActiveDate();
                 if (panelMode === 'date') {
                     return isAfterMoreThanLessOneYear(headerRightDate, headerLeftDate);
                 }
@@ -1938,7 +1921,7 @@ class InnerPopup {
         }
     }
     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: "showWeek", isRange: "isRange", activeDate: "activeDate", rangeActiveDate: "rangeActiveDate", enablePrev: "enablePrev", enableNext: "enableNext", disabledDate: "disabledDate", dateRender: "dateRender", selectedValue: "selectedValue", hoverValue: "hoverValue", panelMode: "panelMode", timeZone: "timeZone", showDateRangeInput: ["showDateRangeInput", "showDateRangeInput", coerceBooleanProperty], partType: "partType", endPanelMode: "endPanelMode", value: "value" }, outputs: { panelModeChange: "panelModeChange", headerChange: "headerChange", selectDate: "selectDate", dayHover: "dayHover" }, host: { properties: { "class.thy-calendar-picker-inner-popup": "this.className", "class.thy-calendar-picker-inner-popup-with-range-input": "this._showDateRangeInput" } }, exportAs: ["innerPopup"], usesOnChanges: true, 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InnerPopup, decorators: [{
             type: Component,
@@ -1953,55 +1936,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         QuarterTable,
                         DateHeader,
                         DateTable
-                    ], 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" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.thy-calendar-picker-inner-popup']
-            }], _showDateRangeInput: [{
-                type: HostBinding,
-                args: ['class.thy-calendar-picker-inner-popup-with-range-input']
-            }], showWeek: [{
-                type: Input
-            }], isRange: [{
-                type: Input
-            }], activeDate: [{
-                type: Input
-            }], rangeActiveDate: [{
-                type: Input
-            }], enablePrev: [{
-                type: Input
-            }], enableNext: [{
-                type: Input
-            }], disabledDate: [{
-                type: Input
-            }], dateRender: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], hoverValue: [{
-                type: Input
-            }], panelMode: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], showDateRangeInput: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], partType: [{
-                type: Input
-            }], endPanelMode: [{
-                type: Input
-            }], panelModeChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], headerChange: [{
-                type: Output
-            }], selectDate: [{
-                type: Output
-            }], dayHover: [{
-                type: Output
-            }] } });
+                    ], host: {
+                        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: () => [] });
 
 /**
  * @private
@@ -2011,22 +1950,47 @@ class DatePopup {
         this.cdr = inject(ChangeDetectorRef);
         this.datePickerConfigService = inject(ThyDatePickerConfigService);
         this.locale = injectLocale('datePicker');
-        this.panelModeChange = new EventEmitter();
-        this.calendarChange = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.resultOk = new EventEmitter(); // Emitted when done with date selecting
-        this.showTimePickerChange = new EventEmitter();
-        this.dateValueChange = new EventEmitter();
+        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.showTime = input();
+        /**
+         * 是否展示时间(时、分)
+         */
+        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.panelModeChange = output();
+        this.calendarChange = output();
+        this.valueChange = output();
+        this.resultOk = output(); // Emitted when done with date selecting
+        this.showTimePickerChange = output();
+        this.dateValueChange = output();
         this.prefixCls = 'thy-calendar';
         this.showTimePicker = false;
         this.selectedValue = []; // Range ONLY
         this.hoverValue = []; // Range ONLY
         this.flexibleActiveTab = 'advanced';
         this.partTypeMap = { left: 0, right: 1 };
-        this.disableTimeConfirm = false;
-    }
-    get hasTimePicker() {
-        return !!this.showTime;
+        this.endPanelMode = signal(undefined);
+        this.disableTimeConfirm = signal(false);
     }
     setProperty(key, value) {
         this[key] = value;
@@ -2035,26 +1999,30 @@ class DatePopup {
     ngOnInit() {
         this.initShortcutPresets();
         this.initPanelMode();
-        if (this.flexible && this.flexibleDateGranularity === 'day') {
+        if (this.flexible() && this.flexibleDateGranularity() === 'day') {
             this.flexibleActiveTab = 'custom';
         }
-        if (this.defaultPickerValue && !hasValue(this.value)) {
-            const { value } = transformDateValue(this.defaultPickerValue);
-            this.value = makeValue(value, this.isRange, this.timeZone);
+        if (this.defaultPickerValue() && !hasValue(this.value())) {
+            const { value } = transformDateValue(this.defaultPickerValue());
+            this.value.set(makeValue(value, this.isRange(), this.timeZone()));
         }
         this.updateActiveDate();
         this.initDisabledDate();
-        if (this.isRange && this.flexible && this.value) {
-            this.advancedSelectedValue = { begin: this.value[0], end: this.value[1], dateGranularity: this.flexibleDateGranularity };
+        if (this.isRange() && this.flexible() && this.value()) {
+            this.advancedSelectedValue = {
+                begin: this.value()[0],
+                end: this.value()[1],
+                dateGranularity: this.flexibleDateGranularity()
+            };
         }
     }
     ngOnChanges(changes) {
         if (changes.panelMode) {
-            if (helpers.isArray(this.panelMode)) {
-                this.endPanelMode = [...this.panelMode];
+            if (helpers.isArray(this.panelMode())) {
+                this.endPanelMode.set([...this.panelMode()]);
             }
             else {
-                this.endPanelMode = this.panelMode;
+                this.endPanelMode.set(this.panelMode());
             }
         }
         if (changes.defaultPickerValue) {
@@ -2066,26 +2034,27 @@ class DatePopup {
     }
     initShortcutPresets() {
         const { shortcutRangesPresets, shortcutDatePresets, showShortcut } = this.datePickerConfigService;
-        this.showShortcut =
-            ['date', 'date,date'].includes(this.panelMode.toString()) && isUndefinedOrNull(this.showShortcut)
-                ? showShortcut
-                : this.showShortcut;
-        if (this.showShortcut) {
-            if (!this.shortcutPresets) {
-                this.shortcutPresets = this.isRange ? shortcutRangesPresets : shortcutDatePresets;
-            }
-            this.innerShortcutPresets = isFunction(this.shortcutPresets) ? this.shortcutPresets() : this.shortcutPresets;
+        this.showShortcut.set(['date', 'date,date'].includes(this.panelMode().toString()) && isUndefinedOrNull(this.showShortcut())
+            ? showShortcut
+            : this.showShortcut());
+        if (this.showShortcut()) {
+            if (!this.shortcutPresets()) {
+                this.shortcutPresets.set(this.isRange() ? shortcutRangesPresets : shortcutDatePresets);
+            }
+            this.innerShortcutPresets = isFunction(this.shortcutPresets())
+                ? this.shortcutPresets()()
+                : this.shortcutPresets();
             if (this.innerShortcutPresets.length) {
                 const minDate = this.getMinTinyDate();
                 const maxDate = this.getMaxTinyDate();
                 const minTime = minDate ? minDate.getTime() : null;
                 const maxTime = maxDate ? maxDate.getTime() : null;
-                if (this.isRange) {
+                if (this.isRange()) {
                     this.innerShortcutPresets.forEach((preset) => {
                         const begin = getShortcutValue(preset.value[0]);
-                        const beginTime = new TinyDate(startOfDay(begin), this.timeZone).getTime();
+                        const beginTime = new TinyDate(startOfDay(begin), this.timeZone()).getTime();
                         const end = getShortcutValue(preset.value[1]);
-                        const endTime = new TinyDate(endOfDay(end), this.timeZone).getTime();
+                        const endTime = new TinyDate(endOfDay(end), this.timeZone()).getTime();
                         if ((minDate && endTime < minTime) || (maxDate && beginTime > maxTime)) {
                             preset.disabled = true;
                         }
@@ -2097,7 +2066,7 @@ class DatePopup {
                 else {
                     this.innerShortcutPresets.forEach((preset) => {
                         const singleValue = getShortcutValue(preset.value);
-                        const singleTime = new TinyDate(singleValue, this.timeZone).getTime();
+                        const singleTime = new TinyDate(singleValue, this.timeZone()).getTime();
                         if ((minDate && singleTime < minTime) || (maxDate && singleTime > maxTime)) {
                             preset.disabled = true;
                         }
@@ -2111,36 +2080,36 @@ class DatePopup {
     }
     updateActiveDate() {
         this.clearHoverValue();
-        if (!this.value) {
-            const { value } = transformDateValue(this.defaultPickerValue);
-            this.value = makeValue(value, this.isRange, this.timeZone);
+        if (!this.value()) {
+            const { value } = transformDateValue(this.defaultPickerValue());
+            this.value.set(makeValue(value, this.isRange(), this.timeZone()));
         }
-        if (this.isRange) {
-            if (!this.flexible || this.flexibleDateGranularity === 'day') {
-                this.selectedValue = this.value;
+        if (this.isRange()) {
+            if (!this.flexible() || this.flexibleDateGranularity() === 'day') {
+                this.selectedValue = this.value();
             }
-            this.activeDate = this.normalizeRangeValue(this.value, this.getPanelMode(this.endPanelMode));
+            this.activeDate = this.normalizeRangeValue(this.value(), this.getPanelMode(this.endPanelMode()));
         }
         else {
-            this.activeDate = this.value;
+            this.activeDate = this.value();
         }
         this.isDisableTimeConfirm();
     }
     initPanelMode() {
-        if (!this.endPanelMode) {
-            if (helpers.isArray(this.panelMode)) {
-                this.endPanelMode = [...this.panelMode];
+        if (!this.endPanelMode()) {
+            if (helpers.isArray(this.panelMode())) {
+                this.endPanelMode.set([...this.panelMode()]);
             }
             else {
-                this.endPanelMode = this.panelMode;
+                this.endPanelMode.set(this.panelMode());
             }
         }
         else {
-            if (helpers.isArray(this.endPanelMode)) {
-                this.panelMode = [...this.endPanelMode];
+            if (helpers.isArray(this.endPanelMode())) {
+                this.panelMode.set([...this.endPanelMode()]);
             }
             else {
-                this.panelMode = this.endPanelMode;
+                this.panelMode.set(this.endPanelMode());
             }
         }
     }
@@ -2148,18 +2117,18 @@ class DatePopup {
         let minDate;
         let maxDate;
         let disabledDateFn;
-        if (this.minDate) {
-            const { value } = transformDateValue(this.minDate);
-            minDate = new TinyDate(value, this.timeZone);
+        if (this.minDate()) {
+            const { value } = transformDateValue(this.minDate());
+            minDate = new TinyDate(value, this.timeZone());
         }
-        if (this.maxDate) {
-            const { value } = transformDateValue(this.maxDate);
-            maxDate = new TinyDate(value, this.timeZone);
+        if (this.maxDate()) {
+            const { value } = transformDateValue(this.maxDate());
+            maxDate = new TinyDate(value, this.timeZone());
         }
-        if (this.disabledDate) {
-            disabledDateFn = this.disabledDate;
+        if (this.disabledDate()) {
+            disabledDateFn = this.disabledDate();
         }
-        this.disabledDate = d => {
+        this.disabledDate.set(d => {
             let expression = false;
             if (minDate) {
                 expression = d < minDate.startOfDay().nativeDate;
@@ -2171,23 +2140,23 @@ class DatePopup {
                 expression = disabledDateFn(d);
             }
             return expression;
-        };
+        });
     }
     onShowTimePickerChange(show) {
         this.showTimePicker = show;
         this.showTimePickerChange.emit(show);
     }
     onClickOk() {
-        this.setValue(this.value);
-        this.valueChange.emit(this.value);
+        this.setValue(this.value());
+        this.valueChange.emit(this.value());
         this.resultOk.emit();
     }
     onClickRemove() {
-        this.value = this.isRange ? [] : null;
-        this.valueChange.emit(this.value);
+        this.value.set(this.isRange() ? [] : null);
+        this.valueChange.emit(this.value());
     }
     onDayHover(value) {
-        if (this.isRange && this.selectedValue[0] && !this.selectedValue[1]) {
+        if (this.isRange() && this.selectedValue[0] && !this.selectedValue[1]) {
             // When right value is selected, don't do hover
             const base = this.selectedValue[0]; // Use the left of selected value as the base to decide later hoverValue
             if (base.isBeforeDay(value)) {
@@ -2199,43 +2168,43 @@ class DatePopup {
         }
     }
     onPanelModeChange(mode, partType) {
-        if (this.isRange) {
-            this.panelMode[this.getPartTypeIndex(partType)] = mode;
+        if (this.isRange()) {
+            this.panelMode()[this.getPartTypeIndex(partType)] = mode;
         }
         else {
-            this.panelMode = mode;
+            this.panelMode.set(mode);
         }
-        this.panelModeChange.emit(this.panelMode);
+        this.panelModeChange.emit(this.panelMode());
     }
     onHeaderChange(value, partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             this.activeDate[this.getPartTypeIndex(partType)] = value;
-            this.activeDate = this.normalizeRangeValue(this.activeDate, this.getPanelMode(this.endPanelMode, partType));
+            this.activeDate = this.normalizeRangeValue(this.activeDate, this.getPanelMode(this.endPanelMode(), partType));
         }
         else {
             this.activeDate = value;
         }
     }
     onSelectTime(value, partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             // TODO:range picker set time
         }
         else {
-            this.setValue(new TinyDate(value.nativeDate, this.timeZone));
+            this.setValue(new TinyDate(value.nativeDate, this.timeZone()));
         }
     }
     selectTab(active) {
         this.flexibleActiveTab = active;
     }
     clearFlexibleValue() {
-        this.flexibleDateGranularity = null;
+        this.flexibleDateGranularity.set(null);
         if (this.flexibleActiveTab === 'advanced') {
             this.advancedSelectedValue = {};
         }
         else {
             this.selectedValue = [];
         }
-        this.valueChange.emit({ begin: null, end: null, dateGranularity: this.flexibleDateGranularity });
+        this.valueChange.emit({ begin: null, end: null, dateGranularity: this.flexibleDateGranularity() });
     }
     changeValueFromAdvancedSelect(value) {
         this.valueChange.emit(value);
@@ -2244,7 +2213,7 @@ class DatePopup {
         this.dateValueChange.emit({ value: [value.begin, value.end] });
     }
     changeValueFromSelect(value, partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             // clear advanced date when select a custom date
             this.advancedSelectedValue = {};
             const [left, right] = this.selectedValue;
@@ -2260,7 +2229,7 @@ class DatePopup {
                 this.setRangeValue('right', value);
                 this.selectedValue = sortRangeValue(this.selectedValue); // Sort
                 this.selectedValue = this.getSelectedRangeValueByMode(this.selectedValue);
-                this.activeDate = this.normalizeRangeValue(this.selectedValue, this.getPanelMode(this.endPanelMode, partType));
+                this.activeDate = this.normalizeRangeValue(this.selectedValue, this.getPanelMode(this.endPanelMode(), partType));
                 this.setValue(this.cloneRangeDate(this.selectedValue));
                 this.calendarChange.emit(this.cloneRangeDate(this.selectedValue));
                 this.dateValueChange.emit({ value: this.cloneRangeDate(this.selectedValue) });
@@ -2273,7 +2242,7 @@ class DatePopup {
         }
     }
     getSelectedRangeValueByMode(value) {
-        const panelMode = this.getPanelMode(this.endPanelMode);
+        const panelMode = this.getPanelMode(this.endPanelMode());
         if (panelMode === 'year') {
             return [value[0].startOfYear(), value[1].endOfYear()];
         }
@@ -2291,10 +2260,10 @@ class DatePopup {
         }
     }
     updateHourMinute(value) {
-        if (!this.value) {
+        if (!this.value()) {
             return value;
         }
-        const originDate = this.value;
+        const originDate = this.value();
         const dateTime = [value.getHours(), value.getMinutes(), value.getSeconds()];
         const originDateTime = [originDate.getHours(), originDate.getMinutes(), originDate.getSeconds()];
         const isEqualTime = dateTime.toString() === originDateTime.toString();
@@ -2306,7 +2275,7 @@ class DatePopup {
         }
     }
     enablePrevNext(direction, partType) {
-        if (this.isRange && this.panelMode === this.endPanelMode) {
+        if (this.isRange() && this.panelMode() === this.endPanelMode()) {
             const [start, end] = this.activeDate;
             const showMiddle = !start.addMonths(1).isSame(end, 'month'); // One month diff then don't show middle prev/next
             if ((partType === 'left' && direction === 'next') || (partType === 'right' && direction === 'prev')) {
@@ -2319,7 +2288,7 @@ class DatePopup {
         }
     }
     getPanelMode(panelMode, partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             return panelMode[this.getPartTypeIndex(partType)];
         }
         else {
@@ -2327,16 +2296,16 @@ class DatePopup {
         }
     }
     getValueBySelector(partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             const valueShow = this.selectedValue; // Use the real time value that without decorations when timepicker is shown up
             return valueShow[this.getPartTypeIndex(partType)];
         }
         else {
-            return this.value;
+            return this.value();
         }
     }
     getActiveDate(partType) {
-        if (this.isRange) {
+        if (this.isRange()) {
             return this.activeDate[this.getPartTypeIndex(partType)];
         }
         else {
@@ -2347,23 +2316,27 @@ class DatePopup {
         return this.partTypeMap[partType];
     }
     getMinTinyDate() {
-        return this.minDate ? new TinyDate(transformDateValue(this.minDate).value, this.timeZone) : null;
+        return this.minDate() ? new TinyDate(transformDateValue(this.minDate()).value, this.timeZone()) : null;
     }
     getMaxTinyDate() {
-        return this.maxDate ? new TinyDate(transformDateValue(this.maxDate).value, this.timeZone) : null;
+        return this.maxDate() ? new TinyDate(transformDateValue(this.maxDate()).value, this.timeZone()) : null;
     }
     clearHoverValue() {
         this.hoverValue = [];
     }
     setValue(value) {
-        this.value = value;
-        if (this.isRange && this.flexible) {
-            this.flexibleDateGranularity = 'day';
-            this.valueChange.emit({ begin: value[0], end: value[1], dateGranularity: this.flexibleDateGranularity });
+        this.value.set(value);
+        if (this.isRange() && this.flexible()) {
+            this.flexibleDateGranularity.set('day');
+            this.valueChange.emit({
+                begin: value[0],
+                end: value[1],
+                dateGranularity: this.flexibleDateGranularity()
+            });
         }
         else {
-            if (!this.showTime || !this.showTimePicker) {
-                this.valueChange.emit(this.value);
+            if (!this.showTime() || !this.showTimePicker) {
+                this.valueChange.emit(this.value());
             }
         }
         this.isDisableTimeConfirm();
@@ -2378,7 +2351,7 @@ class DatePopup {
         };
         const headerMode = headerModes[mode];
         const [start, end] = value;
-        const newStart = start || new TinyDate(undefined, this.timeZone);
+        const newStart = start || new TinyDate(undefined, this.timeZone());
         let newEnd = end;
         if (!newEnd || newStart.isSame(end, headerMode)) {
             newEnd = dateAddAmount(newStart, 1, headerMode);
@@ -2393,17 +2366,17 @@ class DatePopup {
         return [value[0] && value[0].clone(), value[1] && value[1].clone()];
     }
     isDisableTimeConfirm() {
-        if (this.isRange || !this.showTime) {
+        if (this.isRange() || !this.showTime()) {
             return;
         }
-        const date = this.value ? this.value : new TinyDate(undefined, this.timeZone);
+        const date = this.value() ? this.value() : new TinyDate(undefined, this.timeZone());
         const minDate = this.getMinTinyDate();
         const maxDate = this.getMaxTinyDate();
         if ((minDate && date.getTime() < minDate.getTime()) || (maxDate && date.getTime() > maxDate.getTime())) {
-            this.disableTimeConfirm = true;
+            this.disableTimeConfirm.set(true);
         }
         else {
-            this.disableTimeConfirm = false;
+            this.disableTimeConfirm.set(false);
         }
     }
     getSelectedShortcutPreset(date) {
@@ -2452,92 +2425,38 @@ class DatePopup {
             const end = getShortcutValue(value[1]);
             if (begin && end) {
                 this.selectedValue = this.getSelectedShortcutPreset([
-                    new TinyDate(begin, this.timeZone).startOfDay(),
-                    new TinyDate(end, this.timeZone).endOfDay()
+                    new TinyDate(begin, this.timeZone()).startOfDay(),
+                    new TinyDate(end, this.timeZone()).endOfDay()
                 ]);
                 selectedPresetValue = this.cloneRangeDate(this.selectedValue);
             }
         }
         else {
-            const originDate = this.value;
-            const zonedTime = this.createInZoneTime(new TinyDate(getShortcutValue(value), this.timeZone), originDate?.getHours() ?? 0, originDate?.getMinutes() ?? 0, originDate?.getSeconds() ?? 0);
-            const singleTinyDate = this.updateHourMinute(new TinyDate(zonedTime, this.timeZone));
+            const originDate = this.value();
+            const zonedTime = this.createInZoneTime(new TinyDate(getShortcutValue(value), this.timeZone()), originDate?.getHours() ?? 0, originDate?.getMinutes() ?? 0, originDate?.getSeconds() ?? 0);
+            const singleTinyDate = this.updateHourMinute(new TinyDate(zonedTime, this.timeZone()));
             selectedPresetValue = this.getSelectedShortcutPreset(singleTinyDate);
         }
         this.setValue(selectedPresetValue);
-        const shortcutPresetsValue = setValueByTimestampPrecision(shortcutPresets?.value, this.isRange, this.timestampPrecision, this.timeZone);
+        const shortcutPresetsValue = setValueByTimestampPrecision(shortcutPresets?.value, this.isRange(), this.timestampPrecision(), this.timeZone());
         this.dateValueChange.emit({
             value: helpers.isArray(value) ? this.selectedValue : selectedPresetValue,
             triggerPreset: Object.assign({}, shortcutPresets, { value: shortcutPresetsValue })
         });
-        if (!helpers.isArray(value) && this.showTime && this.showTimePicker) {
+        if (!helpers.isArray(value) && this.showTime() && this.showTimePicker) {
             this.updateActiveDate();
         }
     }
     createInZoneTime(date, hours, minutes, seconds) {
-        return TinyDate.createDateInTimeZone(date.getYear(), date.getMonth(), date.getDate(), hours, minutes, seconds, this.timeZone);
+        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: "isRange", showWeek: "showWeek", format: "format", disabledDate: "disabledDate", minDate: "minDate", maxDate: "maxDate", showToday: "showToday", showTime: "showTime", mustShowTime: "mustShowTime", dateRender: "dateRender", className: "className", panelMode: "panelMode", value: "value", defaultPickerValue: "defaultPickerValue", showShortcut: "showShortcut", shortcutPresets: "shortcutPresets", shortcutPosition: "shortcutPosition", flexible: "flexible", flexibleDateGranularity: "flexibleDateGranularity", timestampPrecision: "timestampPrecision", timeZone: "timeZone" }, outputs: { 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    [enablePrev]=\"enablePrevNext('prev', partType)\"\n    [enableNext]=\"enablePrevNext('next', partType)\"\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", "enablePrev", "enableNext", "disabledDate", "dateRender", "selectedValue", "hoverValue", "panelMode", "timeZone", "showDateRangeInput", "partType", "endPanelMode", "value"], outputs: ["panelModeChange", "headerChange", "selectDate", "dayHover"], exportAs: ["innerPopup"] }, { kind: "component", type: CalendarFooter, selector: "calendar-footer", inputs: ["showTime", "mustShowTime", "value", "timeZone", "disableTimeConfirm"], outputs: ["selectTime", "clickOk", "clickRemove", "showTimePickerChange"], exportAs: ["calendarFooter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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    [enablePrev]=\"enablePrevNext('prev', partType)\"\n    [enableNext]=\"enablePrevNext('next', partType)\"\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: Input
-            }], showWeek: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], disabledDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], showToday: [{
-                type: Input
-            }], showTime: [{
-                type: Input
-            }], mustShowTime: [{
-                type: Input
-            }], dateRender: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], panelMode: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], defaultPickerValue: [{
-                type: Input
-            }], showShortcut: [{
-                type: Input
-            }], shortcutPresets: [{
-                type: Input
-            }], shortcutPosition: [{
-                type: Input
-            }], flexible: [{
-                type: Input
-            }], flexibleDateGranularity: [{
-                type: Input
-            }], timestampPrecision: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], panelModeChange: [{
-                type: Output
-            }], calendarChange: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], resultOk: [{
-                type: Output
-            }], showTimePickerChange: [{
-                type: Output
-            }], dateValueChange: [{
-                type: Output
-            }] } });
+            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" }]
+        }] });
 
 class LibPackerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LibPackerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -2642,81 +2561,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @private
  */
 class ThyPicker {
+    get realOpenState() {
+        // The value that really decide the open state of overlay
+        return this.isOpenHandledByUser() ? !!this.opened() : this.overlayOpen;
+    }
+    get readonlyState() {
+        return this.isRange() || this.readonly() || this.mode() !== 'date';
+    }
     constructor() {
         this.changeDetector = inject(ChangeDetectorRef);
         this.dateHelper = inject(DateHelperService);
         this.i18n = inject(ThyI18nService);
-        this.isRange = false;
-        this.open = undefined;
-        this.placement = 'bottomLeft';
-        this.flexible = false;
-        this.blur = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.openChange = new EventEmitter(); // Emitted when overlay's open state change
-        this.inputChange = new EventEmitter();
+        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.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.entering = false;
         this.prefixCls = 'thy-calendar';
         this.isShowDatePopup = false;
         this.overlayOpen = false; // Available when "open"=undefined
-        this.overlayPositions = getFlexiblePositions(this.placement, 4);
-    }
-    get format() {
-        return this.innerFormat;
-    }
-    set format(value) {
-        this.innerFormat = value;
-        this.updateReadableDate(this.innerValue);
-    }
-    get flexibleDateGranularity() {
-        return this.innerflexibleDateGranularity;
-    }
-    set flexibleDateGranularity(granularity) {
-        this.innerflexibleDateGranularity = granularity;
-        this.updateReadableDate(this.innerValue);
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(value) {
-        this.innerValue = value;
-        if (!this.entering) {
-            this.updateReadableDate(this.innerValue);
-        }
-    }
-    get realOpenState() {
-        // The value that really decide the open state of overlay
-        return this.isOpenHandledByUser() ? !!this.open : this.overlayOpen;
-    }
-    get readonlyState() {
-        return this.isRange || this.readonly || this.mode !== 'date';
-    }
-    ngOnChanges(changes) {
-        // open by user
-        if (changes.open && changes.open.currentValue !== undefined) {
-            if (changes.open.currentValue) {
-                this.showDatePopup();
+        this.overlayPositions = getFlexiblePositions(this.placement(), 4);
+        effect(() => {
+            this.innerValue = this.value();
+            if (this.innerValue) {
+                if (!this.entering) {
+                    this.updateReadableDate(this.innerValue);
+                }
             }
-            else {
-                this.closeDatePopup();
+        });
+        effect(() => {
+            this.innerFormat = this.format();
+            if (this.innerFormat) {
+                this.updateReadableDate(this.innerValue);
             }
-        }
-        if (changes.timeZone && changes.timeZone.currentValue) {
-            this.formatDate(this.innerValue);
-        }
+        });
+        effect(() => {
+            this.innerflexibleDateGranularity = this.flexibleDateGranularity();
+            if (this.innerflexibleDateGranularity) {
+                this.updateReadableDate(this.innerValue);
+            }
+        });
+        effect(() => {
+            if (this.timeZone()) {
+                this.formatDate(this.innerValue);
+            }
+        });
+        effect(() => {
+            const openedState = this.opened();
+            if (openedState != undefined) {
+                if (openedState) {
+                    this.showDatePopup();
+                }
+                else {
+                    this.closeDatePopup();
+                }
+            }
+        });
     }
     ngAfterViewInit() {
-        this.overlayPositions = getFlexiblePositions(this.placement, 4);
-        if (this.autoFocus) {
+        this.overlayPositions = getFlexiblePositions(this.placement(), 4);
+        if (this.autoFocus()) {
             this.focus();
         }
     }
     focus() {
-        this.pickerInput.nativeElement.focus();
+        this.pickerInput()?.nativeElement.focus();
     }
     onBlur(event) {
         this.blur.emit(event);
         if (this.entering) {
-            this.valueChange.emit(this.pickerInput.nativeElement.value);
+            this.valueChange.emit(this.pickerInput()?.nativeElement.value);
         }
         this.entering = false;
     }
@@ -2729,7 +2666,7 @@ class ThyPicker {
         if (this.readonlyState) {
             return;
         }
-        this.valueChange.emit(this.pickerInput.nativeElement.value || this.getReadableValue(new TinyDate(undefined, this.timeZone)));
+        this.valueChange.emit(this.pickerInput()?.nativeElement.value || this.getReadableValue(new TinyDate(undefined, this.timeZone())));
         this.entering = false;
     }
     showOverlay() {
@@ -2738,8 +2675,8 @@ class ThyPicker {
             this.showDatePopup();
             this.openChange.emit(this.overlayOpen);
             setTimeout(() => {
-                if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
-                    this.cdkConnectedOverlay.overlayRef.updatePosition();
+                if (this.cdkConnectedOverlay() && this.cdkConnectedOverlay()?.overlayRef) {
+                    this.cdkConnectedOverlay()?.overlayRef.updatePosition();
                 }
             });
         }
@@ -2764,7 +2701,7 @@ class ThyPicker {
         }, 200);
     }
     onClickInputBox() {
-        if (!this.disabled && !this.readonly && !this.isOpenHandledByUser()) {
+        if (!this.disabled() && !this.readonly() && !this.isOpenHandledByUser()) {
             this.showOverlay();
         }
     }
@@ -2780,7 +2717,7 @@ class ThyPicker {
     onClickClear(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.innerValue = this.isRange ? [] : null;
+        this.innerValue = this.isRange() ? [] : null;
         this.valueChange.emit(this.innerValue);
     }
     getPartTypeIndex(partType) {
@@ -2790,7 +2727,7 @@ class ThyPicker {
         if (value === null) {
             return true;
         }
-        else if (this.isRange) {
+        else if (this.isRange()) {
             return !value || !Array.isArray(value) || value.every(val => !val);
         }
         else {
@@ -2799,18 +2736,18 @@ class ThyPicker {
     }
     // Whether open state is permanently controlled by user himself
     isOpenHandledByUser() {
-        return this.open !== undefined;
+        return this.opened() !== undefined;
     }
     getReadableValue(tinyDate) {
         let value;
-        if (this.isRange) {
-            if (this.flexible && this.innerflexibleDateGranularity !== 'day') {
-                return getFlexibleAdvancedReadableValue(tinyDate, this.innerflexibleDateGranularity, this.separator, this.i18n.getLocale());
+        if (this.isRange()) {
+            if (this.flexible() && this.innerflexibleDateGranularity !== 'day') {
+                return getFlexibleAdvancedReadableValue(tinyDate, this.innerflexibleDateGranularity, this.separator(), this.i18n.getLocale());
             }
             else {
                 const start = tinyDate[0] ? this.formatDate(tinyDate[0]) : '';
                 const end = tinyDate[1] ? this.formatDate(tinyDate[1]) : '';
-                return start && end ? `${start}${this.separator}${end}` : null;
+                return start && end ? `${start}${this.separator()}${end}` : null;
             }
         }
         else {
@@ -2829,83 +2766,24 @@ class ThyPicker {
         }
     }
     getPlaceholder() {
-        return this.isRange && this.placeholder && Array.isArray(this.placeholder)
-            ? this.placeholder.join(this.separator)
-            : this.placeholder;
+        return this.isRange() && this.placeholder() && Array.isArray(this.placeholder())
+            ? this.placeholder().join(this.separator())
+            : this.placeholder();
     }
     updateReadableDate(setValue) {
         const readableValue = this.getReadableValue(setValue);
-        if (readableValue === this.pickerInput.nativeElement['value']) {
+        if (readableValue === this.pickerInput()?.nativeElement['value']) {
             return;
         }
-        this.pickerInput.nativeElement.value = readableValue;
+        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: "isRange", open: "open", disabled: "disabled", placeholder: "placeholder", readonly: "readonly", allowClear: "allowClear", autoFocus: "autoFocus", className: "className", size: "size", suffixIcon: "suffixIcon", placement: "placement", flexible: "flexible", mode: "mode", hasBackdrop: ["hasBackdrop", "hasBackdrop", coerceBooleanProperty], separator: "separator", timeZone: "timeZone", format: "format", flexibleDateGranularity: "flexibleDateGranularity", value: "value" }, outputs: { blur: "blur", valueChange: "valueChange", openChange: "openChange", inputChange: "inputChange" }, viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }], exportAs: ["thyPicker"], usesOnChanges: true, 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]=\"placement !== 'left' && placement !== 'right' && placement !== 'top' && placement !== 'bottom' ? 'enter' : 'void'\">\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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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]=\"placement !== 'left' && placement !== 'right' && placement !== 'top' && placement !== 'bottom' ? 'enter' : 'void'\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { isRange: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], allowClear: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], suffixIcon: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], flexible: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], separator: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], openChange: [{
-                type: Output
-            }], inputChange: [{
-                type: Output
-            }], origin: [{
-                type: ViewChild,
-                args: ['origin', { static: true }]
-            }], cdkConnectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: true }]
-            }], pickerInput: [{
-                type: ViewChild,
-                args: ['pickerInput', { static: true }]
-            }], overlayContainer: [{
-                type: ViewChild,
-                args: ['overlayContainer', { static: false }]
-            }], format: [{
-                type: Input
-            }], flexibleDateGranularity: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+            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: () => [] });
 
 /**
  * @private
@@ -2921,22 +2799,6 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
     get thyMode() {
         return this._panelMode;
     }
-    /**
-     * 快捷选项面板的显示位置
-     * @type left | bottom
-     */
-    set thyShortcutPosition(position) {
-        if (!!position) {
-            this.shortcutPosition = position;
-        }
-    }
-    /**
-     * 自定义快捷选项
-     * @type ThyShortcutPreset[]
-     */
-    set thyShortcutPresets(presets) {
-        this.shortcutPresets = presets;
-    }
     /**
      * 是否禁用
      * @default false
@@ -2948,16 +2810,17 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         return this.disabled;
     }
     get realOpenState() {
-        return this.picker.realOpenState;
+        return this.picker().realOpenState;
     }
     get isShowDatePopup() {
-        return this.picker.isShowDatePopup;
+        return this.picker().isShowDatePopup;
     }
     initValue() {
         this.thyValue = this.isRange ? [] : null;
     }
     constructor() {
         super();
+        this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
         this.locale = injectLocale('datePicker');
         this._panelMode = 'date';
@@ -2965,81 +2828,142 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         /**
          * 是否显示清除按钮
          */
-        this.thyAllowClear = true;
+        this.thyAllowClear = input(true, { transform: coerceBooleanProperty });
         /**
          * 是否自动获取焦点
-         * @default false
          */
-        this.thyAutoFocus = false;
+        this.thyAutoFocus = input(false, { transform: coerceBooleanProperty });
+        this.thyOpen = input(undefined, { transform: coerceBooleanProperty });
+        this.opened = linkedSignal(this.thyOpen);
+        this.thyDisabledDate = input();
+        /**
+         * 最小值
+         */
+        this.thyMinDate = input();
+        /**
+         * 最大值
+         */
+        this.thyMaxDate = input();
+        /**
+         * 输入框提示文字
+         * @type string | string[]
+         */
+        this.thyPlaceHolder = input(undefined);
+        this.placeholder = signal(undefined);
+        /**
+         * 是否只读
+         */
+        this.thyReadonly = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 选择器 className
+         */
+        this.thyOriginClassName = input();
+        /**
+         * 弹出层 className
+         */
+        this.thyPanelClassName = input();
         /**
          * 输入框的大小
-         * @type xs | sm | md | lg | default
          */
-        this.thySize = 'default';
+        this.thySize = input('default');
         /**
          * 设置时间戳精度
          * @default seconds 10位
          */
-        this.thyTimestampPrecision = this.datePickerConfigService.config?.timestampPrecision || 'seconds';
+        this.thyTimestampPrecision = input(this.datePickerConfigService.config?.timestampPrecision || 'seconds');
+        /**
+         * 展示的日期格式
+         * @default yyyy-MM-dd
+         */
+        this.thyFormat = model();
         /**
          * 区间分隔符，不传值默认为 "~"
          */
-        this.thySeparator = this.datePickerConfigService.config?.separator;
+        this.thySeparator = input(this.datePickerConfigService.config?.separator);
         this.separator = computed(() => {
-            return ` ${this.thySeparator?.trim()} `;
+            return ` ${this.thySeparator()?.trim()} `;
         });
         /**
          * @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 = false;
+        this.thyAutoStartAndEnd = input(false, { transform: coerceBooleanProperty });
         /**
          * 面板默认日期
-         * @type CompatibleDate | number | null
          */
-        this.thyDefaultPickerValue = null;
+        this.thyDefaultPickerValue = input(null);
         /**
          * 自定义的后缀图标
          */
-        this.thySuffixIcon = 'calendar';
+        this.thySuffixIcon = input('calendar');
+        /**
+         * 是否展示快捷选项面板
+         * @default false
+         */
+        this.thyShowShortcut = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 快捷选项面板的显示位置
+         * @type left | bottom
+         */
+        this.thyShortcutPosition = input('left', { transform: (value) => value || 'left' });
+        /**
+         * 自定义快捷选项
+         * @type ThyShortcutPreset[]
+         */
+        this.thyShortcutPresets = input();
+        /**
+         * 是否支持选择时间
+         */
+        this.thyShowTime = input(false, {
+            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.thyDateChange = new EventEmitter();
-        this.thyOpenChange = new EventEmitter();
+        this.thyDateChange = output();
+        this.thyOpenChange = output();
+        this.picker = viewChild(ThyPicker);
+        /**
+         * 时区，不传使用默认时区
+         */
+        this.thyTimeZone = input();
         this.disabled = false;
-        this.shortcutPosition = 'left';
-        this.destroyed$ = new Subject();
         this.isCustomPlaceHolder = false;
         this.onlyEmitDate = false;
         this.onChangeFn = () => void 0;
+        effect(() => {
+            if (this.isCustomPlaceHolder) {
+                this.placeholder.set(this.thyPlaceHolder());
+            }
+        });
+        effect(() => {
+            if (this.thyTimeZone()) {
+                this.setValue(this.innerValue);
+            }
+        });
     }
     ngOnInit() {
         this.setDefaultPlaceHolder();
+        this.setDefaultTimePickerState();
         this.initValue();
-        this.isFlexible();
-    }
-    isFlexible() {
-        this.flexible = this.thyMode === 'flexible';
     }
     onDateValueChange(event) {
         this.thyDateChange.emit(event);
     }
     ngOnChanges(changes) {
-        if (changes.thyPlaceHolder && changes.thyPlaceHolder.firstChange && typeof this.thyPlaceHolder !== 'undefined') {
+        if (changes.thyPlaceHolder && changes.thyPlaceHolder.firstChange && typeof changes.thyPlaceHolder.currentValue !== 'undefined') {
             this.isCustomPlaceHolder = true;
         }
-        if (changes.thyTimeZone && changes.thyTimeZone.currentValue) {
-            this.setValue(this.innerValue);
-        }
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
     }
     closeOverlay() {
-        this.picker.hideOverlay();
+        this.picker().hideOverlay();
     }
     getAutoStartAndEndValue(begin, end) {
         let value;
@@ -3072,7 +2996,7 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
             let value = { begin: null, end: null };
             if (vAsRange.length) {
                 const [begin, end] = vAsRange;
-                if (this.thyAutoStartAndEnd) {
+                if (this.thyAutoStartAndEnd()) {
                     value = this.getAutoStartAndEndValue(begin, end);
                 }
                 else {
@@ -3080,7 +3004,7 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
                 }
             }
             const [beginUnixTime, endUnixTime] = this.setValueByPrecision(value);
-            this.onChangeFn(Object.assign({ begin: beginUnixTime, end: endUnixTime }, this.flexible ? { granularity: flexibleDateGranularity } : {}));
+            this.onChangeFn(Object.assign({ begin: beginUnixTime, end: endUnixTime }, this.flexible() ? { granularity: flexibleDateGranularity } : {}));
         }
         else {
             const value = { date: null, with_time: this.withTime ? 1 : 0 };
@@ -3096,26 +3020,26 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         }
     }
     setFormatRule() {
-        if (!this.thyFormat) {
+        if (!this.thyFormat()) {
             if (this.withTime) {
-                this.thyFormat = 'yyyy-MM-dd HH:mm';
+                this.thyFormat.set('yyyy-MM-dd HH:mm');
             }
             else {
                 if (!this.onlyEmitDate) {
-                    this.thyFormat = 'yyyy-MM-dd';
+                    this.thyFormat.set('yyyy-MM-dd');
                 }
             }
         }
     }
     onOpenChange(open) {
-        this.thyOpen = open;
+        this.opened.set(open);
         this.thyOpenChange.emit(open);
     }
     writeValue(originalValue) {
         const { value, withTime, flexibleDateGranularity } = transformDateValue(originalValue);
         this.flexibleDateGranularity = flexibleDateGranularity;
         this.innerValue = value;
-        if (this.flexible && value && value.length) {
+        if (this.flexible() && value && value.length) {
             if (!this.flexibleDateGranularity) {
                 this.flexibleDateGranularity = 'day';
             }
@@ -3130,87 +3054,51 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
     setTimePickerState(withTime) {
         this.withTime = withTime;
     }
+    // Displays the time directly when the time must be displayed by default
+    setDefaultTimePickerState() {
+        this.withTime = this.thyMustShowTime();
+    }
+    // Restore after clearing time to select whether the original picker time is displayed or not
+    restoreTimePickerState(value) {
+        if (!value) {
+            this.withTime = this.thyMustShowTime() || this.originWithTime;
+        }
+    }
+    setPanelMode() {
+        const mode = this.thyMode ?? 'date';
+        if (this.isRange) {
+            this.panelMode = this.flexible() ? ['date', 'date'] : [mode, mode];
+        }
+        else {
+            this.panelMode = mode;
+        }
+    }
     setDisabledState(disabled) {
         this.thyDisabled = disabled;
         this.cdr.markForCheck();
     }
     setDefaultPlaceHolder() {
         if (!this.isCustomPlaceHolder) {
-            this.thyPlaceHolder = this.isRange ? [this.locale().startDate, this.locale().endDate] : this.locale().placeholder;
+            const placeholder = this.isRange ? [this.locale().startDate, this.locale().endDate] : this.locale().placeholder;
+            this.placeholder.set(placeholder);
         }
-        this.cdr.markForCheck();
     }
     setValue(value) {
-        this.thyValue = makeValue(value, this.isRange, this.thyTimeZone);
+        this.thyValue = makeValue(value, this.isRange, this.thyTimeZone());
     }
     setValueByPrecision(value) {
-        return setValueByTimestampPrecision(value, this.isRange, this.thyTimestampPrecision, this.thyTimeZone);
+        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: "16.1.0", version: "19.2.8", type: AbstractPickerComponent, isStandalone: true, inputs: { thyMode: "thyMode", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyAutoFocus: ["thyAutoFocus", "thyAutoFocus", coerceBooleanProperty], thyOpen: ["thyOpen", "thyOpen", coerceBooleanProperty], thyDisabledDate: "thyDisabledDate", thyMinDate: "thyMinDate", thyMaxDate: "thyMaxDate", thyPlaceHolder: "thyPlaceHolder", thyReadonly: ["thyReadonly", "thyReadonly", coerceBooleanProperty], thyOriginClassName: "thyOriginClassName", thyPanelClassName: "thyPanelClassName", thySize: "thySize", thyTimestampPrecision: "thyTimestampPrecision", thyFormat: "thyFormat", thySeparator: "thySeparator", thyAutoStartAndEnd: ["thyAutoStartAndEnd", "thyAutoStartAndEnd", coerceBooleanProperty], thyDefaultPickerValue: "thyDefaultPickerValue", thySuffixIcon: "thySuffixIcon", thyShowShortcut: ["thyShowShortcut", "thyShowShortcut", coerceBooleanProperty], thyShortcutPosition: "thyShortcutPosition", thyShortcutPresets: "thyShortcutPresets", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyTimeZone: "thyTimeZone" }, outputs: { thyDateChange: "thyDateChange", thyOpenChange: "thyOpenChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ThyPicker, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AbstractPickerComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { thyMode: [{
                 type: Input
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAutoFocus: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOpen: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDisabledDate: [{
-                type: Input
-            }], thyMinDate: [{
-                type: Input
-            }], thyMaxDate: [{
-                type: Input
-            }], thyPlaceHolder: [{
-                type: Input
-            }], thyReadonly: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOriginClassName: [{
-                type: Input
-            }], thyPanelClassName: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyTimestampPrecision: [{
-                type: Input
-            }], thyFormat: [{
-                type: Input
-            }], thySeparator: [{
-                type: Input
-            }], thyAutoStartAndEnd: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDefaultPickerValue: [{
-                type: Input
-            }], thySuffixIcon: [{
-                type: Input
-            }], thyShowShortcut: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShortcutPosition: [{
-                type: Input
-            }], thyShortcutPresets: [{
-                type: Input
-            }], thyDateChange: [{
-                type: Output
-            }], thyOpenChange: [{
-                type: Output
-            }], picker: [{
-                type: ViewChild,
-                args: [ThyPicker, { static: true }]
             }], thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
-            }], thyTimeZone: [{
-                type: Input
             }] } });
 
 /**
@@ -3220,35 +3108,20 @@ class BasePicker extends AbstractPickerComponent {
     constructor() {
         super(...arguments);
         this.element = inject(ElementRef);
-        this.showWeek = false;
+        this.thyPicker = viewChild('thyPicker');
+        this.thyDateRender = input();
         /**
          * 是否有幕布
-         * @default true
          */
-        this.thyHasBackdrop = true;
-        /**
-         * @type EventEmitter<ThyPanelMode | ThyPanelMode[]>
-         */
-        this.thyOnPanelChange = new EventEmitter();
-        /**
-         * @type EventEmitter<Date[]>
-         */
-        this.thyOnCalendarChange = new EventEmitter();
-        /**
-         * 是否展示时间(时、分)
-         * @default false
-         */
-        this.thyMustShowTime = false;
+        this.thyHasBackdrop = input(true, { transform: coerceBooleanProperty$1 });
         /**
          * 弹出位置
          * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
          */
-        this.thyPlacement = 'bottomLeft';
-        /**
-         * @type EventEmitter<CompatibleDate | null>
-         */
-        this.thyOnOk = new EventEmitter();
-        this.takeUntilDestroyed = takeUntilDestroyed();
+        this.thyPlacement = input('bottomLeft');
+        this.thyOnPanelChange = output();
+        this.thyOnCalendarChange = output();
+        this.thyOnOk = output();
         this.thyClickDispatcher = inject(ThyClickDispatcher);
         this.platformId = inject(PLATFORM_ID);
         this.ngZone = inject(NgZone);
@@ -3256,33 +3129,30 @@ class BasePicker extends AbstractPickerComponent {
     set thyMode(value) {
         this._panelMode = value ?? 'date';
         if (this.initialized) {
-            this.setDefaultTimePickerState(this._panelMode);
+            this.setPanelMode();
+            this.setFormat();
         }
     }
     get thyMode() {
         return this._panelMode;
     }
-    /**
-     * 增加时间选择功能
-     * @default false
-     */
-    get thyShowTime() {
-        return this._showTime;
-    }
-    set thyShowTime(value) {
-        this._showTime = typeof value === 'object' ? value : coerceBooleanProperty$1(value);
+    open() {
+        this.opened.set(true);
     }
     ngOnInit() {
         super.ngOnInit();
-        this.setDefaultTimePickerState(this._panelMode);
+        this.setPanelMode();
+        this.setFormat();
         this.initialized = true;
         if (isPlatformBrowser(this.platformId)) {
             this.thyClickDispatcher
                 .clicked(0)
-                .pipe(this.takeUntilDestroyed)
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((event) => {
                 if (!this.element.nativeElement.contains(event.target) &&
-                    !this.thyPicker?.overlayContainer?.nativeElement.contains(event.target) &&
+                    !this.thyPicker()
+                        ?.overlayContainer()
+                        ?.nativeElement.contains(event.target) &&
                     this.realOpenState) {
                     this.ngZone.run(() => {
                         this.closeOverlay();
@@ -3293,13 +3163,13 @@ class BasePicker extends AbstractPickerComponent {
         }
     }
     onValueChange(value) {
-        this.thyPicker.entering = false;
+        this.thyPicker().entering = false;
         this.restoreTimePickerState(value);
         super.onValueChange(value);
-        if (!this.flexible) {
+        if (!this.flexible()) {
             this.closeOverlay();
         }
-        this.innerPreviousDate = this.thyPicker.getReadableValue(this.thyValue);
+        this.innerPreviousDate = this.thyPicker().getReadableValue(this.thyValue);
     }
     onInputValueChange(formatDate) {
         if (!formatDate || !formatDate.length) {
@@ -3309,8 +3179,8 @@ class BasePicker extends AbstractPickerComponent {
             return;
         }
         let value = formatDate;
-        const valueValid = isValidStringDate(value, this.thyTimeZone);
-        const valueLimitValid = valueValid ? this.isValidDateLimit(parseStringDate(value, this.thyTimeZone)) : false;
+        const valueValid = isValidStringDate(value, this.thyTimeZone());
+        const valueLimitValid = valueValid ? this.isValidDateLimit(parseStringDate(value, this.thyTimeZone())) : false;
         if (valueValid && valueLimitValid) {
             this.innerPreviousDate = value;
         }
@@ -3318,38 +3188,23 @@ class BasePicker extends AbstractPickerComponent {
             value = this.innerPreviousDate;
         }
         const tinyDate = value
-            ? this.thyShowTime
-                ? parseStringDate(value, this.thyTimeZone)
-                : parseStringDate(value, this.thyTimeZone).startOfDay()
+            ? this.thyShowTime()
+                ? parseStringDate(value, this.thyTimeZone())
+                : parseStringDate(value, this.thyTimeZone()).startOfDay()
             : null;
         this.restoreTimePickerState(tinyDate);
         super.onValueChange(tinyDate);
     }
-    // Displays the time directly when the time must be displayed by default
-    setDefaultTimePickerState(value) {
-        this.withTime = this.thyMustShowTime;
-        if (this.isRange) {
-            this.panelMode = this.flexible ? ['date', 'date'] : [value, value];
-        }
-        else {
-            this.panelMode = value;
-        }
-        this.showWeek = value === 'week';
-        if (!this.thyFormat) {
+    setFormat() {
+        if (!this.thyFormat()) {
             const inputFormats = {
                 year: 'yyyy',
-                quarter: 'yyyy-qqq',
+                quarter: `yyyy-${QUARTER_FORMAT}`,
                 month: 'yyyy-MM',
                 week: this.locale().weekThFormat,
-                date: this.thyShowTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
+                date: this.thyShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'
             };
-            this.thyFormat = this.flexible ? inputFormats['date'] : inputFormats[value];
-        }
-    }
-    // Restore after clearing time to select whether the original picker time is displayed or not
-    restoreTimePickerState(value) {
-        if (!value) {
-            this.withTime = this.thyMustShowTime || this.originWithTime;
+            this.thyFormat.set(this.flexible() ? inputFormats['date'] : inputFormats[this.thyMode]);
         }
     }
     // Emit thyOnCalendarChange when select date by thy-range-picker
@@ -3389,7 +3244,7 @@ class BasePicker extends AbstractPickerComponent {
         }
     }
     onFocus(event) {
-        this.picker.focus();
+        this.picker().focus();
     }
     onBlur(event) {
         // Tab 聚焦后自动聚焦到 input 输入框，此分支下直接返回，无需触发 onTouchedFn
@@ -3399,26 +3254,26 @@ class BasePicker extends AbstractPickerComponent {
         this.onTouchedFn();
     }
     onInputDate(value) {
-        if (value && isValidStringDate(value, this.thyTimeZone)) {
-            if (this.thyShowTime) {
-                this.withTime = hasTimeInStringDate(value, this.thyTimeZone);
+        if (value && isValidStringDate(value, this.thyTimeZone())) {
+            if (this.thyShowTime()) {
+                this.withTime = hasTimeInStringDate(value, this.thyTimeZone());
             }
-            this.thyValue = parseStringDate(value, this.thyTimeZone);
+            this.thyValue = parseStringDate(value, this.thyTimeZone());
         }
     }
     isValidDateLimit(date) {
         let disable = false;
-        if (this.thyDisabledDate !== undefined) {
-            disable = this.thyDisabledDate(date.nativeDate);
+        if (this.thyDisabledDate() !== undefined) {
+            disable = this.thyDisabledDate()(date.nativeDate);
         }
-        const minDate = this.thyMinDate ? new TinyDate(transformDateValue(this.thyMinDate).value, this.thyTimeZone) : null;
-        const maxDate = this.thyMaxDate ? new TinyDate(transformDateValue(this.thyMaxDate).value, this.thyTimeZone) : null;
+        const minDate = this.thyMinDate() ? new TinyDate(transformDateValue(this.thyMinDate()).value, this.thyTimeZone()) : null;
+        const maxDate = this.thyMaxDate() ? new TinyDate(transformDateValue(this.thyMaxDate()).value, this.thyTimeZone()) : null;
         return ((!minDate || date.startOfDay().nativeDate >= minDate.startOfDay().nativeDate) &&
             (!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: "16.1.0", version: "19.2.8", type: BasePicker, isStandalone: true, selector: "ng-component", inputs: { thyDateRender: "thyDateRender", thyMode: "thyMode", thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty$1], thyShowTime: "thyShowTime", thyMustShowTime: ["thyMustShowTime", "thyMustShowTime", coerceBooleanProperty$1], thyPlacement: "thyPlacement" }, 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, static: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BasePicker, decorators: [{
             type: Component,
@@ -3430,29 +3285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '(blur)': 'onBlur($event)'
                     }
                 }]
-        }], propDecorators: { thyPicker: [{
-                type: ViewChild,
-                args: ['thyPicker', { static: true }]
-            }], thyDateRender: [{
+        }], propDecorators: { thyMode: [{
                 type: Input
-            }], thyMode: [{
-                type: Input
-            }], thyHasBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyOnPanelChange: [{
-                type: Output
-            }], thyOnCalendarChange: [{
-                type: Output
-            }], thyShowTime: [{
-                type: Input
-            }], thyMustShowTime: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyPlacement: [{
-                type: Input
-            }], thyOnOk: [{
-                type: Output
             }] } });
 
 /**
@@ -3474,7 +3308,7 @@ class ThyDatePicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyDatePicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -3486,7 +3320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ], imports: [ThyPicker, DatePopup], host: {
                         '[attr.tabindex]': 'tabIndex'
-                    }, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
+                    }, 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: () => [] });
 
 /**
@@ -3500,19 +3334,19 @@ class ThyMonthPicker extends BasePicker {
         /**
          * 展示的月份格式
          */
-        this.thyFormat = 'yyyy-MM';
+        this.thyFormat = model('yyyy-MM');
         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: "thyFormat" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyMonthPicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -3522,10 +3356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyFormat: [{
-                type: Input
-            }] } });
+                    ], 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: () => [] });
 
 /**
  * 日期范围选择组件
@@ -3546,7 +3378,7 @@ class ThyRangePicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyRangePicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -3556,7 +3388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyRangePicker)
                         }
-                    ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], 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: () => [] });
 
 /**
@@ -3567,7 +3399,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyWeekPicker extends BasePicker {
     constructor() {
         super();
-        this.showWeek = true;
         this.hostRenderer = useHostRenderer();
         this.hostRenderer.addClass('thy-calendar-picker');
         this.thyMode = 'week';
@@ -3579,7 +3410,7 @@ class ThyWeekPicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyWeekPicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -3589,7 +3420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyWeekPicker)
                         }
-                    ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], 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: () => [] });
 
 /**
@@ -3602,9 +3433,8 @@ class ThyYearPicker extends BasePicker {
         super();
         /**
          * 展示的年份格式
-         * @type string
          */
-        this.thyFormat = 'yyyy';
+        this.thyFormat = model('yyyy');
         this.isRange = false;
         this.endPanelMode = 'year';
         this.hostRenderer = useHostRenderer();
@@ -3612,13 +3442,13 @@ class ThyYearPicker extends BasePicker {
         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: "thyFormat" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyYearPicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -3628,10 +3458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyFormat: [{
-                type: Input
-            }] } });
+                    ], 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: () => [] });
 
 const DATE_PICKER_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
@@ -3642,20 +3470,21 @@ const DATE_PICKER_REQUIRED_VALIDATOR = {
  * @private
  */
 class DatePickerRequiredValidator {
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = value != null && value !== false && `${value}` !== 'false';
+    constructor() {
+        this.required = input(false, {
+            transform: (value) => {
+                return value != null && value !== false && `${value}` !== 'false';
+            }
+        });
     }
     validate(control) {
-        return this.required ? this.validateRequired(control) : null;
+        return this.required() ? this.validateRequired(control) : null;
     }
     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: "14.0.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: "required" }, providers: [DATE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerRequiredValidator, decorators: [{
             type: Directive,
@@ -3663,9 +3492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     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: Input
-            }] } });
+        }] });
 const RANGE_PICKER_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => RangePickerRequiredValidator),
@@ -3675,20 +3502,21 @@ const RANGE_PICKER_REQUIRED_VALIDATOR = {
  * @private
  */
 class RangePickerRequiredValidator {
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = value != null && value !== false && `${value}` !== 'false';
+    constructor() {
+        this.required = input(false, {
+            transform: (value) => {
+                return value != null && value !== false && `${value}` !== 'false';
+            }
+        });
     }
     validate(control) {
-        return this.required ? this.validateRequired(control) : null;
+        return this.required() ? this.validateRequired(control) : null;
     }
     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: "14.0.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: "required" }, providers: [RANGE_PICKER_REQUIRED_VALIDATOR], ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RangePickerRequiredValidator, decorators: [{
             type: Directive,
@@ -3696,9 +3524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     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: Input
-            }] } });
+        }] });
 function isEmptyInputRangeValue(value) {
     return value == null || (instanceOfRangeEntry(value) && (value.begin == null || value.end == null));
 }
@@ -3713,135 +3539,120 @@ class PickerDirective extends AbstractPickerComponent {
     constructor() {
         super(...arguments);
         this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
         this.thyPopover = inject(ThyPopover);
-        this.showWeek = false;
+        this.thyDateRender = input();
+        this.thyOnPanelChange = output();
+        this.thyOnCalendarChange = output();
         /**
-         * @type EventEmitter<ThyPanelMode | ThyPanelMode[]>
+         * 弹出位置
+         * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
          */
-        this.thyOnPanelChange = new EventEmitter();
+        this.thyPlacement = input('bottom');
         /**
-         * @type EventEmitter<Date[]>
+         * 弹出 DatePicker 的偏移量
          */
-        this.thyOnCalendarChange = new EventEmitter();
+        this.thyOffset = input(4, {
+            transform: (value) => {
+                if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                    warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                }
+                return numberAttribute(value);
+            }
+        });
         /**
-         * 是否展示时间(时、分)
-         * @default false
+         * 是否有幕布
          */
-        this.thyMustShowTime = false;
+        this.thyHasBackdrop = input(true, {
+            transform: (value) => {
+                if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                    warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
+                }
+                return coerceBooleanProperty$1(value);
+            }
+        });
         /**
-         * 弹出位置
-         * @type top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom
+         * popover 的其它参数
          */
-        this.thyPlacement = 'bottom';
-        this.offset = 4;
-        this.hasBackdrop = true;
+        this.thyPopoverOptions = input();
         /**
          * 是否阻止冒泡
          */
-        this.thyStopPropagation = true;
-        this.destroy$ = new Subject();
+        this.thyStopPropagation = input(true, { transform: coerceBooleanProperty$1 });
         this.el = this.elementRef.nativeElement;
         this.$click = fromEvent(this.el, 'click').pipe(tap(e => {
-            if (this.thyStopPropagation) {
+            if (this.thyStopPropagation()) {
                 e.stopPropagation();
             }
         }), mapTo(true));
-        this.takeUntilDestroyed = takeUntilDestroyed();
-    }
-    get thyShowTime() {
-        return this._showTime;
-    }
-    set thyShowTime(value) {
-        this._showTime = typeof value === 'object' ? value : coerceBooleanProperty$1(value);
-    }
-    /**
-     * 弹出 DatePicker 的偏移量
-     * @default 4
-     */
-    set thyOffset(value) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            warnDeprecation(`thyOffset parameter will be deprecated, please use thyPopoverOptions instead.`);
-        }
-        this.offset = value;
-    }
-    /**
-     * 是否有幕布
-     * @default true
-     */
-    set thyHasBackdrop(value) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            warnDeprecation(`thyHasBackdrop parameter will be deprecated, please use thyPopoverOptions instead.`);
-        }
-        this.hasBackdrop = value;
     }
     ngOnInit() {
-        this.getInitialState();
-    }
-    getInitialState() {
-        this.thyMode = this.thyMode || 'date';
-        this.flexible = this.thyMode === 'flexible';
-        if (this.isRange) {
-            this.panelMode = this.flexible ? ['date', 'date'] : [this.thyMode, this.thyMode];
-        }
-        else {
-            this.panelMode = this.thyMode;
-        }
-        this.showWeek = this.thyMode === 'week';
+        this.setPanelMode();
     }
     openOverlay() {
-        this.getInitialState();
+        this.setPanelMode();
         const popoverRef = this.thyPopover.open(DatePopup, Object.assign({
             origin: this.el,
-            hasBackdrop: this.hasBackdrop,
+            hasBackdrop: this.thyHasBackdrop(),
             backdropClass: 'thy-overlay-transparent-backdrop',
-            offset: this.offset,
+            offset: this.thyOffset(),
             outsideClosable: true,
             initialState: {
                 isRange: this.isRange,
                 panelMode: this.panelMode,
-                showWeek: this.showWeek,
+                showWeek: this.showWeek(),
                 value: this.thyValue,
-                showTime: this.thyShowTime,
+                showTime: this.thyShowTime(),
                 mustShowTime: this.withTime,
-                format: this.thyFormat,
-                dateRender: this.thyDateRender,
-                disabledDate: this.thyDisabledDate,
-                placeholder: this.thyPlaceHolder,
-                className: this.thyPanelClassName,
-                defaultPickerValue: this.thyDefaultPickerValue,
-                minDate: this.thyMinDate,
-                maxDate: this.thyMaxDate,
-                showShortcut: this.thyShowShortcut,
-                shortcutPresets: this.shortcutPresets,
-                shortcutPosition: this.shortcutPosition,
-                flexible: this.flexible,
+                format: this.thyFormat(),
+                dateRender: this.thyDateRender(),
+                disabledDate: this.thyDisabledDate(),
+                placeholder: this.placeholder(),
+                className: this.thyPanelClassName(),
+                defaultPickerValue: this.thyDefaultPickerValue(),
+                minDate: this.thyMinDate(),
+                maxDate: this.thyMaxDate(),
+                showShortcut: this.thyShowShortcut(),
+                shortcutPresets: this.thyShortcutPresets(),
+                shortcutPosition: this.thyShortcutPosition(),
+                flexible: this.flexible(),
                 flexibleDateGranularity: this.flexibleDateGranularity,
-                timestampPrecision: this.thyTimestampPrecision
+                timestampPrecision: this.thyTimestampPrecision()
             },
-            placement: this.thyPlacement
-        }, this.thyPopoverOptions));
+            placement: this.thyPlacement()
+        }, this.thyPopoverOptions()));
         if (popoverRef) {
             const componentInstance = popoverRef.componentInstance;
-            componentInstance.valueChange.pipe(takeUntil(this.destroy$)).subscribe((event) => this.onValueChange(event));
-            componentInstance.calendarChange.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (this.valueChangeSubscription) {
+                this.valueChangeSubscription.unsubscribe();
+            }
+            this.valueChangeSubscription = componentInstance.valueChange?.subscribe((event) => this.onValueChange(event));
+            if (this.calendarChangeSubscription) {
+                this.calendarChangeSubscription.unsubscribe();
+            }
+            this.calendarChangeSubscription = componentInstance.calendarChange?.subscribe((event) => {
                 const rangeValue = coerceArray$1(event).map(x => x.nativeDate);
                 this.thyOnCalendarChange.emit(rangeValue);
             });
-            componentInstance.showTimePickerChange
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((event) => this.onShowTimePickerChange(event));
+            if (this.showTimePickerChangeSubscription) {
+                this.showTimePickerChangeSubscription.unsubscribe();
+            }
+            this.showTimePickerChangeSubscription = componentInstance.showTimePickerChange?.subscribe((event) => this.onShowTimePickerChange(event));
             // eslint-disable-next-line max-len
             componentInstance.ngOnChanges({ value: {} }); // dynamically created components don't call ngOnChanges, manual call
-            componentInstance.dateValueChange?.pipe(this.takeUntilDestroyed).subscribe((event) => {
+            if (this.dateValueChangeSubscription) {
+                this.dateValueChangeSubscription.unsubscribe();
+            }
+            this.dateValueChangeSubscription = componentInstance.dateValueChange?.subscribe((event) => {
                 this.thyDateChange.emit(event);
             });
             popoverRef
                 .afterOpened()
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.thyOpenChange.emit(true));
             popoverRef
                 .afterClosed()
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.thyOpenChange.emit(false));
         }
     }
@@ -3849,70 +3660,45 @@ class PickerDirective extends AbstractPickerComponent {
         this.thyPopover.close();
     }
     initActionSubscribe() {
-        this.$click.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
-            if (!this.thyDisabled && !this.thyReadonly) {
+        this.$click.pipe(debounceTime(50), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            if (!this.thyDisabled && !this.thyReadonly()) {
                 this.openOverlay();
             }
         });
     }
     ngAfterViewInit() {
-        this.setDefaultTimePickerState();
         this.initActionSubscribe();
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        if (this.valueChangeSubscription) {
+            this.valueChangeSubscription.unsubscribe();
+        }
+        if (this.calendarChangeSubscription) {
+            this.calendarChangeSubscription.unsubscribe();
+        }
+        if (this.showTimePickerChangeSubscription) {
+            this.showTimePickerChangeSubscription.unsubscribe();
+        }
+        if (this.dateValueChangeSubscription) {
+            this.dateValueChangeSubscription.unsubscribe();
+        }
     }
     onValueChange(value) {
         this.restoreTimePickerState(value);
         super.onValueChange(value);
-        if (!this.flexible) {
+        if (!this.flexible()) {
             this.closeOverlay();
         }
     }
-    // Displays the time directly when the time must be displayed by default
-    setDefaultTimePickerState() {
-        this.withTime = this.thyMustShowTime;
-    }
-    // Restore after clearing time to select whether the original picker time is displayed or not
-    restoreTimePickerState(value) {
-        if (!value) {
-            this.withTime = this.thyMustShowTime || this.originWithTime;
-        }
-    }
     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: "16.1.0", version: "19.2.8", type: PickerDirective, isStandalone: true, inputs: { thyDateRender: "thyDateRender", thyShowTime: "thyShowTime", thyMustShowTime: ["thyMustShowTime", "thyMustShowTime", coerceBooleanProperty$1], thyPlacement: "thyPlacement", thyOffset: ["thyOffset", "thyOffset", numberAttribute], thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty$1], thyPopoverOptions: "thyPopoverOptions", thyStopPropagation: ["thyStopPropagation", "thyStopPropagation", coerceBooleanProperty$1] }, outputs: { thyOnPanelChange: "thyOnPanelChange", thyOnCalendarChange: "thyOnCalendarChange" }, usesInheritance: true, ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PickerDirective, decorators: [{
             type: Directive
-        }], propDecorators: { thyDateRender: [{
-                type: Input
-            }], thyOnPanelChange: [{
-                type: Output
-            }], thyOnCalendarChange: [{
-                type: Output
-            }], thyShowTime: [{
-                type: Input
-            }], thyMustShowTime: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyPlacement: [{
-                type: Input
-            }], thyOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyHasBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyPopoverOptions: [{
-                type: Input
-            }], thyStopPropagation: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }] } });
+        }] });
 
 /**
  * 日期选择指令
@@ -3992,9 +3778,8 @@ class ThyQuarterPicker extends BasePicker {
         super();
         /**
          * 展示的季度格式
-         * @type string
          */
-        this.thyFormat = 'yyyy-qqq';
+        this.thyFormat = model(`yyyy-${QUARTER_FORMAT}`);
         this.isRange = false;
         this.endPanelMode = 'quarter';
         this.hostRenderer = useHostRenderer();
@@ -4002,13 +3787,13 @@ class ThyQuarterPicker extends BasePicker {
         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: "thyFormat" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyQuarterPicker)
             }
-        ], 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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "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: ["panelModeChange", "calendarChange", "valueChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: [{
             type: Component,
@@ -4018,10 +3803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             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  [open]=\"thyOpen\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear\"\n  [className]=\"thyOriginClassName\"\n  [autoFocus]=\"thyAutoFocus\"\n  [placeholder]=\"thyPlaceHolder\"\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]=\"shortcutPresets\"\n      [shortcutPosition]=\"shortcutPosition\"\n      [timestampPrecision]=\"thyTimestampPrecision\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone\"\n      ></date-popup>\n  }\n</thy-picker>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyFormat: [{
-                type: Input
-            }] } });
+                    ], 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: () => [] });
 
 registerLocaleData(localeZhHans, 'zh-Hans');
 class ThyDatePickerModule {
@@ -4122,5 +3905,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractPickerComponent, BasePicker, CalendarFooter, CalendarHeader, DATE_HELPER_SERVICE_FACTORY, DEFAULT_DATE_PICKER_CONFIG, DateCarousel, DateHeader, DateHelperByDatePipe, DateHelperService, DatePickerAdvancedShowYearTipPipe, DatePickerRequiredValidator, DatePopup, DateTable, DateTableCell, DecadeHeader, DecadeTable, InnerPopup, LibPackerModule, MonthHeader, MonthTable, PickerDirective, QuarterTable, RangePickerRequiredValidator, THY_DATE_PICKER_CONFIG, THY_DATE_PICKER_CONFIG_PROVIDER, ThyDatePicker, ThyDatePickerConfigService, ThyDatePickerDirective, ThyDatePickerFormatPipe, ThyDatePickerFormatStringPipe, ThyDatePickerModule, ThyMonthPicker, ThyPicker, ThyQuarterPicker, ThyQuarterPickerFormatPipe, ThyRangePicker, ThyRangePickerDirective, ThyWeekPicker, ThyYearPicker, YearHeader, YearTable, useDatePickerDefaultConfig };
+export { AbstractPickerComponent, BasePicker, CalendarFooter, CalendarHeader, DATE_HELPER_SERVICE_FACTORY, DEFAULT_DATE_PICKER_CONFIG, DateCarousel, DateHeader, DateHelperByDatePipe, DateHelperService, DatePickerAdvancedShowYearTipPipe, DatePickerRequiredValidator, DatePopup, DateTable, DateTableCell, DecadeHeader, DecadeTable, InnerPopup, LibPackerModule, MonthHeader, MonthTable, PickerDirective, QUARTER_FORMAT, QuarterTable, RangePickerRequiredValidator, THY_DATE_PICKER_CONFIG, THY_DATE_PICKER_CONFIG_PROVIDER, ThyDatePicker, ThyDatePickerConfigService, ThyDatePickerDirective, ThyDatePickerFormatPipe, ThyDatePickerFormatStringPipe, ThyDatePickerModule, ThyMonthPicker, ThyPicker, ThyQuarterPicker, ThyQuarterPickerFormatPipe, ThyRangePicker, ThyRangePickerDirective, ThyWeekPicker, ThyYearPicker, YearHeader, YearTable, useDatePickerDefaultConfig };
 //# sourceMappingURL=ngx-tethys-date-picker.mjs.map