@ng-nest/ui 15.0.5 → 15.0.7

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

@@ -1,23 +1,26 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import { XWithConfig, XInputBoolean, XIsChange, XIsEmpty, reqAnimFrame, XConnectBaseAnimation, XIsDate, XIsNumber, XIsString, XClearClass } from '@ng-nest/ui/core';
+import { XWithConfig, XInputBoolean, XInputNumber, XDataConvert, XIsChange, XIsEmpty, reqAnimFrame, XConnectBaseAnimation, XIsDate, XIsNumber, XIsString, XClearClass } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i4 from '@angular/forms';
+import { map, takeUntil } 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 { 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 i2 from '@ng-nest/ui/list';
+import * as i4 from '@ng-nest/ui/list';
 import { XListModule } from '@ng-nest/ui/list';
-import * as i1 from '@ng-nest/ui/portal';
+import * as i1$1 from '@ng-nest/ui/portal';
 import { XPortalConnectedPosition, XPortalModule } from '@ng-nest/ui/portal';
-import * as i2$1 from '@angular/common';
-import { DatePipe, CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/overlay';
-import * as i5 from '@ng-nest/ui/input';
+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 { XButtonModule } from '@ng-nest/ui/button';
 
 /**
  * TimePicker
@@ -37,6 +40,11 @@ class XTimePickerProperty extends XControlValueAccessor {
          * @en_US Time type
          */
         this.type = 'time';
+        /**
+         * @zh_CN 快捷选择按钮，支持此刻以及自定义
+         * @en_US Quick selection button, support now and custom
+         */
+        this.preset = [];
         /**
          * @zh_CN 节点点击的事件
          * @en_US Node click event
@@ -45,7 +53,7 @@ class XTimePickerProperty extends XControlValueAccessor {
     }
 }
 /** @nocollapse */ XTimePickerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimePickerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTimePickerProperty, selector: "ng-component", inputs: { type: "type", format: "format", placement: "placement", size: "size", bordered: "bordered" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XTimePickerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTimePickerProperty, selector: "ng-component", inputs: { type: "type", format: "format", placement: "placement", size: "size", use12Hours: "use12Hours", bordered: "bordered", hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", preset: "preset" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XWithConfig(X_CONFIG_NAME, 'HH:mm:ss')
 ], XTimePickerProperty.prototype, "format", void 0);
@@ -55,10 +63,29 @@ __decorate([
 __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: "15.0.0", ngImport: i0, type: XTimePickerProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -70,8 +97,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], use12Hours: [{
+                type: Input
             }], bordered: [{
                 type: Input
+            }], hourStep: [{
+                type: Input
+            }], minuteStep: [{
+                type: Input
+            }], secondStep: [{
+                type: Input
+            }], preset: [{
+                type: Input
             }], nodeEmit: [{
                 type: Output
             }] } });
