@ng-nest/ui 12.0.5 → 12.0.10

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, i2, baseForm, rxjs, operators, i1, i2$1, i3, i7, i1$1, i3$1, i4, i5, icon) { '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,27 +13,26 @@
                     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 i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -261,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);
@@ -366,6 +371,11 @@
              * @en_US Select type
              */
             _this.type = 'date';
+            /**
+             * @zh_CN 快捷选择按钮，支持今天,昨天,明天
+             * @en_US Quick selection button, support today, yesterday, tomorrow
+             */
+            _this.preset = [];
             /**
              * @zh_CN 节点点击的事件
              * @en_US Node click event
@@ -375,8 +385,8 @@
         }
         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" }, 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([
         i2.XWithConfig(X_CONFIG_NAME, 'yyyy-MM-dd')
     ], XDatePickerProperty.prototype, "format", void 0);
@@ -388,9 +398,91 @@
         i2.XWithConfig(X_CONFIG_NAME, 'bottom-start')
     ], XDatePickerProperty.prototype, "placement", void 0);
     __decorate([
+        i2.XWithConfig(X_CONFIG_NAME, 'medium')
+    ], XDatePickerProperty.prototype, "size", void 0);
+    __decorate([
+        i2.XInputBoolean(),
+        i2.XWithConfig(X_CONFIG_NAME, true)
+    ], XDatePickerProperty.prototype, "bordered", void 0);
+    __decorate([
+        i2.XDataConvert()
+    ], XDatePickerProperty.prototype, "preset", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerProperty, decorators: [{
+                type: i0.Component,
+                args: [{ template: '' }]
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], format: [{
+                    type: i0.Input
+                }], clearable: [{
+                    type: i0.Input
+                }], placement: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], bordered: [{
+                    type: i0.Input
+                }], preset: [{
+                    type: i0.Input
+                }], nodeEmit: [{
+                    type: i0.Output
+                }] } });
+    /**
+     * DateRange
+     * @selector x-date-range
+     * @decorator component
+     */
+    var XDateRangePrefix = 'x-date-range';
+    var X_CONFIG_RANGE_NAME = 'dateRange';
+    /**
+     * DateRange Property
+     */
+    var XDateRangeProperty = /** @class */ (function (_super) {
+        __extends(XDateRangeProperty, _super);
+        function XDateRangeProperty() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**
+             * @zh_CN 选择类型
+             * @en_US Select type
+             */
+            _this.type = 'date';
+            /**
+             * @zh_CN 快捷选择按钮，支持今天,昨天,明天
+             * @en_US Quick selection button, support today, yesterday, tomorrow
+             */
+            _this.preset = [];
+            /**
+             * @zh_CN 节点点击的事件
+             * @en_US Node click event
+             */
+            _this.nodeEmit = new i0.EventEmitter();
+            return _this;
+        }
+        return XDateRangeProperty;
+    }(baseForm.XControlValueAccessor));
+    /** @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([
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'yyyy-MM-dd')
+    ], XDateRangeProperty.prototype, "format", void 0);
+    __decorate([
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, true),
         i2.XInputBoolean()
-    ], XDatePickerProperty.prototype, "readonly", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerProperty, decorators: [{
+    ], XDateRangeProperty.prototype, "clearable", void 0);
+    __decorate([
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'bottom-start')
+    ], XDateRangeProperty.prototype, "placement", void 0);
+    __decorate([
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, 'medium')
+    ], XDateRangeProperty.prototype, "size", void 0);
+    __decorate([
+        i2.XInputBoolean(),
+        i2.XWithConfig(X_CONFIG_RANGE_NAME, true)
+    ], XDateRangeProperty.prototype, "bordered", void 0);
+    __decorate([
+        i2.XDataConvert()
+    ], XDateRangeProperty.prototype, "preset", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDateRangeProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { type: [{
@@ -401,7 +493,11 @@
                     type: i0.Input
                 }], placement: [{
                     type: i0.Input
-                }], readonly: [{
+                }], size: [{
+                    type: i0.Input
+                }], bordered: [{
+                    type: i0.Input
+                }], preset: [{
                     type: i0.Input
                 }], nodeEmit: [{
                     type: i0.Output
@@ -412,6 +508,12 @@
      * @decorator component
      */
     var XDatePickerPortalPrefix = 'x-date-picker-portal';
