ngx-tethys 19.1.13 → 20.0.0-next.0

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

@@ -309,10 +309,10 @@ class TimePickerConfig {
         /** placeholder for seconds field in timePicker */
         this.secondsPlaceholder = 'SS';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TimePickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TimePickerConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TimePickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TimePickerConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TimePickerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TimePickerConfig, decorators: [{
             type: Injectable
         }] });
 
@@ -334,7 +334,8 @@ const initialState = {
  */
 class ThyTimePickerStore extends MiniStore {
     constructor() {
-        super(initialState);
+        super();
+        this.initialize(initialState);
     }
     writeValue(value) {
         if (value?.getTime() !== this.snapshot.value?.getTime()) {
@@ -407,8 +408,8 @@ class ThyTimePickerStore extends MiniStore {
         }
         this.setState(_newState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerStore }); }
 }
 __decorate([
     MiniAction(),
@@ -446,7 +447,7 @@ __decorate([
     __metadata("design:paramtypes", [Object, String]),
     __metadata("design:returntype", void 0)
 ], ThyTimePickerStore.prototype, "updateControls", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [], propDecorators: { writeValue: [], changeHours: [], changeMinutes: [], changeSeconds: [], setTime: [], updateControls: [] } });
 
@@ -464,45 +465,45 @@ class ThyInnerTimePicker {
         this._store = inject(ThyTimePickerStore);
         this._config = inject(TimePickerConfig);
         /** hours change step */
-        this.hourStep = input(this._config.hourStep);
+        this.hourStep = input(this._config.hourStep, ...(ngDevMode ? [{ debugName: "hourStep" }] : []));
         /** minutes change step */
-        this.minuteStep = input(this._config.minuteStep);
+        this.minuteStep = input(this._config.minuteStep, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
         /** seconds change step */
-        this.secondsStep = input(this._config.secondsStep);
+        this.secondsStep = input(this._config.secondsStep, ...(ngDevMode ? [{ debugName: "secondsStep" }] : []));
         /** if true hours and minutes fields will be readonly */
-        this.readonlyInput = input(this._config.readonlyInput);
+        this.readonlyInput = input(this._config.readonlyInput, ...(ngDevMode ? [{ debugName: "readonlyInput" }] : []));
         /** if true hours and minutes fields will be disabled */
-        this.disabled = model(this._config.disabled);
+        this.disabled = model(this._config.disabled, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         /** if true scroll inside hours and minutes inputs will change time */
-        this.mousewheel = input(this._config.mousewheel);
+        this.mousewheel = input(this._config.mousewheel, ...(ngDevMode ? [{ debugName: "mousewheel" }] : []));
         /** if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard */
-        this.arrowKeys = input(this._config.arrowKeys);
+        this.arrowKeys = input(this._config.arrowKeys, ...(ngDevMode ? [{ debugName: "arrowKeys" }] : []));
         /** if true spinner arrows above and below the inputs will be shown */
-        this.showSpinners = input(this._config.showSpinners);
+        this.showSpinners = input(this._config.showSpinners, ...(ngDevMode ? [{ debugName: "showSpinners" }] : []));
         /** if true meridian button will be shown */
-        this.showMeridian = input(this._config.showMeridian);
+        this.showMeridian = input(this._config.showMeridian, ...(ngDevMode ? [{ debugName: "showMeridian" }] : []));
         /** show minutes in timePicker */
-        this.showMinutes = input(this._config.showMinutes);
+        this.showMinutes = input(this._config.showMinutes, ...(ngDevMode ? [{ debugName: "showMinutes" }] : []));
         /** show seconds in timePicker */
-        this.showSeconds = input(this._config.showSeconds);
+        this.showSeconds = input(this._config.showSeconds, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
         /** meridian labels based on locale */
-        this.meridians = input(this._config.meridians);
+        this.meridians = input(this._config.meridians, ...(ngDevMode ? [{ debugName: "meridians" }] : []));
         /** minimum time user can select */
-        this.min = input(this._config.min);
+        this.min = input(this._config.min, ...(ngDevMode ? [{ debugName: "min" }] : []));
         /** maximum time user can select */
-        this.max = input(this._config.max);
+        this.max = input(this._config.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
         /** placeholder for hours field in timePicker */
-        this.hoursPlaceholder = input(this._config.hoursPlaceholder);
+        this.hoursPlaceholder = input(this._config.hoursPlaceholder, ...(ngDevMode ? [{ debugName: "hoursPlaceholder" }] : []));
         /** placeholder for minutes field in timePicker */
-        this.minutesPlaceholder = input(this._config.minutesPlaceholder);
+        this.minutesPlaceholder = input(this._config.minutesPlaceholder, ...(ngDevMode ? [{ debugName: "minutesPlaceholder" }] : []));
         /** placeholder for seconds field in timePicker */
-        this.secondsPlaceholder = input(this._config.secondsPlaceholder);
+        this.secondsPlaceholder = input(this._config.secondsPlaceholder, ...(ngDevMode ? [{ debugName: "secondsPlaceholder" }] : []));
         /** timezone */
-        this.timeZone = input();
+        this.timeZone = input(...(ngDevMode ? [undefined, { debugName: "timeZone" }] : []));
         /** emits true if value is a valid date */
         this.isValid = output();
-        this.isEditable = computed(() => !(this.readonlyInput() || this.disabled()));
-        this.isPM = computed(() => this.showMeridian() && this.meridian === this.meridians()[1]);
+        this.isEditable = computed(() => !(this.readonlyInput() || this.disabled()), ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
+        this.isPM = computed(() => this.showMeridian() && this.meridian === this.meridians()[1], ...(ngDevMode ? [{ debugName: "isPM" }] : []));
         // min/max validation for input fields
         this.invalidHours = false;
         this.invalidMinutes = false;
@@ -665,13 +666,13 @@ class ThyInnerTimePicker {
         this.minutes = padNumber(_value.getMinutes());
         this.seconds = padNumber(_value.getUTCSeconds());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInnerTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInnerTimePicker, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondsStep: { classPropertyName: "secondsStep", publicName: "secondsStep", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mousewheel: { classPropertyName: "mousewheel", publicName: "mousewheel", isSignal: true, isRequired: false, transformFunction: null }, arrowKeys: { classPropertyName: "arrowKeys", publicName: "arrowKeys", isSignal: true, isRequired: false, transformFunction: null }, showSpinners: { classPropertyName: "showSpinners", publicName: "showSpinners", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable()\" (click)=\"changeHours(hourStep())\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- increment minutes button -->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable()\" (click)=\"changeMinutes(minuteStep())\"\n            ><span class=\"thy-chevron thy-chevron-up\"></span\n          ></a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- increment seconds button -->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable()\" (click)=\"changeSeconds(secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-up\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder()\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput()\"\n          [disabled]=\"disabled()\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep() * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep(), 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep(), 'key')\"\n          (change)=\"updateHours($event.target.value)\" />\n      </td>\n\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- minutes -->\n      @if (showMinutes()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidMinutes\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"minutesPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"minutes\"\n            (wheel)=\"prevDef($event); changeMinutes(minuteStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeMinutes(minuteStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeMinutes(-minuteStep(), 'key')\"\n            (change)=\"updateMinutes($event.target.value)\" />\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- seconds -->\n      @if (showSeconds()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidSeconds\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidSeconds\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"secondsPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"seconds\"\n            (wheel)=\"prevDef($event); changeSeconds(secondsStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeSeconds(secondsStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeSeconds(-secondsStep(), 'key')\"\n            (change)=\"updateSeconds($event.target.value)\" />\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian -->\n      @if (showMeridian()) {\n        <td>\n          <button\n            type=\"button\"\n            class=\"btn btn-default text-center\"\n            [disabled]=\"!isEditable() || !canToggleMeridian\"\n            [class.disabled]=\"!isEditable() || !canToggleMeridian\"\n            (click)=\"toggleMeridian()\">\n            {{ meridian }}\n          </button>\n        </td>\n      }\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable()\" (click)=\"changeHours(-hourStep())\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- decrement minutes button-->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable()\" (click)=\"changeMinutes(-minuteStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- decrement seconds button-->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable()\" (click)=\"changeSeconds(-secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n  </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyInnerTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyInnerTimePicker, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondsStep: { classPropertyName: "secondsStep", publicName: "secondsStep", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mousewheel: { classPropertyName: "mousewheel", publicName: "mousewheel", isSignal: true, isRequired: false, transformFunction: null }, arrowKeys: { classPropertyName: "arrowKeys", publicName: "arrowKeys", isSignal: true, isRequired: false, transformFunction: null }, showSpinners: { classPropertyName: "showSpinners", publicName: "showSpinners", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable()\" (click)=\"changeHours(hourStep())\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- increment minutes button -->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable()\" (click)=\"changeMinutes(minuteStep())\"\n            ><span class=\"thy-chevron thy-chevron-up\"></span\n          ></a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- increment seconds button -->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable()\" (click)=\"changeSeconds(secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-up\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder()\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput()\"\n          [disabled]=\"disabled()\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep() * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep(), 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep(), 'key')\"\n          (change)=\"updateHours($event.target.value)\" />\n      </td>\n\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- minutes -->\n      @if (showMinutes()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidMinutes\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"minutesPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"minutes\"\n            (wheel)=\"prevDef($event); changeMinutes(minuteStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeMinutes(minuteStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeMinutes(-minuteStep(), 'key')\"\n            (change)=\"updateMinutes($event.target.value)\" />\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- seconds -->\n      @if (showSeconds()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidSeconds\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidSeconds\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"secondsPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"seconds\"\n            (wheel)=\"prevDef($event); changeSeconds(secondsStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeSeconds(secondsStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeSeconds(-secondsStep(), 'key')\"\n            (change)=\"updateSeconds($event.target.value)\" />\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian -->\n      @if (showMeridian()) {\n        <td>\n          <button\n            type=\"button\"\n            class=\"btn btn-default text-center\"\n            [disabled]=\"!isEditable() || !canToggleMeridian\"\n            [class.disabled]=\"!isEditable() || !canToggleMeridian\"\n            (click)=\"toggleMeridian()\">\n            {{ meridian }}\n          </button>\n        </td>\n      }\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable()\" (click)=\"changeHours(-hourStep())\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- decrement minutes button-->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable()\" (click)=\"changeMinutes(-minuteStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- decrement seconds button-->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable()\" (click)=\"changeSeconds(-secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n  </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInnerTimePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyInnerTimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'thy-inner-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], imports: [], template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable()\" (click)=\"changeHours(hourStep())\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- increment minutes button -->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable()\" (click)=\"changeMinutes(minuteStep())\"\n            ><span class=\"thy-chevron thy-chevron-up\"></span\n          ></a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- increment seconds button -->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable()\" (click)=\"changeSeconds(secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-up\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder()\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput()\"\n          [disabled]=\"disabled()\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep() * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep(), 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep(), 'key')\"\n          (change)=\"updateHours($event.target.value)\" />\n      </td>\n\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- minutes -->\n      @if (showMinutes()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidMinutes\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"minutesPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"minutes\"\n            (wheel)=\"prevDef($event); changeMinutes(minuteStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeMinutes(minuteStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeMinutes(-minuteStep(), 'key')\"\n            (change)=\"updateMinutes($event.target.value)\" />\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- seconds -->\n      @if (showSeconds()) {\n        <td class=\"form-group\" [class.has-error]=\"invalidSeconds\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidSeconds\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"secondsPlaceholder()\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput()\"\n            [disabled]=\"disabled()\"\n            [value]=\"seconds\"\n            (wheel)=\"prevDef($event); changeSeconds(secondsStep() * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeSeconds(secondsStep(), 'key')\"\n            (keydown.ArrowDown)=\"changeSeconds(-secondsStep(), 'key')\"\n            (change)=\"updateSeconds($event.target.value)\" />\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian -->\n      @if (showMeridian()) {\n        <td>\n          <button\n            type=\"button\"\n            class=\"btn btn-default text-center\"\n            [disabled]=\"!isEditable() || !canToggleMeridian\"\n            [class.disabled]=\"!isEditable() || !canToggleMeridian\"\n            (click)=\"toggleMeridian()\">\n            {{ meridian }}\n          </button>\n        </td>\n      }\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners()\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable()\" (click)=\"changeHours(-hourStep())\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- decrement minutes button-->\n      @if (showMinutes()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable()\" (click)=\"changeMinutes(-minuteStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds()) {\n        <td>&nbsp;</td>\n      }\n      <!-- decrement seconds button-->\n      @if (showSeconds()) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable()\" (click)=\"changeSeconds(-secondsStep())\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian()) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian()) {\n        <td></td>\n      }\n    </tr>\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondsStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsStep", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], mousewheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mousewheel", required: false }] }], arrowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowKeys", required: false }] }], showSpinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinners", required: false }] }], showMeridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMeridian", required: false }] }], showMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinutes", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], meridians: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridians", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], hoursPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursPlaceholder", required: false }] }], minutesPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesPlaceholder", required: false }] }], secondsPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsPlaceholder", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], isValid: [{ type: i0.Output, args: ["isValid"] }] } });
 
 /**
  * 时间选择面板组件
@@ -682,40 +683,40 @@ class ThyTimePanel {
         this.cdr = inject(ChangeDetectorRef);
         this.ngZone = inject(NgZone);
         this.locale = injectLocale('timePicker');
-        this.hourListRef = viewChild('hourListElement');
-        this.minuteListRef = viewChild('minuteListElement');
-        this.secondListRef = viewChild('secondListElement');
+        this.hourListRef = viewChild('hourListElement', ...(ngDevMode ? [{ debugName: "hourListRef" }] : []));
+        this.minuteListRef = viewChild('minuteListElement', ...(ngDevMode ? [{ debugName: "minuteListRef" }] : []));
+        this.secondListRef = viewChild('secondListElement', ...(ngDevMode ? [{ debugName: "secondListRef" }] : []));
         /**
          * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
          * @type string
          * @default HH:mm:ss
          */
