@ng-nest/ui 17.0.1 → 17.0.2

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

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule } from '@angular/core';
+import { inject, Pipe, NgModule } from '@angular/core';
 import { XToDate } from '@ng-nest/ui/core';
-import * as i1 from '@angular/common';
 import { DatePipe } from '@angular/common';
-import * as i2 from '@ng-nest/ui/i18n';
+import { XI18nService } from '@ng-nest/ui/i18n';
 
 /**
  * TimeAgo
@@ -12,11 +11,11 @@ import * as i2 from '@ng-nest/ui/i18n';
  */
 const XTimeAgoPrefix = 'xTimeAgo';
 
-class XTimeAgoPipe {
-    constructor(datePipe, i18n) {
-        this.datePipe = datePipe;
-        this.i18n = i18n;
-        this.locale = {};
+class XTimeAgoPipe extends DatePipe {
+    constructor() {
+        super(...arguments);
+        this.localeI18n = {};
+        this.i18n = inject(XI18nService);
     }
     transform(input) {
         if (!input)
@@ -25,7 +24,7 @@ class XTimeAgoPipe {
         if (isNaN(date.valueOf())) {
             return input;
         }
-        this.locale = this.i18n.getLocale().timeAgo;
+        this.localeI18n = this.i18n.getLocale().timeAgo;
         const content = this.getDiff(date);
         if (this.catchContent !== content) {
             this.catchContent = content;
@@ -49,43 +48,42 @@ class XTimeAgoPipe {
         const secondDiff = diffValue / second;
         let result = '';
         if (date.getFullYear() !== now.getFullYear()) {
-            result = this.datePipe.transform(time, 'yyyy-MM-dd');
+            result = super.transform(time, 'yyyy-MM-dd');
         }
         else if (dayDiff >= 1) {
-            result = this.datePipe.transform(time, 'MM-dd HH:mm');
+            result = super.transform(time, 'MM-dd HH:mm');
         }
         else if (hourDiff >= 1) {
-            result = `${Math.floor(hourDiff)}${this.locale.hoursAgo}`;
+            result = `${Math.floor(hourDiff)}${this.localeI18n.hoursAgo}`;
         }
         else if (minDiff >= 1) {
-            result = `${Math.floor(minDiff)}${this.locale.minutesAgo}`;
+            result = `${Math.floor(minDiff)}${this.localeI18n.minutesAgo}`;
         }
         else if (secondDiff >= 1) {
-            result = `${Math.floor(secondDiff)}${this.locale.secondsAgo}`;
+            result = `${Math.floor(secondDiff)}${this.localeI18n.secondsAgo}`;
         }
         else
-            result = this.locale.just;
+            result = this.localeI18n.just;
         return result;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoPipe, deps: [{ token: i1.DatePipe }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoPipe, name: "xTimeAgo", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoPipe, isStandalone: true, name: "xTimeAgo" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoPipe, decorators: [{
             type: Pipe,
-            args: [{ name: `${XTimeAgoPrefix}`, pure: false }]
-        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: i2.XI18nService }] });
+            args: [{ name: `${XTimeAgoPrefix}`, standalone: true }]
+        }] });
 
 class XTimeAgoModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule, declarations: [XTimeAgoPipe], exports: [XTimeAgoPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule, providers: [DatePipe] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule, imports: [XTimeAgoPipe], exports: [XTimeAgoPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimeAgoModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XTimeAgoPipe],
                     exports: [XTimeAgoPipe],
-                    providers: [DatePipe]
+                    imports: [XTimeAgoPipe]
                 }]
         }] });
 

