@ng-nest/ui 17.0.11 → 18.0.0

package/fesm2022/ng-nest-ui-time-picker.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, Renderer2, ElementRef, ViewContainerRef, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XWithConfig, XInputBoolean, XInputNumber, XDataConvert, XIsChange, XIsFunction, XIsEmpty, XIsNull, reqAnimFrame, XIsNumber, XConnectBaseAnimation, XIsDate, XIsString, XClearClass, XParents } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
-import { Subject, fromEvent } from 'rxjs';
-import { map, takeUntil, filter } from 'rxjs/operators';
-import { XI18nService } from '@ng-nest/ui/i18n';
+import { input, model, output, Component, inject, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ElementRef, ViewContainerRef, effect, NgModule } from '@angular/core';
+import { XToBoolean, XToNumber, XToCssPixelValue, XIsChange, XIsFunction, XIsEmpty, XIsNull, XRequestAnimationFrame, XIsNumber, XConnectBaseAnimation, XIsString, XIsDate, XParents } from '@ng-nest/ui/core';
+import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
+import { map, filter, takeUntil } from 'rxjs/operators';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
 import { XListComponent } from '@ng-nest/ui/list';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
+import { Subject, fromEvent } from 'rxjs';
 import { XInputComponent } from '@ng-nest/ui/input';
-import { DOCUMENT, DatePipe } from '@angular/common';
+import { DatePipe, DOCUMENT } from '@angular/common';
 import { Overlay } from '@angular/cdk/overlay';
 
 /**
@@ -21,92 +21,181 @@ import { Overlay } from '@angular/cdk/overlay';
  * @decorator component
  */
 const XTimePickerPrefix = 'x-time-picker';
-const X_CONFIG_NAME = 'timePicker';
+const X_TIME_PICKER_CONFIG_NAME = 'timePicker';
 /**
  * TimePicker Property
  */