-        this.thyFormat = input('HH:mm:ss');
+        this.thyFormat = input('HH:mm:ss', ...(ngDevMode ? [{ debugName: "thyFormat" }] : []));
         /**
          * 小时间隔步长
          * @type number
          */
-        this.thyHourStep = input(1);
+        this.thyHourStep = input(1, ...(ngDevMode ? [{ debugName: "thyHourStep" }] : []));
         /**
          * 分钟间隔步长
          * @type number
          */
-        this.thyMinuteStep = input(1);
+        this.thyMinuteStep = input(1, ...(ngDevMode ? [{ debugName: "thyMinuteStep" }] : []));
         /**
          * 秒间隔步长
          * @type number
          */
-        this.thySecondStep = input(1);
+        this.thySecondStep = input(1, ...(ngDevMode ? [{ debugName: "thySecondStep" }] : []));
         /**
          * 展示选择此刻
          * @type boolean
          */
-        this.thyShowSelectNow = input(true, { transform: coerceBooleanProperty });
+        this.thyShowSelectNow = input(true, ...(ngDevMode ? [{ debugName: "thyShowSelectNow", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 展示底部操作
          * @type boolean
          */
-        this.thyShowOperations = input(true, { transform: coerceBooleanProperty });
+        this.thyShowOperations = input(true, ...(ngDevMode ? [{ debugName: "thyShowOperations", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 选择时间触发的事件
          * @type EventEmitter<Date>
@@ -739,27 +740,27 @@ class ThyTimePanel {
                 return new Set(format).has('H') || new Set(format).has('h');
             }
             return true;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showHourColumn" }] : []));
         this.showMinuteColumn = computed(() => {
             const format = this.thyFormat();
             if (format) {
                 return new Set(format).has('m');
             }
             return true;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showMinuteColumn" }] : []));
         this.showSecondColumn = computed(() => {
             const format = this.thyFormat();
             if (format) {
                 return new Set(format).has('s');
             }
             return true;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showSecondColumn" }] : []));
         this.showColumnCount = computed(() => {
             const showHour = this.showHourColumn();
             const showMinute = this.showMinuteColumn();
             const showSecond = this.showSecondColumn();
             return [showHour, showMinute, showSecond].filter(m => m).length || 3;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showColumnCount" }] : []));
         this.onValueChangeFn = () => void 0;
         this.onTouchedFn = () => void 0;
     }
@@ -896,8 +897,8 @@ class ThyTimePanel {
             this.resetScrollPosition();
         }, 200);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTimePanel, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thyHourStep: { classPropertyName: "thyHourStep", publicName: "thyHourStep", isSignal: true, isRequired: false, transformFunction: null }, thyMinuteStep: { classPropertyName: "thyMinuteStep", publicName: "thyMinuteStep", isSignal: true, isRequired: false, transformFunction: null }, thySecondStep: { classPropertyName: "thySecondStep", publicName: "thySecondStep", isSignal: true, isRequired: false, transformFunction: null }, thyShowSelectNow: { classPropertyName: "thyShowSelectNow", publicName: "thyShowSelectNow", isSignal: true, isRequired: false, transformFunction: null }, thyShowOperations: { classPropertyName: "thyShowOperations", publicName: "thyShowOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations()", "class.thy-time-picker-panel-columns-2": "showColumnCount() === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount() === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyTimePanel, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thyHourStep: { classPropertyName: "thyHourStep", publicName: "thyHourStep", isSignal: true, isRequired: false, transformFunction: null }, thyMinuteStep: { classPropertyName: "thyMinuteStep", publicName: "thyMinuteStep", isSignal: true, isRequired: false, transformFunction: null }, thySecondStep: { classPropertyName: "thySecondStep", publicName: "thySecondStep", isSignal: true, isRequired: false, transformFunction: null }, thyShowSelectNow: { classPropertyName: "thyShowSelectNow", publicName: "thyShowSelectNow", isSignal: true, isRequired: false, transformFunction: null }, thyShowOperations: { classPropertyName: "thyShowOperations", publicName: "thyShowOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations()", "class.thy-time-picker-panel-columns-2": "showColumnCount() === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount() === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -905,7 +906,7 @@ class ThyTimePanel {
             }
         ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"{{ prefixCls }}-content\">\n  @if (showHourColumn()) {\n    <ul #hourListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n      @for (time of hourRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n          (click)=\"pickHours(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showMinuteColumn()) {\n    <ul #minuteListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n      @for (time of minuteRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n          (click)=\"pickMinutes(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showSecondColumn()) {\n    <ul #secondListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n      @for (time of secondRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n          (click)=\"pickSeconds(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n@if (thyShowOperations()) {\n  <div class=\"{{ prefixCls }}-bottom-operation\">\n    @if (thyShowSelectNow()) {\n      <a href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">{{ locale().now }}</a>\n    }\n    <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\n      {{ locale().ok }}\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePanel, decorators: [{
             type: Component,
             args: [{ selector: 'thy-time-picker-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -919,7 +920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[class.thy-time-picker-panel-columns-2]': `showColumnCount() === 2`,
                         '[class.thy-time-picker-panel-columns-3]': `showColumnCount() === 3`
                     }, imports: [ThyButton, DecimalPipe], template: "<div class=\"{{ prefixCls }}-content\">\n  @if (showHourColumn()) {\n    <ul #hourListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n      @for (time of hourRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n          (click)=\"pickHours(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showMinuteColumn()) {\n    <ul #minuteListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n      @for (time of minuteRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n          (click)=\"pickMinutes(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showSecondColumn()) {\n    <ul #secondListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n      @for (time of secondRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n          (click)=\"pickSeconds(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n@if (thyShowOperations()) {\n  <div class=\"{{ prefixCls }}-bottom-operation\">\n    @if (thyShowSelectNow()) {\n      <a href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">{{ locale().now }}</a>\n    }\n    <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\n      {{ locale().ok }}\n    </button>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { hourListRef: [{ type: i0.ViewChild, args: ['hourListElement', { isSignal: true }] }], minuteListRef: [{ type: i0.ViewChild, args: ['minuteListElement', { isSignal: true }] }], secondListRef: [{ type: i0.ViewChild, args: ['secondListElement', { isSignal: true }] }], thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }], thyHourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHourStep", required: false }] }], thyMinuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMinuteStep", required: false }] }], thySecondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySecondStep", required: false }] }], thyShowSelectNow: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowSelectNow", required: false }] }], thyShowOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOperations", required: false }] }], thyPickChange: [{ type: i0.Output, args: ["thyPickChange"] }], thyClosePanel: [{ type: i0.Output, args: ["thyClosePanel"] }] } });
 
 /**
  * 时间选择组件
@@ -930,79 +931,79 @@ class ThyTimePicker {
         this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
         this.locale = injectLocale('timePicker');
-        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
-        this.origin = viewChild('origin');
-        this.inputRef = viewChild('pickerInput');
-        this.overlayContainer = viewChild('overlayContainer');
+        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "cdkConnectedOverlay" }] : []));
+        this.origin = viewChild('origin', ...(ngDevMode ? [{ debugName: "origin" }] : []));
+        this.inputRef = viewChild('pickerInput', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        this.overlayContainer = viewChild('overlayContainer', ...(ngDevMode ? [{ debugName: "overlayContainer" }] : []));
         /**
          * 输入框大小
          * @type 'xs' | 'sm' | 'md' | 'lg' | 'default'
          */
-        this.thySize = input('default');
+        this.thySize = input('default', ...(ngDevMode ? [{ debugName: "thySize" }] : []));
         /**
          * 输入框提示文字
          * @type string
          */
-        this.thyPlaceholder = input(this.locale().placeholder);
+        this.thyPlaceholder = input(this.locale().placeholder, ...(ngDevMode ? [{ debugName: "thyPlaceholder" }] : []));
         /**
          * 弹出位置
          * @type 'top' | 'topLeft'| 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'
          */
-        this.thyPlacement = input('bottomLeft');
+        this.thyPlacement = input('bottomLeft', ...(ngDevMode ? [{ debugName: "thyPlacement" }] : []));
         /**
          * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
          * @type string
          * @default HH:mm:ss
          */
-        this.thyFormat = input('HH:mm:ss', { transform: (value) => value || 'HH:mm:ss' });
+        this.thyFormat = input('HH:mm:ss', ...(ngDevMode ? [{ debugName: "thyFormat", transform: (value) => value || 'HH:mm:ss' }] : [{ transform: (value) => value || 'HH:mm:ss' }]));
         /**
          * 小时间隔步长
          * @type number
          */
-        this.thyHourStep = input(1);
+        this.thyHourStep = input(1, ...(ngDevMode ? [{ debugName: "thyHourStep" }] : []));
         /**
          * 分钟间隔步长
          * @type number
          */
-        this.thyMinuteStep = input(1);
+        this.thyMinuteStep = input(1, ...(ngDevMode ? [{ debugName: "thyMinuteStep" }] : []));
         /**
          * 秒间隔步长
          * @type number
          */
-        this.thySecondStep = input(1);
+        this.thySecondStep = input(1, ...(ngDevMode ? [{ debugName: "thySecondStep" }] : []));
         /**
          * 弹出层组件 class
          * @type string
          */
-        this.thyPopupClass = input();
+        this.thyPopupClass = input(...(ngDevMode ? [undefined, { debugName: "thyPopupClass" }] : []));
         /**
          * 是否显示弹出层遮罩
          * @type boolean
          * @default false
          */
-        this.thyBackdrop = input(false, { transform: coerceBooleanProperty });
+        this.thyBackdrop = input(false, ...(ngDevMode ? [{ debugName: "thyBackdrop", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 禁用
          * @type boolean
          * @default false
          */
-        this.thyDisabled = model(false);
+        this.thyDisabled = model(false, ...(ngDevMode ? [{ debugName: "thyDisabled" }] : []));
         /**
          * 只读
          * @type boolean
          * @default false
          */
-        this.thyReadonly = input(false, { transform: coerceBooleanProperty });
+        this.thyReadonly = input(false, ...(ngDevMode ? [{ debugName: "thyReadonly", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 展示选择此刻
          * @type boolean
          */
-        this.thyShowSelectNow = input(true, { transform: coerceBooleanProperty });
+        this.thyShowSelectNow = input(true, ...(ngDevMode ? [{ debugName: "thyShowSelectNow", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 可清空值
          * @type boolean
          */
-        this.thyAllowClear = input(true, { transform: coerceBooleanProperty });
+        this.thyAllowClear = input(true, ...(ngDevMode ? [{ debugName: "thyAllowClear", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 打开/关闭弹窗事件
          * @type EventEmitter<boolean>
@@ -1010,7 +1011,7 @@ class ThyTimePicker {
         this.thyOpenChange = output();
         this.prefixCls = 'thy-time-picker';
         this.overlayPositions = getFlexiblePositions(this.thyPlacement(), 4);
-        this.showText = model('');
+        this.showText = model('', ...(ngDevMode ? [{ debugName: "showText" }] : []));
         this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
         this.isDisabledFirstChange = true;
         this.onValueChangeFn = () => void 0;
@@ -1221,8 +1222,8 @@ class ThyTimePicker {
     disabledUserOperation() {
         return this.thyDisabled() || this.thyReadonly();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTimePicker, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thyHourStep: { classPropertyName: "thyHourStep", publicName: "thyHourStep", isSignal: true, isRequired: false, transformFunction: null }, thyMinuteStep: { classPropertyName: "thyMinuteStep", publicName: "thyMinuteStep", isSignal: true, isRequired: false, transformFunction: null }, thySecondStep: { classPropertyName: "thySecondStep", publicName: "thySecondStep", isSignal: true, isRequired: false, transformFunction: null }, thyPopupClass: { classPropertyName: "thyPopupClass", publicName: "thyPopupClass", isSignal: true, isRequired: false, transformFunction: null }, thyBackdrop: { classPropertyName: "thyBackdrop", publicName: "thyBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyReadonly: { classPropertyName: "thyReadonly", publicName: "thyReadonly", isSignal: true, isRequired: false, transformFunction: null }, thyShowSelectNow: { classPropertyName: "thyShowSelectNow", publicName: "thyShowSelectNow", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyDisabled: "thyDisabledChange", thyOpenChange: "thyOpenChange", showText: "showTextChange" }, host: { properties: { "class.thy-time-picker-disabled": "thyDisabled()", "class.thy-time-picker-readonly": "thyReadonly()" }, classAttribute: "thy-time-picker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ThyTimePicker, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyFormat: { classPropertyName: "thyFormat", publicName: "thyFormat", isSignal: true, isRequired: false, transformFunction: null }, thyHourStep: { classPropertyName: "thyHourStep", publicName: "thyHourStep", isSignal: true, isRequired: false, transformFunction: null }, thyMinuteStep: { classPropertyName: "thyMinuteStep", publicName: "thyMinuteStep", isSignal: true, isRequired: false, transformFunction: null }, thySecondStep: { classPropertyName: "thySecondStep", publicName: "thySecondStep", isSignal: true, isRequired: false, transformFunction: null }, thyPopupClass: { classPropertyName: "thyPopupClass", publicName: "thyPopupClass", isSignal: true, isRequired: false, transformFunction: null }, thyBackdrop: { classPropertyName: "thyBackdrop", publicName: "thyBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyReadonly: { classPropertyName: "thyReadonly", publicName: "thyReadonly", isSignal: true, isRequired: false, transformFunction: null }, thyShowSelectNow: { classPropertyName: "thyShowSelectNow", publicName: "thyShowSelectNow", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyDisabled: "thyDisabledChange", thyOpenChange: "thyOpenChange", showText: "showTextChange" }, host: { properties: { "class.thy-time-picker-disabled": "thyDisabled()", "class.thy-time-picker-readonly": "thyReadonly()" }, classAttribute: "thy-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1230,7 +1231,7 @@ class ThyTimePicker {
             }
         ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, isSignal: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"thyDisabled()\"\n      [class.thy-input-readonly]=\"thyReadonly()\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize()\"\n      [disabled]=\"thyDisabled()\"\n      [readonly]=\"thyReadonly()\"\n      [placeholder]=\"thyPlaceholder()\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  @if (!thyDisabled() && thyAllowClear() && !thyReadonly() && showText()) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClearTime($event)\"\n        ngClass=\"remove-link remove-link-{{ thySize() }}\"></thy-icon>\n    </span>\n  }\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize() }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement() === 'left' || thyPlacement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement() === 'top' || thyPlacement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement() !== 'left' && thyPlacement() !== 'right' && thyPlacement() !== 'top' && thyPlacement() !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass()\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"thyFormat()\"\n      [thyHourStep]=\"thyHourStep()\"\n      [thyMinuteStep]=\"thyMinuteStep()\"\n      [thySecondStep]=\"thySecondStep()\"\n      [thyShowSelectNow]=\"thyShowSelectNow()\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: 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"] }, { kind: "component", type: ThyTimePanel, selector: "thy-time-picker-panel", inputs: ["thyFormat", "thyHourStep", "thyMinuteStep", "thySecondStep", "thyShowSelectNow", "thyShowOperations"], outputs: ["thyPickChange", "thyClosePanel"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'thy-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1243,12 +1244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[class.thy-time-picker-disabled]': `thyDisabled()`,
                         '[class.thy-time-picker-readonly]': `thyReadonly()`
                     }, imports: [CdkOverlayOrigin, ThyInputDirective, FormsModule, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay, ThyTimePanel], animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"thyDisabled()\"\n      [class.thy-input-readonly]=\"thyReadonly()\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize()\"\n      [disabled]=\"thyDisabled()\"\n      [readonly]=\"thyReadonly()\"\n      [placeholder]=\"thyPlaceholder()\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  @if (!thyDisabled() && thyAllowClear() && !thyReadonly() && showText()) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClearTime($event)\"\n        ngClass=\"remove-link remove-link-{{ thySize() }}\"></thy-icon>\n    </span>\n  }\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize() }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement() === 'left' || thyPlacement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement() === 'top' || thyPlacement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement() !== 'left' && thyPlacement() !== 'right' && thyPlacement() !== 'top' && thyPlacement() !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass()\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"thyFormat()\"\n      [thyHourStep]=\"thyHourStep()\"\n      [thyMinuteStep]=\"thyMinuteStep()\"\n      [thySecondStep]=\"thySecondStep()\"\n      [thyShowSelectNow]=\"thyShowSelectNow()\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { cdkConnectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['pickerInput', { isSignal: true }] }], overlayContainer: [{ type: i0.ViewChild, args: ['overlayContainer', { isSignal: true }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlaceholder", required: false }] }], thyPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlacement", required: false }] }], thyFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFormat", required: false }] }], thyHourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHourStep", required: false }] }], thyMinuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMinuteStep", required: false }] }], thySecondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySecondStep", required: false }] }], thyPopupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPopupClass", required: false }] }], thyBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyBackdrop", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }, { type: i0.Output, args: ["thyDisabledChange"] }], thyReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyReadonly", required: false }] }], thyShowSelectNow: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowSelectNow", required: false }] }], thyAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAllowClear", required: false }] }], thyOpenChange: [{ type: i0.Output, args: ["thyOpenChange"] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }, { type: i0.Output, args: ["showTextChange"] }] } });
 
 const COMPONENTS = [ThyInnerTimePicker, ThyTimePicker, ThyTimePanel];
 class ThyTimePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerModule, imports: [CommonModule,
             FormsModule,
             ThySharedModule,
             ThyIconModule,
@@ -1256,7 +1257,7 @@ class ThyTimePickerModule {
             OverlayModule,
             ThyPopoverModule,
             ThyButtonModule, ThyInnerTimePicker, ThyTimePicker, ThyTimePanel], exports: [ThyInnerTimePicker, ThyTimePicker, ThyTimePanel] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerModule, providers: [TimePickerConfig, ThyTimePickerStore], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerModule, providers: [TimePickerConfig, ThyTimePickerStore], imports: [CommonModule,
             FormsModule,
             ThySharedModule,
             ThyIconModule,
@@ -1265,7 +1266,7 @@ class ThyTimePickerModule {
             ThyPopoverModule,
             ThyButtonModule, ThyTimePicker, ThyTimePanel] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [