ngx-tethys 19.1.0-next.2 → 19.1.0-next.4

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, inject, ChangeDetectorRef, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgZone, ViewChild, ElementRef, NgModule } from '@angular/core';
+import { Injectable, forwardRef, inject, ChangeDetectorRef, input, model, output, computed, ChangeDetectionStrategy, Component, NgZone, viewChild, ElementRef, effect, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { TinyDate, isValid, coerceBooleanProperty } from 'ngx-tethys/util';
+import { TinyDate, isFunction, coerceBooleanProperty, isValid } from 'ngx-tethys/util';
 import { Subscription } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import { MiniStore, MiniAction, reqAnimFrame, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
 import { DecimalPipe, NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import { injectLocale } from 'ngx-tethys/i18n';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { ThyButton, ThyButtonModule } from 'ngx-tethys/button';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
-import { ThyButton, ThyButtonModule } from 'ngx-tethys/button';
 import { ThyPopoverModule } from 'ngx-tethys/popover';
 import { ThySharedModule } from 'ngx-tethys/shared';
+import { injectLocale } from 'ngx-tethys/i18n';
 
 const hoursPerDay = 24;
 const hoursPerDayHalf = 12;
@@ -33,10 +33,12 @@ function isValidDate(value) {
     return true;
 }
 function isValidLimit(controls, newDate) {
-    if (controls.min && newDate < controls.min) {
+    const min = isFunction(controls.min) ? controls.min() : controls.min;
+    const max = isFunction(controls.max) ? controls.max() : controls.max;
+    if (min && newDate < min) {
         return false;
     }
-    if (controls.max && newDate > controls.max) {
+    if (max && newDate > max) {
         return false;
     }
     return true;
@@ -146,14 +148,18 @@ function isInputValid(hours, minutes = '0', seconds = '0', isPM) {
 }
 
 function canChangeValue(state, event) {
-    if (state.readonlyInput || state.disabled) {
+    const mousewheel = state.mousewheel();
+    const arrowKeys = state.arrowKeys();
+    const readonlyInput = state.readonlyInput();
+    const disabled = state.disabled();
+    if (readonlyInput || disabled) {
         return false;
     }
     if (event) {
-        if (event.source === 'wheel' && !state.mousewheel) {
+        if (event.source === 'wheel' && !mousewheel) {
             return false;
         }
-        if (event.source === 'key' && !state.arrowKeys) {
+        if (event.source === 'key' && !arrowKeys) {
             return false;
         }
     }
@@ -215,7 +221,12 @@ function getControlsValue(state) {
 }
 function timePickerControls(value, state) {
     const hoursPerDayHalf = 12;
-    const { min, max, hourStep, minuteStep, secondsStep, showSeconds } = state;
+    const min = state.min();
+    const max = state.max();
+    const hourStep = state.hourStep();
+    const minuteStep = state.minuteStep();
+    const secondsStep = state.secondsStep();
+    const showSeconds = state.showSeconds();
     const res = {
         canIncrementHours: true,
         canIncrementMinutes: true,
@@ -336,7 +347,9 @@ class ThyTimePickerStore extends MiniStore {
             return state;
         }
         const _newTime = changeTime(state.value, { hour: event.step }, timeZone);
-        if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
+        const max = state.config.max();
+        const min = state.config.min();
+        if ((max || min) && !isValidLimit(state.config, _newTime)) {
             return state;
         }
         this.setState({ value: _newTime });
@@ -347,7 +360,9 @@ class ThyTimePickerStore extends MiniStore {
             return state;
         }
         const _newTime = changeTime(state.value, { minute: event.step }, timeZone);
-        if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
+        const max = state.config.max();
+        const min = state.config.min();
+        if ((max || min) && !isValidLimit(state.config, _newTime)) {
             return state;
         }
         this.setState({ value: _newTime });
@@ -360,7 +375,9 @@ class ThyTimePickerStore extends MiniStore {
         const _newTime = changeTime(state.value, {
             seconds: event.step
         }, timeZone);
-        if ((state.config.max || state.config.min) && !isValidLimit(state.config, _newTime)) {
+        const max = state.config.max();
+        const min = state.config.min();
+        if ((max || min) && !isValidLimit(state.config, _newTime)) {
             return state;
         }
         this.setState({ value: _newTime });
@@ -381,7 +398,9 @@ class ThyTimePickerStore extends MiniStore {
             config: value,
             controls: _newControlsState
         };
-        if (state.config.showMeridian !== _newState.config.showMeridian) {
+        const showMeridian = isFunction(state.config.showMeridian) ? state.config.showMeridian() : state.config.showMeridian;
+        const newShowMeridian = isFunction(_newState.config.showMeridian) ? _newState.config.showMeridian() : _newState.config.showMeridian;
+        if (showMeridian !== newShowMeridian) {
             if (state.value) {
                 _newState.value = new TinyDate(state.value, timeZone)?.nativeDate;
             }
@@ -440,14 +459,50 @@ const TIMEPICKER_CONTROL_VALUE_ACCESSOR = {
  * @internal
  */
 class ThyInnerTimePicker {
-    get isEditable() {
-        return !(this.readonlyInput || this.disabled);
-    }
     constructor() {
         this._cd = inject(ChangeDetectorRef);
         this._store = inject(ThyTimePickerStore);
+        this._config = inject(TimePickerConfig);
+        /** hours change step */
+        this.hourStep = input(this._config.hourStep);
+        /** minutes change step */
+        this.minuteStep = input(this._config.minuteStep);
+        /** seconds change step */
+        this.secondsStep = input(this._config.secondsStep);
+        /** if true hours and minutes fields will be readonly */
+        this.readonlyInput = input(this._config.readonlyInput);
+        /** if true hours and minutes fields will be disabled */
+        this.disabled = model(this._config.disabled);
+        /** if true scroll inside hours and minutes inputs will change time */
+        this.mousewheel = input(this._config.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);
+        /** if true spinner arrows above and below the inputs will be shown */
+        this.showSpinners = input(this._config.showSpinners);
+        /** if true meridian button will be shown */
+        this.showMeridian = input(this._config.showMeridian);
+        /** show minutes in timePicker */
+        this.showMinutes = input(this._config.showMinutes);
+        /** show seconds in timePicker */
+        this.showSeconds = input(this._config.showSeconds);
+        /** meridian labels based on locale */
+        this.meridians = input(this._config.meridians);
+        /** minimum time user can select */
+        this.min = input(this._config.min);
+        /** maximum time user can select */
+        this.max = input(this._config.max);
+        /** placeholder for hours field in timePicker */
+        this.hoursPlaceholder = input(this._config.hoursPlaceholder);
+        /** placeholder for minutes field in timePicker */
+        this.minutesPlaceholder = input(this._config.minutesPlaceholder);
+        /** placeholder for seconds field in timePicker */
+        this.secondsPlaceholder = input(this._config.secondsPlaceholder);
+        /** timezone */
+        this.timeZone = input();
         /** emits true if value is a valid date */
-        this.isValid = new EventEmitter();
+        this.isValid = output();
+        this.isEditable = computed(() => !(this.readonlyInput() || this.disabled()));
+        this.isPM = computed(() => this.showMeridian() && this.meridian === this.meridians()[1]);
         // min/max validation for input fields
         this.invalidHours = false;
         this.invalidMinutes = false;
@@ -456,17 +511,15 @@ class ThyInnerTimePicker {
         this.onChange = Function.prototype;
         this.onTouched = Function.prototype;
         this.timerPickerSubscription = new Subscription();
-        const _config = inject(TimePickerConfig);
         const _cd = this._cd;
         const _store = this._store;
-        Object.assign(this, _config);
         this.timerPickerSubscription.add(_store
             .select(state => state.value)
             .subscribe((value) => {
             // update UI values if date changed
             this._renderTime(value);
             this.onChange(value);
-            this._store.updateControls(getControlsValue(this), this.timeZone);
+            this._store.updateControls(getControlsValue(this), this.timeZone());
         }));
         this.timerPickerSubscription.add(_store
             .select(state => state.controls)
@@ -481,29 +534,23 @@ class ThyInnerTimePicker {
         this.invalidMinutes = false;
         this.invalidSeconds = false;
     }
-    isPM() {
-        return this.showMeridian && this.meridian === this.meridians[1];
-    }
     prevDef($event) {
         $event.preventDefault();
     }
     wheelSign($event) {
         return Math.sign($event.deltaY) * -1;
     }
-    ngOnChanges(changes) {
-        this._store.updateControls(getControlsValue(this), this.timeZone);
-    }
     changeHours(step, source = '') {
         this.resetValidation();
-        this._store.changeHours({ step, source }, this.timeZone);
+        this._store.changeHours({ step, source }, this.timeZone());
     }
     changeMinutes(step, source = '') {
         this.resetValidation();
-        this._store.changeMinutes({ step, source }, this.timeZone);
+        this._store.changeMinutes({ step, source }, this.timeZone());
     }
     changeSeconds(step, source = '') {
         this.resetValidation();
-        this._store.changeSeconds({ step, source }, this.timeZone);
+        this._store.changeSeconds({ step, source }, this.timeZone());
     }
     updateHours(hours) {
         this.resetValidation();
@@ -547,11 +594,11 @@ class ThyInnerTimePicker {
             minute: this.minutes,
             seconds: this.seconds,
             isPM: this.isPM()
-        }, this.max, this.min, this.timeZone);
+        }, this.max(), this.min(), this.timeZone());
     }
     _updateTime() {
-        const _seconds = this.showSeconds ? this.seconds : void 0;
-        const _minutes = this.showMinutes ? this.minutes : void 0;
+        const _seconds = this.showSeconds() ? this.seconds : void 0;
+        const _minutes = this.showMinutes() ? this.minutes : void 0;
         if (!isInputValid(this.hours, _minutes, _seconds, this.isPM())) {
             this.isValid.emit(false);
             this.onChange(null);
@@ -562,10 +609,10 @@ class ThyInnerTimePicker {
             minute: this.minutes,
             seconds: this.seconds,
             isPM: this.isPM()
-        }, this.timeZone);
+        }, this.timeZone());
     }
     toggleMeridian() {
-        if (!this.showMeridian || !this.isEditable) {
+        if (!this.showMeridian() || !this.isEditable()) {
             return;
         }
         const _hoursPerDayHalf = 12;
@@ -576,7 +623,7 @@ class ThyInnerTimePicker {
     }
     writeValue(obj) {
         if (isValidDate(obj)) {
-            this._store.writeValue(parseTime(obj, this.timeZone));
+            this._store.writeValue(parseTime(obj, this.timeZone()));
         }
         else if (obj == null) {
             this._store.writeValue(null);
@@ -589,7 +636,7 @@ class ThyInnerTimePicker {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
         this._cd.markForCheck();
     }
     ngOnDestroy() {
@@ -600,14 +647,14 @@ class ThyInnerTimePicker {
             this.hours = '';
             this.minutes = '';
             this.seconds = '';
-            this.meridian = this.meridians[0];
+            this.meridian = this.meridians()[0];
             return;
         }
-        const _value = parseTime(value, this.timeZone);
+        const _value = parseTime(value, this.timeZone());
         const _hoursPerDayHalf = 12;
         let _hours = _value.getHours();
-        if (this.showMeridian) {
-            this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];
+        if (this.showMeridian()) {
+            this.meridian = this.meridians()[_hours >= _hoursPerDayHalf ? 1 : 0];
             _hours = _hours % _hoursPerDayHalf;
             // should be 12 PM, not 00 PM
             if (_hours === 0) {
@@ -619,50 +666,12 @@ class ThyInnerTimePicker {
         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: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowKeys: "arrowKeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder", timeZone: "timeZone" }, outputs: { isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], usesOnChanges: true, 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          />\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            />\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            />\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            >\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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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          />\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            />\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            />\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            >\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: () => [], propDecorators: { hourStep: [{
-                type: Input
-            }], minuteStep: [{
-                type: Input
-            }], secondsStep: [{
-                type: Input
-            }], readonlyInput: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], mousewheel: [{
-                type: Input
-            }], arrowKeys: [{
-                type: Input
-            }], showSpinners: [{
-                type: Input
-            }], showMeridian: [{
-                type: Input
-            }], showMinutes: [{
-                type: Input
-            }], showSeconds: [{
-                type: Input
-            }], meridians: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], hoursPlaceholder: [{
-                type: Input
-            }], minutesPlaceholder: [{
-                type: Input
-            }], secondsPlaceholder: [{
-                type: Input
-            }], timeZone: [{
-                type: Input
-            }], isValid: [{
-                type: Output
-            }] } });
+            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: () => [] });
 
 /**
  * 时间选择面板组件
@@ -673,41 +682,50 @@ 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');
+        /**
+         * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
+         * @type string
+         * @default HH:mm:ss
+         */
+        this.thyFormat = input('HH:mm:ss');
         /**
          * 小时间隔步长
          * @type number
          */
-        this.thyHourStep = 1;
+        this.thyHourStep = input(1);
         /**
          * 分钟间隔步长
          * @type number
          */
-        this.thyMinuteStep = 1;
+        this.thyMinuteStep = input(1);
         /**
          * 秒间隔步长
          * @type number
          */
-        this.thySecondStep = 1;
+        this.thySecondStep = input(1);
         /**
          * 展示选择此刻
          * @type boolean
          */
-        this.thyShowSelectNow = true;
+        this.thyShowSelectNow = input(true, { transform: coerceBooleanProperty });
         /**
          * 展示底部操作
          * @type boolean
          */
-        this.thyShowOperations = true;
+        this.thyShowOperations = input(true, { transform: coerceBooleanProperty });
         /**
          * 选择时间触发的事件
          * @type EventEmitter<Date>
          */
-        this.thyPickChange = new EventEmitter();
+        this.thyPickChange = output();
         /**
          * 关闭面板事件
          * @type EventEmitter<void>
          */
-        this.thyClosePanel = new EventEmitter();
+        this.thyClosePanel = output();
         // margin-top + 1px border
         this.SCROLL_OFFSET_SPACING = 5;
         this.SCROLL_DEFAULT_DURATION = 120;
@@ -715,33 +733,36 @@ class ThyTimePanel {
         this.hourRange = [];
         this.minuteRange = [];
         this.secondRange = [];
-        this.showHourColumn = true;
-        this.showMinuteColumn = true;
-        this.showSecondColumn = true;
-        this.showColumnCount = 3;
+        this.showHourColumn = computed(() => {
+            const format = this.thyFormat();
+            if (format) {
+                return new Set(format).has('H') || new Set(format).has('h');
+            }
+            return true;
+        });
+        this.showMinuteColumn = computed(() => {
+            const format = this.thyFormat();
+            if (format) {
+                return new Set(format).has('m');
+            }
+            return true;
+        });
+        this.showSecondColumn = computed(() => {
+            const format = this.thyFormat();
+            if (format) {
+                return new Set(format).has('s');
+            }
+            return true;
+        });
+        this.showColumnCount = computed(() => {
+            const showHour = this.showHourColumn();
+            const showMinute = this.showMinuteColumn();
+            const showSecond = this.showSecondColumn();
+            return [showHour, showMinute, showSecond].filter(m => m).length || 3;
+        });
         this.onValueChangeFn = () => void 0;
         this.onTouchedFn = () => void 0;
     }
-    /**
-     * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
-     * @type string
-     * @default HH:mm:ss
-     */
-    set thyFormat(value) {
-        if (value) {
-            const formatSet = new Set(value);
-            this.showHourColumn = formatSet.has('H') || formatSet.has('h');
-            this.showMinuteColumn = formatSet.has('m');
-            this.showSecondColumn = formatSet.has('s');
-        }
-        else {
-            this.showHourColumn = true;
-            this.showMinuteColumn = true;
-            this.showSecondColumn = true;
-        }
-        this.showColumnCount = [this.showHourColumn, this.showMinuteColumn, this.showSecondColumn].filter(m => m).length;
-        this.cdr.markForCheck();
-    }
     ngOnInit() {
         this.generateTimeRange();
         this.initialValue();
@@ -750,27 +771,27 @@ class ThyTimePanel {
         });
     }
     generateTimeRange() {
-        this.hourRange = this.buildTimeRange(24, this.thyHourStep);
-        this.minuteRange = this.buildTimeRange(60, this.thyMinuteStep);
-        this.secondRange = this.buildTimeRange(60, this.thySecondStep);
+        this.hourRange = this.buildTimeRange(24, this.thyHourStep());
+        this.minuteRange = this.buildTimeRange(60, this.thyMinuteStep());
+        this.secondRange = this.buildTimeRange(60, this.thySecondStep());
     }
     pickHours(hours, index) {
         this.value.setHours(hours.value);
         this.hour = hours.value;
         this.thyPickChange.emit(this.value);
-        this.scrollTo(this.hourListRef.nativeElement, index);
+        this.scrollTo(this.hourListRef().nativeElement, index);
     }
     pickMinutes(minutes, index) {
         this.value.setMinutes(minutes.value);
         this.minute = minutes.value;
         this.thyPickChange.emit(this.value);
-        this.scrollTo(this.minuteListRef.nativeElement, index);
+        this.scrollTo(this.minuteListRef().nativeElement, index);
     }
     pickSeconds(seconds, index) {
         this.value.setSeconds(seconds.value);
         this.second = seconds.value;
         this.thyPickChange.emit(this.value);
-        this.scrollTo(this.secondListRef.nativeElement, index);
+        this.scrollTo(this.secondListRef().nativeElement, index);
     }
     selectNow() {
         this.value = new TinyDate()?.nativeDate;
@@ -824,14 +845,17 @@ class ThyTimePanel {
         this.second = this.value.getSeconds();
     }
     resetScrollPosition() {
-        if (this.hourListRef) {
-            this.hourListRef.nativeElement.scrollTop = 0;
+        const hourListRef = this.hourListRef();
+        if (hourListRef) {
+            hourListRef.nativeElement.scrollTop = 0;
         }
-        if (this.minuteListRef) {
-            this.minuteListRef.nativeElement.scrollTop = 0;
+        const minuteListRef = this.minuteListRef();
+        if (minuteListRef) {
+            minuteListRef.nativeElement.scrollTop = 0;
         }
-        if (this.secondListRef) {
-            this.secondListRef.nativeElement.scrollTop = 0;
+        const secondListRef = this.secondListRef();
+        if (secondListRef) {
+            secondListRef.nativeElement.scrollTop = 0;
         }
         this.initialScrollPosition = false;
     }
@@ -853,14 +877,17 @@ class ThyTimePanel {
         });
     }
     autoScroll(duration = this.SCROLL_DEFAULT_DURATION) {
-        if (this.hourListRef) {
-            this.scrollTo(this.hourListRef.nativeElement, this.hourRange.findIndex(m => m.value === this.hour), duration);
+        const hourListRef = this.hourListRef();
+        if (hourListRef) {
+            this.scrollTo(hourListRef.nativeElement, this.hourRange.findIndex(m => m.value === this.hour), duration);
         }
-        if (this.minuteListRef) {
-            this.scrollTo(this.minuteListRef.nativeElement, this.minuteRange.findIndex(m => m.value === this.minute), duration);
+        const minuteListRef = this.minuteListRef();
+        if (minuteListRef) {
+            this.scrollTo(minuteListRef.nativeElement, this.minuteRange.findIndex(m => m.value === this.minute), duration);
         }
-        if (this.secondListRef) {
-            this.scrollTo(this.secondListRef.nativeElement, this.secondRange.findIndex(m => m.value === this.second), duration);
+        const secondListRef = this.secondListRef();
+        if (secondListRef) {
+            this.scrollTo(secondListRef.nativeElement, this.secondRange.findIndex(m => m.value === this.second), duration);
         }
     }
     ngOnDestroy() {
@@ -870,13 +897,13 @@ class ThyTimePanel {
         }, 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: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyShowOperations: ["thyShowOperations", "thyShowOperations", coerceBooleanProperty] }, 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.ɵ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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyTimePanel)
             }
-        ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: 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 }); }
+        ], 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: [{
             type: Component,
@@ -888,38 +915,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ], host: {
                         class: 'thy-time-picker-panel',
-                        '[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`
-                    }, 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" }]
-        }], propDecorators: { hourListRef: [{
-                type: ViewChild,
-                args: ['hourListElement', { static: false }]
-            }], minuteListRef: [{
-                type: ViewChild,
-                args: ['minuteListElement', { static: false }]
-            }], secondListRef: [{
-                type: ViewChild,
-                args: ['secondListElement', { static: false }]
-            }], thyFormat: [{
-                type: Input
-            }], thyHourStep: [{
-                type: Input
-            }], thyMinuteStep: [{
-                type: Input
-            }], thySecondStep: [{
-                type: Input
-            }], thyShowSelectNow: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowOperations: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPickChange: [{
-                type: Output
-            }], thyClosePanel: [{
-                type: Output
-            }] } });
+                        '[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`
+                    }, 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: () => [] });
 
 /**
  * 时间选择组件
@@ -930,85 +930,100 @@ 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');
         /**
          * 输入框大小
          * @type 'xs' | 'sm' | 'md' | 'lg' | 'default'
          */
-        this.thySize = 'default';
+        this.thySize = input('default');
         /**
          * 输入框提示文字
          * @type string
          */
-        this.thyPlaceholder = this.locale().placeholder;
+        this.thyPlaceholder = input(this.locale().placeholder);
         /**
          * 弹出位置
          * @type 'top' | 'topLeft'| 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'
          */
-        this.thyPlacement = 'bottomLeft';
+        this.thyPlacement = input('bottomLeft');
+        /**
+         * 展示的日期格式，支持 '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' });
         /**
          * 小时间隔步长
          * @type number
          */
-        this.thyHourStep = 1;
+        this.thyHourStep = input(1);
         /**
          * 分钟间隔步长
          * @type number
          */
-        this.thyMinuteStep = 1;
+        this.thyMinuteStep = input(1);
         /**
          * 秒间隔步长
          * @type number
          */
-        this.thySecondStep = 1;
+        this.thySecondStep = input(1);
+        /**
+         * 弹出层组件 class
+         * @type string
+         */
+        this.thyPopupClass = input();
+        /**
+         * 是否显示弹出层遮罩
+         * @type boolean
+         * @default false
+         */
+        this.thyBackdrop = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 禁用
+         * @type boolean
+         * @default false
+         */
+        this.thyDisabled = model(false);
+        /**
+         * 只读
+         * @type boolean
+         * @default false
+         */
+        this.thyReadonly = input(false, { transform: coerceBooleanProperty });
         /**
          * 展示选择此刻
          * @type boolean
          */
-        this.thyShowSelectNow = true;
+        this.thyShowSelectNow = input(true, { transform: coerceBooleanProperty });
         /**
          * 可清空值
          * @type boolean
          */
-        this.thyAllowClear = true;
+        this.thyAllowClear = input(true, { transform: coerceBooleanProperty });
         /**
          * 打开/关闭弹窗事件
          * @type EventEmitter<boolean>
          */
-        this.thyOpenChange = new EventEmitter();
+        this.thyOpenChange = output();
         this.prefixCls = 'thy-time-picker';
-        this.overlayPositions = getFlexiblePositions(this.thyPlacement, 4);
-        this.format = 'HH:mm:ss';
-        this.showText = '';
+        this.overlayPositions = getFlexiblePositions(this.thyPlacement(), 4);
+        this.showText = model('');
         this.value = new TinyDate().setHms(0, 0, 0).nativeDate;
         this.isDisabledFirstChange = true;
         this.onValueChangeFn = () => void 0;
         this.onTouchedFn = () => void 0;
-    }
-    /**
-     * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
-     * @type string
-     * @default HH:mm:ss
-     */
-    set thyFormat(value) {
-        this.format = value || 'HH:mm:ss';
-        if (this.value && isValid(this.value)) {
-            this.showText = new TinyDate(this.value).format(this.format);
-        }
-    }
-    /**
-     * 禁用
-     * @type boolean
-     * @default false
-     */
-    set thyDisabled(value) {
-        this.disabled = value;
-    }
-    get thyDisabled() {
-        return this.disabled;
+        effect(() => {
+            if (this.thyFormat() && this.value && isValid(this.value)) {
+                this.showText.set(new TinyDate(this.value).format(this.thyFormat()));
+            }
+        });
     }
     ngOnInit() { }
     ngAfterViewInit() {
-        this.overlayPositions = getFlexiblePositions(this.thyPlacement, 4);
+        this.overlayPositions = getFlexiblePositions(this.thyPlacement(), 4);
     }
     onInputPickerClick() {
         if (this.disabledUserOperation()) {
@@ -1064,14 +1079,15 @@ class ThyTimePicker {
     onOutsideClick(event) {
         if (this.openState &&
             !this.elementRef.nativeElement.contains(event.target) &&
-            !this.overlayContainer.nativeElement.contains(event.target)) {
+            !this.overlayContainer().nativeElement.contains(event.target)) {
             this.closeOverlay();
             this.cdr.detectChanges();
         }
     }
     onOverlayAttach() {
-        if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
-            this.cdkConnectedOverlay.overlayRef.updatePosition();
+        const cdkConnectedOverlay = this.cdkConnectedOverlay();
+        if (cdkConnectedOverlay && cdkConnectedOverlay.overlayRef) {
+            cdkConnectedOverlay.overlayRef.updatePosition();
         }
     }
     openOverlay() {
@@ -1087,16 +1103,16 @@ class ThyTimePicker {
             this.keepFocus = false;
             this.openState = false;
             this.blur();
-            if (this.showText?.length) {
-                if (!this.validateCustomizeInput(this.showText)) {
+            if (this.showText()?.length) {
+                if (!this.validateCustomizeInput(this.showText())) {
                     this.setValue(this.originValue);
                 }
                 else {
-                    this.showText = new TinyDate(this.value).format(this.format);
+                    this.showText.set(new TinyDate(this.value).format(this.thyFormat()));
                 }
             }
             else {
-                if (!this.thyAllowClear) {
+                if (!this.thyAllowClear()) {
                     this.setValue(this.originValue);
                 }
             }
@@ -1104,13 +1120,15 @@ class ThyTimePicker {
         }
     }
     focus() {
-        if (this.inputRef) {
-            this.inputRef.nativeElement.focus();
+        const inputRef = this.inputRef();
+        if (inputRef) {
+            inputRef.nativeElement.focus();
         }
     }
     blur() {
-        if (this.inputRef) {
-            this.inputRef.nativeElement.blur();
+        const inputRef = this.inputRef();
+        if (inputRef) {
+            inputRef.nativeElement.blur();
         }
     }
     writeValue(value) {
@@ -1129,19 +1147,19 @@ class ThyTimePicker {
         this.onTouchedFn = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
+        this.thyDisabled.set((this.isDisabledFirstChange && this.thyDisabled()) || isDisabled);
         this.isDisabledFirstChange = false;
     }
     setValue(value, formatText = true) {
         if (value && isValid(value)) {
             this.value = new TinyDate(value)?.nativeDate;
             if (formatText) {
-                this.showText = new TinyDate(this.value).format(this.format);
+                this.showText.set(new TinyDate(this.value).format(this.thyFormat()));
             }
         }
         else {
             this.value = null;
-            this.showText = '';
+            this.showText.set('');
         }
         this.cdr.markForCheck();
     }
@@ -1174,24 +1192,24 @@ class ThyTimePicker {
             }
         }
         else {
-            if (this.thyAllowClear) {
+            if (this.thyAllowClear()) {
                 this.originValue = null;
                 this.setValue(null);
                 this.emitValue();
             }
             else {
                 this.value = new TinyDate(this.originValue)?.nativeDate;
-                this.showText = ``;
+                this.showText.set('');
                 this.cdr.markForCheck();
             }
         }
     }
     validateCustomizeInput(value) {
         let valid = false;
-        if (value.length > this.format.length) {
+        if (value.length > this.thyFormat().length) {
             return valid;
         }
-        const formatRule = this.format.split(':');
+        const formatRule = this.thyFormat().split(':');
         const formatter = value.split(':');
         valid = !formatRule
             .map((m, i) => {
@@ -1201,16 +1219,16 @@ class ThyTimePicker {
         return valid;
     }
     disabledUserOperation() {
-        return this.disabled || this.thyReadonly;
+        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: "thySize", thyPlaceholder: "thyPlaceholder", thyPlacement: "thyPlacement", thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyPopupClass: "thyPopupClass", thyBackdrop: ["thyBackdrop", "thyBackdrop", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyReadonly: ["thyReadonly", "thyReadonly", coerceBooleanProperty], thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, outputs: { thyOpenChange: "thyOpenChange" }, host: { properties: { "class.thy-time-picker-disabled": "disabled", "class.thy-time-picker-readonly": "thyReadonly" }, classAttribute: "thy-time-picker" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyTimePicker)
             }
-        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: 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]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\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 (!disabled && thyAllowClear && !thyReadonly && showText) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" 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]=\"format\"\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 }); }
+        ], 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: [{
             type: Component,
@@ -1222,55 +1240,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ], host: {
                         class: 'thy-time-picker',
-                        '[class.thy-time-picker-disabled]': `disabled`,
-                        '[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]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\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 (!disabled && thyAllowClear && !thyReadonly && showText) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" 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]=\"format\"\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" }]
-        }], propDecorators: { cdkConnectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: true }]
-            }], origin: [{
-                type: ViewChild,
-                args: ['origin', { static: true }]
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['pickerInput', { static: true }]
-            }], overlayContainer: [{
-                type: ViewChild,
-                args: ['overlayContainer', { static: false }]
-            }], thySize: [{
-                type: Input
-            }], thyPlaceholder: [{
-                type: Input
-            }], thyPlacement: [{
-                type: Input
-            }], thyFormat: [{
-                type: Input
-            }], thyHourStep: [{
-                type: Input
-            }], thyMinuteStep: [{
-                type: Input
-            }], thySecondStep: [{
-                type: Input
-            }], thyPopupClass: [{
-                type: Input
-            }], thyBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyReadonly: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowSelectNow: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOpenChange: [{
-                type: Output
-            }] } });
+                        '[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: () => [] });
 
 const COMPONENTS = [ThyInnerTimePicker, ThyTimePicker, ThyTimePanel];
 class ThyTimePickerModule {