-class XTimePickerProperty extends XControlValueAccessor {
+class XTimePickerProperty extends XFormControlFunction(X_TIME_PICKER_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 时间类型
          * @en_US Time type
          */
-        this.type = 'time';
+        this.type = input('time');
+        /**
+         * @zh_CN 格式化
+         * @en_US Format
+         */
+        this.format = input(this.config?.format ?? 'HH:mm:ss');
+        /**
+         * @zh_CN 展示方位
+         * @en_US Display position
+         */
+        this.placement = input(this.config?.placement ?? 'bottom-start');
+        /**
+         * @zh_CN 使用12小时制
+         * @en_US Use 12 hour clock
+         */
+        this.use12Hours = input(this.config?.use12Hours ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示边框
+         * @en_US Display Border
+         */
+        this.bordered = input(this.config?.bordered ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 小时选项间隔
+         * @en_US Hour option interval
+         */
+        this.hourStep = input(this.config?.hourStep ?? 1, { transform: XToNumber });
+        /**
+         * @zh_CN 分钟选项间隔
+         * @en_US Minute option interval
+         */
+        this.minuteStep = input(this.config?.minuteStep ?? 1, { transform: XToNumber });
+        /**
+         * @zh_CN 秒选项间隔
+         * @en_US Second option interval
+         */
+        this.secondStep = input(this.config?.secondStep ?? 1, { transform: XToNumber });
         /**
          * @zh_CN 快捷选择按钮，支持此刻以及自定义
          * @en_US Quick selection button, support now and custom
          */
-        this.preset = [];
+        this.preset = input([]);
+        /**
+         * @zh_CN 禁用的时间
+         * @en_US Disabled time
+         */
+        this.disabledTime = input();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 输入框点击样式
+         * @en_US Input pointer
+         */
+        this.pointer = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 初始启用验证，在输入值都自动开启
+         * @en_US Initial enable validation, which is automatically enabled when the input value is
+         */
+        this.validator = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 标签
+         * @en_US Label
+         */
+        this.label = input('');
+        /**
+         * @zh_CN 标签宽度
+         * @en_US Label width
+         */
+        this.labelWidth = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 标签文字对齐方式
+         * @en_US Label text alignment method
+         */
+        this.labelAlign = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素水平排列方式
+         * @en_US The level of sub-element level arrangement under flex layout
+         */
+        this.justify = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素垂直排列方式
+         * @en_US sub-element vertical arrangement method under flex layout
+         */
+        this.align = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素排列方向
+         * @en_US The direction of the sub-element arrangement under flex layout
+         */
+        this.direction = input('column');
+        /**
+         * @zh_CN 输入提示信息
+         * @en_US Enter prompt information
+         */
+        this.placeholder = input('');
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 必填
+         * @en_US Required
+         */
+        this.required = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 只读
+         * @en_US Readonly
+         */
+        this.readonly = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 值模板
+         * @en_US Node template
+         */
+        this.valueTpl = input();
+        /**
+         * @zh_CN 值模板参数
+         * @en_US Node template
+         */
+        this.valueTplContext = input();
+        /**
+         * @zh_CN 前置标签
+         * @en_US Before label
+         */
+        this.before = input();
+        /**
+         * @zh_CN 后置标签
+         * @en_US After label
+         */
+        this.after = input();
+        /**
+         * @zh_CN 正则验证规则
+         * @en_US Regular verification rules
+         */
+        this.pattern = input(null);
+        /**
+         * @zh_CN 验证不通过提示文字
+         * @en_US Verify not pass the prompt text
+         */
+        this.message = input([]);
+        /**
+         * @zh_CN 激活状态
+         * @en_US Activation state
+         */
+        this.active = model(false);
+        /**
+         * @zh_CN 输入验证函数
+         * @en_US Enter the verification function
+         */
+        this.inputValidator = input();
         /**
          * @zh_CN 节点点击的事件
          * @en_US Node click event
          */
-        this.nodeEmit = new EventEmitter();
+        this.nodeEmit = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTimePickerProperty, selector: "x-time-picker-property", inputs: { type: "type", format: "format", placement: "placement", size: "size", use12Hours: "use12Hours", bordered: "bordered", hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", preset: "preset", disabledTime: "disabledTime" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTimePickerProperty, selector: "x-time-picker-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, use12Hours: { classPropertyName: "use12Hours", publicName: "use12Hours", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'HH:mm:ss')
-], XTimePickerProperty.prototype, "format", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'bottom-start')
-], XTimePickerProperty.prototype, "placement", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XTimePickerProperty.prototype, "size", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, false)
-], XTimePickerProperty.prototype, "use12Hours", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, true)
-], XTimePickerProperty.prototype, "bordered", void 0);
-__decorate([
-    XInputNumber(),
-    XWithConfig(X_CONFIG_NAME, 1)
-], XTimePickerProperty.prototype, "hourStep", void 0);
-__decorate([
-    XInputNumber(),
-    XWithConfig(X_CONFIG_NAME, 1)
-], XTimePickerProperty.prototype, "minuteStep", void 0);
-__decorate([
-    XInputNumber(),
-    XWithConfig(X_CONFIG_NAME, 1)
-], XTimePickerProperty.prototype, "secondStep", void 0);
-__decorate([
-    XDataConvert()
-], XTimePickerProperty.prototype, "preset", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTimePickerPrefix}-property`, template: '' }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], use12Hours: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], hourStep: [{
-                type: Input
-            }], minuteStep: [{
-                type: Input
-            }], secondStep: [{
-                type: Input
-            }], preset: [{
-                type: Input
-            }], disabledTime: [{
-                type: Input
-            }], nodeEmit: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * TimePickerPortal
  * @selector x-time-picker-portal
@@ -122,58 +211,100 @@ const XTimePickerFramePrefix = 'x-time-picker-frame';
 
 class XTimePickerFrameComponent {
     constructor() {
-        this.type = 'time';
-        this.hourStep = 1;
-        this.minuteStep = 1;
-        this.secondStep = 1;
-        this.defaultNow = true;
-        this.nodeEmit = new EventEmitter();
-        this.use12Hour = 'am';
-        this.scrollAnimating = {};
-        this.hourData = [];
-        this.minuteData = [];
-        this.secondData = [];
-        this.use12HoursData = [];
-        this.locale = {};
-        this.isInit = false;
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
         this.i18n = inject(XI18nService);
+        this.type = input('time');
+        this.value = input();
+        this.use12Hours = input(false);
+        this.hourStep = input(1);
+        this.minuteStep = input(1);
+        this.secondStep = input(1);
+        this.defaultNow = input(true);
+        this.disabledTime = input();
+        this.disabledTimeParam = input();
+        this.nodeEmit = output();
+        this.hourRef = viewChild.required('hourRef');
+        this.minuteRef = viewChild('minuteRef');
+        this.secondRef = viewChild('secondRef');
+        this.use12HoursRef = viewChild('use12HoursRef');
+        this.model = signal(null);
+        this.hour = signal(null);
+        this.minute = signal(null);
+        this.second = signal(null);
+        this.use12Hour = signal('am');
+        this.scrollAnimating = signal({});
+        this.hourData = computed(() => {
+            let length = this.use12Hours() ? 12 : 24;
+            return Array.from({ length: Math.ceil(length / this.hourStep()) }).map((_, i) => {
+                if (this.use12Hours() && i === 0) {
+                    i = 12;
+                    return {
+                        disabled: this.setDisabled('hours', i),
+                        label: this.prefixZero(i, 2),
+                        id: i
+                    };
+                }
+                else {
+                    const num = i * this.hourStep();
+                    return {
+                        disabled: this.setDisabled('hours', num),
+                        label: this.prefixZero(num, 2),
+                        id: num
+                    };
+                }
+            });
+        });
+        this.minuteData = computed(() => {
+            return Array.from({ length: Math.ceil(60 / this.minuteStep()) }).map((_, i) => {
+                const num = i * this.minuteStep();
+                return {
+                    disabled: this.setDisabled('minutes', num),
+                    label: this.prefixZero(num, 2),
+                    id: num
+                };
+            });
+        });
+        this.secondData = computed(() => {
+            return Array.from({ length: Math.ceil(60 / this.secondStep()) }).map((_, i) => {
+                const num = i * this.secondStep();
+                return {
+                    disabled: this.setDisabled('seconds', num),
+                    label: this.prefixZero(num, 2),
+                    id: num
+                };
+            });
+        });
+        this.use12HoursData = computed(() => {
+            return [
+                {
+                    id: 'am',
+                    label: this.locale().am
+                },
+                {
+                    id: 'pm',
+                    label: this.locale().pm
+                }
+            ];
+        });
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.timePicker)), {
+            initialValue: zh_CN.timePicker
+        });
     }
     ngOnChanges(changes) {
-        const { value, disabledTimeParam } = changes;
+        const { value } = changes;
         if (XIsChange(value)) {
-            // this.setDataInit();
             this.init();
             this.setScrollTop(true);
         }
-        XIsChange(disabledTimeParam) && this.setDataInit();
     }
     ngOnInit() {
-        this.setDataInit();
         this.init();
-        this.i18n.localeChange
-            .pipe(map((x) => x.timePicker), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            if (this.use12Hours) {
-                this.setUse12HoursData();
-            }
-            this.cdr.markForCheck();
-        });
     }
     ngAfterViewInit() {
         this.setScrollTop();
     }
-    setDataInit() {
-        this.setHourData();
-        this.setMinuteData();
-        this.setSecondData();
-        this.setUse12HoursData();
-    }
     setDisabled(type, num) {
-        if (this.disabledTime && XIsFunction(this.disabledTime)) {
-            const disabledMap = this.disabledTime(this.disabledTimeParam);
+        if (this.disabledTime() && XIsFunction(this.disabledTime())) {
+            const disabledMap = this.disabledTime()(this.disabledTimeParam());
             const { disabledHours, disabledMinutes, disabledSeconds } = disabledMap;
             let disabledNums = [];
             if (type === 'hours') {
@@ -189,78 +320,21 @@ class XTimePickerFrameComponent {
         }
         return false;
     }
-    setHourData() {
-        let length = this.use12Hours ? 12 : 24;
-        this.hourData = Array.from({ length: Math.ceil(length / this.hourStep) }).map((_, i) => {
-            if (this.use12Hours && i === 0) {
-                i = 12;
-                return {
-                    disabled: this.setDisabled('hours', i),
-                    label: this.prefixZero(i, 2),
-                    id: i
-                };
-            }
-            else {
-                const num = i * this.hourStep;
-                return {
-                    disabled: this.setDisabled('hours', num),
-                    label: this.prefixZero(num, 2),
-                    id: num
-                };
-            }
-        });
-    }
-    setMinuteData() {
-        this.minuteData = Array.from({ length: Math.ceil(60 / this.minuteStep) }).map((_, i) => {
-            const num = i * this.minuteStep;
-            return {
-                disabled: this.setDisabled('minutes', num),
-                label: this.prefixZero(num, 2),
-                id: num
-            };
-        });
-    }
-    setSecondData() {
-        this.secondData = Array.from({ length: Math.ceil(60 / this.secondStep) }).map((_, i) => {
-            const num = i * this.secondStep;
-            return {
-                disabled: this.setDisabled('seconds', num),
-                label: this.prefixZero(num, 2),
-                id: num
-            };
-        });
-    }
-    setUse12HoursData() {
-        this.use12HoursData = [
-            {
-                id: 'am',
-                label: this.locale.am
-            },
-            {
-                id: 'pm',
-                label: this.locale.pm
-            }
-        ];
-    }
     init() {
-        if (!XIsEmpty(this.value)) {
-            this.setDefault();
-            this.setTime(this.model);
+        if (!XIsEmpty(this.value())) {
+            this.model.set(new Date(this.value()));
+            this.setTime(this.model());
         }
         else {
-            if (this.defaultNow) {
-                this.model = this.setNow();
+            if (this.defaultNow()) {
+                this.model.set(this.setNow());
             }
             else {
-                this.hour = null;
-                this.minute = null;
-                this.second = null;
+                this.hour.set(null);
+                this.minute.set(null);
+                this.second.set(null);
             }
         }
-        this.cdr.detectChanges();
-    }
-    setDefault() {
-        this.model = new Date(this.value);
     }
     setNow() {
         const def = new Date('1970-01-01');
@@ -272,63 +346,63 @@ class XTimePickerFrameComponent {
         return new Date(def.getFullYear(), def.getMonth(), def.getDate(), 0, 0, 0);
     }
     setTime(date) {
-        if (this.use12Hours) {
+        if (this.use12Hours()) {
             let hour = date.getHours();
             if (hour > 12) {
-                this.hour = hour - 12;
-                this.use12Hour = 'pm';
+                this.hour.set(hour - 12);
+                this.use12Hour.set('pm');
             }
             else if (hour === 12) {
-                this.hour = 12;
-                this.use12Hour = 'pm';
+                this.hour.set(12);
+                this.use12Hour.set('pm');
             }
             else {
-                this.hour = hour === 0 ? 12 : hour;
-                this.use12Hour = 'am';
+                this.hour.set(hour === 0 ? 12 : hour);
+                this.use12Hour.set('am');
             }
         }
         else {
-            this.hour = date.getHours();
+            this.hour.set(date.getHours());
         }
-        this.minute = date.getMinutes();
-        this.second = date.getSeconds();
+        this.minute.set(date.getMinutes());
+        this.second.set(date.getSeconds());
     }
     prefixZero(num, n) {
         return (Array(n).join('0') + num).slice(-n);
     }
     setScrollTop(animating = false) {
-        this.selected('hour', this.hourRef?.nativeElement, this.hour, animating);
-        this.selected('minute', this.minuteRef?.nativeElement, this.minute, animating);
-        this.selected('second', this.secondRef?.nativeElement, this.second, animating);
-        this.selected('use12Hour', this.use12HoursRef?.nativeElement, this.use12Hour, animating);
+        this.selected('hour', this.hourRef().nativeElement, this.hour(), animating);
+        this.selected('minute', this.minuteRef()?.nativeElement, this.minute(), animating);
+        this.selected('second', this.secondRef()?.nativeElement, this.second(), animating);
+        this.selected('use12Hour', this.use12HoursRef()?.nativeElement, this.use12Hour(), animating);
     }
     selected(type, ele, num, animating = false) {
         if (!ele || XIsNull(num))
             return;
-        if (this.scrollAnimating[ele.className])
+        if (this.scrollAnimating()[ele.className])
             return;
         let len = Number(num);
         switch (type) {
             case 'hour':
-                len = this.hourData.findIndex((x) => x.id === num);
+                len = this.hourData().findIndex((x) => x.id === num);
                 break;
             case 'minute':
-                len = this.minuteData.findIndex((x) => x.id === num);
+                len = this.minuteData().findIndex((x) => x.id === num);
                 break;
             case 'second':
-                len = this.secondData.findIndex((x) => x.id === num);
+                len = this.secondData().findIndex((x) => x.id === num);
                 break;
             case 'use12Hour':
-                len = this.use12HoursData.findIndex((x) => x.id === num);
+                len = this.use12HoursData().findIndex((x) => x.id === num);
                 break;
         }
-        let current = ele.querySelector(`.x-list x-list-option:nth-child(${len + 1})`);
+        const current = ele.querySelector(`.x-list x-list-option:nth-child(${len + 1})`);
         if (current) {
             if (animating) {
-                this.scrollTo(ele, current.offsetTop, 120);
+                this.scrollTo(ele, current.offsetTop - 4, 120);
             }
             else {
-                ele.scrollTop = current.offsetTop;
+                ele.scrollTop = current.offsetTop - 4;
             }
         }
     }
@@ -336,60 +410,92 @@ class XTimePickerFrameComponent {
         return data.indexOf(item) === data.length - 1;
     }
     itemClick(type) {
-        if (XIsEmpty(this.model)) {
-            this.model = this.setZero();
+        if (XIsEmpty(this.model())) {
+            this.model.set(this.setZero());
         }
         switch (type) {
             case 'minute':
-                this.model.setMinutes(this.minute);
+                this.model.update((x) => {
+                    x.setMinutes(this.minute());
+                    return x;
+                });
                 break;
             case 'second':
-                this.model.setSeconds(this.second);
+                this.model.update((x) => {
+                    x.setSeconds(this.second());
+                    return x;
+                });
                 break;
             case 'hour':
-                if (this.use12Hours) {
-                    if (this.use12Hour === 'pm' && this.hour !== 12) {
-                        this.model.setHours(this.hour + 12);
+                if (this.use12Hours()) {
+                    if (this.use12Hour() === 'pm' && this.hour() !== 12) {
+                        this.model.update((x) => {
+                            x.setHours(this.hour() + 12);
+                            return x;
+                        });
                     }
-                    else if (this.use12Hour === 'am' && this.hour === 12) {
-                        this.model.setHours(0);
+                    else if (this.use12Hour() === 'am' && this.hour() === 12) {
+                        this.model.update((x) => {
+                            x.setHours(0);
+                            return x;
+                        });
                     }
                     else {
-                        this.model.setHours(this.hour);
+                        this.model.update((x) => {
+                            x.setHours(this.hour());
+                            return x;
+                        });
                     }
                 }
                 else {
-                    this.model.setHours(this.hour);
+                    this.model.update((x) => {
+                        x.setHours(this.hour());
+                        return x;
+                    });
                 }
                 break;
             case 'use12Hours':
-                if (this.use12Hour === 'pm' && this.hour !== 12) {
-                    this.model.setHours(this.hour + 12);
+                if (this.use12Hour() === 'pm' && this.hour() !== 12) {
+                    this.model.update((x) => {
+                        x.setHours(this.hour() + 12);
+                        return x;
+                    });
                 }
-                else if (this.use12Hour === 'am' && this.hour === 12) {
-                    this.model.setHours(0);
+                else if (this.use12Hour() === 'am' && this.hour() === 12) {
+                    this.model.update((x) => {
+                        x.setHours(0);
+                        return x;
+                    });
                 }
                 else {
-                    this.model.setHours(this.hour);
+                    this.model.update((x) => {
+                        x.setHours(this.hour());
+                        return x;
+                    });
                 }
                 break;
         }
         this.setScrollTop(true);
-        this.nodeEmit.emit(this.model);
-        this.cdr.detectChanges();
+        this.nodeEmit.emit(this.model());
     }
     scrollTo(element, to, duration) {
         const clsName = element.className;
         const difference = to - element.scrollTop;
         const perTick = (difference / duration) * 10;
-        this.scrollAnimating[clsName] = true;
-        reqAnimFrame(() => {
+        this.scrollAnimating.update((x) => {
+            x[clsName] = true;
+            return { ...x };
+        });
+        XRequestAnimationFrame(() => {
             const num = element.scrollTop + perTick;
             if (XIsNumber(num) && num !== Infinity) {
                 element.scrollTop = num;
             }
             if (element.scrollTop === to || duration <= 0) {
-                this.scrollAnimating[clsName] = false;
+                this.scrollAnimating.update((x) => {
+                    x[clsName] = false;
+                    return { ...x };
+                });
                 return;
             }
             else {
@@ -397,101 +503,62 @@ class XTimePickerFrameComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTimePickerFrameComponent, isStandalone: true, selector: "x-time-picker-frame", inputs: { type: "type", value: "value", use12Hours: "use12Hours", hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", defaultNow: "defaultNow", disabledTime: "disabledTime", disabledTimeParam: "disabledTimeParam" }, outputs: { nodeEmit: "nodeEmit" }, viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true }, { propertyName: "use12HoursRef", first: true, predicate: ["use12HoursRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"x-time-picker-frame\">\r\n  <div class=\"x-time-picker-frame-hour\" #hourRef>\r\n    <x-list [data]=\"hourData\" [(ngModel)]=\"hour\" (nodeClick)=\"itemClick('hour')\"></x-list>\r\n  </div>\r\n  @if (type !== 'hour') {\r\n    <div class=\"x-time-picker-frame-minute\" #minuteRef>\r\n      <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (type === 'time') {\r\n    <div class=\"x-time-picker-frame-second\" #secondRef>\r\n      <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (use12Hours) {\r\n    <div class=\"x-time-picker-frame-use12Hours\" #use12HoursRef>\r\n      <x-list [data]=\"use12HoursData\" [(ngModel)]=\"use12Hour\" (nodeClick)=\"itemClick('use12Hours')\"></x-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-frame{margin:0;padding:0;margin:.0625rem 0;display:block;height:100%}.x-time-picker-frame>div:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-time-picker-frame-hour,.x-time-picker-frame-minute,.x-time-picker-frame-second,.x-time-picker-frame-use12Hours{position:relative;float:left;overflow:hidden;width:3.625rem;max-height:15rem;padding-bottom:calc(var(--x-border-width) * 2 + 13.125rem)}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second:hover,.x-time-picker-frame-use12Hours:hover{overflow-y:auto}.x-time-picker-frame-hour>x-list>.x-list,.x-time-picker-frame-minute>x-list>.x-list,.x-time-picker-frame-second>x-list>.x-list,.x-time-picker-frame-use12Hours>x-list>.x-list{width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option{padding-left:.6rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option:not(:first-child){margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTimePickerFrameComponent, isStandalone: true, selector: "x-time-picker-frame", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, use12Hours: { classPropertyName: "use12Hours", publicName: "use12Hours", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, defaultNow: { classPropertyName: "defaultNow", publicName: "defaultNow", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, disabledTimeParam: { classPropertyName: "disabledTimeParam", publicName: "disabledTimeParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeEmit: "nodeEmit" }, viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true, isSignal: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true, isSignal: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true, isSignal: true }, { propertyName: "use12HoursRef", first: true, predicate: ["use12HoursRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"x-time-picker-frame\">\r\n  <div class=\"x-time-picker-frame-hour\" #hourRef>\r\n    <x-list [data]=\"hourData()\" [(ngModel)]=\"hour\" (nodeClick)=\"itemClick('hour')\"></x-list>\r\n  </div>\r\n  @if (type() !== 'hour') {\r\n    <div class=\"x-time-picker-frame-minute\" #minuteRef>\r\n      <x-list [data]=\"minuteData()\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (type() === 'time') {\r\n    <div class=\"x-time-picker-frame-second\" #secondRef>\r\n      <x-list [data]=\"secondData()\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (use12Hours()) {\r\n    <div class=\"x-time-picker-frame-use12Hours\" #use12HoursRef>\r\n      <x-list [data]=\"use12HoursData()\" [(ngModel)]=\"use12Hour\" (nodeClick)=\"itemClick('use12Hours')\"></x-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-frame{margin:0;padding:0;display:block;height:100%}.x-time-picker-frame>div{width:4.25rem;max-height:16rem;padding-bottom:13.5rem;padding:.25rem .25rem 13.75rem}.x-time-picker-frame>div:first-child{width:4.125rem}.x-time-picker-frame>div:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-time-picker-frame-hour,.x-time-picker-frame-minute,.x-time-picker-frame-second,.x-time-picker-frame-use12Hours{position:relative;float:left;overflow:hidden}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second:hover,.x-time-picker-frame-use12Hours:hover{overflow-y:auto}.x-time-picker-frame-hour>x-list>.x-list,.x-time-picker-frame-minute>x-list>.x-list,.x-time-picker-frame-second>x-list>.x-list,.x-time-picker-frame-use12Hours>x-list>.x-list{width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option{padding-left:.6rem;border-radius:0}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option:not(:first-child){margin-top:0}.x-time-picker-frame-use12Hours{width:4.5rem}.x-time-picker-frame-use12Hours>x-list>.x-list{width:4.5rem}.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:4.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerFramePrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-time-picker-frame\">\r\n  <div class=\"x-time-picker-frame-hour\" #hourRef>\r\n    <x-list [data]=\"hourData\" [(ngModel)]=\"hour\" (nodeClick)=\"itemClick('hour')\"></x-list>\r\n  </div>\r\n  @if (type !== 'hour') {\r\n    <div class=\"x-time-picker-frame-minute\" #minuteRef>\r\n      <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (type === 'time') {\r\n    <div class=\"x-time-picker-frame-second\" #secondRef>\r\n      <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (use12Hours) {\r\n    <div class=\"x-time-picker-frame-use12Hours\" #use12HoursRef>\r\n      <x-list [data]=\"use12HoursData\" [(ngModel)]=\"use12Hour\" (nodeClick)=\"itemClick('use12Hours')\"></x-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-frame{margin:0;padding:0;margin:.0625rem 0;display:block;height:100%}.x-time-picker-frame>div:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-time-picker-frame-hour,.x-time-picker-frame-minute,.x-time-picker-frame-second,.x-time-picker-frame-use12Hours{position:relative;float:left;overflow:hidden;width:3.625rem;max-height:15rem;padding-bottom:calc(var(--x-border-width) * 2 + 13.125rem)}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second:hover,.x-time-picker-frame-use12Hours:hover{overflow-y:auto}.x-time-picker-frame-hour>x-list>.x-list,.x-time-picker-frame-minute>x-list>.x-list,.x-time-picker-frame-second>x-list>.x-list,.x-time-picker-frame-use12Hours>x-list>.x-list{width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option{padding-left:.6rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option:not(:first-child){margin-top:0}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], use12Hours: [{
-                type: Input
-            }], hourStep: [{
-                type: Input
-            }], minuteStep: [{
-                type: Input
-            }], secondStep: [{
-                type: Input
-            }], defaultNow: [{
-                type: Input
-            }], disabledTime: [{
-                type: Input
-            }], disabledTimeParam: [{
-                type: Input
-            }], nodeEmit: [{
-                type: Output
-            }], hourRef: [{
-                type: ViewChild,
-                args: ['hourRef']
-            }], minuteRef: [{
-                type: ViewChild,
-                args: ['minuteRef']
-            }], secondRef: [{
-                type: ViewChild,
-                args: ['secondRef']
-            }], use12HoursRef: [{
-                type: ViewChild,
-                args: ['use12HoursRef']
-            }] } });
+            args: [{ selector: `${XTimePickerFramePrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-time-picker-frame\">\r\n  <div class=\"x-time-picker-frame-hour\" #hourRef>\r\n    <x-list [data]=\"hourData()\" [(ngModel)]=\"hour\" (nodeClick)=\"itemClick('hour')\"></x-list>\r\n  </div>\r\n  @if (type() !== 'hour') {\r\n    <div class=\"x-time-picker-frame-minute\" #minuteRef>\r\n      <x-list [data]=\"minuteData()\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (type() === 'time') {\r\n    <div class=\"x-time-picker-frame-second\" #secondRef>\r\n      <x-list [data]=\"secondData()\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n    </div>\r\n  }\r\n  @if (use12Hours()) {\r\n    <div class=\"x-time-picker-frame-use12Hours\" #use12HoursRef>\r\n      <x-list [data]=\"use12HoursData()\" [(ngModel)]=\"use12Hour\" (nodeClick)=\"itemClick('use12Hours')\"></x-list>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-frame{margin:0;padding:0;display:block;height:100%}.x-time-picker-frame>div{width:4.25rem;max-height:16rem;padding-bottom:13.5rem;padding:.25rem .25rem 13.75rem}.x-time-picker-frame>div:first-child{width:4.125rem}.x-time-picker-frame>div:not(:first-child){border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-time-picker-frame-hour,.x-time-picker-frame-minute,.x-time-picker-frame-second,.x-time-picker-frame-use12Hours{position:relative;float:left;overflow:hidden}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second:hover,.x-time-picker-frame-use12Hours:hover{overflow-y:auto}.x-time-picker-frame-hour>x-list>.x-list,.x-time-picker-frame-minute>x-list>.x-list,.x-time-picker-frame-second>x-list>.x-list,.x-time-picker-frame-use12Hours>x-list>.x-list{width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:3.625rem}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option,.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option{padding-left:.6rem;border-radius:0}.x-time-picker-frame-hour>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-minute>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-second>x-list>.x-list>x-list-option>.x-list-option:not(:first-child),.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option>.x-list-option:not(:first-child){margin-top:0}.x-time-picker-frame-use12Hours{width:4.5rem}.x-time-picker-frame-use12Hours>x-list>.x-list{width:4.5rem}.x-time-picker-frame-use12Hours>x-list>.x-list>x-list-option{min-width:4.5rem}\n"] }]
+        }] });
 
 class XTimePickerPortalComponent {
     constructor() {
-        this.type = 'time';
-        this.preset = [];
-        this.locale = {};
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
         this.i18n = inject(XI18nService);
+        this.value = model();
+        this.type = input('time');
+        this.placement = input();
+        this.inputCom = input();
+        this.use12Hours = input();
+        this.hourStep = input();
+        this.minuteStep = input();
+        this.secondStep = input();
+        this.preset = input([]);
+        this.disabledTime = input();
+        this.animating = output();
+        this.nodeClick = output();
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.timePicker)), {
+            initialValue: zh_CN.timePicker
+        });
     }