@@ -89,43 +126,99 @@ const XTimePickerPortalPrefix = 'x-time-picker-portal';
 const XTimePickerFramePrefix = 'x-time-picker-frame';
 
 class XTimePickerFrameComponent {
-    constructor(cdr) {
+    constructor(cdr, i18n) {
         this.cdr = cdr;
+        this.i18n = i18n;
         this.type = 'time';
+        this.hourStep = 1;
+        this.minuteStep = 1;
+        this.secondStep = 1;
         this.nodeEmit = new EventEmitter();
         this.now = new Date();
         this.hour = 0;
         this.minute = 0;
         this.second = 0;
+        this.use12Hour = 'am';
         this.scrollAnimating = {};
-        this.hourDate = Array.from({ length: 24 }).map((_, i) => {
-            return {
-                label: this.prefixZero(i, 2),
-                id: i
-            };
-        });
-        this.minuteDate = Array.from({ length: 60 }).map((_, i) => {
-            return {
-                label: this.prefixZero(i, 2),
-                id: i
-            };
-        });
-        this.secondDate = Array.from({ length: 60 }).map((_, i) => {
-            return {
-                label: this.prefixZero(i, 2),
-                id: i
-            };
-        });
+        this.hourData = [];
+        this.minuteData = [];
+        this.secondData = [];
+        this.use12HoursData = [];
+        this.locale = {};
+        this.isInit = false;
+        this._unSubject = new Subject();
     }
     ngOnChanges(changes) {
         const { value } = changes;
         if (XIsChange(value)) {
             this.init();
-            this.setScrollTop();
+            this.setScrollTop(true);
         }
     }
     ngOnInit() {
+        this.setHourData();
+        this.setMinuteData();
+        this.setSecondData();
+        this.setUse12HoursData();
         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();
+    }
+    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 {
+                    label: this.prefixZero(i, 2),
+                    id: i
+                };
+            }
+            else {
+                return {
+                    label: this.prefixZero(i * this.hourStep, 2),
+                    id: i * this.hourStep
+                };
+            }
+        });
+    }
+    setMinuteData() {
+        this.minuteData = Array.from({ length: Math.ceil(60 / this.minuteStep) }).map((_, i) => {
+            return {
+                label: this.prefixZero(i * this.minuteStep, 2),
+                id: i * this.minuteStep
+            };
+        });
+    }
+    setSecondData() {
+        this.secondData = Array.from({ length: Math.ceil(60 / this.secondStep) }).map((_, i) => {
+            return {
+                label: this.prefixZero(i * this.secondStep, 2),
+                id: i * this.secondStep
+            };
+        });
+    }
+    setUse12HoursData() {
+        this.use12HoursData = [
+            {
+                id: 'am',
+                label: this.locale.am
+            },
+            {
+                id: 'pm',
+                label: this.locale.pm
+            }
+        ];
     }
     init() {
         if (!XIsEmpty(this.value)) {
@@ -142,44 +235,106 @@ class XTimePickerFrameComponent {
         this.model = new Date(this.value);
     }
     setTime(date) {
-        this.hour = date.getHours();
+        if (this.use12Hours) {
+            let hour = date.getHours();
+            if (hour > 12) {
+                this.hour = hour - 12;
+                this.use12Hour = 'pm';
+            }
+            else if (hour === 12) {
+                this.hour = 12;
+                this.use12Hour = 'pm';
+            }
+            else {
+                this.hour = hour === 0 ? 12 : hour;
+                this.use12Hour = 'am';
+            }
+        }
+        else {
+            this.hour = date.getHours();
+        }
         this.minute = date.getMinutes();
         this.second = date.getSeconds();
     }
     prefixZero(num, n) {
         return (Array(n).join('0') + num).slice(-n);
     }
-    setScrollTop() {
-        this.selected(this.hourRef.nativeElement, this.hour);
-        this.selected(this.minuteRef.nativeElement, this.minute);
-        this.selected(this.secondRef.nativeElement, this.second);
+    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);
     }
-    selected(ele, num) {
+    selected(type, ele, num, animating = false) {
+        if (!ele)
+            return;
         if (this.scrollAnimating[ele.className])
             return;
-        let current = ele.querySelector(`.x-list x-list-option:nth-child(${num + 1})`);
+        let len = Number(num);
+        switch (type) {
+            case 'hour':
+                len = this.hourData.findIndex((x) => x.id === num);
+                break;
+            case 'minute':
+                len = this.minuteData.findIndex((x) => x.id === num);
+                break;
+            case 'second':
+                len = this.secondData.findIndex((x) => x.id === num);
+                break;
+            case 'use12Hour':
+                len = this.use12HoursData.findIndex((x) => x.id === num);
+                break;
+        }
+        let current = ele.querySelector(`.x-list x-list-option:nth-child(${len + 1})`);
         if (current) {
-            ele.scrollTop = current.offsetTop;
+            if (animating) {
+                this.scrollTo(ele, current.offsetTop, 120);
+            }
+            else {
+                ele.scrollTop = current.offsetTop;
+            }
         }
     }
-    hourClick(date) {
-        this.hour = date.id;
-        this.model.setHours(this.hour);
-        this.scrollTo(this.hourRef.nativeElement, (date.event?.srcElement).offsetTop, 120);
-        this.nodeEmit.emit(this.model);
-        this.cdr.detectChanges();
-    }
-    minuteClick(date) {
-        this.minute = date.id;
-        this.model.setMinutes(this.minute);
-        this.scrollTo(this.minuteRef.nativeElement, (date.event?.srcElement).offsetTop, 120);
-        this.nodeEmit.emit(this.model);
-        this.cdr.detectChanges();
-    }
-    secondClick(date) {
-        this.second = date.id;
-        this.model.setSeconds(this.second);
-        this.scrollTo(this.secondRef.nativeElement, (date.event?.srcElement).offsetTop, 120);
+    isLastItem(data, item) {
+        return data.indexOf(item) === data.length - 1;
+    }
+    itemClick(type) {
+        switch (type) {
+            case 'minute':
+                this.model.setMinutes(this.minute);
+                break;
+            case 'second':
+                this.model.setSeconds(this.second);
+                break;
+            case 'hour':
+                if (this.use12Hours) {
+                    if (this.use12Hour === 'pm' && this.hour !== 12) {
+                        this.model.setHours(this.hour + 12);
+                    }
+                    else if (this.use12Hour === 'am' && this.hour === 12) {
+                        this.model.setHours(0);
+                    }
+                    else {
+                        this.model.setHours(this.hour);
+                    }
+                }
+                else {
+                    this.model.setHours(this.hour);
+                }
+                break;
+            case 'use12Hours':
+                if (this.use12Hour === 'pm' && this.hour !== 12) {
+                    this.model.setHours(this.hour + 12);
+                }
+                else if (this.use12Hour === 'am' && this.hour === 12) {
+                    this.model.setHours(0);
+                }
+                else {
+                    this.model.setHours(this.hour);
+                }
+                break;
+        }
+        this.setScrollTop(true);
         this.nodeEmit.emit(this.model);
         this.cdr.detectChanges();
     }
@@ -200,33 +355,47 @@ class XTimePickerFrameComponent {
         });
     }
 }
