@ng-nest/ui 12.0.7 → 12.1.0

package/bundles/ng-nest-ui-date-picker.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/base-form'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@ng-nest/ui/i18n'), require('@ng-nest/ui/button'), require('@ng-nest/ui/time-picker'), require('@ng-nest/ui/portal'), require('@angular/cdk/overlay'), require('@ng-nest/ui/input'), require('@angular/forms'), require('@ng-nest/ui/icon')) :
     typeof define === 'function' && define.amd ? define('@ng-nest/ui/date-picker', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/base-form', 'rxjs', 'rxjs/operators', '@angular/common', '@ng-nest/ui/i18n', '@ng-nest/ui/button', '@ng-nest/ui/time-picker', '@ng-nest/ui/portal', '@angular/cdk/overlay', '@ng-nest/ui/input', '@angular/forms', '@ng-nest/ui/icon'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-nest'] = global['ng-nest'] || {}, global['ng-nest'].ui = global['ng-nest'].ui || {}, global['ng-nest'].ui['date-picker'] = {}), global.ng.core, global['ng-nest'].ui.core, global['ng-nest'].ui['base-form'], global.rxjs, global.rxjs.operators, global.ng.common, global['ng-nest'].ui.i18n, global['ng-nest'].ui.button, global['ng-nest'].ui['time-picker'], global['ng-nest'].ui.portal, global.ng.cdk.overlay, global['ng-nest'].ui.input, global.ng.forms, global['ng-nest'].ui.icon));
-}(this, (function (exports, i0, i1, baseForm, rxjs, operators, i1$1, i2, i4, i7, i2$1, i4$1, i5, i6, i6$1) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui["date-picker"] = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui["base-form"], global.rxjs, global.rxjs.operators, global.ng.common, global["ng-nest"].ui.i18n, global["ng-nest"].ui.button, global["ng-nest"].ui["time-picker"], global["ng-nest"].ui.portal, global.ng.cdk.overlay, global["ng-nest"].ui.input, global.ng.forms, global["ng-nest"].ui.icon));
+})(this, (function (exports, i0, i2, baseForm, rxjs, operators, i1, i3, i4, i7, i2$1, i4$1, i5, i6, i6$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,21 +13,19 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
@@ -262,10 +260,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -381,32 +385,29 @@
         }
         return XDatePickerProperty;
     }(baseForm.XControlValueAccessor));