package/fesm2022/ng-nest-ui-time-ago.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-time-ago.mjs","sources":["../../../../lib/ng-nest/ui/time-ago/time-ago.property.ts","../../../../lib/ng-nest/ui/time-ago/time-ago.pipe.ts","../../../../lib/ng-nest/ui/time-ago/time-ago.module.ts","../../../../lib/ng-nest/ui/time-ago/ng-nest-ui-time-ago.ts"],"sourcesContent":["/**\r\n * TimeAgo\r\n * @selector xTimeAgo\r\n * @decorator Pipe\r\n */\r\nexport const XTimeAgoPrefix = 'xTimeAgo';\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { XToDate, XDate } from '@ng-nest/ui/core';\r\nimport { DatePipe } from '@angular/common';\r\nimport { XTimeAgoPrefix } from './time-ago.property';\r\nimport { XI18nService, XI18nTimeAgo } from '@ng-nest/ui/i18n';\r\n\r\n@Pipe({ name: `${XTimeAgoPrefix}`, pure: false })\r\nexport class XTimeAgoPipe implements PipeTransform {\r\n  locale: XI18nTimeAgo = {};\r\n  private catchContent: any;\r\n  constructor(private datePipe: DatePipe, private i18n: XI18nService) {}\r\n  transform(input?: XDate): string {\r\n    if (!input) return '';\r\n    const date = XToDate(input);\r\n    if (isNaN(date.valueOf())) {\r\n      return input as string;\r\n    }\r\n    this.locale = this.i18n.getLocale().timeAgo as XI18nTimeAgo;\r\n    const content = this.getDiff(date);\r\n    if (this.catchContent !== content) {\r\n      this.catchContent = content;\r\n    }\r\n    return this.catchContent;\r\n  }\r\n\r\n  getDiff(date: Date): string {\r\n    const time = date.getTime();\r\n    const second = 1000;\r\n    const minute = 1000 * 60;\r\n    const hour = minute * 60;\r\n    const day = hour * 24;\r\n    const now = new Date();\r\n    const diffValue = now.getTime() - time;\r\n    if (diffValue < 0) {\r\n      return '';\r\n    }\r\n    const dayDiff = diffValue / day;\r\n    const hourDiff = diffValue / hour;\r\n    const minDiff = diffValue / minute;\r\n    const secondDiff = diffValue / second;\r\n    let result = '';\r\n    if (date.getFullYear() !== now.getFullYear()) {\r\n      result = this.datePipe.transform(time, 'yyyy-MM-dd') as string;\r\n    } else if (dayDiff >= 1) {\r\n      result = this.datePipe.transform(time, 'MM-dd HH:mm') as string;\r\n    } else if (hourDiff >= 1) {\r\n      result = `${Math.floor(hourDiff)}${this.locale.hoursAgo}`;\r\n    } else if (minDiff >= 1) {\r\n      result = `${Math.floor(minDiff)}${this.locale.minutesAgo}`;\r\n    } else if (secondDiff >= 1) {\r\n      result = `${Math.floor(secondDiff)}${this.locale.secondsAgo}`;\r\n    } else result = this.locale.just as string;\r\n    return result;\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { DatePipe } from '@angular/common';\r\nimport { XTimeAgoPipe } from './time-ago.pipe';\r\n\r\n@NgModule({\r\n  declarations: [XTimeAgoPipe],\r\n  exports: [XTimeAgoPipe],\r\n  providers: [DatePipe]\r\n})\r\nexport class XTimeAgoModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-time-ago.mjs","sources":["../../../../lib/ng-nest/ui/time-ago/time-ago.property.ts","../../../../lib/ng-nest/ui/time-ago/time-ago.pipe.ts","../../../../lib/ng-nest/ui/time-ago/time-ago.module.ts","../../../../lib/ng-nest/ui/time-ago/ng-nest-ui-time-ago.ts"],"sourcesContent":["/**\r\n * TimeAgo\r\n * @selector xTimeAgo\r\n * @decorator Pipe\r\n */\r\nexport const XTimeAgoPrefix = 'xTimeAgo';\r\n","import { Pipe, PipeTransform, inject } from '@angular/core';\r\nimport { XToDate } from '@ng-nest/ui/core';\r\nimport { DatePipe } from '@angular/common';\r\nimport { XTimeAgoPrefix } from './time-ago.property';\r\nimport { XI18nService, XI18nTimeAgo } from '@ng-nest/ui/i18n';\r\n\r\n@Pipe({ name: `${XTimeAgoPrefix}`, standalone: true })\r\nexport class XTimeAgoPipe extends DatePipe implements PipeTransform {\r\n  localeI18n: XI18nTimeAgo = {};\r\n  private catchContent: any;\r\n  private i18n = inject(XI18nService);\r\n\r\n  override transform(input?: any): any {\r\n    if (!input) return '';\r\n    const date = XToDate(input);\r\n    if (isNaN(date.valueOf())) {\r\n      return input as string;\r\n    }\r\n    this.localeI18n = this.i18n.getLocale().timeAgo as XI18nTimeAgo;\r\n    const content = this.getDiff(date);\r\n    if (this.catchContent !== content) {\r\n      this.catchContent = content;\r\n    }\r\n    return this.catchContent;\r\n  }\r\n\r\n  getDiff(date: Date): string {\r\n    const time = date.getTime();\r\n    const second = 1000;\r\n    const minute = 1000 * 60;\r\n    const hour = minute * 60;\r\n    const day = hour * 24;\r\n    const now = new Date();\r\n    const diffValue = now.getTime() - time;\r\n    if (diffValue < 0) {\r\n      return '';\r\n    }\r\n    const dayDiff = diffValue / day;\r\n    const hourDiff = diffValue / hour;\r\n    const minDiff = diffValue / minute;\r\n    const secondDiff = diffValue / second;\r\n    let result = '';\r\n    if (date.getFullYear() !== now.getFullYear()) {\r\n      result = super.transform(time, 'yyyy-MM-dd') as string;\r\n    } else if (dayDiff >= 1) {\r\n      result = super.transform(time, 'MM-dd HH:mm') as string;\r\n    } else if (hourDiff >= 1) {\r\n      result = `${Math.floor(hourDiff)}${this.localeI18n.hoursAgo}`;\r\n    } else if (minDiff >= 1) {\r\n      result = `${Math.floor(minDiff)}${this.localeI18n.minutesAgo}`;\r\n    } else if (secondDiff >= 1) {\r\n      result = `${Math.floor(secondDiff)}${this.localeI18n.secondsAgo}`;\r\n    } else result = this.localeI18n.just as string;\r\n    return result;\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XTimeAgoPipe } from './time-ago.pipe';\r\n\r\n@NgModule({\r\n  exports: [XTimeAgoPipe],\r\n  imports: [XTimeAgoPipe]\r\n})\r\nexport class XTimeAgoModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,26 +1,20 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, inject, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ChangeDetectorRef, inject, 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, XIsNumber, reqAnimFrame, XConnectBaseAnimation, XIsDate, XIsString, XClearClass, XParents } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
 import { Subject, fromEvent } from 'rxjs';
 import { map, takeUntil, filter } from 'rxjs/operators';
-import * as i1 from '@ng-nest/ui/i18n';
-import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i2 from '@angular/common';
-import { DOCUMENT, DatePipe, CommonModule } from '@angular/common';
-import * as i3 from '@ng-nest/ui/button';
-import { XButtonModule } from '@ng-nest/ui/button';
-import * as i5 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@ng-nest/ui/list';
-import { XListModule } from '@ng-nest/ui/list';
-import * as i1$1 from '@ng-nest/ui/portal';
-import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
-import * as i3$1 from '@angular/cdk/overlay';
-import * as i6 from '@ng-nest/ui/input';
-import { XInputModule } from '@ng-nest/ui/input';
-import { XIconModule } from '@ng-nest/ui/icon';
+import { XI18nService } from '@ng-nest/ui/i18n';
+import { XListComponent } from '@ng-nest/ui/list';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { XButtonComponent } from '@ng-nest/ui/button';
+import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
+import { XInputComponent } from '@ng-nest/ui/input';
+import { Overlay } from '@angular/cdk/overlay';
 
 /**
  * TimePicker
@@ -128,6 +122,25 @@ const XTimePickerPortalPrefix = 'x-time-picker-portal';
 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);
+    }
     ngOnChanges(changes) {
         const { value, disabledTimeParam } = changes;
         if (XIsChange(value)) {
@@ -153,25 +166,6 @@ class XTimePickerFrameComponent {
     ngAfterViewInit() {
         this.setScrollTop();
     }
-    constructor(cdr, i18n) {
-        this.cdr = cdr;
-        this.i18n = i18n;
-        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();
-    }
     setDataInit() {
         this.setHourData();
         this.setMinuteData();
@@ -404,13 +398,13 @@ class XTimePickerFrameComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerFrameComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTimePickerFrameComponent, 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  <div class=\"x-time-picker-frame-minute\" #minuteRef *ngIf=\"type !== 'hour'\">\r\n    <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef *ngIf=\"type === 'time'\">\r\n    <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n  </div>\r\n  <div *ngIf=\"use12Hours\" 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</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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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  <div class=\"x-time-picker-frame-minute\" #minuteRef *ngIf=\"type !== 'hour'\">\r\n    <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef *ngIf=\"type === 'time'\">\r\n    <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n  </div>\r\n  <div *ngIf=\"use12Hours\" 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</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: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.0.2", ngImport: i0, type: XTimePickerFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerFramePrefix}`, 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  <div class=\"x-time-picker-frame-minute\" #minuteRef *ngIf=\"type !== 'hour'\">\r\n    <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef *ngIf=\"type === 'time'\">\r\n    <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n  </div>\r\n  <div *ngIf=\"use12Hours\" 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</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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.XI18nService }], propDecorators: { type: [{
+            args: [{ selector: `${XTimePickerFramePrefix}`, standalone: true, imports: [CommonModule, 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  <div class=\"x-time-picker-frame-minute\" #minuteRef *ngIf=\"type !== 'hour'\">\r\n    <x-list [data]=\"minuteData\" [(ngModel)]=\"minute\" (nodeClick)=\"itemClick('minute')\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef *ngIf=\"type === 'time'\">\r\n    <x-list [data]=\"secondData\" [(ngModel)]=\"second\" (nodeClick)=\"itemClick('second')\"></x-list>\r\n  </div>\r\n  <div *ngIf=\"use12Hours\" 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</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
@@ -445,6 +439,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XTimePickerPortalComponent {
+    constructor() {
+        this.type = 'time';
+        this.preset = [];
+        this.locale = {};
+        this._unSubject = new Subject();
+        this.cdr = inject(ChangeDetectorRef);
+        this.i18n = inject(XI18nService);
+    }
     done(event) {
         this.animating(false);
         event.toState === 'void' && this.destroyPortal();
@@ -452,15 +454,6 @@ class XTimePickerPortalComponent {
     start() {
         this.animating(true);
     }
-    constructor(renderer, cdr, i18n) {
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.i18n = i18n;
-        this.type = 'time';
-        this.preset = [];
-        this.locale = {};
-        this._unSubject = new Subject();
-    }
     ngOnInit() {
         this.valueChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
             this.value = x;
@@ -493,13 +486,13 @@ class XTimePickerPortalComponent {
         this.valueChange.next(date);
         this.nodeEmit(date);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTimePickerPortalComponent, 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  <div *ngIf=\"preset\" class=\"x-time-picker-portal-preset\">\r\n    <ng-container *ngFor=\"let item of preset\">\r\n      <x-button type=\"text\" *ngIf=\"!item.func && item.id === 'now'\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n      <x-button type=\"text\" *ngIf=\"item.func\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n    </ng-container>\r\n  </div>\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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XButtonComponent, selector: "x-button" }, { kind: "component", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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  <div *ngIf=\"preset\" class=\"x-time-picker-portal-preset\">\r\n    <ng-container *ngFor=\"let item of preset\">\r\n      <x-button type=\"text\" *ngIf=\"!item.func && item.id === 'now'\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n      <x-button type=\"text\" *ngIf=\"item.func\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n    </ng-container>\r\n  </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.0.2", ngImport: i0, type: XTimePickerPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerPortalPrefix}`, 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  <div *ngIf=\"preset\" class=\"x-time-picker-portal-preset\">\r\n    <ng-container *ngFor=\"let item of preset\">\r\n      <x-button type=\"text\" *ngIf=\"!item.func && item.id === 'now'\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n      <x-button type=\"text\" *ngIf=\"item.func\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n    </ng-container>\r\n  </div>\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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.XI18nService }], propDecorators: { placement: [{
+            args: [{ selector: `${XTimePickerPortalPrefix}`, standalone: true, imports: [CommonModule, 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  <div *ngIf=\"preset\" class=\"x-time-picker-portal-preset\">\r\n    <ng-container *ngFor=\"let item of preset\">\r\n      <x-button type=\"text\" *ngIf=\"!item.func && item.id === 'now'\" (click)=\"onNow()\">{{ locale.now }}</x-button>\r\n      <x-button type=\"text\" *ngIf=\"item.func\" (click)=\"onPresetFunc(item)\">{{ item.label }}</x-button>\r\n    </ng-container>\r\n  </div>\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: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
             }], done: [{
@@ -511,6 +504,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", 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();
@@ -547,33 +567,6 @@ class XTimePickerComponent extends XTimePickerProperty {
             return this.locale.selectTime;
         }
     }
-    constructor(renderer, elementRef, cdr, portalService, viewContainerRef, datePipe, overlay, i18n) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.portalService = portalService;
-        this.viewContainerRef = viewContainerRef;
-        this.datePipe = datePipe;
-        this.overlay = overlay;
-        this.i18n = i18n;
-        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);
-    }
     ngOnInit() {
         this.setFlex(this.datePicker.nativeElement, this.renderer, this.justify, this.align, this.direction);
         this.setFormat();
@@ -778,13 +771,13 @@ class XTimePickerComponent extends XTimePickerProperty {
         this.ngOnInit();
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2.DatePipe }, { token: i3$1.Overlay }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XTimePickerComponent, 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: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.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.0.2", ngImport: i0, type: XTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimePickerPrefix}`, 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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2.DatePipe }, { type: i3$1.Overlay }, { type: i1.XI18nService }], propDecorators: { datePicker: [{
+            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: [{
@@ -794,44 +787,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
 
 class XTimePickerModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, declarations: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent, XTimePickerProperty], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            XPortalModule,
-            XInputModule,
-            XListModule,
-            XButtonModule,
-            XIconModule,
-            XBaseFormModule,
-            XI18nModule], exports: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            XPortalModule,
-            XInputModule,
-            XListModule,
-            XButtonModule,
-            XIconModule,
-            XBaseFormModule,
-            XI18nModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent], exports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, imports: [XTimePickerComponent, XTimePickerFrameComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent, XTimePickerProperty],
-                    exports: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        XPortalModule,
-                        XInputModule,
-                        XListModule,
-                        XButtonModule,
-                        XIconModule,
-                        XBaseFormModule,
-                        XI18nModule
-                    ]
+                    exports: [XTimePickerComponent, XTimePickerFrameComponent],
+                    imports: [XTimePickerComponent, XTimePickerFrameComponent]
                 }]
         }] });