-    done(event) {
-        this.animating(false);
-        event.toState === 'void' && this.destroyPortal();
-    }
-    start() {
-        this.animating(true);
+    get getPlacement() {
+        return this.placement();
     }
-    ngOnInit() {
-        this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.value = x;
-        });
-        this.positionChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.placement = x;
-            this.cdr.detectChanges();
-        });
-        this.i18n.localeChange
-            .pipe(map((x) => x.timePicker), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
-        });
+    done(event) {
+        event.toState !== 'void' && this.animating.emit(false);
     }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
+    start(event) {
+        event.toState !== 'void' && this.animating.emit(true);
     }
     stopPropagation(event) {
         event.stopPropagation();
     }
     onPresetFunc(item) {
         let date = item.func();
-        this.valueChange.next(date);
-        this.nodeEmit(date);
+        this.value.set(date);
+        this.nodeClick.emit(date);
     }
     onNow() {
         let date = new Date();
-        this.valueChange.next(date);
-        this.nodeEmit(date);
+        this.value.set(date);
+        this.nodeClick.emit(date);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTimePickerPortalComponent, isStandalone: true, selector: "x-time-picker-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, ngImport: i0, template: "<div class=\"x-time-picker-portal\" (click)=\"inputCom.inputFocus(); stopPropagation($event)\">\r\n  <x-time-picker-frame\r\n    [type]=\"type\"\r\n    [value]=\"value\"\r\n    [use12Hours]=\"use12Hours\"\r\n    [hourStep]=\"hourStep\"\r\n    [minuteStep]=\"minuteStep\"\r\n    [secondStep]=\"secondStep\"\r\n    [disabledTime]=\"disabledTime\"\r\n    (nodeEmit)=\"nodeEmit($event)\"\r\n  ></x-time-picker-frame>\r\n  @if (preset) {\r\n    <div class=\"x-time-picker-portal-preset\">\r\n      @for (item of preset; track item) {\r\n        @if (!!item.func) {\r\n          <x-button type=\"text\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n        } @else if (!item.func && item.id === 'now') {\r\n          <x-button type=\"text\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:flex;flex-direction:column;height:100%;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);background-color:var(--x-background)}.x-time-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-time-picker-portal-preset>x-button{flex:1}\n"], dependencies: [{ kind: "component", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTimePickerPortalComponent, isStandalone: true, selector: "x-time-picker-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, use12Hours: { classPropertyName: "use12Hours", publicName: "use12Hours", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.getPlacement" } }, ngImport: i0, template: "<div class=\"x-time-picker-portal\" (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\">\r\n  <x-time-picker-frame\r\n    [type]=\"type()\"\r\n    [value]=\"value()\"\r\n    [use12Hours]=\"use12Hours()!\"\r\n    [hourStep]=\"hourStep()!\"\r\n    [minuteStep]=\"minuteStep()!\"\r\n    [secondStep]=\"secondStep()!\"\r\n    [disabledTime]=\"disabledTime()\"\r\n    (nodeEmit)=\"nodeClick.emit($event)\"\r\n  ></x-time-picker-frame>\r\n  @if (preset()) {\r\n    <div class=\"x-time-picker-portal-preset\">\r\n      @for (item of preset(); track item) {\r\n        @if (!!item.func) {\r\n          <x-button type=\"text\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n        } @else if (!item.func && item.id === 'now') {\r\n          <x-button type=\"text\" (click)=\"onNow()\">{{ locale().now }}</x-button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:flex;flex-direction:column;height:100%;font-size:var(--x-font-size);color:var(--x-text);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100)}.x-time-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-time-picker-portal-preset>x-button{flex:1}\n"], dependencies: [{ kind: "component", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerPortalPrefix}`, standalone: true, imports: [XTimePickerFrameComponent, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div class=\"x-time-picker-portal\" (click)=\"inputCom.inputFocus(); stopPropagation($event)\">\r\n  <x-time-picker-frame\r\n    [type]=\"type\"\r\n    [value]=\"value\"\r\n    [use12Hours]=\"use12Hours\"\r\n    [hourStep]=\"hourStep\"\r\n    [minuteStep]=\"minuteStep\"\r\n    [secondStep]=\"secondStep\"\r\n    [disabledTime]=\"disabledTime\"\r\n    (nodeEmit)=\"nodeEmit($event)\"\r\n  ></x-time-picker-frame>\r\n  @if (preset) {\r\n    <div class=\"x-time-picker-portal-preset\">\r\n      @for (item of preset; track item) {\r\n        @if (!!item.func) {\r\n          <x-button type=\"text\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n        } @else if (!item.func && item.id === 'now') {\r\n          <x-button type=\"text\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:flex;flex-direction:column;height:100%;font-size:var(--x-font-size);color:var(--x-text);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);background-color:var(--x-background)}.x-time-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-time-picker-portal-preset>x-button{flex:1}\n"] }]
-        }], propDecorators: { placement: [{
+            args: [{ selector: `${XTimePickerPortalPrefix}`, standalone: true, imports: [XTimePickerFrameComponent, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div class=\"x-time-picker-portal\" (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\">\r\n  <x-time-picker-frame\r\n    [type]=\"type()\"\r\n    [value]=\"value()\"\r\n    [use12Hours]=\"use12Hours()!\"\r\n    [hourStep]=\"hourStep()!\"\r\n    [minuteStep]=\"minuteStep()!\"\r\n    [secondStep]=\"secondStep()!\"\r\n    [disabledTime]=\"disabledTime()\"\r\n    (nodeEmit)=\"nodeClick.emit($event)\"\r\n  ></x-time-picker-frame>\r\n  @if (preset()) {\r\n    <div class=\"x-time-picker-portal-preset\">\r\n      @for (item of preset(); track item) {\r\n        @if (!!item.func) {\r\n          <x-button type=\"text\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n        } @else if (!item.func && item.id === 'now') {\r\n          <x-button type=\"text\" (click)=\"onNow()\">{{ locale().now }}</x-button>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:flex;flex-direction:column;height:100%;font-size:var(--x-font-size);color:var(--x-text);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100)}.x-time-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-time-picker-portal-preset>x-button{flex:1}\n"] }]
+        }], propDecorators: { getPlacement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
             }], done: [{
@@ -503,73 +570,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class XTimePickerComponent extends XTimePickerProperty {
-    constructor() {
-        super(...arguments);
-        this.readonly = true;
-        this.clearable = false;
-        this.enter = false;
-        this.animating = false;
-        this.displayValue = '';
-        this.icon = 'fto-clock';
-        this.maxNodes = 8;
-        this.protalTobottom = true;
-        this.valueChange = new Subject();
-        this.dataChange = new Subject();
-        this.positionChange = new Subject();
-        this.closeSubject = new Subject();
-        this.valueType = 'date';
-        this.locale = {};
-        this._unSubject = new Subject();
-        this.document = inject(DOCUMENT);
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.portalService = inject(XPortalService);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.datePipe = inject(DatePipe);
-        this.overlay = inject(Overlay);
-        this.i18n = inject(XI18nService);
-    }
     writeValue(value) {
-        if (XIsDate(value)) {
-            this.value = value.getTime();
-            this.valueType = 'date';
+        let valueType = 'date';
+        if (XIsEmpty(value)) {
+            value = '';
         }
         else if (XIsNumber(value)) {
-            this.value = value;
-            this.valueType = 'number';
+            valueType = 'number';
         }
         else if (XIsString(value)) {
-            this.value = new Date(value).getTime();
-            this.valueType = 'string';
-        }
-        else if (XIsEmpty(value)) {
-            this.value = '';
-        }
-        this.setDisplayValue(this.value);
-        this.valueChange.next(this.value);
-        this.cdr.detectChanges();
-    }
-    get getPlaceholder() {
-        if (this.placeholder)
-            return this.placeholder;
-        if (this.type === 'time') {
-            return this.locale.selectTime;
-        }
-        else if (this.type === 'hour') {
-            return this.locale.selectHour;
+            value = new Date(value).getTime();
+            valueType = 'string';
         }
-        else if (this.type === 'minute') {
-            return this.locale.selectMinute;
-        }
-        else {
-            return this.locale.selectTime;
+        else if (XIsDate(value)) {
+            value = value.getTime();
         }
+        this.value.set(value);
+        this.valueType.set(valueType);
+    }
+    constructor() {
+        super();
+        this.elementRef = inject(ElementRef);
+        this.portalService = inject(XPortalService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.datePipe = inject(DatePipe);
+        this.overlay = inject(Overlay);
+        this.i18n = inject(XI18nService);
+        this.datePicker = viewChild.required('datePicker');
+        this.inputCom = viewChild.required('inputCom');
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.timePicker)), {
+            initialValue: zh_CN.timePicker
+        });
+        this.displayValue = computed(() => {
+            const value = this.value();
+            if (!value)
+                return;
+            if (this.use12Hours()) {
+                let dt = new Date(value);
+                let hour = dt.getHours();
+                let suffix = hour >= 12 ? this.locale().pm : this.locale().am;
+                return `${this.datePipe.transform(dt.setHours(hour === 0 ? 12 : hour > 12 ? hour - 12 : hour), this.formatSignal())} ${suffix}`;
+            }
+            else {
+                return this.datePipe.transform(value, this.formatSignal());
+            }
+        });
+        this.formatSignal = computed(() => {
+            if (this.format() === 'HH:mm:ss') {
+                if (this.type() === 'hour') {
+                    return 'HH';
+                }
+                else if (this.type() === 'minute') {
+                    return 'HH:mm';
+                }
+            }
+            return this.format();
+        });
+        this.clearable = signal(false);
+        this.enter = signal(false);
+        this.animating = signal(false);
+        this.icon = signal('fto-clock');
+        this.closeSubject = new Subject();
+        this.valueType = signal('date');
+        this.unSubject = new Subject();
+        this.document = inject(DOCUMENT);
+        this.getPlaceholder = computed(() => {
+            if (this.placeholder())
+                return this.placeholder();
+            if (this.type() === 'time') {
+                return this.locale().selectTime;
+            }
+            else if (this.type() === 'hour') {
+                return this.locale().selectHour;
+            }
+            else if (this.type() === 'minute') {
+                return this.locale().selectMinute;
+            }
+            else {
+                return this.locale().selectTime;
+            }
+        });
+        this.realPlacement = signal(null);
+        this.portalComponent = signal(null);
+        this.portalOverlayRef = signal(null);
+        effect(() => this.portalComponent()?.setInput('value', this.value()));
+        effect(() => this.portalComponent()?.setInput('placement', this.realPlacement()));
+        effect(() => this.portalComponent()?.setInput('use12Hours', this.use12Hours()));
+        effect(() => this.portalComponent()?.setInput('type', this.type()));
+        effect(() => this.portalComponent()?.setInput('hourStep', this.hourStep()));
+        effect(() => this.portalComponent()?.setInput('minuteStep', this.minuteStep()));
+        effect(() => this.portalComponent()?.setInput('secondStep', this.secondStep()));
+        effect(() => this.portalComponent()?.setInput('preset', this.preset()));
+        effect(() => this.portalComponent()?.setInput('inputCom', this.inputCom()));
+        effect(() => this.portalComponent()?.setInput('disabledTime', this.disabledTime()));
     }
     ngOnInit() {
-        this.setFlex(this.datePicker.nativeElement, this.renderer, this.justify, this.align, this.direction);
-        this.setFormat();
-        this.setClassMap();
         this.setSubject();
         this.setParantScroll();
     }
@@ -577,22 +672,8 @@ class XTimePickerComponent extends XTimePickerProperty {
         this.setPortal();
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    setClassMap() {
-        XClearClass(this.labelMap);
-        this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
-    }
-    setFormat() {
-        if (this.format === 'HH:mm:ss') {
-            if (this.type === 'hour') {
-                this.format = 'HH';
-            }
-            else if (this.type === 'minute') {
-                this.format = 'HH:mm';
-            }
-        }
+        this.unSubject.next();
+        this.unSubject.complete();
     }
     setParantScroll() {
         if (!this.document)
@@ -607,9 +688,9 @@ class XTimePickerComponent extends XTimePickerProperty {
         }
         if (firstScroll && firstScroll.tagName !== 'BODY') {
             fromEvent(firstScroll, 'scroll')
-                .pipe(filter(() => this.portalAttached()), takeUntil(this._unSubject))
+                .pipe(filter(() => this.portalAttached()), takeUntil(this.unSubject))
                 .subscribe(() => {
-                this.portal?.overlayRef?.updatePosition();
+                this.portalOverlayRef()?.updatePosition();
                 const eract = this.elementRef.nativeElement.getBoundingClientRect();
                 const frect = firstScroll.getBoundingClientRect();
                 if (eract.top + eract.height - frect.top < 0 || eract.bottom > frect.bottom) {
@@ -619,66 +700,52 @@ class XTimePickerComponent extends XTimePickerProperty {
         }
     }
     setSubject() {
-        this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
+        this.closeSubject.pipe(takeUntil(this.unSubject)).subscribe(() => {
             this.closePortal();
         });
-        this.i18n.localeChange
-            .pipe(map((x) => x.timePicker), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            if (this.use12Hours) {
-                this.setDisplayValue(this.value);
-            }
-            this.cdr.markForCheck();
-        });
     }
     menter() {
-        if (this.disabled)
+        if (this.disabledComputed())
             return;
-        this.enter = true;
-        if (!XIsEmpty(this.value)) {
-            this.icon = '';
-            this.clearable = true;
-            this.cdr.detectChanges();
+        this.enter.set(true);
+        if (!XIsEmpty(this.value())) {
+            this.icon.set('');
+            this.clearable.set(true);
         }
     }
     mleave() {
-        if (this.disabled)
+        if (this.disabledComputed())
             return;
-        this.enter = false;
-        if (this.clearable) {
-            this.icon = 'fto-clock';
-            this.clearable = false;
-            this.cdr.detectChanges();
+        this.enter.set(false);
+        if (this.clearable()) {
+            this.icon.set('fto-clock');
+            this.clearable.set(false);
         }
     }
     clearEmit() {
-        this.value = '';
-        this.displayValue = '';
+        this.value.set('');
         this.mleave();
-        this.valueChange.next(this.value);
         if (this.onChange)
-            this.onChange(this.value);
+            this.onChange(this.value());
     }
     portalAttached() {
-        return this.portal?.overlayRef?.hasAttached();
+        return this.portalOverlayRef()?.hasAttached();
     }
     closePortal() {
         if (this.portalAttached()) {
-            this.portal?.overlayRef?.detach();
-            this.active = false;
-            this.cdr.detectChanges();
+            this.portalOverlayRef()?.detach();
+            this.active.set(false);
             return true;
         }
         return false;
     }
     destroyPortal() {
-        this.portal?.overlayRef?.dispose();
+        this.portalOverlayRef()?.dispose();
     }
     showPortal() {
-        if (this.disabled || this.animating)
+        if (this.disabledComputed() || this.animating())
             return;
-        this.active = true;
+        this.active.set(true);
         const config = {
             backdropClass: '',
             positionStrategy: this.setPlacement(),
@@ -692,7 +759,7 @@ class XTimePickerComponent extends XTimePickerProperty {
         });
         this.portal.overlayRef
             ?.outsidePointerEvents()
-            .pipe(takeUntil(this._unSubject))
+            .pipe(takeUntil(this.unSubject))
             .subscribe(() => {
             this.closeSubject.next();
         });
@@ -700,96 +767,64 @@ class XTimePickerComponent extends XTimePickerProperty {
     }
     setPosition(config) {
         let position = config.positionStrategy;
-        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+        position.positionChanges.pipe(takeUntil(this.unSubject)).subscribe((pos) => {
             const place = XPortalConnectedPosition.get(pos.connectionPair);
-            place !== this.placement && this.positionChange.next(place);
+            if (place !== this.realPlacement()) {
+                this.realPlacement.set(place);
+                this.portalOverlayRef()?.updatePosition();
+            }
         });
     }
     setInstance() {
-        let componentRef = this.portal?.componentRef;
-        if (!componentRef)
+        let { componentRef, overlayRef } = this.portal;
+        if (!componentRef || !overlayRef)
             return;
-        Object.assign(componentRef.instance, {
-            type: this.type,
-            value: this.value,
-            placement: this.placement,
-            valueChange: this.valueChange,
-            positionChange: this.positionChange,
-            inputCom: this.inputCom,
-            use12Hours: this.use12Hours,
-            hourStep: this.hourStep,
-            minuteStep: this.minuteStep,
-            secondStep: this.secondStep,
-            preset: this.preset,
-            disabledTime: this.disabledTime,
-            closePortal: () => this.closeSubject.next(),
-            destroyPortal: () => this.destroyPortal(),
-            nodeEmit: (node) => this.onNodeClick(node),
-            animating: (ing) => (this.animating = ing)
-        });
-        componentRef.changeDetectorRef.detectChanges();
+        this.portalComponent.set(componentRef);
+        this.portalOverlayRef.set(overlayRef);
+        this.realPlacement.set(this.placement());
+        const { nodeClick, animating } = componentRef.instance;
+        nodeClick.subscribe((node) => this.onNodeClick(node));
+        animating.subscribe((ing) => this.animating.set(ing));
     }
     onNodeClick(date) {
-        this.value = this.setValue(date);
-        this.setDisplayValue(date);
-        this.cdr.detectChanges();
+        this.value.set(this.setValue(date));
         if (this.onChange)
-            this.onChange(this.value);
+            this.onChange(this.value());
         this.formControlValidator();
-        this.nodeEmit.emit(this.value);
+        this.nodeEmit.emit(this.value());
     }
     setValue(value) {
-        return ['date', 'string'].includes(this.valueType) ? new Date(value) : value.getTime();
-    }
-    setDisplayValue(date) {
-        if (!date)
-            return;
-        if (this.use12Hours) {
-            let dt = new Date(date);
-            let hour = dt.getHours();
-            let suffix = hour >= 12 ? this.locale.pm : this.locale.am;
-            this.displayValue = `${this.datePipe.transform(dt.setHours(hour === 0 ? 12 : hour > 12 ? hour - 12 : hour), this.format)} ${suffix}`;
-        }
-        else {
-            this.displayValue = this.datePipe.transform(date, this.format);
-        }
+        return ['date', 'string'].includes(this.valueType()) ? new Date(value) : value.getTime();
     }
     setPlacement() {
         return this.portalService.setPlacement({
-            elementRef: this.inputCom.inputRef,
-            placement: [this.placement, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
+            elementRef: this.inputCom().inputRef(),
+            placement: [this.placement(), 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
             transformOriginOn: 'x-time-picker-portal'
         });
     }
     setPortal() {
         if (this.portalAttached()) {
-            this.portal.overlayRef?.updatePositionStrategy(this.setPlacement());
+            this.portalOverlayRef()?.updatePositionStrategy(this.setPlacement());
         }
     }
     formControlChanges() {
         this.ngOnInit();
-        this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XTimePickerComponent, isStandalone: true, selector: "x-time-picker", providers: [XValueAccessor(XTimePickerComponent), DatePipe], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, static: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #datePicker class=\"x-time-picker\">\r\n  <div class=\"x-time-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-time-picker{display:inline-block;width:12rem}.x-time-picker{margin:0;padding:0;width:100%}.x-time-picker x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XTimePickerComponent, isStandalone: true, selector: "x-time-picker", providers: [XValueAccessor(XTimePickerComponent), DatePipe], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, isSignal: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #datePicker class=\"x-time-picker\">\r\n  <div class=\"x-time-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"getPlaceholder()!\"\r\n      [readonly]=\"true\"\r\n      [clearable]=\"clearable()\"\r\n      [ngModel]=\"displayValue()\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-time-picker{display:inline-block;width:12rem}.x-time-picker{margin:0;padding:0;width:100%}.x-time-picker x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerPrefix}`, standalone: true, imports: [FormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTimePickerComponent), DatePipe], template: "<div #datePicker class=\"x-time-picker\">\r\n  <div class=\"x-time-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-time-picker{display:inline-block;width:12rem}.x-time-picker{margin:0;padding:0;width:100%}.x-time-picker x-input{width:100%}\n"] }]
-        }], propDecorators: { datePicker: [{
-                type: ViewChild,
-                args: ['datePicker', { static: true }]
-            }], inputCom: [{
-                type: ViewChild,
-                args: ['inputCom', { static: true }]
-            }] } });
+            args: [{ selector: `${XTimePickerPrefix}`, standalone: true, imports: [FormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTimePickerComponent), DatePipe], template: "<div #datePicker class=\"x-time-picker\">\r\n  <div class=\"x-time-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"getPlaceholder()!\"\r\n      [readonly]=\"true\"\r\n      [clearable]=\"clearable()\"\r\n      [ngModel]=\"displayValue()\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"true\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-time-picker{display:inline-block;width:12rem}.x-time-picker{margin:0;padding:0;width:100%}.x-time-picker x-input{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XTimePickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent], exports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent], exports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTimePickerComponent, XTimePickerFrameComponent],