-/** @nocollapse */ XTimePickerFrameComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerFrameComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimePickerFrameComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: { type: "type", value: "value" }, 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 }], 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]=\"hourDate\" [(ngModel)]=\"hour\" (nodeClick)=\"hourClick($event)\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-minute\" #minuteRef [hidden]=\"type === 'hour'\">\r\n    <x-list [data]=\"minuteDate\" [(ngModel)]=\"minute\" (nodeClick)=\"minuteClick($event)\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef [hidden]=\"type !== 'time'\">\r\n    <x-list [data]=\"secondDate\" [(ngModel)]=\"second\" (nodeClick)=\"secondClick($event)\"></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;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);font-size:var(--x-font-size-small);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{position:relative;float:left;overflow:hidden;width:3.625rem;max-height:15rem;padding-bottom:13.125rem}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second: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{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{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{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){margin-top:0}\n"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTimePickerFrameComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerFrameComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XTimePickerFrameComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: { type: "type", value: "value", use12Hours: "use12Hours", hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep" }, 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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]=\"hourDate\" [(ngModel)]=\"hour\" (nodeClick)=\"hourClick($event)\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-minute\" #minuteRef [hidden]=\"type === 'hour'\">\r\n    <x-list [data]=\"minuteDate\" [(ngModel)]=\"minute\" (nodeClick)=\"minuteClick($event)\"></x-list>\r\n  </div>\r\n  <div class=\"x-time-picker-frame-second\" #secondRef [hidden]=\"type !== 'time'\">\r\n    <x-list [data]=\"secondDate\" [(ngModel)]=\"second\" (nodeClick)=\"secondClick($event)\"></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;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);font-size:var(--x-font-size-small);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{position:relative;float:left;overflow:hidden;width:3.625rem;max-height:15rem;padding-bottom:13.125rem}.x-time-picker-frame-hour:hover,.x-time-picker-frame-minute:hover,.x-time-picker-frame-second: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{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{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{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){margin-top:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
+            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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.XI18nService }]; }, propDecorators: { type: [{
                 type: Input
             }], value: [{
                 type: Input
+            }], use12Hours: [{
+                type: Input
+            }], hourStep: [{
+                type: Input
+            }], minuteStep: [{
+                type: Input
+            }], secondStep: [{
+                type: Input
             }], nodeEmit: [{
                 type: Output
             }], hourRef: [{
                 type: ViewChild,
-                args: ['hourRef', { static: false }]
+                args: ['hourRef']
             }], minuteRef: [{
                 type: ViewChild,
-                args: ['minuteRef', { static: false }]
+                args: ['minuteRef']
             }], secondRef: [{
                 type: ViewChild,
-                args: ['secondRef', { static: false }]
+                args: ['secondRef']
+            }], use12HoursRef: [{
+                type: ViewChild,
+                args: ['use12HoursRef']
             }] } });
 
 class XTimePickerPortalComponent {
-    constructor(renderer, cdr) {
+    constructor(renderer, cdr, i18n) {
         this.renderer = renderer;
         this.cdr = cdr;
+        this.i18n = i18n;
         this.type = 'time';
+        this.preset = [];
+        this.locale = {};
         this._unSubject = new Subject();
     }
     done(event) {
@@ -244,6 +413,12 @@ class XTimePickerPortalComponent {
             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();
+        });
     }
     ngOnDestroy() {
         this._unSubject.next();
@@ -252,13 +427,23 @@ class XTimePickerPortalComponent {
     stopPropagation(event) {
         event.stopPropagation();
     }
+    onPresetFunc(item) {
+        let date = item.func();
+        this.valueChange.next(date);
+        this.nodeEmit(date);
+    }
+    onNow() {
+        let date = new Date();
+        this.valueChange.next(date);
+        this.nodeEmit(date);
+    }
 }
-/** @nocollapse */ XTimePickerPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimePickerPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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 [type]=\"type\" [value]=\"value\" (nodeEmit)=\"nodeEmit($event)\"></x-time-picker-frame>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value"], outputs: ["nodeEmit"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTimePickerPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XTimePickerPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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    (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"], outputs: ["nodeEmit"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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 [type]=\"type\" [value]=\"value\" (nodeEmit)=\"nodeEmit($event)\"></x-time-picker-frame>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-time-picker-portal{display:block;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { placement: [{
+            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    (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: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.XI18nService }]; }, propDecorators: { placement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
             }], done: [{
@@ -270,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }] } });
 
 class XTimePickerComponent extends XTimePickerProperty {
-    constructor(renderer, elementRef, cdr, portalService, viewContainerRef, datePipe, overlay) {
+    constructor(renderer, elementRef, cdr, portalService, viewContainerRef, datePipe, overlay, i18n) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
@@ -279,6 +464,7 @@ class XTimePickerComponent extends XTimePickerProperty {
         this.viewContainerRef = viewContainerRef;
         this.datePipe = datePipe;
         this.overlay = overlay;
+        this.i18n = i18n;
         this.readonly = true;
         this.clearable = false;
         this.enter = false;
@@ -292,6 +478,7 @@ class XTimePickerComponent extends XTimePickerProperty {
         this.positionChange = new Subject();
         this.closeSubject = new Subject();
         this.valueType = 'date';
+        this.locale = {};
         this._unSubject = new Subject();
     }
     writeValue(value) {
@@ -345,6 +532,15 @@ class XTimePickerComponent extends XTimePickerProperty {
         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)
@@ -430,6 +626,11 @@ class XTimePickerComponent extends XTimePickerProperty {
             valueChange: this.valueChange,
             positionChange: this.positionChange,
             inputCom: this.inputCom,
+            use12Hours: this.use12Hours,
+            hourStep: this.hourStep,
+            minuteStep: this.minuteStep,
+            secondStep: this.secondStep,
+            preset: this.preset,
             closePortal: () => this.closeSubject.next(),
             destroyPortal: () => this.destroyPortal(),
             nodeEmit: (node) => this.onNodeClick(node),
@@ -450,7 +651,17 @@ class XTimePickerComponent extends XTimePickerProperty {
         return ['date', 'string'].includes(this.valueType) ? new Date(value) : value.getTime();
     }
     setDisplayValue(date) {
-        this.displayValue = this.datePipe.transform(date, this.format);
+        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);
+        }
     }
     setPlacement() {
         return this.portalService.setPlacement({
@@ -469,12 +680,12 @@ class XTimePickerComponent extends XTimePickerProperty {
         this.cdr.detectChanges();
     }
 }
-/** @nocollapse */ XTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XPortalService }, { token: i0.ViewContainerRef }, { token: i2$1.DatePipe }, { token: i3.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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]=\"placeholder\"\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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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 */ XTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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]=\"placeholder\"\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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]=\"placeholder\"\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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XPortalService }, { type: i0.ViewContainerRef }, { type: i2$1.DatePipe }, { type: i3.Overlay }]; }, propDecorators: { datePicker: [{
+        }], ctorParameters: function () { return [{ 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: [{
                 type: ViewChild,
                 args: ['datePicker', { static: true }]
             }], inputCom: [{
@@ -493,7 +704,8 @@ class XTimePickerModule {
         XListModule,
         XButtonModule,
         XIconModule,
-        XBaseFormModule], exports: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent] });
+        XBaseFormModule,
+        XI18nModule], exports: [XTimePickerComponent, XTimePickerPortalComponent, XTimePickerFrameComponent] });
 /** @nocollapse */ XTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -502,7 +714,8 @@ class XTimePickerModule {
         XListModule,
         XButtonModule,
         XIconModule,
-        XBaseFormModule] });
+        XBaseFormModule,
+        XI18nModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
@@ -517,7 +730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                         XListModule,
                         XButtonModule,
                         XIconModule,
-                        XBaseFormModule
+                        XBaseFormModule,
+                        XI18nModule
                     ]
                 }]
         }] });
@@ -528,4 +742,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
 
 export { XTimePickerComponent, XTimePickerFrameComponent, XTimePickerFramePrefix, XTimePickerModule, XTimePickerPortalComponent, XTimePickerPortalPrefix, XTimePickerPrefix, XTimePickerProperty };
 //# sourceMappingURL=ng-nest-ui-time-picker.mjs.map
-//# sourceMappingURL=ng-nest-ui-time-picker.mjs.map