+    /**
+     * DateRange Portal
+     * @selector x-date-range-portal
+     * @decorator component
+     */
+    var XDateRangePortalPrefix = 'x-date-range-portal';
     /**
      * PickerDate
      * @selector x-picker-date
@@ -425,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
@@ -444,17 +561,31 @@
         }
         return XPickerDateProperty;
     }(i2.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: [{
+    /** @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: [{
@@ -473,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
@@ -492,19 +638,28 @@
         }
         return XPickerMonthProperty;
     }(i2.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: [{
+    /** @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
                 }] } });
@@ -521,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
@@ -540,26 +710,37 @@
         }
         return XPickerYearProperty;
     }(i2.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: [{
+    /** @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;
@@ -574,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) {
-            i2.XIsChange(simples.display) && this.init();
+            var display = simples.display;
+            i2.XIsChange(display) && this.init();
         };
         XPickerDateComponent.prototype.ngOnDestory = function () {
             this._unSubject.next();
@@ -632,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: i2__namespace.XConfigService }, { token: i2__namespace$1.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: i3__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "xI18n": i2__namespace$1.XI18nPipe, "date": i1__namespace.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: i2__namespace.XConfigService }, { type: i2__namespace$1.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);
@@ -676,13 +889,14 @@
             });
         };
         XPickerMonthComponent.prototype.ngOnChanges = function (simples) {
-            i2.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)]);
@@ -700,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.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.XConfigService }, { token: i2__namespace$1.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.DatePipe, i1.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: i3__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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',
@@ -717,7 +946,7 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.XConfigService }, { type: i2__namespace$1.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);
@@ -732,13 +961,14 @@
             return _this;
         }
         XPickerYearComponent.prototype.ngOnChanges = function (simples) {
-            i2.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 = [];
@@ -757,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.DatePipe }, { token: i2__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.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: i3__namespace.XButtonComponent, selector: "x-button" }], directives: [{ 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.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',
@@ -788,13 +1029,15 @@
             this.type = 'date';
             this.display = new Date();
             this.locale = {};
+            this.time = new Date().getTime();
+            this.preset = [];
             this._unSubject = new rxjs.Subject();
         }
         XDatePickerPortalComponent.prototype.done = function (event) {
             this.animating(false);
             event.toState === 'void' && this.destroyPortal();
         };
-        XDatePickerPortalComponent.prototype.start = function (event) {
+        XDatePickerPortalComponent.prototype.start = function () {
             this.animating(true);
         };
         XDatePickerPortalComponent.prototype.ngOnInit = function () {
@@ -825,12 +1068,7 @@
             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) {
@@ -839,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);
@@ -846,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') {
@@ -880,46 +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.onToday = function () {
+            this.dateChange(new Date());
         };
-        XDatePickerPortalComponent.prototype.nextYear = function (num) {
-            var date = new Date(this.display);
-            date.setFullYear(date.getFullYear() + num);
-            this.setDisplay(date);
-            this.cdr.detectChanges();
+        XDatePickerPortalComponent.prototype.onYesterday = function () {
+            this.dateChange(i2.XAddDays(new Date(), -1));
         };
-        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.onTomorrow = function () {
+            this.dateChange(i2.XAddDays(new Date(), 1));
         };
-        XDatePickerPortalComponent.prototype.getLocaleMonth = function (date) {
-            return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
+        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.DatePipe }, { token: i1__namespace.LowerCasePipe }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.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.DatePipe, i1.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  </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-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: XPickerMonthComponent, selector: "x-picker-month" }, { type: XPickerYearComponent, selector: "x-picker-year" }, { type: i3__namespace.XButtonComponent, selector: "x-button" }, { 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.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.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,
@@ -930,7 +1152,7 @@
                         animations: [i2.XConnectBaseAnimation],
                         providers: [i1.DatePipe, i1.LowerCasePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.DatePipe }, { type: i1__namespace.LowerCasePipe }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.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: [{
@@ -943,10 +1165,10 @@
 
     var XDatePickerComponent = /** @class */ (function (_super) {
         __extends(XDatePickerComponent, _super);
-        function XDatePickerComponent(renderer, 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.elementRef = elementRef;
+            _this.configService = configService;
             _this.cdr = cdr;
             _this.portalService = portalService;
             _this.viewContainerRef = viewContainerRef;
@@ -968,13 +1190,6 @@
             _this._unSubject = new rxjs.Subject();
             return _this;
         }
-        Object.defineProperty(XDatePickerComponent.prototype, "getRequired", {
-            get: function () {
-                return this.required && i2.XIsEmpty(this.value);
-            },
-            enumerable: false,
-            configurable: true
-        });
         XDatePickerComponent.prototype.writeValue = function (value) {
             if (i2.XIsDate(value)) {
                 this.modelType = 'date';
@@ -1007,7 +1222,8 @@
             this.setPortal();
         };
         XDatePickerComponent.prototype.ngOnChanges = function (changes) {
-            if (i2.XIsChange(changes.type)) {
+            var type = changes.type;
+            if (i2.XIsChange(type)) {
                 this.setFormat();
                 this.setDisplayValue(this.numberValue);
             }
@@ -1018,11 +1234,13 @@
         };
         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();
             });
         };
         XDatePickerComponent.prototype.setFormat = function () {
+            if (this.format !== 'yyyy-MM-dd')
+                return;
             if (this.type === 'date') {
                 this.format = 'yyyy-MM-dd';
             }
@@ -1076,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;
@@ -1090,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;
             }
@@ -1104,6 +1319,7 @@
             var _a;
             if (this.disabled || this.animating)
                 return;
+            this.active = true;
             var config = {
                 backdropClass: '',
                 positionStrategy: this.setPlacement(),
@@ -1125,7 +1341,7 @@
             var _this = this;
             var position = config.positionStrategy;
             position.positionChanges.pipe(operators.takeUntil(this._unSubject)).subscribe(function (pos) {
-                var place = i1$1.XPortalConnectedPosition.get(pos.connectionPair);
+                var place = i2$1.XPortalConnectedPosition.get(pos.connectionPair);
                 place !== _this.placement && _this.positionChange.next(place);
             });
         };
@@ -1139,8 +1355,10 @@
                 type: this.type,
                 value: this.numberValue,
                 placement: this.placement,
+                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) {
@@ -1184,7 +1402,7 @@
         };
         XDatePickerComponent.prototype.setPlacement = function () {
             return this.portalService.setPlacement({
-                elementRef: this.inputCom.inputElement,
+                elementRef: this.inputCom.inputRef,
                 placement: [this.placement, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
                 transformOriginOn: 'x-date-picker-portal'
             });
@@ -1203,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: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace.DatePipe }, { token: i3__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.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\r\n  #datePicker\r\n  class=\"x-date-picker\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"required\"\r\n  [class.x-required-show]=\"getRequired\"\r\n>\r\n  <label *ngIf=\"label\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div\r\n    class=\"x-date-picker-row\"\r\n    (click)=\"showPortal()\"\r\n    (mouseenter)=\"menter()\"\r\n    (mouseleave)=\"mleave()\"\r\n  >\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"placeholder\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable && inputClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xInput)=\"onInput()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: [".x-date-picker{margin:0;padding:0;width:100%}.x-date-picker.x-flex{display:flex}.x-date-picker.x-justify-start{justify-content:flex-start}.x-date-picker.x-justify-center{justify-content:center}.x-date-picker.x-justify-end{justify-content:flex-end}.x-date-picker.x-justify-space-between{justify-content:space-between}.x-date-picker.x-justify-space-around{justify-content:space-around}.x-date-picker.x-align-start{align-items:flex-start}.x-date-picker.x-align-center{align-items:center}.x-date-picker.x-align-end{align-items:flex-end}.x-date-picker.x-direction-column{flex-direction:column}.x-date-picker.x-direction-column-reverse{flex-direction:column-reverse}.x-date-picker.x-direction-row{flex-direction:row}.x-date-picker.x-direction-row-reverse{flex-direction:row-reverse}.x-date-picker>label{display:inline-block;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);color:var(--x-text-300);font-weight:600}.x-date-picker>label.x-text-align-start{text-align:start}.x-date-picker>label.x-text-align-center{text-align:center}.x-date-picker>label.x-text-align-end{text-align:end}.x-date-picker>.x-date-picker-row{flex:1;display:flex;align-items:center;position:relative}.x-date-picker>.x-date-picker-row>x-input>.x-input>.x-input-row>input{cursor:pointer}.x-date-picker.x-required.x-required-show>label{color:var(--x-danger)}.x-date-picker.x-disabled>.x-date-picker-row>x-input>.x-input>.x-input-row>input{cursor:not-allowed}.x-date-picker.x-flex.x-direction-row>label{padding:0 .5rem 0 0}.x-date-picker.x-flex.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-date-picker.x-flex.x-direction-column,.x-date-picker.x-flex.x-direction-column-reverse{align-items:inherit}"], components: [{ type: i4__namespace.XInputComponent, selector: "x-input" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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.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,
@@ -1215,7 +1433,7 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [baseForm.XValueAccessor(XDatePickerComponent), i1.DatePipe]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.XPortalService }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace.DatePipe }, { type: i3__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: [{
@@ -1223,70 +1441,594 @@
                     args: ['inputCom', { static: true }]
                 }] } });
 