-    /** @nocollapse */ XDatePickerProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDatePickerProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDatePickerProperty, selector: "ng-component", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", readonly: "readonly", valueTpl: "valueTpl", valueTplContext: "valueTplContext", size: "size", bordered: "bordered", preset: "preset" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    /** @nocollapse */ XDatePickerProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDatePickerProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDatePickerProperty, selector: "ng-component", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'yyyy-MM-dd')
+        i2.XWithConfig(X_CONFIG_NAME, 'yyyy-MM-dd')
     ], XDatePickerProperty.prototype, "format", void 0);
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, true),
-        i1.XInputBoolean()
+        i2.XWithConfig(X_CONFIG_NAME, true),
+        i2.XInputBoolean()
     ], XDatePickerProperty.prototype, "clearable", void 0);
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'bottom-start')
+        i2.XWithConfig(X_CONFIG_NAME, 'bottom-start')
     ], XDatePickerProperty.prototype, "placement", void 0);
     __decorate([
-        i1.XInputBoolean()
-    ], XDatePickerProperty.prototype, "readonly", void 0);
-    __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'medium')
+        i2.XWithConfig(X_CONFIG_NAME, 'medium')
     ], XDatePickerProperty.prototype, "size", void 0);
     __decorate([
-        i1.XInputBoolean(),
-        i1.XWithConfig(X_CONFIG_NAME, true)
+        i2.XInputBoolean(),
+        i2.XWithConfig(X_CONFIG_NAME, true)
     ], XDatePickerProperty.prototype, "bordered", void 0);
     __decorate([
-        i1.XDataConvert()
+        i2.XDataConvert()
     ], XDatePickerProperty.prototype, "preset", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerProperty, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { type: [{
@@ -417,12 +418,6 @@
                     type: i0.Input
                 }], placement: [{
                     type: i0.Input
-                }], readonly: [{
-                    type: i0.Input
-                }], valueTpl: [{
-                    type: i0.Input
-                }], valueTplContext: [{
-                    type: i0.Input
                 }], size: [{
                     type: i0.Input
                 }], bordered: [{
@@ -438,7 +433,7 @@
      * @decorator component
      */
     var XDateRangePrefix = 'x-date-range';
-    var X_CONFIG_Range_NAME = 'dateRange';
+    var X_CONFIG_RANGE_NAME = 'dateRange';
     /**
      * DateRange Property
      */
@@ -465,29 +460,29 @@
         }
         return XDateRangeProperty;
     }(baseForm.XControlValueAccessor));
-    /** @nocollapse */ XDateRangeProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangeProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDateRangeProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDateRangeProperty, selector: "ng-component", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    /** @nocollapse */ XDateRangeProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangeProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDateRangeProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDateRangeProperty, selector: "ng-component", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'yyyy-MM-dd')
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'yyyy-MM-dd')
     ], XDateRangeProperty.prototype, "format", void 0);
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, true),
-        i1.XInputBoolean()
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, true),
+        i2.XInputBoolean()
     ], XDateRangeProperty.prototype, "clearable", void 0);
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'bottom-start')
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'bottom-start')
     ], XDateRangeProperty.prototype, "placement", void 0);
     __decorate([
-        i1.XWithConfig(X_CONFIG_NAME, 'medium')
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'medium')
     ], XDateRangeProperty.prototype, "size", void 0);
     __decorate([
-        i1.XInputBoolean(),
-        i1.XWithConfig(X_CONFIG_NAME, true)
+        i2.XInputBoolean(),
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, true)
     ], XDateRangeProperty.prototype, "bordered", void 0);
     __decorate([
-        i1.XDataConvert()
+        i2.XDataConvert()
     ], XDateRangeProperty.prototype, "preset", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangeProperty, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangeProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { type: [{
@@ -532,11 +527,26 @@
         __extends(XPickerDateProperty, _super);
         function XPickerDateProperty() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.type = 'date';
             /**
              * @zh_CN 显示的日期
              * @en_US Date displayed
              */
             _this.display = new Date();
+            /**
+             * @zh_CN 显示切换按钮
+             * @en_US Display switch button
+             */
+            _this.showHeader = true;
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.typeChange = new i0.EventEmitter();
             /**
              * @zh_CN 选中的事件
              * @en_US Selected event
@@ -550,18 +560,32 @@
             return _this;
         }
         return XPickerDateProperty;
-    }(i1.XProperty));
-    /** @nocollapse */ XPickerDateProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerDateProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerDateProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerDateProperty, selector: "ng-component", inputs: { display: "display", model: "model", dateTemp: "dateTemp" }, outputs: { modelChange: "modelChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerDateProperty, decorators: [{
+    }(i2.XProperty));
+    /** @nocollapse */ XPickerDateProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerDateProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerDateProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerDateProperty, selector: "ng-component", inputs: { type: "type", display: "display", model: "model", dateTemp: "dateTemp", showHeader: "showHeader", rangePicker: "rangePicker" }, outputs: { typeChange: "typeChange", modelChange: "modelChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    __decorate([
+        i2.XInputBoolean()
+    ], XPickerDateProperty.prototype, "showHeader", void 0);
+    __decorate([
+        i2.XInputBoolean()
+    ], XPickerDateProperty.prototype, "rangePicker", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerDateProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
-            }], propDecorators: { display: [{
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], display: [{
                     type: i0.Input
                 }], model: [{
                     type: i0.Input
                 }], dateTemp: [{
                     type: i0.Input
+                }], showHeader: [{
+                    type: i0.Input
+                }], rangePicker: [{
+                    type: i0.Input
+                }], typeChange: [{
+                    type: i0.Output
                 }], modelChange: [{
                     type: i0.Output
                 }], rangeChange: [{
@@ -580,16 +604,31 @@
         __extends(XPickerMonthProperty, _super);
         function XPickerMonthProperty() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.type = 'date';
             /**
              * @zh_CN 显示的日期
              * @en_US Date displayed
              */
             _this.display = new Date();
+            /**
+             * @zh_CN 显示切换按钮
+             * @en_US Display switch button
+             */
+            _this.showHeader = true;
             /**
              * @zh_CN 选中的事件
              * @en_US Selected event
              */
             _this.modelChange = new i0.EventEmitter();
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.typeChange = new i0.EventEmitter();
             /**
              * @zh_CN 范围变化的事件
              * @en_US Scope change event
@@ -598,20 +637,29 @@
             return _this;
         }
         return XPickerMonthProperty;
-    }(i1.XProperty));
-    /** @nocollapse */ XPickerMonthProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerMonthProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerMonthProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerMonthProperty, selector: "ng-component", inputs: { display: "display", model: "model", monthTemp: "monthTemp" }, outputs: { modelChange: "modelChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerMonthProperty, decorators: [{
+    }(i2.XProperty));
+    /** @nocollapse */ XPickerMonthProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerMonthProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerMonthProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerMonthProperty, selector: "ng-component", inputs: { type: "type", display: "display", model: "model", monthTemp: "monthTemp", showHeader: "showHeader" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    __decorate([
+        i2.XInputBoolean()
+    ], XPickerMonthProperty.prototype, "showHeader", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerMonthProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
-            }], propDecorators: { display: [{
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], display: [{
                     type: i0.Input
                 }], model: [{
                     type: i0.Input
                 }], monthTemp: [{
                     type: i0.Input
+                }], showHeader: [{
+                    type: i0.Input
                 }], modelChange: [{
                     type: i0.Output
+                }], typeChange: [{
+                    type: i0.Output
                 }], rangeChange: [{
                     type: i0.Output
                 }] } });
@@ -628,16 +676,31 @@
         __extends(XPickerYearProperty, _super);
         function XPickerYearProperty() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.type = 'date';
             /**
              * @zh_CN 显示的日期
              * @en_US Date displayed
              */
             _this.display = new Date();
+            /**
+             * @zh_CN 显示切换按钮
+             * @en_US Display switch button
+             */
+            _this.showHeader = true;
             /**
              * @zh_CN 选中的事件
              * @en_US Selected event
              */
             _this.modelChange = new i0.EventEmitter();
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.typeChange = new i0.EventEmitter();
             /**
              * @zh_CN 开始年份变化的事件
              * @en_US Start year change event
@@ -646,27 +709,38 @@
             return _this;
         }
         return XPickerYearProperty;
-    }(i1.XProperty));
-    /** @nocollapse */ XPickerYearProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerYearProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerYearProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerYearProperty, selector: "ng-component", inputs: { display: "display", model: "model" }, outputs: { modelChange: "modelChange", startChange: "startChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerYearProperty, decorators: [{
+    }(i2.XProperty));
+    /** @nocollapse */ XPickerYearProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerYearProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerYearProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerYearProperty, selector: "ng-component", inputs: { type: "type", display: "display", model: "model", showHeader: "showHeader" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", startChange: "startChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    __decorate([
+        i2.XInputBoolean()
+    ], XPickerYearProperty.prototype, "showHeader", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerYearProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
-            }], propDecorators: { display: [{
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], display: [{
                     type: i0.Input
                 }], model: [{
                     type: i0.Input
+                }], showHeader: [{
+                    type: i0.Input
                 }], modelChange: [{
                     type: i0.Output
+                }], typeChange: [{
+                    type: i0.Output
                 }], startChange: [{
                     type: i0.Output
                 }] } });
 
     var XPickerDateComponent = /** @class */ (function (_super) {
         __extends(XPickerDateComponent, _super);
-        function XPickerDateComponent(renderer, cdr, configService, i18n) {
+        function XPickerDateComponent(renderer, datePipe, lowerCasePipe, cdr, configService, i18n) {
             var _this = _super.call(this) || this;
             _this.renderer = renderer;
+            _this.datePipe = datePipe;
+            _this.lowerCasePipe = lowerCasePipe;
             _this.cdr = cdr;
             _this.configService = configService;
             _this.i18n = i18n;
@@ -681,15 +755,22 @@
             ];
             _this.now = new Date();
             _this.dates = [];
+            _this.locale = {};
             _this._unSubject = new rxjs.Subject();
             return _this;
         }
         XPickerDateComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.i18n.localeChange.pipe(operators.takeUntil(this._unSubject)).subscribe(function () { return _this.cdr.markForCheck(); });
+            this.i18n.localeChange
+                .pipe(operators.map(function (x) { return x.datePicker; }), operators.takeUntil(this._unSubject))
+                .subscribe(function (x) {
+                _this.locale = x;
+                _this.cdr.markForCheck();
+            });
         };
         XPickerDateComponent.prototype.ngOnChanges = function (simples) {
-            i1.XIsChange(simples.display) && this.init();
+            var display = simples.display;
+            i2.XIsChange(display) && this.init();
         };
         XPickerDateComponent.prototype.ngOnDestory = function () {
             this._unSubject.next();
@@ -728,7 +809,7 @@
                 dates = __spreadArray(__spreadArray([], __read(dates)), [date_2]);
                 day = date_2.getDay();
             }
-            this.dates = i1.chunk(dates, 7);
+            this.dates = i2.chunk(dates, 7);
             if (this.dates.length > 0) {
                 this.rangeChange.emit([dates[0], dates[dates.length - 1]]);
             }
@@ -739,23 +820,48 @@
             this.modelChange.emit(date);
             this.cdr.markForCheck();
         };
-        XPickerDateComponent.prototype.trackByNode = function (index, item) {
+        XPickerDateComponent.prototype.getLocaleMonth = function (date) {
+            return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
+        };
+        XPickerDateComponent.prototype.setDisplay = function (date) {
+            this.display = new Date(date.getFullYear(), date.getMonth(), 1);
+            this.setDays(this.display);
+        };
+        XPickerDateComponent.prototype.nextMonth = function (num) {
+            var date = new Date(this.display);
+            date.setMonth(date.getMonth() + num);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XPickerDateComponent.prototype.nextYear = function (num) {
+            var date = new Date(this.display);
+            date.setFullYear(date.getFullYear() + num);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XPickerDateComponent.prototype.typeOnChange = function (type) {
+            this.type = type;
+            this.typeChange.emit(type);
+            this.cdr.detectChanges();
+        };
+        XPickerDateComponent.prototype.trackByNode = function (_index, item) {
             return item;
         };
         return XPickerDateComponent;
     }(XPickerDateProperty));
-    /** @nocollapse */ XPickerDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerDateComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }, { token: i2__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerDateComponent, selector: "x-picker-date", usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-date\" [class.x-date-picker-datetemp]=\"dateTemp\">\r\n  <table class=\"x-picker-date-table\" cellspacing=\"0\" cellpadding=\"0\">\r\n    <thead>\r\n      <tr>\r\n        <th *ngFor=\"let title of titles; trackBy: trackByNode\">{{ title | xI18n }}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let weeks of dates\">\r\n        <ng-container *ngFor=\"let week of weeks; trackBy: trackByNode\">\r\n          <td\r\n            [class.x-date-last-or-next]=\"(week | date: 'yyyyMM') !== (display | date: 'yyyyMM')\"\r\n            [class.x-date-now]=\"(week | date: 'yyyyMMdd') === (now | date: 'yyyyMMdd')\"\r\n            (click)=\"dateTemp && dateClick(week)\"\r\n          >\r\n            <x-button\r\n              *ngIf=\"!dateTemp\"\r\n              type=\"text\"\r\n              size=\"mini\"\r\n              title=\"{{ week | date: 'yyyy-MM-dd' }}\"\r\n              [activated]=\"(week | date: 'yyyyMMdd') === (model | date: 'yyyyMMdd')\"\r\n              (click)=\"dateClick(week)\"\r\n              >{{ week | date: 'd' }}</x-button\r\n            >\r\n            <ng-container *ngIf=\"dateTemp\">\r\n              <ng-container *ngTemplateOutlet=\"dateTemp; context: { date$: week }\"></ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </ng-container>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".x-picker-date{margin:0;padding:0}.x-picker-date-table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-date-table th{font-weight:400;height:2rem}.x-picker-date-table td{height:2rem;padding:.125rem 0;text-align:center}.x-picker-date-table td x-button .x-button{width:1.625rem;height:1.5rem;margin:0 auto;border:.0625rem solid #0000}.x-picker-date-table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-date-table td x-button .x-button-activated,.x-picker-date-table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-date-table td.x-date-last-or-next x-button .x-button{color:var(--x-text-400)}.x-picker-date-table td.x-date-now x-button .x-button{color:var(--x-primary);background-color:initial;border-color:var(--x-primary)}"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "xI18n": i2__namespace.XI18nPipe, "date": i1__namespace$1.DatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerDateComponent, decorators: [{
+    /** @nocollapse */ XPickerDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerDateComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i1__namespace.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.XConfigService }, { token: i3__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerDateComponent, selector: "x-picker-date", providers: [i1.DatePipe, i1.LowerCasePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-date\" [class.x-date-picker-datetemp]=\"dateTemp\">\r\n  <div class=\"x-picker-date-header\" *ngIf=\"showHeader\">\r\n    <x-button icon=\"fto-chevrons-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextMonth(-1)\"></x-button>\r\n    <div class=\"x-picker-date-year-month\">\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeOnChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeOnChange('month')\">{{ getLocaleMonth(display) }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextMonth(1)\"></x-button>\r\n    <x-button icon=\"fto-chevrons-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n  </div>\r\n  <div class=\"x-picker-date-body\">\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead>\r\n        <tr>\r\n          <th *ngFor=\"let title of titles; trackBy: trackByNode\">{{ title | xI18n }}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let weeks of dates\">\r\n          <ng-container *ngFor=\"let week of weeks; trackBy: trackByNode\">\r\n            <td\r\n              [class.x-date-last-or-next]=\"(week | date: 'yyyyMM') !== (display | date: 'yyyyMM')\"\r\n              [class.x-date-now]=\"(week | date: 'yyyyMMdd') === (now | date: 'yyyyMMdd')\"\r\n              (click)=\"dateTemp && dateClick(week)\"\r\n            >\r\n              <x-button\r\n                *ngIf=\"!dateTemp\"\r\n                type=\"text\"\r\n                size=\"mini\"\r\n                title=\"{{ week | date: 'yyyy-MM-dd' }}\"\r\n                [activated]=\"!rangePicker && (week | date: 'yyyyMMdd') === (model | date: 'yyyyMMdd')\"\r\n                (click)=\"dateClick(week)\"\r\n                >{{ week | date: 'd' }}</x-button\r\n              >\r\n              <ng-container *ngIf=\"dateTemp\">\r\n                <ng-container *ngTemplateOutlet=\"dateTemp; context: { date$: week }\"></ng-container>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-picker-date{margin:0;padding:0}.x-picker-date-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-picker-date-year-month{flex:1;text-align:center}.x-picker-date-body{padding:.5rem}.x-picker-date-body>table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-date-body>table th{font-weight:400;height:2rem;color:var(--x-text-400)}.x-picker-date-body>table td{padding:.25rem 0;text-align:center}.x-picker-date-body>table td x-button .x-button{width:1.625rem;height:1.5rem;margin:0 auto;border:.0625rem solid transparent}.x-picker-date-body>table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-date-body>table td x-button .x-button-activated{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-date-body>table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-date-body>table td.x-date-last-or-next x-button .x-button{color:var(--x-text-700)}.x-picker-date-body>table td.x-date-now x-button .x-button:not(.x-button-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i1__namespace.DatePipe, "xI18n": i3__namespace.XI18nPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerDateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XPickerDatePrefix,
                         templateUrl: './picker-date.component.html',
                         styleUrls: ['./picker-date.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.XConfigService }, { type: i2__namespace.XI18nService }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.XConfigService }, { type: i3__namespace.XI18nService }]; } });
 
     var XPickerMonthComponent = /** @class */ (function (_super) {
         __extends(XPickerMonthComponent, _super);
@@ -783,18 +889,19 @@
             });
         };
         XPickerMonthComponent.prototype.ngOnChanges = function (simples) {
-            i1.XIsChange(simples.display) && this.init();
+            var display = simples.display;
+            i2.XIsChange(display) && this.init();
         };
         XPickerMonthComponent.prototype.init = function () {
-            this.setMonths();
+            this.setMonths(this.display);
         };
-        XPickerMonthComponent.prototype.setMonths = function () {
-            var year = this.display.getFullYear();
+        XPickerMonthComponent.prototype.setMonths = function (date) {
+            var year = date.getFullYear();
             var dates = [];
             for (var i = 0; i < 16; i++) {
                 dates = __spreadArray(__spreadArray([], __read(dates)), [new Date(year, i, 1)]);
             }
-            this.dates = i1.chunk(dates, 4);
+            this.dates = i2.chunk(dates, 4);
             if (this.dates.length > 0) {
                 this.rangeChange.emit([dates[0], dates[dates.length - 1]]);
             }
@@ -807,14 +914,29 @@
         XPickerMonthComponent.prototype.getLocaleMonth = function (date) {
             return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
         };
-        XPickerMonthComponent.prototype.trackByMonth = function (index, item) {
+        XPickerMonthComponent.prototype.setDisplay = function (date) {
+            this.display = new Date(date.getFullYear(), date.getMonth(), 1);
+            this.setMonths(this.display);
+        };
+        XPickerMonthComponent.prototype.nextYear = function (num) {
+            var date = new Date(this.display);
+            date.setFullYear(date.getFullYear() + num);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XPickerMonthComponent.prototype.typeOnChange = function (type) {
+            this.type = type;
+            this.typeChange.emit(type);
+            this.cdr.detectChanges();
+        };
+        XPickerMonthComponent.prototype.trackByMonth = function (_index, item) {
             return item;
         };
         return XPickerMonthComponent;
     }(XPickerMonthProperty));
-    /** @nocollapse */ XPickerMonthComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerMonthComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i1__namespace$1.DatePipe }, { token: i1__namespace$1.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }, { token: i2__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerMonthComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerMonthComponent, selector: "x-picker-month", providers: [i1$1.DatePipe, i1$1.LowerCasePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-month\" [class.x-date-picker-monthtemp]=\"monthTemp\">\r\n  <table class=\"x-picker-month-table\" cellspacing=\"0\" cellpadding=\"0\">\r\n    <tr *ngFor=\"let months of dates\">\r\n      <ng-container *ngFor=\"let month of months; trackBy: trackByMonth\">\r\n        <td\r\n          [class.x-date-last-or-next]=\"(month | date: 'yyyy') !== (display | date: 'yyyy')\"\r\n          [class.x-date-now]=\"(month | date: 'yyyyMM') === (now | date: 'yyyyMM')\"\r\n          (click)=\"monthTemp && monthClick(month)\"\r\n        >\r\n          <x-button\r\n            *ngIf=\"!monthTemp\"\r\n            type=\"text\"\r\n            title=\"{{ month | date: 'yyyy-MM' }}\"\r\n            [activated]=\"(month | date: 'yyyyMM') === (model | date: 'yyyyMM')\"\r\n            (click)=\"monthClick(month)\"\r\n            >{{ getLocaleMonth(month) }}</x-button\r\n          >\r\n          <ng-container *ngIf=\"monthTemp\">\r\n            <ng-container *ngTemplateOutlet=\"monthTemp; context: { date$: month }\"></ng-container>\r\n          </ng-container>\r\n        </td>\r\n      </ng-container>\r\n    </tr>\r\n  </table>\r\n</div>\r\n", styles: [".x-picker-month{margin:0;padding:0}.x-picker-month-table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-month-table td{height:1.875rem;padding:.125rem 0;text-align:center}.x-picker-month-table td x-button .x-button{width:2.6rem;height:1.6rem;margin:0 auto;border:.0625rem solid #0000}.x-picker-month-table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-month-table td x-button .x-button-activated,.x-picker-month-table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-month-table td.x-date-last-or-next x-button .x-button{color:var(--x-text-400)}.x-picker-month-table td.x-date-now x-button .x-button{color:var(--x-primary);background-color:initial;border-color:var(--x-primary)}"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i1__namespace$1.DatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerMonthComponent, decorators: [{
+    /** @nocollapse */ XPickerMonthComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerMonthComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i1__namespace.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.XConfigService }, { token: i3__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerMonthComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerMonthComponent, selector: "x-picker-month", providers: [i1.DatePipe, i1.LowerCasePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-month\" [class.x-date-picker-monthtemp]=\"monthTemp\">\r\n  <div class=\"x-picker-month-header\" *ngIf=\"showHeader\">\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n    <div class=\"x-picker-month-year-month\">\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeOnChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n  </div>\r\n  <div class=\"x-picker-month-body\">\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <tr *ngFor=\"let months of dates\">\r\n        <ng-container *ngFor=\"let month of months; trackBy: trackByMonth\">\r\n          <td\r\n            [class.x-date-last-or-next]=\"(month | date: 'yyyy') !== (display | date: 'yyyy')\"\r\n            [class.x-date-now]=\"(month | date: 'yyyyMM') === (now | date: 'yyyyMM')\"\r\n            (click)=\"monthTemp && monthClick(month)\"\r\n          >\r\n            <x-button\r\n              *ngIf=\"!monthTemp\"\r\n              type=\"text\"\r\n              title=\"{{ month | date: 'yyyy-MM' }}\"\r\n              [activated]=\"(month | date: 'yyyyMM') === (model | date: 'yyyyMM')\"\r\n              (click)=\"monthClick(month)\"\r\n              >{{ getLocaleMonth(month) }}</x-button\r\n            >\r\n            <ng-container *ngIf=\"monthTemp\">\r\n              <ng-container *ngTemplateOutlet=\"monthTemp; context: { date$: month }\"></ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </ng-container>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-picker-month{margin:0;padding:0}.x-picker-month-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-picker-month-year-month{flex:1;text-align:center}.x-picker-month-body{padding:.5rem}.x-picker-month-body>table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-month-body>table td{padding:.125rem 0;text-align:center}.x-picker-month-body>table td x-button .x-button{width:3.5rem;height:3.25rem;margin:0 auto;border:.0625rem solid transparent}.x-picker-month-body>table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-month-body>table td x-button .x-button-activated{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-month-body>table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-month-body>table td.x-date-last-or-next x-button .x-button{color:var(--x-text-700)}.x-picker-month-body>table td.x-date-now x-button .x-button:not(.x-button-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i1__namespace.DatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerMonthComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'x-picker-month',
@@ -822,9 +944,9 @@
                         styleUrls: ['./picker-month.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [i1$1.DatePipe, i1$1.LowerCasePipe]
+                        providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace$1.DatePipe }, { type: i1__namespace$1.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.XConfigService }, { type: i2__namespace.XI18nService }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.XConfigService }, { type: i3__namespace.XI18nService }]; } });
 
     var XPickerYearComponent = /** @class */ (function (_super) {
         __extends(XPickerYearComponent, _super);
@@ -839,20 +961,21 @@
             return _this;
         }
         XPickerYearComponent.prototype.ngOnChanges = function (simples) {
-            i1.XIsChange(simples.display) && this.init();
+            var display = simples.display;
+            i2.XIsChange(display) && this.init();
         };
         XPickerYearComponent.prototype.init = function () {
-            this.setYears();
+            this.setYears(this.display);
         };
-        XPickerYearComponent.prototype.setYears = function () {
-            var year = this.display.getFullYear();
+        XPickerYearComponent.prototype.setYears = function (date) {
+            var year = date.getFullYear();
             this.start = Math.floor(year / 10) * 10;
             this.end = this.start + 9;
             var dates = [];
             for (var i = -3; i < 13; i++) {
                 dates = __spreadArray(__spreadArray([], __read(dates)), [new Date(this.start + i, 1, 1)]);
             }
-            this.dates = i1.chunk(dates, 4);
+            this.dates = i2.chunk(dates, 4);
             this.startChange.emit(this.start);
         };
         XPickerYearComponent.prototype.yearClick = function (date) {
@@ -864,17 +987,28 @@
             var yearStr = this.datePipe.transform(year, 'yyyy');
             return yearStr < "" + this.start || yearStr > "" + this.end;
         };
+        XPickerYearComponent.prototype.setDisplay = function (date) {
+            this.display = new Date(date.getFullYear(), date.getMonth(), 1);
+            this.setYears(this.display);
+        };
+        XPickerYearComponent.prototype.nextYears = function (num) {
+            this.start += num;
+            var date = new Date(this.display);
+            date.setFullYear(this.start);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
         XPickerYearComponent.prototype.equalYear = function (one, two) {
             return this.datePipe.transform(one, 'yyyy') === this.datePipe.transform(two, 'yyyy');
         };
-        XPickerYearComponent.prototype.trackByYear = function (index, item) {
+        XPickerYearComponent.prototype.trackByYear = function (_index, item) {
             return item;
         };
         return XPickerYearComponent;
     }(XPickerYearProperty));
-    /** @nocollapse */ XPickerYearComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerYearComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.DatePipe }, { token: i1__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XPickerYearComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XPickerYearComponent, selector: "x-picker-year", providers: [i1$1.DatePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-year\">\r\n  <table class=\"x-picker-year-table\" cellspacing=\"0\" cellpadding=\"0\">\r\n    <tr *ngFor=\"let years of dates\">\r\n      <ng-container *ngFor=\"let year of years; trackBy: trackByYear\">\r\n        <td [class.x-date-last-or-next]=\"lastOrNext(year)\" [class.x-date-now]=\"equalYear(year, now)\">\r\n          <x-button type=\"text\" [activated]=\"equalYear(year, now)\" (click)=\"yearClick(year)\">{{ year | date: 'yyyy' }}</x-button>\r\n        </td>\r\n      </ng-container>\r\n    </tr>\r\n  </table>\r\n</div>\r\n", styles: [".x-picker-year{margin:0;padding:0}.x-picker-year-table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-year-table td{height:1.875rem;padding:.125rem 0;text-align:center}.x-picker-year-table td x-button .x-button{width:2.6rem;height:1.6rem;margin:0 auto;border:.0625rem solid #0000}.x-picker-year-table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-year-table td x-button .x-button-activated,.x-picker-year-table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-year-table td.x-date-last-or-next x-button .x-button{color:var(--x-text-400)}.x-picker-year-table td.x-date-now x-button .x-button{color:var(--x-primary);background-color:initial;border-color:var(--x-primary)}"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace$1.DatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XPickerYearComponent, decorators: [{
+    /** @nocollapse */ XPickerYearComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerYearComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.DatePipe }, { token: i2__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XPickerYearComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XPickerYearComponent, selector: "x-picker-year", providers: [i1.DatePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-picker-year\">\r\n  <div class=\"x-picker-year-header\" *ngIf=\"showHeader\">\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYears(-10)\"></x-button>\r\n    <div class=\"x-date-picker-portal-year-month\">\r\n      <x-button type=\"text\" size=\"small\">{{ start }}</x-button> -\r\n      <x-button type=\"text\" size=\"small\">{{ end }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYears(10)\"></x-button>\r\n  </div>\r\n  <div class=\"x-picker-year-body\">\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <tr *ngFor=\"let years of dates\">\r\n        <ng-container *ngFor=\"let year of years; trackBy: trackByYear\">\r\n          <td [class.x-date-last-or-next]=\"lastOrNext(year)\" [class.x-date-now]=\"equalYear(year, now)\">\r\n            <x-button type=\"text\" [activated]=\"equalYear(year, now)\" (click)=\"yearClick(year)\">{{ year | date: 'yyyy' }}</x-button>\r\n          </td>\r\n        </ng-container>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-picker-year{margin:0;padding:0}.x-picker-year-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-picker-year-year-month{flex:1;text-align:center}.x-picker-year-body{padding:.5rem}.x-picker-year-body>table{width:100%;border-collapse:collapse;border-spacing:0}.x-picker-year-body>table td{padding:.125rem 0;text-align:center}.x-picker-year-body>table td x-button .x-button{width:3.5rem;height:3.25rem;margin:0 auto;border:.0625rem solid transparent}.x-picker-year-body>table td x-button .x-button:hover{background-color:var(--x-primary-900)}.x-picker-year-body>table td x-button .x-button-activated{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-year-body>table td x-button .x-button-activated:hover{color:var(--x-background-100);background-color:var(--x-primary)}.x-picker-year-body>table td.x-date-last-or-next x-button .x-button{color:var(--x-text-700)}.x-picker-year-body>table td.x-date-now x-button .x-button:not(.x-button-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XPickerYearComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'x-picker-year',
@@ -882,9 +1016,9 @@
                         styleUrls: ['./picker-year.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [i1$1.DatePipe]
+                        providers: [i1.DatePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.DatePipe }, { type: i1__namespace.XConfigService }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.DatePipe }, { type: i2__namespace.XConfigService }]; } });
 
     var XDatePickerPortalComponent = /** @class */ (function () {
         function XDatePickerPortalComponent(datePipe, lowerCasePipe, cdr, i18n) {
@@ -895,6 +1029,7 @@
             this.type = 'date';
             this.display = new Date();
             this.locale = {};
+            this.time = new Date().getTime();
             this.preset = [];
             this._unSubject = new rxjs.Subject();
         }
@@ -902,7 +1037,7 @@
             this.animating(false);
             event.toState === 'void' && this.destroyPortal();
         };
-        XDatePickerPortalComponent.prototype.start = function (event) {
+        XDatePickerPortalComponent.prototype.start = function () {
             this.animating(true);
         };
         XDatePickerPortalComponent.prototype.ngOnInit = function () {
@@ -930,15 +1065,10 @@
             this._unSubject.unsubscribe();
         };
         XDatePickerPortalComponent.prototype.init = function () {
-            if (!i1.XIsEmpty(this.value)) {
+            if (!i2.XIsEmpty(this.value)) {
                 this.setDefault();
             }
-            else {
-                this.model = this.display;
-            }
-            this.time = this.model.getTime();
             this._type = this.type;
-            this.setDisplay(this.model);
             this.cdr.detectChanges();
         };
         XDatePickerPortalComponent.prototype.stopPropagation = function (event) {
@@ -947,6 +1077,8 @@
         XDatePickerPortalComponent.prototype.setDefault = function () {
             var date = new Date(this.value);
             this.model = date;
+            this.time = this.model.getTime();
+            this.setDisplay(this.model);
         };
         XDatePickerPortalComponent.prototype.setDisplay = function (date) {
             this.display = new Date(date.getFullYear(), date.getMonth(), 1);
@@ -954,18 +1086,14 @@
         XDatePickerPortalComponent.prototype.dateChange = function (date) {
             this.setDisplay(date);
             this.model = date;
-            this.setModel(this.model, new Date(this.time));
             if (['date-time', 'date-hour', 'date-minute'].includes(this._type)) {
+                this.setModelTime(this.model, new Date(this.time));
                 this.nodeEmit(this.model, false);
             }
             else {
                 this.nodeEmit(this.model);
             }
         };
-        XDatePickerPortalComponent.prototype.typeChange = function (type) {
-            this.type = type;
-            this.cdr.detectChanges();
-        };
         XDatePickerPortalComponent.prototype.monthChange = function (date) {
             this.setDisplay(date);
             if (this._type === 'month') {
@@ -988,58 +1116,32 @@
             }
             this.cdr.detectChanges();
         };
-        XDatePickerPortalComponent.prototype.yearStartChange = function (number) {
-            this.startYear = number;
-            this.cdr.detectChanges();
-        };
-        XDatePickerPortalComponent.prototype.nextMonth = function (num) {
-            var date = new Date(this.display);
-            date.setMonth(date.getMonth() + num);
-            this.setDisplay(date);
-            this.cdr.detectChanges();
-        };
-        XDatePickerPortalComponent.prototype.nextYear = function (num) {
-            var date = new Date(this.display);
-            date.setFullYear(date.getFullYear() + num);
-            this.setDisplay(date);
-            this.cdr.detectChanges();
-        };
-        XDatePickerPortalComponent.prototype.nextYears = function (num) {
-            this.startYear += num;
-            var date = new Date(this.display);
-            date.setFullYear(this.startYear);
-            this.setDisplay(date);
-            this.cdr.detectChanges();
-        };
-        XDatePickerPortalComponent.prototype.getLocaleMonth = function (date) {
-            return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
-        };
         XDatePickerPortalComponent.prototype.onToday = function () {
             this.dateChange(new Date());
         };
         XDatePickerPortalComponent.prototype.onYesterday = function () {
-            this.dateChange(i1.XAddDays(new Date(), -1));
+            this.dateChange(i2.XAddDays(new Date(), -1));
         };
         XDatePickerPortalComponent.prototype.onTomorrow = function () {
-            this.dateChange(i1.XAddDays(new Date(), 1));
+            this.dateChange(i2.XAddDays(new Date(), 1));
         };
         XDatePickerPortalComponent.prototype.onPresetFunc = function (item) {
             this.dateChange(item.func());
         };
         XDatePickerPortalComponent.prototype.selectTime = function (time) {
             this.time = time.getTime();
-            this.nodeEmit(this.setModel(this.model, time), false);
+            this.nodeEmit(this.setModelTime(this.model, time), false);
             this.cdr.detectChanges();
         };
-        XDatePickerPortalComponent.prototype.setModel = function (date, time) {
+        XDatePickerPortalComponent.prototype.setModelTime = function (date, time) {
             this.model = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
             return this.model;
         };
         return XDatePickerPortalComponent;
     }());
-    /** @nocollapse */ XDatePickerPortalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerPortalComponent, deps: [{ token: i1__namespace$1.DatePipe }, { token: i1__namespace$1.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDatePickerPortalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDatePickerPortalComponent, selector: "x-date-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" } }, providers: [i1$1.DatePipe, i1$1.LowerCasePipe], ngImport: i0__namespace, template: "<div class=\"x-date-picker-portal {{ type }}\" [ngSwitch]=\"type\">\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    <div class=\"x-date-picker-portal-header\">\r\n      <ng-container *ngTemplateOutlet=\"dateHeaderTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-body\">\r\n      <x-picker-date [display]=\"display\" [model]=\"model\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n    </div>\r\n    <div *ngIf=\"preset\" class=\"x-date-picker-portal-preset\">\r\n      <ng-container *ngFor=\"let item of preset\">\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'yesterday'\" (click)=\"onYesterday()\">{{ locale.yesterday }}</x-button>\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'today'\" (click)=\"onToday()\">{{ locale.today }}</x-button>\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'tomorrow'\" (click)=\"onTomorrow()\">{{ locale.tomorrow }}</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  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'month'\">\r\n    <div class=\"x-date-picker-portal-header\">\r\n      <ng-container *ngTemplateOutlet=\"monthHeaderTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-body\">\r\n      <x-picker-month [display]=\"display\" [model]=\"model\" (modelChange)=\"monthChange($event)\"></x-picker-month>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'year'\">\r\n    <div class=\"x-date-picker-portal-header\">\r\n      <ng-container *ngTemplateOutlet=\"yearHeaderTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-body\">\r\n      <x-picker-year\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        (modelChange)=\"yearChange($event)\"\r\n        (startChange)=\"yearStartChange($event)\"\r\n      ></x-picker-year>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-time'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-hour'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-minute'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #dateHeaderTpl>\r\n  <x-button icon=\"fto-chevrons-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n  <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextMonth(-1)\"></x-button>\r\n  <div class=\"x-date-picker-portal-year-month\">\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('month')\">{{ getLocaleMonth(display) }}</x-button>\r\n  </div>\r\n  <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextMonth(1)\"></x-button>\r\n  <x-button icon=\"fto-chevrons-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n</ng-template>\r\n\r\n<ng-template #monthHeaderTpl>\r\n  <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n  <div class=\"x-date-picker-portal-year-month\">\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n  </div>\r\n  <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n</ng-template>\r\n\r\n<ng-template #yearHeaderTpl>\r\n  <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYears(-10)\"></x-button>\r\n  <div class=\"x-date-picker-portal-year-month\">\r\n    <x-button type=\"text\" size=\"small\">{{ startYear }}</x-button> -\r\n    <x-button type=\"text\" size=\"small\">{{ startYear + 9 }}</x-button>\r\n  </div>\r\n  <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYears(10)\"></x-button>\r\n</ng-template>\r\n\r\n<ng-template #dateTimeHourMinuteTpl let-timeFormat=\"timeFormat\" let-timeType=\"timeType\">\r\n  <div class=\"x-date-picker-portal-content\">\r\n    <div class=\"x-date-picker-portal-date\">\r\n      <div class=\"x-date-picker-portal-header\">\r\n        <ng-container *ngTemplateOutlet=\"dateHeaderTpl\"></ng-container>\r\n      </div>\r\n      <div class=\"x-date-picker-portal-body\">\r\n        <x-picker-date [display]=\"display\" [model]=\"model\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-time\">\r\n      <div class=\"x-date-picker-portal-time-label\">\r\n        <x-button type=\"text\" size=\"small\">{{ time | date: timeFormat }}</x-button>\r\n      </div>\r\n      <x-time-picker-frame [type]=\"timeType\" [value]=\"time\" (nodeEmit)=\"selectTime($event)\"></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-date-picker-portal-footer\">\r\n    <x-button type=\"primary\" size=\"small\" (click)=\"nodeEmit(model)\">{{ locale.sure }}</x-button>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-date-picker-portal{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);width:16rem;display:flex;flex-direction:column;font-size:var(--x-font-size-small)}.x-date-picker-portal.date-time{width:27rem}.x-date-picker-portal.date-hour{width:19.75rem}.x-date-picker-portal.date-minute{width:23.375rem}.x-date-picker-portal-content{display:flex}.x-date-picker-portal-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-date-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-date-picker-portal-preset>x-button{flex:1}.x-date-picker-portal-year-month{flex:1;text-align:center}.x-date-picker-portal-body{padding:.4rem}.x-date-picker-portal-footer{display:flex;justify-content:flex-end;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-picker-portal-date{flex:1}.x-date-picker-portal-time{display:flex;flex-direction:column}.x-date-picker-portal-time-label{padding:.4rem;text-align:center;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-picker-portal-time .x-time-picker-frame{border-left-width:var(--x-border-width);border-bottom-width:0;border-right-width:0;border-top-width:var(--x-border-width);box-shadow:none}"], components: [{ type: XPickerDateComponent, selector: "x-picker-date" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }, { type: XPickerMonthComponent, selector: "x-picker-month" }, { type: XPickerYearComponent, selector: "x-picker-year" }, { type: i7__namespace.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value"], outputs: ["nodeEmit"] }], directives: [{ type: i1__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace$1.DatePipe }, animations: [i1.XConnectBaseAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerPortalComponent, decorators: [{
+    /** @nocollapse */ XDatePickerPortalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerPortalComponent, deps: [{ token: i1__namespace.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDatePickerPortalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDatePickerPortalComponent, selector: "x-date-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" } }, providers: [i1.DatePipe, i1.LowerCasePipe], ngImport: i0__namespace, template: "<div class=\"x-date-picker-portal {{ type }}\" [ngSwitch]=\"type\" (click)=\"inputCom.inputFocus()\">\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    <x-picker-date [display]=\"display\" [model]=\"model\" [(type)]=\"type\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n    <div *ngIf=\"preset\" class=\"x-date-picker-portal-preset\">\r\n      <ng-container *ngFor=\"let item of preset\">\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'yesterday'\" (click)=\"onYesterday()\">{{ locale.yesterday }}</x-button>\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'today'\" (click)=\"onToday()\">{{ locale.today }}</x-button>\r\n        <x-button type=\"text\" *ngIf=\"item.id === 'tomorrow'\" (click)=\"onTomorrow()\">{{ locale.tomorrow }}</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  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'month'\">\r\n    <x-picker-month [display]=\"display\" [model]=\"model\" [(type)]=\"type\" (modelChange)=\"monthChange($event)\"></x-picker-month>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'year'\">\r\n    <x-picker-year [display]=\"display\" [model]=\"model\" [(type)]=\"type\" (modelChange)=\"yearChange($event)\"></x-picker-year>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-time'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-hour'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'date-minute'\">\r\n    <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #dateTimeHourMinuteTpl let-timeFormat=\"timeFormat\" let-timeType=\"timeType\">\r\n  <div class=\"x-date-picker-portal-content\">\r\n    <div class=\"x-date-picker-portal-date\">\r\n      <x-picker-date [display]=\"display\" [(type)]=\"type\" [model]=\"model\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-time\">\r\n      <div class=\"x-date-picker-portal-time-label\">\r\n        <x-button type=\"text\" size=\"small\">{{ time | date: timeFormat }}</x-button>\r\n      </div>\r\n      <x-time-picker-frame [type]=\"timeType\" [value]=\"time\" (nodeEmit)=\"selectTime($event)\"></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-date-picker-portal-footer\">\r\n    <x-button type=\"primary\" size=\"small\" (click)=\"nodeEmit(model)\">{{ locale.sure }}</x-button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-date-picker-portal{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);width:16rem;display:flex;flex-direction:column;font-size:var(--x-font-size-small)}.x-date-picker-portal.date-time{width:27rem}.x-date-picker-portal.date-hour{width:19.75rem}.x-date-picker-portal.date-minute{width:23.375rem}.x-date-picker-portal-content{display:flex}.x-date-picker-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-date-picker-portal-preset>x-button{flex:1}.x-date-picker-portal-body{padding:.4rem}.x-date-picker-portal-footer{display:flex;justify-content:flex-end;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-picker-portal-date{flex:1}.x-date-picker-portal-time{display:flex;flex-direction:column;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-picker-portal-time-label{padding:.5rem;text-align:center;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-picker-portal-time .x-time-picker-frame{border-width:0;box-shadow:none;margin:0}\n"], components: [{ type: XPickerDateComponent, selector: "x-picker-date" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }, { type: XPickerMonthComponent, selector: "x-picker-month" }, { type: XPickerYearComponent, selector: "x-picker-year" }, { type: i7__namespace.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value"], outputs: ["nodeEmit"] }], directives: [{ type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i1__namespace.DatePipe }, animations: [i2.XConnectBaseAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerPortalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XDatePickerPortalPrefix,
@@ -1047,10 +1149,10 @@
                         styleUrls: ['./date-picker-portal.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [i1.XConnectBaseAnimation],
-                        providers: [i1$1.DatePipe, i1$1.LowerCasePipe]
+                        animations: [i2.XConnectBaseAnimation],
+                        providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DatePipe }, { type: i1__namespace$1.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.XI18nService }]; }, propDecorators: { placement: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.XI18nService }]; }, propDecorators: { placement: [{
                     type: i0.HostBinding,
                     args: ['@x-connect-base-animation']
                 }], done: [{
@@ -1063,11 +1165,10 @@
 
     var XDatePickerComponent = /** @class */ (function (_super) {
         __extends(XDatePickerComponent, _super);
-        function XDatePickerComponent(renderer, configService, elementRef, cdr, portalService, viewContainerRef, datePipe, overlay) {
+        function XDatePickerComponent(renderer, configService, cdr, portalService, viewContainerRef, datePipe, overlay) {
             var _this = _super.call(this) || this;
             _this.renderer = renderer;
             _this.configService = configService;
-            _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.portalService = portalService;
             _this.viewContainerRef = viewContainerRef;
@@ -1090,20 +1191,20 @@
             return _this;
         }
         XDatePickerComponent.prototype.writeValue = function (value) {
-            if (i1.XIsDate(value)) {
+            if (i2.XIsDate(value)) {
                 this.modelType = 'date';
                 this.numberValue = value.getTime();
             }
-            else if (i1.XIsNumber(value)) {
+            else if (i2.XIsNumber(value)) {
                 this.modelType = 'number';
                 this.numberValue = value;
             }
-            else if (i1.XIsString(value)) {
+            else if (i2.XIsString(value)) {
                 this.modelType = 'string';
                 var valueTime = new Date(value).getTime();
                 this.numberValue = !isNaN(valueTime) ? valueTime : '';
             }
-            else if (i1.XIsEmpty(value)) {
+            else if (i2.XIsEmpty(value)) {
                 this.numberValue = '';
             }
             this.value = value;
@@ -1121,7 +1222,8 @@
             this.setPortal();
         };
         XDatePickerComponent.prototype.ngOnChanges = function (changes) {
-            if (i1.XIsChange(changes.type)) {
+            var type = changes.type;
+            if (i2.XIsChange(type)) {
                 this.setFormat();
                 this.setDisplayValue(this.numberValue);
             }
@@ -1132,7 +1234,7 @@
         };
         XDatePickerComponent.prototype.setSubject = function () {
             var _this = this;
-            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
+            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function () {
                 _this.closePortal();
             });
         };
@@ -1162,7 +1264,7 @@
             if (this.disabled)
                 return;
             this.enter = true;
-            if (!i1.XIsEmpty(this.numberValue)) {
+            if (!i2.XIsEmpty(this.numberValue)) {
                 this.icon = '';
                 this.inputClearable = true;
                 this.cdr.detectChanges();
@@ -1192,11 +1294,7 @@
             }
         };
         XDatePickerComponent.prototype.getValue = function () {
-            return this.modelType === 'date'
-                ? new Date(this.numberValue)
-                : this.modelType === 'string'
-                    ? this.datePipe.transform(this.numberValue, this.format)
-                    : this.numberValue;
+            return ['date', 'string'].includes(this.modelType) ? new Date(this.numberValue) : this.numberValue;
         };
         XDatePickerComponent.prototype.portalAttached = function () {
             var _a, _b;
@@ -1206,6 +1304,7 @@
             var _a, _b;
             if (this.portalAttached()) {
                 (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+                this.active = false;
                 this.cdr.detectChanges();
                 return true;
             }
@@ -1220,6 +1319,7 @@
             var _a;
             if (this.disabled || this.animating)
                 return;
+            this.active = true;
             var config = {
                 backdropClass: '',
                 positionStrategy: this.setPlacement(),
@@ -1258,6 +1358,7 @@
                 preset: this.preset,
                 valueChange: this.valueChange,
                 positionChange: this.positionChange,
+                inputCom: this.inputCom,
                 closePortal: function () { return _this.closeSubject.next(); },
                 destroyPortal: function () { return _this.destroyPortal(); },
                 nodeEmit: function (node, sure) {
@@ -1311,7 +1412,7 @@
             this.portalAttached() && ((_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePositionStrategy(this.setPlacement()));
         };
         XDatePickerComponent.prototype.setClassMap = function () {
-            i1.XClearClass(this.labelMap);
+            i2.XClearClass(this.labelMap);
             this.labelMap["x-text-align-" + this.labelAlign] = this.labelAlign ? true : false;
         };
         XDatePickerComponent.prototype.formControlChanges = function () {
@@ -1320,9 +1421,9 @@
         };
         return XDatePickerComponent;
     }(XDatePickerProperty));
-    /** @nocollapse */ XDatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i1__namespace.XConfigService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$1.DatePipe }, { token: i4__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDatePickerComponent, selector: "x-date-picker", providers: [baseForm.XValueAccessor(XDatePickerComponent), i1$1.DatePipe], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, static: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div #datePicker class=\"x-date-picker\">\r\n  <div class=\"x-date-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      [icon]=\"icon\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable && inputClearable\"\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      (clearEmit)=\"clearEmit()\"\r\n      (xInput)=\"onInput()\"\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: ["x-date-picker{display:inline-block}.x-date-picker{margin:0;padding:0;width:100%}"], components: [{ type: i5__namespace.XInputComponent, selector: "x-input" }], directives: [{ type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerComponent, decorators: [{
+    /** @nocollapse */ XDatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i2__namespace.XConfigService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace.DatePipe }, { token: i4__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDatePickerComponent, selector: "x-date-picker", providers: [baseForm.XValueAccessor(XDatePickerComponent), i1.DatePipe], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, static: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div #datePicker class=\"x-date-picker\">\r\n  <div class=\"x-date-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      [icon]=\"icon\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable && inputClearable\"\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]=\"pointer\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xInput)=\"onInput()\"\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-date-picker{display:inline-block}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"], components: [{ type: i5__namespace.XInputComponent, selector: "x-input" }], directives: [{ type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XDatePickerPrefix,
@@ -1330,9 +1431,9 @@
                         styleUrls: ['./date-picker.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [baseForm.XValueAccessor(XDatePickerComponent), i1$1.DatePipe]
+                        providers: [baseForm.XValueAccessor(XDatePickerComponent), i1.DatePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace.XConfigService }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$1.DatePipe }, { type: i4__namespace$1.Overlay }]; }, propDecorators: { datePicker: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i2__namespace.XConfigService }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace.DatePipe }, { type: i4__namespace$1.Overlay }]; }, propDecorators: { datePicker: [{
                     type: i0.ViewChild,
                     args: ['datePicker', { static: true }]
                 }], inputCom: [{
@@ -1348,6 +1449,9 @@
             this.i18n = i18n;
             this.type = 'date';
             this.display = new Date();
+            this.startDisplay = new Date();
+            this.endDisplay = i2.XAddMonths(this.startDisplay, 1);
+            this.value = [];
             this.locale = {};
             this.preset = [];
             this._unSubject = new rxjs.Subject();
@@ -1356,7 +1460,7 @@
             this.animating(false);
             event.toState === 'void' && this.destroyPortal();
         };
-        XDateRangePortalComponent.prototype.start = function (event) {
+        XDateRangePortalComponent.prototype.start = function () {
             this.animating(true);
         };
         XDateRangePortalComponent.prototype.ngOnInit = function () {
@@ -1384,11 +1488,14 @@
             this._unSubject.unsubscribe();
         };
         XDateRangePortalComponent.prototype.init = function () {
-            if (!i1.XIsEmpty(this.value)) {
+            if (!i2.XIsEmpty(this.value)) {
                 this.setDefault();
             }
             else {
+                this.value = [];
                 this.model = this.display;
+                this.startModel = this.model;
+                this.endModel = i2.XAddMonths(this.model, 1);
             }
             this.time = this.model.getTime();
             this._type = this.type;
@@ -1399,21 +1506,39 @@
             event.stopPropagation();
         };
         XDateRangePortalComponent.prototype.setDefault = function () {
-            var date = new Date(this.value);
+            var date = new Date();
             this.model = date;
+            if (this.value.length > 0) {
+                this.startModel = new Date(this.value[0]);
+                this.startDisplay = this.startModel;
+            }
+            if (this.value.length > 1) {
+                this.endModel = new Date(this.value[1]);
+                this.endDisplay = this.endModel;
+            }
         };
         XDateRangePortalComponent.prototype.setDisplay = function (date) {
             this.display = new Date(date.getFullYear(), date.getMonth(), 1);
+            this.startDisplay = this.display;
+            this.endDisplay = i2.XAddMonths(this.display, 1);
         };
         XDateRangePortalComponent.prototype.dateChange = function (date) {
-            this.setDisplay(date);
-            this.model = date;
-            this.setModel(this.model, new Date(this.time));
-            if (['date-time', 'date-hour', 'date-minute'].includes(this._type)) {
-                this.nodeEmit(this.model, false);
-            }
-            else {
-                this.nodeEmit(this.model);
+            var time = date.getTime();
+            if (this.value.length === 0) {
+                this.value.push(time);
+                this.startNodeEmit(date);
+            }
+            else if (this.value.length === 1) {
+                if (time > this.value[0]) {
+                    this.value.push(time);
+                    this.endNodeEmit(date);
+                }
+                else {
+                    this.value.unshift(time);
+                    this.startNodeEmit(date);
+                    this.endNodeEmit(new Date(this.value[1]));
+                }
+                this.nodeEmit(this.value.map(function (x) { return new Date(x); }));
             }
         };
         XDateRangePortalComponent.prototype.typeChange = function (type) {
@@ -1424,7 +1549,7 @@
             this.setDisplay(date);
             if (this._type === 'month') {
                 this.model = date;
-                this.nodeEmit(date);
+                // this.nodeEmit(date);
             }
             else {
                 this.type = this._type;
@@ -1435,7 +1560,7 @@
             this.setDisplay(date);
             if (this._type === 'year') {
                 this.model = date;
-                this.nodeEmit(date);
+                // this.nodeEmit(date);
             }
             else {
                 this.type = 'month';
@@ -1472,17 +1597,17 @@
             this.dateChange(new Date());
         };
         XDateRangePortalComponent.prototype.onYesterday = function () {
-            this.dateChange(i1.XAddDays(new Date(), -1));
+            this.dateChange(i2.XAddDays(new Date(), -1));
         };
         XDateRangePortalComponent.prototype.onTomorrow = function () {
-            this.dateChange(i1.XAddDays(new Date(), 1));
+            this.dateChange(i2.XAddDays(new Date(), 1));
         };
         XDateRangePortalComponent.prototype.onPresetFunc = function (item) {
             this.dateChange(item.func());
         };
         XDateRangePortalComponent.prototype.selectTime = function (time) {
             this.time = time.getTime();
-            this.nodeEmit(this.setModel(this.model, time), false);
+            // this.nodeEmit(this.setModel(this.model, time), false);
             this.cdr.detectChanges();
         };
         XDateRangePortalComponent.prototype.setModel = function (date, time) {
@@ -1491,9 +1616,9 @@
         };
         return XDateRangePortalComponent;
     }());
-    /** @nocollapse */ XDateRangePortalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangePortalComponent, deps: [{ token: i1__namespace$1.DatePipe }, { token: i1__namespace$1.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDateRangePortalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDateRangePortalComponent, selector: "x-date-range-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, providers: [i1$1.DatePipe, i1$1.LowerCasePipe], ngImport: i0__namespace, template: "<div class=\"x-date-picker-portal {{ type }}\" [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <div class=\"x-date-picker-portal-header\">\r\n        <ng-container *ngTemplateOutlet=\"dateHeaderTpl\"></ng-container>\r\n      </div>\r\n      <div class=\"x-date-picker-portal-body\">\r\n        <x-picker-date [display]=\"display\" [model]=\"model\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n      </div>\r\n      <div *ngIf=\"preset\" class=\"x-date-picker-portal-preset\">\r\n        <ng-container *ngFor=\"let item of preset\">\r\n          <x-button type=\"text\" *ngIf=\"item.id === 'yesterday'\" (click)=\"onYesterday()\">{{ locale.yesterday }}</x-button>\r\n          <x-button type=\"text\" *ngIf=\"item.id === 'today'\" (click)=\"onToday()\">{{ locale.today }}</x-button>\r\n          <x-button type=\"text\" *ngIf=\"item.id === 'tomorrow'\" (click)=\"onTomorrow()\">{{ locale.tomorrow }}</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    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'month'\">\r\n      <div class=\"x-date-picker-portal-header\">\r\n        <ng-container *ngTemplateOutlet=\"monthHeaderTpl\"></ng-container>\r\n      </div>\r\n      <div class=\"x-date-picker-portal-body\">\r\n        <x-picker-month [display]=\"display\" [model]=\"model\" (modelChange)=\"monthChange($event)\"></x-picker-month>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'year'\">\r\n      <div class=\"x-date-picker-portal-header\">\r\n        <ng-container *ngTemplateOutlet=\"yearHeaderTpl\"></ng-container>\r\n      </div>\r\n      <div class=\"x-date-picker-portal-body\">\r\n        <x-picker-year\r\n          [display]=\"display\"\r\n          [model]=\"model\"\r\n          (modelChange)=\"yearChange($event)\"\r\n          (startChange)=\"yearStartChange($event)\"\r\n        ></x-picker-year>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date-time'\">\r\n      <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date-hour'\">\r\n      <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date-minute'\">\r\n      <ng-container *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n  \r\n  <ng-template #dateHeaderTpl>\r\n    <x-button icon=\"fto-chevrons-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextMonth(-1)\"></x-button>\r\n    <div class=\"x-date-picker-portal-year-month\">\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeChange('month')\">{{ getLocaleMonth(display) }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextMonth(1)\"></x-button>\r\n    <x-button icon=\"fto-chevrons-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n  </ng-template>\r\n  \r\n  <ng-template #monthHeaderTpl>\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n    <div class=\"x-date-picker-portal-year-month\">\r\n      <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ display | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n  </ng-template>\r\n  \r\n  <ng-template #yearHeaderTpl>\r\n    <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextYears(-10)\"></x-button>\r\n    <div class=\"x-date-picker-portal-year-month\">\r\n      <x-button type=\"text\" size=\"small\">{{ startYear }}</x-button> -\r\n      <x-button type=\"text\" size=\"small\">{{ startYear + 9 }}</x-button>\r\n    </div>\r\n    <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextYears(10)\"></x-button>\r\n  </ng-template>\r\n  \r\n  <ng-template #dateTimeHourMinuteTpl let-timeFormat=\"timeFormat\" let-timeType=\"timeType\">\r\n    <div class=\"x-date-picker-portal-content\">\r\n      <div class=\"x-date-picker-portal-date\">\r\n        <div class=\"x-date-picker-portal-header\">\r\n          <ng-container *ngTemplateOutlet=\"dateHeaderTpl\"></ng-container>\r\n        </div>\r\n        <div class=\"x-date-picker-portal-body\">\r\n          <x-picker-date [display]=\"display\" [model]=\"model\" (modelChange)=\"dateChange($event)\"></x-picker-date>\r\n        </div>\r\n      </div>\r\n      <div class=\"x-date-picker-portal-time\">\r\n        <div class=\"x-date-picker-portal-time-label\">\r\n          <x-button type=\"text\" size=\"small\">{{ time | date: timeFormat }}</x-button>\r\n        </div>\r\n        <x-time-picker-frame [type]=\"timeType\" [value]=\"time\" (nodeEmit)=\"selectTime($event)\"></x-time-picker-frame>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-date-picker-portal-footer\">\r\n      <x-button type=\"primary\" size=\"small\" (click)=\"nodeEmit(model)\">{{ locale.sure }}</x-button>\r\n    </div>\r\n  </ng-template>\r\n  ", styles: [".x-date-range-portal{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);width:16rem;display:flex;flex-direction:column;font-size:var(--x-font-size-small)}.x-date-range-portal.date-time{width:27rem}.x-date-range-portal.date-hour{width:19.75rem}.x-date-range-portal.date-minute{width:23.375rem}.x-date-range-portal-content{display:flex}.x-date-range-portal-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset>x-button{flex:1}.x-date-range-portal-year-month{flex:1;text-align:center}.x-date-range-portal-body{padding:.4rem}.x-date-range-portal-footer{display:flex;justify-content:flex-end;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-date{flex:1}.x-date-range-portal-time{display:flex;flex-direction:column}.x-date-range-portal-time-label{padding:.4rem;text-align:center;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time .x-time-picker-frame{border-left-width:var(--x-border-width);border-bottom-width:0;border-right-width:0;border-top-width:var(--x-border-width);box-shadow:none}"], components: [{ type: XPickerDateComponent, selector: "x-picker-date" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }, { type: XPickerMonthComponent, selector: "x-picker-month" }, { type: XPickerYearComponent, selector: "x-picker-year" }, { type: i7__namespace.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value"], outputs: ["nodeEmit"] }], directives: [{ type: i1__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace$1.DatePipe }, animations: [i1.XConnectBaseAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangePortalComponent, decorators: [{
+    /** @nocollapse */ XDateRangePortalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangePortalComponent, deps: [{ token: i1__namespace.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDateRangePortalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDateRangePortalComponent, selector: "x-date-range-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)" }, properties: { "@x-connect-base-animation": "this.placement" } }, providers: [i1.DatePipe, i1.LowerCasePipe], ngImport: i0__namespace, template: "<div class=\"x-date-range-portal {{ type }}\" [ngSwitch]=\"type\">\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    <div class=\"x-date-range-portal-header\">\r\n      <ng-container *ngTemplateOutlet=\"startDateHeaderTpl\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"endDateHeaderTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"x-date-range-portal-body\">\r\n      <x-picker-date\r\n        class=\"x-date-range-portal-start\"\r\n        [display]=\"startDisplay\"\r\n        [model]=\"startModel\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        rangePicker\r\n      ></x-picker-date>\r\n      <x-picker-date\r\n        class=\"x-date-range-portal-end\"\r\n        [display]=\"endDisplay\"\r\n        [model]=\"endModel\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        rangePicker\r\n      ></x-picker-date>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #startDateHeaderTpl>\r\n  <x-button icon=\"fto-chevrons-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\"></x-button>\r\n  <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextMonth(-1)\"></x-button>\r\n  <div class=\"x-date-range-portal-year-month\">\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ startDisplay | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('month')\">{{ getLocaleMonth(startDisplay) }}</x-button>\r\n  </div>\r\n  <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon style=\"visibility: hidden\"></x-button>\r\n  <x-button icon=\"fto-chevrons-right\" size=\"small\" onlyIcon style=\"visibility: hidden\"></x-button>\r\n</ng-template>\r\n\r\n<ng-template #endDateHeaderTpl>\r\n  <x-button icon=\"fto-chevrons-left\" size=\"small\" onlyIcon (click)=\"nextYear(-1)\" style=\"visibility: hidden\"></x-button>\r\n  <x-button icon=\"fto-chevron-left\" size=\"small\" onlyIcon (click)=\"nextMonth(-1)\" style=\"visibility: hidden\"></x-button>\r\n  <div class=\"x-date-range-portal-year-month\">\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('year')\">{{ endDisplay | date: 'yyyy' }}{{ locale.year }}</x-button>\r\n    <x-button type=\"text\" size=\"small\" (click)=\"typeChange('month')\">{{ getLocaleMonth(endDisplay) }}</x-button>\r\n  </div>\r\n  <x-button icon=\"fto-chevron-right\" size=\"small\" onlyIcon (click)=\"nextMonth(1)\"></x-button>\r\n  <x-button icon=\"fto-chevrons-right\" size=\"small\" onlyIcon (click)=\"nextYear(1)\"></x-button>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-date-range-portal{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);width:34rem;display:flex;flex-direction:column;font-size:var(--x-font-size-small)}.x-date-range-portal.date-time{width:27rem}.x-date-range-portal.date-hour{width:19.75rem}.x-date-range-portal.date-minute{width:23.375rem}.x-date-range-portal-content{display:flex}.x-date-range-portal-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem;border-bottom:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset{display:flex;align-items:center;justify-content:center;border-top:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset>x-button{flex:1}.x-date-range-portal-year-month{flex:1;text-align:center}.x-date-range-portal-body{padding:.4rem;display:flex}.x-date-range-portal-start{flex:1;margin-right:.4rem}.x-date-range-portal-end{flex:1;margin-left:.4rem}.x-date-range-portal-footer{display:flex;justify-content:flex-end;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-date{flex:1}.x-date-range-portal-time{display:flex;flex-direction:column}.x-date-range-portal-time-label{padding:.4rem;text-align:center;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time .x-time-picker-frame{border-width:var(--x-border-width) 0 0 var(--x-border-width);box-shadow:none}\n"], components: [{ type: XPickerDateComponent, selector: "x-picker-date" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i1__namespace.DatePipe }, animations: [i2.XConnectBaseAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangePortalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XDateRangePortalPrefix,
@@ -1501,10 +1626,10 @@
                         styleUrls: ['./date-range-portal.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [i1.XConnectBaseAnimation],
-                        providers: [i1$1.DatePipe, i1$1.LowerCasePipe]
+                        animations: [i2.XConnectBaseAnimation],
+                        providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DatePipe }, { type: i1__namespace$1.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.XI18nService }]; }, propDecorators: { placement: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.XI18nService }]; }, propDecorators: { placement: [{
                     type: i0.HostBinding,
                     args: ['@x-connect-base-animation']
                 }], done: [{
@@ -1517,11 +1642,10 @@
 
     var XDateRangeComponent = /** @class */ (function (_super) {
         __extends(XDateRangeComponent, _super);
-        function XDateRangeComponent(renderer, configService, elementRef, cdr, portalService, viewContainerRef, datePipe, overlay) {
+        function XDateRangeComponent(renderer, configService, cdr, portalService, viewContainerRef, datePipe, overlay) {
             var _this = _super.call(this) || this;
             _this.renderer = renderer;
             _this.configService = configService;
-            _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.portalService = portalService;
             _this.viewContainerRef = viewContainerRef;
@@ -1529,11 +1653,10 @@
             _this.overlay = overlay;
             _this.modelType = 'date';
             _this.isInput = false;
-            _this.isFocus = false;
             _this.enter = false;
             _this.inputClearable = false;
             _this.animating = false;
-            _this.displayValue = '';
+            _this.displayValue = [];
             _this.icon = 'fto-calendar';
             _this.maxNodes = 6;
             _this.protalTobottom = true;
@@ -1541,32 +1664,37 @@
             _this.dataChange = new rxjs.Subject();
             _this.positionChange = new rxjs.Subject();
             _this.closeSubject = new rxjs.Subject();
+            _this.startDisplay = '';
+            _this.endDisplay = '';
+            _this.startActive = false;
+            _this.endActive = false;
             _this._unSubject = new rxjs.Subject();
             return _this;
         }
         Object.defineProperty(XDateRangeComponent.prototype, "getRequired", {
             get: function () {
-                return this.required && i1.XIsEmpty(this.value);
+                return this.required && i2.XIsEmpty(this.value);
             },
             enumerable: false,
             configurable: true
         });
         XDateRangeComponent.prototype.writeValue = function (value) {
-            if (i1.XIsDate(value)) {
-                this.modelType = 'date';
-                this.numberValue = value.getTime();
-            }
-            else if (i1.XIsNumber(value)) {
-                this.modelType = 'number';
-                this.numberValue = value;
-            }
-            else if (i1.XIsString(value)) {
-                this.modelType = 'string';
-                var valueTime = new Date(value).getTime();
-                this.numberValue = !isNaN(valueTime) ? valueTime : '';
-            }
-            else if (i1.XIsEmpty(value)) {
-                this.numberValue = '';
+            if (i2.XIsUndefined(value))
+                value = [];
+            if (value.length > 0) {
+                if (i2.XIsDate(value[0])) {
+                    this.modelType = 'date';
+                    this.numberValue = value.getTime();
+                }
+                else if (i2.XIsNumber(value[0])) {
+                    this.modelType = 'number';
+                    this.numberValue = value;
+                }
+                else if (i2.XIsString(value[0])) {
+                    this.modelType = 'string';
+                    var valueTime = value.map(function (x) { return new Date(x).getTime(); });
+                    this.numberValue = !isNaN(valueTime[0]) ? valueTime : [];
+                }
             }
             this.value = value;
             this.setDisplayValue(this.numberValue);
@@ -1583,7 +1711,8 @@
             this.setPortal();
         };
         XDateRangeComponent.prototype.ngOnChanges = function (changes) {
-            if (i1.XIsChange(changes.type)) {
+            var type = changes.type;
+            if (i2.XIsChange(type)) {
                 this.setFormat();
                 this.setDisplayValue(this.numberValue);
             }
@@ -1594,7 +1723,7 @@
         };
         XDateRangeComponent.prototype.setSubject = function () {
             var _this = this;
-            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
+            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function () {
                 _this.closePortal();
             });
         };
@@ -1624,7 +1753,7 @@
             if (this.disabled)
                 return;
             this.enter = true;
-            if (!i1.XIsEmpty(this.numberValue)) {
+            if (!i2.XIsEmpty(this.numberValue)) {
                 this.icon = '';
                 this.inputClearable = true;
                 this.cdr.detectChanges();
@@ -1641,9 +1770,9 @@
             }
         };
         XDateRangeComponent.prototype.clearEmit = function () {
-            this.value = '';
-            this.numberValue = '';
-            this.displayValue = '';
+            this.value = [];
+            this.numberValue = [];
+            this.displayValue = [];
             this.mleave();
             this.valueChange.next(this.numberValue);
             this.modelChange();
@@ -1654,10 +1783,11 @@
             }
         };
         XDateRangeComponent.prototype.getValue = function () {
+            var _this = this;
             return this.modelType === 'date'
-                ? new Date(this.numberValue)
+                ? this.numberValue.map(function (x) { return new Date(x); })
                 : this.modelType === 'string'
-                    ? this.datePipe.transform(this.numberValue, this.format)
+                    ? this.numberValue.map(function (x) { return _this.datePipe.transform(x, _this.format); })
                     : this.numberValue;
         };
         XDateRangeComponent.prototype.portalAttached = function () {
@@ -1668,6 +1798,7 @@
             var _a, _b;
             if (this.portalAttached()) {
                 (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+                this.active = false;
                 this.cdr.detectChanges();
                 return true;
             }
@@ -1677,11 +1808,15 @@
             var _a, _b;
             (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
         };
-        XDateRangeComponent.prototype.showPortal = function () {
+        XDateRangeComponent.prototype.showPortal = function ($event, type) {
             var _this = this;
             var _a;
+            $event.stopPropagation();
             if (this.disabled || this.animating)
                 return;
+            this.active = true;
+            this.startActive = type === 'start';
+            this.endActive = type === 'end';
             var config = {
                 backdropClass: '',
                 positionStrategy: this.setPlacement(),
@@ -1722,19 +1857,29 @@
                 positionChange: this.positionChange,
                 closePortal: function () { return _this.closeSubject.next(); },
                 destroyPortal: function () { return _this.destroyPortal(); },
-                nodeEmit: function (node, sure) {
+                nodeEmit: function (dates, sure) {
                     if (sure === void 0) { sure = true; }
-                    return _this.onNodeClick(node, sure);
+                    return _this.onNodeClick(dates, sure);
                 },
+                startNodeEmit: function (node) { return _this.startNodeClick(node); },
+                endNodeEmit: function (node) { return _this.endNodeClick(node); },
                 animating: function (ing) { return (_this.animating = ing); }
             });
             componentRef.changeDetectorRef.detectChanges();
         };
-        XDateRangeComponent.prototype.onNodeClick = function (date, sure) {
+        XDateRangeComponent.prototype.startNodeClick = function (node) {
+            this.startDisplay = this.datePipe.transform(node, this.format);
+            this.cdr.detectChanges();
+        };
+        XDateRangeComponent.prototype.endNodeClick = function (node) {
+            this.endDisplay = this.datePipe.transform(node, this.format);
+            this.cdr.detectChanges();
+        };
+        XDateRangeComponent.prototype.onNodeClick = function (dates, sure) {
             if (sure === void 0) { sure = true; }
             this.isInput = false;
             if (sure) {
-                this.numberValue = date.getTime();
+                this.numberValue = dates.map(function (x) { return x.getTime(); });
                 this.value = this.getValue();
                 this.setDisplayValue(this.numberValue);
                 this.closeSubject.next();
@@ -1742,7 +1887,7 @@
                 this.nodeEmit.emit(this.numberValue);
             }
             else {
-                this.setDisplayValue(date.getTime());
+                this.setDisplayValue(dates.map(function (x) { return x.getTime(); }));
                 this.cdr.markForCheck();
             }
         };
@@ -1750,16 +1895,16 @@
             this.isInput = true;
         };
         XDateRangeComponent.prototype.setDisplayValue = function (dateNumber) {
-            if (this.isInput && isNaN(this.displayValue) && !isNaN(Date.parse(this.displayValue))) {
-                this.displayValue = this.datePipe.transform(this.displayValue, this.format);
-                this.numberValue = new Date(this.displayValue).getTime();
-                this.value = this.getValue();
-                this.modelChange();
-                this.isInput = false;
-            }
-            else {
-                this.displayValue = this.datePipe.transform(dateNumber, this.format);
-            }
+            var _this = this;
+            // if (this.isInput && isNaN(this.startDisplay) && !isNaN(Date.parse(this.displayValue))) {
+            //   this.displayValue = this.datePipe.transform(this.displayValue, this.format);
+            //   this.numberValue = new Date(this.displayValue).getTime();
+            //   this.value = this.getValue();
+            //   this.modelChange();
+            //   this.isInput = false;
+            // } else {
+            this.displayValue = dateNumber.map(function (x) { return _this.datePipe.transform(x, _this.format); });
+            // }
         };
         XDateRangeComponent.prototype.setPlacement = function () {
             return this.portalService.setPlacement({
@@ -1773,7 +1918,7 @@
             this.portalAttached() && ((_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePositionStrategy(this.setPlacement()));
         };
         XDateRangeComponent.prototype.setClassMap = function () {
-            i1.XClearClass(this.labelMap);
+            i2.XClearClass(this.labelMap);
             this.labelMap["x-text-align-" + this.labelAlign] = this.labelAlign ? true : false;
         };
         XDateRangeComponent.prototype.formControlChanges = function () {
@@ -1782,9 +1927,9 @@
         };
         return XDateRangeComponent;
     }(XDateRangeProperty));
-    /** @nocollapse */ XDateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangeComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i1__namespace.XConfigService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$1.DatePipe }, { token: i4__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDateRangeComponent, selector: "x-date-range", providers: [baseForm.XValueAccessor(XDateRangeComponent), i1$1.DatePipe], viewQueries: [{ propertyName: "dateRange", first: true, predicate: ["dateRange"], descendants: true, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div #dateRange class=\"x-date-range\" [class.x-date-range-focus]=\"isFocus\">\r\n  <div class=\"x-date-range-row\">\r\n    <x-input-group #inputGroup class=\"x-date-range-group\" bordered=\"false\" (click)=\"showPortal()\">\r\n      <x-input #inputStartCom type=\"text\" placeholder=\"\u5F00\u59CB\u65E5\u671F\" (xFocus)=\"isFocus = true\" (xBlur)=\"isFocus = false\"></x-input>\r\n      <x-icon type=\"fto-arrow-right\"></x-icon>\r\n      <x-input #inputEndCom type=\"text\" placeholder=\"\u7ED3\u675F\u65E5\u671F\" (xFocus)=\"isFocus = true\" (xBlur)=\"isFocus = false\"></x-input>\r\n      <x-icon [type]=\"icon\"></x-icon>\r\n    </x-input-group>\r\n  </div>\r\n</div>\r\n", styles: ["x-date-range{display:inline-block}.x-date-range{margin:0;padding:0;width:100%}.x-date-range-row{flex:1;display:flex;align-items:center}.x-date-range-group{display:inline-flex;flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) #0000;transition:all var(--x-animation-duration-slow)}.x-date-range-group .x-input-group{display:flex;align-items:center}.x-date-range-group .x-input-group>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base);z-index:2;padding:.4rem}.x-date-range-group .x-input-group>x-input input{height:inherit!important;line-height:inherit!important}.x-date-range-group:hover{border-color:var(--x-primary-300)}.x-date-range-focus .x-date-range-group{border-color:var(--x-primary)}"], components: [{ type: i5__namespace.XInputGroupComponent, selector: "x-input-group" }, { type: i5__namespace.XInputComponent, selector: "x-input" }, { type: i6__namespace$1.XIconComponent, selector: "x-icon" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDateRangeComponent, decorators: [{
+    /** @nocollapse */ XDateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangeComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i2__namespace.XConfigService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace.DatePipe }, { token: i4__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDateRangeComponent, selector: "x-date-range", providers: [baseForm.XValueAccessor(XDateRangeComponent), i1.DatePipe], viewQueries: [{ propertyName: "dateRange", first: true, predicate: ["dateRange"], descendants: true, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div #dateRange class=\"x-date-range\" [class.x-date-range-active]=\"active\">\r\n  <div class=\"x-date-range-row\">\r\n    <x-input-group #inputGroup class=\"x-date-range-group\" bordered=\"false\" (click)=\"showPortal($event)\">\r\n      <x-input\r\n        #inputStartCom\r\n        type=\"text\"\r\n        placeholder=\"\u5F00\u59CB\u65E5\u671F\"\r\n        [(active)]=\"startActive\"\r\n        (click)=\"showPortal($event, 'start')\"\r\n        [(ngModel)]=\"startDisplay\"\r\n      ></x-input>\r\n      <x-icon type=\"fto-arrow-right\"></x-icon>\r\n      <x-input\r\n        #inputEndCom\r\n        type=\"text\"\r\n        placeholder=\"\u7ED3\u675F\u65E5\u671F\"\r\n        [(active)]=\"endActive\"\r\n        (click)=\"showPortal($event, 'end')\"\r\n        [(ngModel)]=\"endDisplay\"\r\n      ></x-input>\r\n      <x-icon [type]=\"icon\"></x-icon>\r\n    </x-input-group>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-date-range{display:inline-block}.x-date-range{margin:0;padding:0;width:100%}.x-date-range-row{flex:1;display:flex;align-items:center}.x-date-range-group{display:inline-flex;flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) transparent;transition:all var(--x-animation-duration-slow)}.x-date-range-group .x-input-group{display:flex;align-items:center}.x-date-range-group .x-input-group>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base);z-index:2;padding:.4rem}.x-date-range-group .x-input-group>x-input{width:6rem}.x-date-range-group .x-input-group>x-input input{padding-left:0!important;padding-right:0!important;margin-left:.4rem;margin-right:.4rem}.x-date-range-group .x-input-group>x-input.x-input-active input{background-color:gray}.x-date-range-group:hover{border-color:var(--x-primary-300)}.x-date-range-active .x-date-range-group{border-color:var(--x-primary)}\n"], components: [{ type: i5__namespace.XInputGroupComponent, selector: "x-input-group" }, { type: i5__namespace.XInputComponent, selector: "x-input" }, { type: i6__namespace$1.XIconComponent, selector: "x-icon" }], directives: [{ type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XDateRangePrefix,
@@ -1792,9 +1937,9 @@
                         styleUrls: ['./date-range.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [baseForm.XValueAccessor(XDateRangeComponent), i1$1.DatePipe]
+                        providers: [baseForm.XValueAccessor(XDateRangeComponent), i1.DatePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace.XConfigService }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$1.DatePipe }, { type: i4__namespace$1.Overlay }]; }, propDecorators: { dateRange: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i2__namespace.XConfigService }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace.DatePipe }, { type: i4__namespace$1.Overlay }]; }, propDecorators: { dateRange: [{
                     type: i0.ViewChild,
                     args: ['dateRange', { static: true }]
                 }], inputGroup: [{
@@ -1807,8 +1952,8 @@
         }
         return XDatePickerModule;
     }());
-    /** @nocollapse */ XDatePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XDatePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerModule, declarations: [XDatePickerComponent,
+    /** @nocollapse */ XDatePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ XDatePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerModule, declarations: [XDatePickerComponent,
             XDatePickerPortalComponent,
             XPickerDateComponent,
             XPickerMonthComponent,
@@ -1819,7 +1964,7 @@
             XPickerYearProperty,
             XDateRangeComponent,
             XDateRangePortalComponent,
-            XDateRangeProperty], imports: [i1$1.CommonModule,
+            XDateRangeProperty], imports: [i1.CommonModule,
             i6.FormsModule,
             i6.ReactiveFormsModule,
             i2$1.XPortalModule,
@@ -1827,15 +1972,15 @@
             i5.XInputModule,
             i4.XButtonModule,
             i6$1.XIconModule,
-            i2.XI18nModule,
+            i3.XI18nModule,
             baseForm.XBaseFormModule], exports: [XDatePickerComponent,
             XDateRangeComponent,
             XDatePickerPortalComponent,
             XPickerDateComponent,
             XPickerMonthComponent,
             XPickerYearComponent] });
-    /** @nocollapse */ XDatePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerModule, imports: [[
-                i1$1.CommonModule,
+    /** @nocollapse */ XDatePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerModule, imports: [[
+                i1.CommonModule,
                 i6.FormsModule,
                 i6.ReactiveFormsModule,
                 i2$1.XPortalModule,
@@ -1843,10 +1988,10 @@
                 i5.XInputModule,
                 i4.XButtonModule,
                 i6$1.XIconModule,
-                i2.XI18nModule,
+                i3.XI18nModule,
                 baseForm.XBaseFormModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -1872,7 +2017,7 @@
                             XPickerYearComponent
                         ],
                         imports: [
-                            i1$1.CommonModule,
+                            i1.CommonModule,
                             i6.FormsModule,
                             i6.ReactiveFormsModule,
                             i2$1.XPortalModule,
@@ -1880,7 +2025,7 @@
                             i5.XInputModule,
                             i4.XButtonModule,
                             i6$1.XIconModule,
-                            i2.XI18nModule,
+                            i3.XI18nModule,
                             baseForm.XBaseFormModule
                         ],
                         entryComponents: [XDatePickerPortalComponent, XDateRangePortalComponent]
@@ -1914,5 +2059,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ng-nest-ui-date-picker.umd.js.map