-    var XDatePickerModule = /** @class */ (function () {
-        function XDatePickerModule() {
+    var XDateRangePortalComponent = /** @class */ (function () {
+        function XDateRangePortalComponent(datePipe, lowerCasePipe, cdr, i18n) {
+            this.datePipe = datePipe;
+            this.lowerCasePipe = lowerCasePipe;
+            this.cdr = cdr;
+            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();
         }
-        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,
-            XDatePickerPortalComponent,
-            XPickerDateComponent,
-            XPickerMonthComponent,
-            XPickerYearComponent,
-            XDatePickerProperty,
-            XPickerDateProperty,
-            XPickerMonthProperty,
-            XPickerYearProperty], imports: [i1.CommonModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
-            i1$1.XPortalModule,
-            i7.XTimePickerModule,
-            i4.XInputModule,
-            i3.XButtonModule,
-            icon.XIconModule,
-            i2$1.XI18nModule,
-            baseForm.XBaseFormModule], exports: [XDatePickerComponent, 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.CommonModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
-                i1$1.XPortalModule,
-                i7.XTimePickerModule,
-                i4.XInputModule,
-                i3.XButtonModule,
-                icon.XIconModule,
-                i2$1.XI18nModule,
-                baseForm.XBaseFormModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDatePickerModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            XDatePickerComponent,
-                            XDatePickerPortalComponent,
-                            XPickerDateComponent,
-                            XPickerMonthComponent,
-                            XPickerYearComponent,
-                            XDatePickerProperty,
-                            XPickerDateProperty,
-                            XPickerMonthProperty,
-                            XPickerYearProperty
+        XDateRangePortalComponent.prototype.done = function (event) {
+            this.animating(false);
+            event.toState === 'void' && this.destroyPortal();
+        };
+        XDateRangePortalComponent.prototype.start = function () {
+            this.animating(true);
+        };
+        XDateRangePortalComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.valueChange.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
+                _this.value = x;
+                _this.init();
+            });
+            this.positionChange.pipe(operators.takeUntil(this._unSubject)).subscribe(function (x) {
+                _this.placement = x;
+                _this.cdr.detectChanges();
+            });
+            this.i18n.localeChange
+                .pipe(operators.map(function (x) { return x.datePicker; }), operators.takeUntil(this._unSubject))
+                .subscribe(function (x) {
+                _this.locale = x;
+                _this.cdr.markForCheck();
+            });
+        };
+        XDateRangePortalComponent.prototype.ngAfterViewInit = function () {
+            this.init();
+        };
+        XDateRangePortalComponent.prototype.ngOnDestroy = function () {
+            this._unSubject.next();
+            this._unSubject.unsubscribe();
+        };
+        XDateRangePortalComponent.prototype.init = function () {
+            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;
+            this.setDisplay(this.model);
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.stopPropagation = function (event) {
+            event.stopPropagation();
+        };
+        XDateRangePortalComponent.prototype.setDefault = function () {
+            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) {
+            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) {
+            this.type = type;
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.monthChange = function (date) {
+            this.setDisplay(date);
+            if (this._type === 'month') {
+                this.model = date;
+                // this.nodeEmit(date);
+            }
+            else {
+                this.type = this._type;
+            }
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.yearChange = function (date) {
+            this.setDisplay(date);
+            if (this._type === 'year') {
+                this.model = date;
+                // this.nodeEmit(date);
+            }
+            else {
+                this.type = 'month';
+            }
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.yearStartChange = function (number) {
+            this.startYear = number;
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.nextMonth = function (num) {
+            var date = new Date(this.display);
+            date.setMonth(date.getMonth() + num);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.nextYear = function (num) {
+            var date = new Date(this.display);
+            date.setFullYear(date.getFullYear() + num);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.nextYears = function (num) {
+            this.startYear += num;
+            var date = new Date(this.display);
+            date.setFullYear(this.startYear);
+            this.setDisplay(date);
+            this.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.getLocaleMonth = function (date) {
+            return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
+        };
+        XDateRangePortalComponent.prototype.onToday = function () {
+            this.dateChange(new Date());
+        };
+        XDateRangePortalComponent.prototype.onYesterday = function () {
+            this.dateChange(i2.XAddDays(new Date(), -1));
+        };
+        XDateRangePortalComponent.prototype.onTomorrow = function () {
+            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.cdr.detectChanges();
+        };
+        XDateRangePortalComponent.prototype.setModel = function (date, time) {
+            this.model = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
+            return this.model;
+        };
+        return XDateRangePortalComponent;
+    }());
+    /** @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,
+                        templateUrl: './date-range-portal.component.html',
+                        styleUrls: ['./date-range-portal.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        animations: [i2.XConnectBaseAnimation],
+                        providers: [i1.DatePipe, i1.LowerCasePipe]
+                    }]
+            }], 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: [{
+                    type: i0.HostListener,
+                    args: ['@x-connect-base-animation.done', ['$event']]
+                }], start: [{
+                    type: i0.HostListener,
+                    args: ['@x-connect-base-animation.start', ['$event']]
+                }] } });
+
+    var XDateRangeComponent = /** @class */ (function (_super) {
+        __extends(XDateRangeComponent, _super);
+        function XDateRangeComponent(renderer, configService, cdr, portalService, viewContainerRef, datePipe, overlay) {
+            var _this = _super.call(this) || this;
+            _this.renderer = renderer;
+            _this.configService = configService;
+            _this.cdr = cdr;
+            _this.portalService = portalService;
+            _this.viewContainerRef = viewContainerRef;
+            _this.datePipe = datePipe;
+            _this.overlay = overlay;
+            _this.modelType = 'date';
+            _this.isInput = false;
+            _this.enter = false;
+            _this.inputClearable = false;
+            _this.animating = false;
+            _this.displayValue = [];
+            _this.icon = 'fto-calendar';
+            _this.maxNodes = 6;
+            _this.protalTobottom = true;
+            _this.valueChange = new rxjs.Subject();
+            _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 && i2.XIsEmpty(this.value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        XDateRangeComponent.prototype.writeValue = function (value) {
+            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);
+            this.valueChange.next(this.numberValue);
+            this.cdr.detectChanges();
+        };
+        XDateRangeComponent.prototype.ngOnInit = function () {
+            this.setFlex(this.dateRange.nativeElement, this.renderer, this.justify, this.align, this.direction);
+            this.setFormat();
+            this.setClassMap();
+            this.setSubject();
+        };
+        XDateRangeComponent.prototype.ngAfterViewInit = function () {
+            this.setPortal();
+        };
+        XDateRangeComponent.prototype.ngOnChanges = function (changes) {
+            var type = changes.type;
+            if (i2.XIsChange(type)) {
+                this.setFormat();
+                this.setDisplayValue(this.numberValue);
+            }
+        };
+        XDateRangeComponent.prototype.ngOnDestroy = function () {
+            this._unSubject.next();
+            this._unSubject.unsubscribe();
+        };
+        XDateRangeComponent.prototype.setSubject = function () {
+            var _this = this;
+            this.closeSubject.pipe(operators.takeUntil(this._unSubject)).subscribe(function () {
+                _this.closePortal();
+            });
+        };
+        XDateRangeComponent.prototype.setFormat = function () {
+            if (this.format !== 'yyyy-MM-dd')
+                return;
+            if (this.type === 'date') {
+                this.format = 'yyyy-MM-dd';
+            }
+            else if (this.type === 'year') {
+                this.format = 'yyyy';
+            }
+            else if (this.type === 'month') {
+                this.format = 'yyyy-MM';
+            }
+            else if (this.type === 'date-time') {
+                this.format = 'yyyy-MM-dd HH:mm:ss';
+            }
+            else if (this.type === 'date-hour') {
+                this.format = 'yyyy-MM-dd HH';
+            }
+            else if (this.type === 'date-minute') {
+                this.format = 'yyyy-MM-dd HH:mm';
+            }
+        };
+        XDateRangeComponent.prototype.menter = function () {
+            if (this.disabled)
+                return;
+            this.enter = true;
+            if (!i2.XIsEmpty(this.numberValue)) {
+                this.icon = '';
+                this.inputClearable = true;
+                this.cdr.detectChanges();
+            }
+        };
+        XDateRangeComponent.prototype.mleave = function () {
+            if (this.disabled)
+                return;
+            this.enter = false;
+            if (this.inputClearable) {
+                this.icon = 'fto-calendar';
+                this.inputClearable = false;
+                this.cdr.detectChanges();
+            }
+        };
+        XDateRangeComponent.prototype.clearEmit = function () {
+            this.value = [];
+            this.numberValue = [];
+            this.displayValue = [];
+            this.mleave();
+            this.valueChange.next(this.numberValue);
+            this.modelChange();
+        };
+        XDateRangeComponent.prototype.modelChange = function () {
+            if (this.onChange) {
+                this.onChange(this.getValue());
+            }
+        };
+        XDateRangeComponent.prototype.getValue = function () {
+            var _this = this;
+            return this.modelType === 'date'
+                ? this.numberValue.map(function (x) { return new Date(x); })
+                : this.modelType === 'string'
+                    ? this.numberValue.map(function (x) { return _this.datePipe.transform(x, _this.format); })
+                    : this.numberValue;
+        };
+        XDateRangeComponent.prototype.portalAttached = function () {
+            var _a, _b;
+            return (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.hasAttached();
+        };
+        XDateRangeComponent.prototype.closePortal = function () {
+            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;
+            }
+            return false;
+        };
+        XDateRangeComponent.prototype.destroyPortal = function () {
+            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 ($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(),
+                scrollStrategy: this.overlay.scrollStrategies.reposition()
+            };
+            this.setPosition(config);
+            this.portal = this.portalService.attach({
+                content: XDateRangePortalComponent,
+                viewContainerRef: this.viewContainerRef,
+                overlayConfig: config
+            });
+            (_a = this.portal.overlayRef) === null || _a === void 0 ? void 0 : _a.outsidePointerEvents().pipe(operators.takeUntil(this._unSubject)).subscribe(function () {
+                _this.setDisplayValue(_this.numberValue);
+                _this.closeSubject.next();
+            });
+            this.setInstance();
+        };
+        XDateRangeComponent.prototype.setPosition = function (config) {
+            var _this = this;
+            var position = config.positionStrategy;
+            position.positionChanges.pipe(operators.takeUntil(this._unSubject)).subscribe(function (pos) {
+                var place = i2$1.XPortalConnectedPosition.get(pos.connectionPair);
+                place !== _this.placement && _this.positionChange.next(place);
+            });
+        };
+        XDateRangeComponent.prototype.setInstance = function () {
+            var _this = this;
+            var _a;
+            var componentRef = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.componentRef;
+            if (!componentRef)
+                return;
+            Object.assign(componentRef.instance, {
+                type: this.type,
+                value: this.numberValue,
+                placement: this.placement,
+                preset: this.preset,
+                valueChange: this.valueChange,
+                positionChange: this.positionChange,
+                closePortal: function () { return _this.closeSubject.next(); },
+                destroyPortal: function () { return _this.destroyPortal(); },
+                nodeEmit: function (dates, sure) {
+                    if (sure === void 0) { sure = true; }
+                    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.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 = dates.map(function (x) { return x.getTime(); });
+                this.value = this.getValue();
+                this.setDisplayValue(this.numberValue);
+                this.closeSubject.next();
+                this.modelChange();
+                this.nodeEmit.emit(this.numberValue);
+            }
+            else {
+                this.setDisplayValue(dates.map(function (x) { return x.getTime(); }));
+                this.cdr.markForCheck();
+            }
+        };
+        XDateRangeComponent.prototype.onInput = function () {
+            this.isInput = true;
+        };
+        XDateRangeComponent.prototype.setDisplayValue = function (dateNumber) {
+            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({
+                elementRef: this.inputGroup.elementRef,
+                placement: [this.placement, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
+                transformOriginOn: 'x-date-range-portal'
+            });
+        };
+        XDateRangeComponent.prototype.setPortal = function () {
+            var _a, _b;
+            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 () {
+            i2.XClearClass(this.labelMap);
+            this.labelMap["x-text-align-" + this.labelAlign] = this.labelAlign ? true : false;
+        };
+        XDateRangeComponent.prototype.formControlChanges = function () {
+            this.ngOnInit();
+            this.cdr.detectChanges();
+        };
+        return XDateRangeComponent;
+    }(XDateRangeProperty));
+    /** @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,
+                        templateUrl: './date-range.component.html',
+                        styleUrls: ['./date-range.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [baseForm.XValueAccessor(XDateRangeComponent), i1.DatePipe]
+                    }]
+            }], 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: [{
+                    type: i0.ViewChild,
+                    args: ['inputGroup', { static: true }]
+                }] } });
+
+    var XDatePickerModule = /** @class */ (function () {
+        function XDatePickerModule() {
+        }
+        return XDatePickerModule;
+    }());
+    /** @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,
+            XPickerYearComponent,
+            XDatePickerProperty,
+            XPickerDateProperty,
+            XPickerMonthProperty,
+            XPickerYearProperty,
+            XDateRangeComponent,
+            XDateRangePortalComponent,
+            XDateRangeProperty], imports: [i1.CommonModule,
+            i6.FormsModule,
+            i6.ReactiveFormsModule,
+            i2$1.XPortalModule,
+            i7.XTimePickerModule,
+            i5.XInputModule,
+            i4.XButtonModule,
+            i6$1.XIconModule,
+            i3.XI18nModule,
+            baseForm.XBaseFormModule], exports: [XDatePickerComponent,
+            XDateRangeComponent,
+            XDatePickerPortalComponent,
+            XPickerDateComponent,
+            XPickerMonthComponent,
+            XPickerYearComponent] });
+    /** @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,
+                i7.XTimePickerModule,
+                i5.XInputModule,
+                i4.XButtonModule,
+                i6$1.XIconModule,
+                i3.XI18nModule,
+                baseForm.XBaseFormModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDatePickerModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            XDatePickerComponent,
+                            XDatePickerPortalComponent,
+                            XPickerDateComponent,
+                            XPickerMonthComponent,
+                            XPickerYearComponent,
+                            XDatePickerProperty,
+                            XPickerDateProperty,
+                            XPickerMonthProperty,
+                            XPickerYearProperty,
+                            XDateRangeComponent,
+                            XDateRangePortalComponent,
+                            XDateRangeProperty
+                        ],
+                        exports: [
+                            XDatePickerComponent,
+                            XDateRangeComponent,
+                            XDatePickerPortalComponent,
+                            XPickerDateComponent,
+                            XPickerMonthComponent,
+                            XPickerYearComponent
                         ],
-                        exports: [XDatePickerComponent, XDatePickerPortalComponent, XPickerDateComponent, XPickerMonthComponent, XPickerYearComponent],
                         imports: [
                             i1.CommonModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
-                            i1$1.XPortalModule,
+                            i6.FormsModule,
+                            i6.ReactiveFormsModule,
+                            i2$1.XPortalModule,
                             i7.XTimePickerModule,
-                            i4.XInputModule,
-                            i3.XButtonModule,
-                            icon.XIconModule,
-                            i2$1.XI18nModule,
+                            i5.XInputModule,
+                            i4.XButtonModule,
+                            i6$1.XIconModule,
+                            i3.XI18nModule,
                             baseForm.XBaseFormModule
                         ],
-                        entryComponents: [XDatePickerPortalComponent]
+                        entryComponents: [XDatePickerPortalComponent, XDateRangePortalComponent]
                     }]
             }] });
 
@@ -1300,6 +2042,11 @@
     exports.XDatePickerPortalPrefix = XDatePickerPortalPrefix;
     exports.XDatePickerPrefix = XDatePickerPrefix;
     exports.XDatePickerProperty = XDatePickerProperty;
+    exports.XDateRangeComponent = XDateRangeComponent;
+    exports.XDateRangePortalComponent = XDateRangePortalComponent;
+    exports.XDateRangePortalPrefix = XDateRangePortalPrefix;
+    exports.XDateRangePrefix = XDateRangePrefix;
+    exports.XDateRangeProperty = XDateRangeProperty;
     exports.XPickerDateComponent = XPickerDateComponent;
     exports.XPickerDatePrefix = XPickerDatePrefix;
     exports.XPickerDateProperty = XPickerDateProperty;
@@ -1312,5 +2059,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ng-nest-ui-date-picker.umd.js.map