@ng-nest/ui 17.0.5 → 17.0.7

package/esm2022/core/config/config.service.mjs

@@ -56,10 +56,10 @@ export class XConfigService {
     getTheme(includesAll = false) {
         return this.themeService.getTheme(includesAll);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XConfigService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XConfigService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/core/services/http.service.mjs

@@ -77,10 +77,10 @@ export class XHttpService {
         //   option["headers"] = { Authorization: `Bearer ${auth["token"]}` };
         // }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XHttpService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XHttpService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XHttpService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XHttpService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XHttpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XHttpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });

package/esm2022/core/services/preloading-strategy.service.mjs

@@ -16,10 +16,10 @@ export class XPreloadingStrategyService {
             return of(null);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPreloadingStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPreloadingStrategyService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPreloadingStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPreloadingStrategyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPreloadingStrategyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPreloadingStrategyService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/esm2022/core/services/storage.service.mjs

@@ -87,10 +87,10 @@ export class XStorageService {
         };
         return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStorageService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStorageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStorageService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XStorageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Platform }] });

package/esm2022/core/theme/theme.service.mjs

@@ -146,10 +146,10 @@ export class XThemeService {
         this.renderer2.addClass(this.doc.documentElement, 'x-theme-colors');
         this.doc.documentElement.getElementsByTagName('head')[0].appendChild(this.colorsStyleEle);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/crumb/crumb.component.mjs

@@ -38,10 +38,10 @@ export class XCrumbComponent extends XCrumbProperty {
             this.cdr.detectChanges();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XCrumbComponent, isStandalone: true, selector: "x-crumb", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul #crumbs class=\"x-crumb\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <li>\r\n      <x-link\r\n        [title]=\"nodeTpl ? node.label : ''\"\r\n        [icon]=\"node.icon\"\r\n        [disabled]=\"node.disabled || i === nodes.length - 1\"\r\n        (click)=\"action('click', node, $event)\"\r\n      >\r\n        @if (!nodeTpl) {\r\n          {{ node.label }}\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n      </x-link>\r\n      @if (i !== nodes.length - 1) {\r\n        <span class=\"x-crumb-separator\">\r\n          <ng-container *xOutlet=\"separator\">{{ separator }}</ng-container>\r\n        </span>\r\n      }\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [".x-crumb{margin:0;padding:0;list-style:none;display:flex}.x-crumb>li{padding:0;margin:0;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center}.x-crumb>li .x-link.x-link-disabled{color:var(--x-text-400);cursor:text}.x-crumb-separator{margin:0 .5rem;font-weight:600;color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XCrumbComponent, isStandalone: true, selector: "x-crumb", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul #crumbs class=\"x-crumb\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <li>\r\n      <x-link\r\n        [title]=\"nodeTpl ? node.label : ''\"\r\n        [icon]=\"node.icon\"\r\n        [disabled]=\"node.disabled || i === nodes.length - 1\"\r\n        (click)=\"action('click', node, $event)\"\r\n      >\r\n        @if (!nodeTpl) {\r\n          {{ node.label }}\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n      </x-link>\r\n      @if (i !== nodes.length - 1) {\r\n        <span class=\"x-crumb-separator\">\r\n          <ng-container *xOutlet=\"separator\">{{ separator }}</ng-container>\r\n        </span>\r\n      }\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [".x-crumb{margin:0;padding:0;list-style:none;display:flex}.x-crumb>li{padding:0;margin:0;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center}.x-crumb>li .x-link.x-link-disabled{color:var(--x-text-400);cursor:text}.x-crumb-separator{margin:0 .5rem;font-weight:600;color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCrumbPrefix}`, standalone: true, imports: [NgTemplateOutlet, XLinkComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul #crumbs class=\"x-crumb\">\r\n  @for (node of nodes; track node.id; let i = $index) {\r\n    <li>\r\n      <x-link\r\n        [title]=\"nodeTpl ? node.label : ''\"\r\n        [icon]=\"node.icon\"\r\n        [disabled]=\"node.disabled || i === nodes.length - 1\"\r\n        (click)=\"action('click', node, $event)\"\r\n      >\r\n        @if (!nodeTpl) {\r\n          {{ node.label }}\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n      </x-link>\r\n      @if (i !== nodes.length - 1) {\r\n        <span class=\"x-crumb-separator\">\r\n          <ng-container *xOutlet=\"separator\">{{ separator }}</ng-container>\r\n        </span>\r\n      }\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [".x-crumb{margin:0;padding:0;list-style:none;display:flex}.x-crumb>li{padding:0;margin:0;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center}.x-crumb>li .x-link.x-link-disabled{color:var(--x-text-400);cursor:text}.x-crumb-separator{margin:0 .5rem;font-weight:600;color:var(--x-text-400)}\n"] }]
         }] });

package/esm2022/crumb/crumb.module.mjs

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { XCrumbComponent } from './crumb.component';
 import * as i0 from "@angular/core";
 export class XCrumbModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XCrumbModule, imports: [XCrumbComponent], exports: [XCrumbComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbModule, imports: [XCrumbComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XCrumbModule, imports: [XCrumbComponent], exports: [XCrumbComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbModule, imports: [XCrumbComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCrumbComponent],

package/esm2022/crumb/crumb.property.mjs

@@ -26,8 +26,8 @@ export class XCrumbProperty extends XProperty {
          */
         this.nodeClick = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XCrumbProperty, selector: "x-crumb-property", inputs: { data: "data", nodeTpl: "nodeTpl", separator: "separator" }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XCrumbProperty, selector: "x-crumb-property", inputs: { data: "data", nodeTpl: "nodeTpl", separator: "separator" }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XDataConvert()
@@ -35,7 +35,7 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME, '/')
 ], XCrumbProperty.prototype, "separator", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XCrumbProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCrumbProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCrumbPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{

package/esm2022/date-picker/date-picker-portal.component.mjs

@@ -168,10 +168,10 @@ export class XDatePickerPortalComponent {
         this.model = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
         return this.model;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XDatePickerPortalComponent, isStandalone: true, 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: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true }], ngImport: i0, template: "<div class=\"x-date-picker-portal {{ type }}\" (click)=\"inputCom.inputFocus()\">\r\n  @switch (type) {\r\n    @case ('date') {\r\n      <x-picker-date\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-date>\r\n    }\r\n    @case ('week') {\r\n      <x-picker-date\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-date>\r\n    }\r\n    @case ('month') {\r\n      <x-picker-month\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"monthChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-month>\r\n    }\r\n    @case ('quarter') {\r\n      <x-picker-quarter\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"quarterChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-quarter>\r\n    }\r\n    @case ('year') {\r\n      <x-picker-year\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"yearChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-year>\r\n    }\r\n    @case ('date-time') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('date-hour') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('date-minute') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('month') {}\r\n  }\r\n  @if (isDatePicker) {\r\n    @if (extraFooter) {\r\n      <div class=\"x-date-picker-portal-extra-footer\">\r\n        <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n      </div>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n  }\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\r\n        [display]=\"display\"\r\n        [(type)]=\"type\"\r\n        [model]=\"model\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></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        {{ time | date: timeFormat }}\r\n      </div>\r\n      <x-time-picker-frame\r\n        #timePickerFrame\r\n        [type]=\"timeType\"\r\n        [value]=\"time\"\r\n        (nodeEmit)=\"selectTime($event)\"\r\n        [disabledTime]=\"disabledTime\"\r\n        [defaultNow]=\"false\"\r\n      ></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  @if (!isDatePicker && extraFooter) {\r\n    <div class=\"x-date-picker-portal-extra-footer\">\r\n      <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n    </div>\r\n  }\r\n  <div class=\"x-date-picker-portal-footer\">\r\n    <div class=\"x-date-picker-portal-footer-left\">\r\n      @if (!isDatePicker && preset) {\r\n        <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n      }\r\n    </div>\r\n    <x-button type=\"primary\" (click)=\"!sureDisabled && nodeEmit(model)\" size=\"small\" [disabled]=\"sureDisabled\">{{\r\n      locale.sure\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #presetTpl>\r\n  @if (preset) {\r\n    <div class=\"x-date-picker-portal-preset\">\r\n      @for (item of preset; track item.id) {\r\n        @switch (item.id) {\r\n          @case ('yesterday') {\r\n            <x-link (click)=\"onYesterday()\">{{ locale.yesterday }}</x-link>\r\n          }\r\n          @case ('today') {\r\n            <x-link (click)=\"onToday()\">{{ locale.today }}</x-link>\r\n          }\r\n          @case ('tomorrow') {\r\n            <x-link (click)=\"onTomorrow()\">{{ locale.tomorrow }}</x-link>\r\n          }\r\n        }\r\n        @if (!!item.func) {\r\n          <x-link (click)=\"onPresetFunc(item)\">{{ item.label }}</x-link>\r\n        }\r\n      }\r\n    </div>\r\n  }\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}.x-date-picker-portal.week{width:18.125rem}.x-date-picker-portal.week .x-picker-date-body .x-picker-date-item:not(.x-date-in-range):not(.x-date-active) .x-date-text{background-color:transparent}.x-date-picker-portal.week .x-picker-date-body tbody tr:not(.x-date-week-active):hover .x-picker-date-item:not(.x-date-in-range){background-color:var(--x-background-a200);border-radius:var(--x-border-radius)}.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-preset{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border-top:var(--x-border-width) solid var(--x-border)}.x-date-picker-portal-preset>x-link{padding:.25rem}.x-date-picker-portal-preset>x-link:not(:first-child){margin-left:1rem}.x-date-picker-portal-body{padding:.4rem}.x-date-picker-portal-content{display:flex}.x-date-picker-portal-footer{display:flex;align-items:center;justify-content:space-between;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-picker-portal-footer .x-date-picker-portal-preset{border-top:none}.x-date-picker-portal-footer .x-date-picker-portal-preset>x-link{padding:0 .25rem}.x-date-picker-portal-extra-footer{display:flex;align-items:center;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{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:2.5rem;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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XPickerQuarterComponent, selector: "x-picker-quarter" }, { kind: "component", type: XPickerYearComponent, selector: "x-picker-year" }, { kind: "ngmodule", type: XTimePickerModule }, { kind: "component", type: i1.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XDatePickerPortalComponent, isStandalone: true, 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: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true }], ngImport: i0, template: "<div class=\"x-date-picker-portal {{ type }}\" (click)=\"inputCom.inputFocus()\">\r\n  @switch (type) {\r\n    @case ('date') {\r\n      <x-picker-date\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-date>\r\n    }\r\n    @case ('week') {\r\n      <x-picker-date\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-date>\r\n    }\r\n    @case ('month') {\r\n      <x-picker-month\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"monthChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-month>\r\n    }\r\n    @case ('quarter') {\r\n      <x-picker-quarter\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"quarterChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-quarter>\r\n    }\r\n    @case ('year') {\r\n      <x-picker-year\r\n        [display]=\"display\"\r\n        [model]=\"model\"\r\n        [(type)]=\"type\"\r\n        (modelChange)=\"yearChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></x-picker-year>\r\n    }\r\n    @case ('date-time') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('date-hour') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('date-minute') {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"\r\n      ></ng-container>\r\n    }\r\n    @case ('month') {}\r\n  }\r\n  @if (isDatePicker) {\r\n    @if (extraFooter) {\r\n      <div class=\"x-date-picker-portal-extra-footer\">\r\n        <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n      </div>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n  }\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\r\n        [display]=\"display\"\r\n        [(type)]=\"type\"\r\n        [model]=\"model\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        [disabledDate]=\"disabledDate\"\r\n      ></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        {{ time | date: timeFormat }}\r\n      </div>\r\n      <x-time-picker-frame\r\n        #timePickerFrame\r\n        [type]=\"timeType\"\r\n        [value]=\"time\"\r\n        (nodeEmit)=\"selectTime($event)\"\r\n        [disabledTime]=\"disabledTime\"\r\n        [defaultNow]=\"false\"\r\n      ></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  @if (!isDatePicker && extraFooter) {\r\n    <div class=\"x-date-picker-portal-extra-footer\">\r\n      <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n    </div>\r\n  }\r\n  <div class=\"x-date-picker-portal-footer\">\r\n    <div class=\"x-date-picker-portal-footer-left\">\r\n      @if (!isDatePicker && preset) {\r\n        <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n      }\r\n    </div>\r\n    <x-button type=\"primary\" (click)=\"!sureDisabled && nodeEmit(model)\" size=\"small\" [disabled]=\"sureDisabled\">{{\r\n      locale.sure\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #presetTpl>\r\n  @if (preset) {\r\n    <div class=\"x-date-picker-portal-preset\">\r\n      @for (item of preset; track item.id) {\r\n        @switch (item.id) {\r\n          @case ('yesterday') {\r\n            <x-link (click)=\"onYesterday()\">{{ locale.yesterday }}</x-link>\r\n          }\r\n          @case ('today') {\r\n            <x-link (click)=\"onToday()\">{{ locale.today }}</x-link>\r\n          }\r\n          @case ('tomorrow') {\r\n            <x-link (click)=\"onTomorrow()\">{{ locale.tomorrow }}</x-link>\r\n          }\r\n        }\r\n        @if (!!item.func) {\r\n          <x-link (click)=\"onPresetFunc(item)\">{{ item.label }}</x-link>\r\n        }\r\n      }\r\n    </div>\r\n  }\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}.x-date-picker-portal.week{width:18.125rem}.x-date-picker-portal.week .x-picker-date-body .x-picker-date-item:not(.x-date-in-range):not(.x-date-active) .x-date-text{background-color:transparent}.x-date-picker-portal.week .x-picker-date-body tbody tr:not(.x-date-week-active):hover .x-picker-date-item:not(.x-date-in-range){background-color:var(--x-background-a200);border-radius:var(--x-border-radius)}.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-preset{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border-top:var(--x-border-width) solid var(--x-border)}.x-date-picker-portal-preset>x-link{padding:.25rem}.x-date-picker-portal-preset>x-link:not(:first-child){margin-left:1rem}.x-date-picker-portal-body{padding:.4rem}.x-date-picker-portal-content{display:flex}.x-date-picker-portal-footer{display:flex;align-items:center;justify-content:space-between;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-picker-portal-footer .x-date-picker-portal-preset{border-top:none}.x-date-picker-portal-footer .x-date-picker-portal-preset>x-link{padding:0 .25rem}.x-date-picker-portal-extra-footer{display:flex;align-items:center;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{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:2.5rem;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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XPickerQuarterComponent, selector: "x-picker-quarter" }, { kind: "component", type: XPickerYearComponent, selector: "x-picker-year" }, { kind: "ngmodule", type: XTimePickerModule }, { kind: "component", type: i1.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDatePickerPortalPrefix}`, standalone: true, imports: [
                         NgTemplateOutlet,

package/esm2022/date-picker/date-picker.component.mjs

@@ -338,10 +338,10 @@ export class XDatePickerComponent extends XDatePickerProperty {
         this.ngOnInit();
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XDatePickerComponent, isStandalone: true, selector: "x-date-picker", providers: [XValueAccessor(XDatePickerComponent), 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, 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      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\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;width:12rem}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDatePickerComponent, isStandalone: true, selector: "x-date-picker", providers: [XValueAccessor(XDatePickerComponent), 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, 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      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\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;width:12rem}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDatePickerPrefix}`, standalone: true, imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XDatePickerComponent), DatePipe], 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      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\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;width:12rem}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"] }]
         }], propDecorators: { datePicker: [{

package/esm2022/date-picker/date-picker.module.mjs

@@ -3,11 +3,11 @@ import { XDatePickerComponent } from './date-picker.component';
 import { XDateRangeComponent } from './date-range.component';
 import * as i0 from "@angular/core";
 export class XDatePickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerModule, imports: [XDatePickerComponent, XDateRangeComponent], exports: [XDatePickerComponent, XDateRangeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerModule, imports: [XDatePickerComponent, XDateRangeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerModule, imports: [XDatePickerComponent, XDateRangeComponent], exports: [XDatePickerComponent, XDateRangeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerModule, imports: [XDatePickerComponent, XDateRangeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XDatePickerComponent, XDateRangeComponent],

package/esm2022/date-picker/date-picker.property.mjs

@@ -32,8 +32,8 @@ export class XDatePickerProperty extends XControlValueAccessor {
          */
         this.nodeEmit = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XDatePickerProperty, selector: "x-date-picker-property", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset", extraFooter: "extraFooter", disabledDate: "disabledDate", disabledTime: "disabledTime" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDatePickerProperty, selector: "x-date-picker-property", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset", extraFooter: "extraFooter", disabledDate: "disabledDate", disabledTime: "disabledTime" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XWithConfig(X_CONFIG_NAME, 'yyyy-MM-dd')
@@ -55,7 +55,7 @@ __decorate([
 __decorate([
     XDataConvert()
 ], XDatePickerProperty.prototype, "preset", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDatePickerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDatePickerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDatePickerPrefix}-property`, template: '' }]
         }], propDecorators: { type: [{
@@ -110,8 +110,8 @@ export class XDateRangeProperty extends XControlValueAccessor {
          */
         this.nodeEmit = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateRangeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XDateRangeProperty, selector: "x-date-range-property", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset", placeholder: "placeholder", extraFooter: "extraFooter", disabledDate: "disabledDate", disabledTime: "disabledTime" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateRangeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDateRangeProperty, selector: "x-date-range-property", inputs: { type: "type", format: "format", clearable: "clearable", placement: "placement", size: "size", bordered: "bordered", preset: "preset", placeholder: "placeholder", extraFooter: "extraFooter", disabledDate: "disabledDate", disabledTime: "disabledTime" }, outputs: { nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XWithConfig(X_CONFIG_RANGE_NAME, 'yyyy-MM-dd')
@@ -133,7 +133,7 @@ __decorate([
 __decorate([
     XDataConvert()
 ], XDateRangeProperty.prototype, "preset", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateRangeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateRangeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDateRangePrefix}-property`, template: '' }]
         }], propDecorators: { type: [{
@@ -276,8 +276,8 @@ export class XPickerDateProperty extends XProperty {
          */
         this.rangeDateClick = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerDateProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XPickerDateProperty, selector: "x-picker-date-property", inputs: { type: "type", display: "display", model: "model", dateTemp: "dateTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", lastMonthBtn: "lastMonthBtn", nextYearBtn: "nextYearBtn", nextMonthBtn: "nextMonthBtn", rangeHover: "rangeHover", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { typeChange: "typeChange", modelChange: "modelChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerDateProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XPickerDateProperty, selector: "x-picker-date-property", inputs: { type: "type", display: "display", model: "model", dateTemp: "dateTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", lastMonthBtn: "lastMonthBtn", nextYearBtn: "nextYearBtn", nextMonthBtn: "nextMonthBtn", rangeHover: "rangeHover", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { typeChange: "typeChange", modelChange: "modelChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -300,7 +300,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XPickerDateProperty.prototype, "rangeHover", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerDateProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerDateProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPickerDatePrefix}-property`, template: '' }]
         }], propDecorators: { type: [{
@@ -438,8 +438,8 @@ export class XPickerMonthProperty extends XProperty {
          */
         this.rangeDateClick = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerMonthProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XPickerMonthProperty, selector: "x-picker-month-property", inputs: { type: "type", display: "display", model: "model", monthTemp: "monthTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerMonthProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XPickerMonthProperty, selector: "x-picker-month-property", inputs: { type: "type", display: "display", model: "model", monthTemp: "monthTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -453,7 +453,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XPickerMonthProperty.prototype, "nextYearBtn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerMonthProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerMonthProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPickerMonthPrefix}-property`, template: '' }]
         }], propDecorators: { type: [{
@@ -585,8 +585,8 @@ export class XPickerQuarterProperty extends XProperty {
          */
         this.rangeDateClick = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerQuarterProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XPickerQuarterProperty, selector: "x-picker-quarter-property", inputs: { type: "type", display: "display", model: "model", quarterTemp: "quarterTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerQuarterProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XPickerQuarterProperty, selector: "x-picker-quarter-property", inputs: { type: "type", display: "display", model: "model", quarterTemp: "quarterTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -600,7 +600,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XPickerQuarterProperty.prototype, "nextYearBtn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerQuarterProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerQuarterProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPickerQuarterPrefix}-property`, template: '' }]
         }], propDecorators: { type: [{
@@ -743,8 +743,8 @@ export class XPickerYearProperty extends XProperty {
          */
         this.rangeDateClick = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerYearProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: XPickerYearProperty, selector: "x-picker-year-property", inputs: { type: "type", display: "display", model: "model", yearTemp: "yearTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", startChange: "startChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerYearProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XPickerYearProperty, selector: "x-picker-year-property", inputs: { type: "type", display: "display", model: "model", yearTemp: "yearTemp", showHeader: "showHeader", rangePicker: "rangePicker", lastYearBtn: "lastYearBtn", nextYearBtn: "nextYearBtn", rangeValue: "rangeValue", rangeType: "rangeType", disabledDate: "disabledDate" }, outputs: { modelChange: "modelChange", typeChange: "typeChange", startChange: "startChange", rangeChange: "rangeChange", yearChange: "yearChange", monthChange: "monthChange", displayChange: "displayChange", rangeTdMouseenter: "rangeTdMouseenter", rangeTdMouseleave: "rangeTdMouseleave", rangeDateClick: "rangeDateClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -758,7 +758,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XPickerYearProperty.prototype, "nextYearBtn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XPickerYearProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XPickerYearProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPickerYearPrefix}-property`, template: '' }]
         }], propDecorators: { type: [{

package/esm2022/date-picker/date-quarter.pipe.mjs

@@ -9,10 +9,10 @@ export class XDateQuarterPipe {
             return '';
         return !includeYear ? XDateQuarter(input) : XDateYearQuarter(input);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateQuarterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: XDateQuarterPipe, isStandalone: true, name: "xDateQuarter" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateQuarterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XDateQuarterPipe, isStandalone: true, name: "xDateQuarter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateQuarterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateQuarterPipe, decorators: [{
             type: Pipe,
             args: [{ name: `${XDateQuarterPrefix}`, standalone: true }]
         }], ctorParameters: () => [] });

package/esm2022/date-picker/date-range-portal.component.mjs

@@ -313,10 +313,10 @@ export class XDateRangePortalComponent {
             this.nodeEmit(value, true);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateRangePortalComponent, deps: [{ token: i1.DatePipe }, { token: i1.LowerCasePipe }, { token: i0.ChangeDetectorRef }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: XDateRangePortalComponent, isStandalone: true, 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: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "startPicker", first: true, predicate: ["startPicker"], descendants: true }, { propertyName: "endPicker", first: true, predicate: ["endPicker"], descendants: true }, { propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true }], ngImport: i0, template: "<div class=\"x-date-range-portal {{ type }}\">\r\n  <div class=\"x-date-range-portal-body\">\r\n    @switch (type) {\r\n      @case ('date') {\r\n        <x-picker-date\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [nextMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n        <x-picker-date\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [lastMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n      }\r\n      @case ('week') {\r\n        <x-picker-date\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          type=\"week\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [nextMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n        <x-picker-date\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          type=\"week\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [lastMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n      }\r\n      @case ('month') {\r\n        <x-picker-month\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-month>\r\n        <x-picker-month\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-month>\r\n      }\r\n      @case ('quarter') {\r\n        <x-picker-quarter\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-quarter>\r\n        <x-picker-quarter\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-quarter>\r\n      }\r\n      @case ('year') {\r\n        <x-picker-year\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-year>\r\n        <x-picker-year\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-year>\r\n      }\r\n      @case ('date-time') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"\r\n        ></ng-container>\r\n      }\r\n      @case ('date-hour') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"\r\n        ></ng-container>\r\n      }\r\n      @case ('date-minute') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"\r\n        ></ng-container>\r\n      }\r\n    }\r\n  </div>\r\n  @if (isDatePicker) {\r\n    @if (extraFooter) {\r\n      <div class=\"x-date-range-portal-extra-footer\">\r\n        <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n      </div>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<ng-template #dateTimeHourMinuteTpl let-timeFormat=\"timeFormat\" let-timeType=\"timeType\">\r\n  <div class=\"x-date-range-portal-content\">\r\n    <div class=\"x-date-range-portal-date\">\r\n      <x-picker-date\r\n        [class.x-date-range-portal-start]=\"activeType === 'start'\"\r\n        [class.x-date-range-portal-end]=\"activeType === 'end'\"\r\n        [(display)]=\"timeDisplay\"\r\n        [(model)]=\"timeModel\"\r\n        [rangeHover]=\"timeHover\"\r\n        [rangeValue]=\"value\"\r\n        [rangeType]=\"activeType\"\r\n        [disabledDate]=\"disabledDate\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        rangePicker\r\n      ></x-picker-date>\r\n    </div>\r\n    <div class=\"x-date-range-portal-time\">\r\n      <div class=\"x-date-range-portal-time-label\">\r\n        {{ time | date: timeFormat }}\r\n      </div>\r\n      <x-time-picker-frame\r\n        #timePickerFrame\r\n        [type]=\"timeType\"\r\n        [value]=\"time\"\r\n        (nodeEmit)=\"selectTime($event)\"\r\n        [disabledTimeParam]=\"activeType\"\r\n        [disabledTime]=\"disabledTime\"\r\n        [defaultNow]=\"false\"\r\n      ></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  @if (!isDatePicker && extraFooter) {\r\n    <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n  }\r\n  <div class=\"x-date-range-portal-footer\">\r\n    <div class=\"x-date-range-portal-footer-left\">\r\n      @if (!isDatePicker) {\r\n        <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n      }\r\n    </div>\r\n    <x-button type=\"primary\" (click)=\"!sureDisabled && sureTime()\" size=\"small\" [disabled]=\"sureDisabled\">{{\r\n      locale.sure\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #presetTpl>\r\n  @if (preset) {\r\n    <div class=\"x-date-range-portal-preset\">\r\n      @for (item of preset; track item.id) {\r\n        @switch (item.id) {\r\n          @case ('thisWeek') {\r\n            <x-link (click)=\"onPreset('week', 0)\">{{ locale.thisWeek }}</x-link>\r\n          }\r\n          @case ('lastWeek') {\r\n            <x-link (click)=\"onPreset('week', -1)\">{{ locale.lastWeek }}</x-link>\r\n          }\r\n          @case ('nextWeek') {\r\n            <x-link (click)=\"onPreset('week', 1)\">{{ locale.nextWeek }}</x-link>\r\n          }\r\n          @case ('thisMonth') {\r\n            <x-link (click)=\"onPreset('month', 0)\">{{ locale.thisMonth }}</x-link>\r\n          }\r\n          @case ('lastMonth') {\r\n            <x-link (click)=\"onPreset('month', -1)\">{{ locale.lastMonth }}</x-link>\r\n          }\r\n          @case ('nextMonth') {\r\n            <x-link (click)=\"onPreset('month', 1)\">{{ locale.nextMonth }}</x-link>\r\n          }\r\n          @case ('thisYear') {\r\n            <x-link (click)=\"onPreset('year', 0)\">{{ locale.thisYear }}</x-link>\r\n          }\r\n          @case ('lastYear') {\r\n            <x-link (click)=\"onPreset('year', -1)\">{{ locale.lastYear }}</x-link>\r\n          }\r\n          @case ('nextYear') {\r\n            <x-link (click)=\"onPreset('year', 1)\">{{ locale.nextYear }}</x-link>\r\n          }\r\n        }\r\n        @if (!!item.func) {\r\n          <x-link (click)=\"onPresetFunc(item)\">{{ item.label }}</x-link>\r\n        }\r\n      }\r\n    </div>\r\n  }\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}.x-date-range-portal.week .x-picker-date-body .x-picker-date-item:not(.x-date-in-range):not(.x-date-active) .x-date-text{background-color:transparent}.x-date-range-portal.week .x-picker-date-body tbody tr.x-date-week-in-range:not(.x-date-week-start-active):not(.x-date-week-end-active) .x-picker-date-item{background-color:var(--x-primary-800)}.x-date-range-portal.week .x-picker-date-body tbody tr:not(.x-date-week-active):not(.x-date-week-start-active):not(.x-date-week-end-active):not(.x-date-week-in-range):hover .x-picker-date-item{background-color:var(--x-background-a200);border-radius:var(--x-border-radius)}.x-date-range-portal.date-time{width:27rem}.x-date-range-portal.date-time .x-date-range-portal-body{flex-direction:column}.x-date-range-portal.date-hour{width:19.75rem}.x-date-range-portal.date-hour .x-date-range-portal-body{flex-direction:column}.x-date-range-portal.date-minute{width:23.375rem}.x-date-range-portal.date-minute .x-date-range-portal-body{flex-direction:column}.x-date-range-portal-content{display:flex}.x-date-range-portal-preset{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border-top:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset>x-link{padding:.25rem}.x-date-range-portal-preset>x-link:not(:first-child){margin-left:1rem}.x-date-range-portal-extra-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-year-month{flex:1;text-align:center}.x-date-range-portal-body{display:flex}.x-date-range-portal-body .x-picker-date-item:before,.x-date-range-portal-body .x-picker-date-item:after{position:absolute;top:50%;right:0;left:0;z-index:1;border:var(--x-border-width) dashed transparent;transform:translateY(-50%);transition:var(--x-animation-duration-base);content:\"\"}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next),.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next){color:var(--x-background-100)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next) .x-date-text,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next) .x-date-text{background-color:var(--x-primary);border-color:var(--x-primary)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next):hover,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next):hover{color:var(--x-background-100)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next):hover .x-date-text,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next):hover .x-date-text{background-color:var(--x-primary)}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child) .x-date-text{z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child):after{background-color:var(--x-primary-800);transform:translate(-.25rem,-50%);border-radius:var(--x-border-radius);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child).x-date-in-range-hover:after{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child) .x-date-text{z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child):after{background-color:var(--x-primary-800);transform:translate(.25rem,-50%);border-radius:var(--x-border-radius);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child).x-date-in-range-hover:after{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start.x-date-range-end.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child):after{display:none}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next) .x-date-text{position:relative;z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):before{background-color:var(--x-primary-800);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):first-child:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):last-child:before{transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover-left:before{transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover-right:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover:before{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:not(.x-date-last-or-next):before{border-color:var(--x-primary);border-left-color:transparent;border-right-color:transparent;transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:first-child:not(.x-date-last-or-next):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day:before{border-left-color:var(--x-primary);transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:first-child:not(.x-date-last-or-next).x-date-range-hover-end:before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day.x-date-range-hover-end:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day:last-child:not(.x-date-last-or-next):before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:last-child:not(.x-date-last-or-next):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-last-day:before{border-right-color:var(--x-primary);transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:last-child:not(.x-date-last-or-next).x-date-range-hover-start:before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-last-day.x-date-range-hover-start:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start:not(.x-date-last-or-next):before{border-left-color:var(--x-primary);transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-range-hover-start:not(.x-date-last-or-next):before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end:not(.x-date-last-or-next):before{border-right-color:var(--x-primary);transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start-left:not(:first-child):not(.x-date-last-or-next):not(.x-date-first-day):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end-left:not(:first-child):not(.x-date-last-or-next):not(.x-date-first-day):before{border-top-color:var(--x-primary);border-bottom-color:var(--x-primary);transform:translate(-.3125rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start-right:not(:last-child):not(.x-date-last-or-next):not(.x-date-last-day):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end-right:not(:last-child):not(.x-date-last-or-next):not(.x-date-last-day):before{border-top-color:var(--x-primary);border-bottom-color:var(--x-primary);transform:translate(.3125rem,-50%)}.x-date-range-portal-start,.x-date-range-portal-end{flex:1}.x-date-range-portal-footer{display:flex;align-items:center;justify-content:space-between;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-footer .x-date-range-portal-preset{border-top:none}.x-date-range-portal-footer .x-date-range-portal-preset>x-link{padding:0 .25rem}.x-date-range-portal-date{flex:1}.x-date-range-portal-time{display:flex;flex-direction:column;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time-label{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:2.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time .x-time-picker-frame{border-width:0;box-shadow:none;margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XPickerYearComponent, selector: "x-picker-year" }, { kind: "component", type: XPickerQuarterComponent, selector: "x-picker-quarter" }, { kind: "ngmodule", type: XTimePickerModule }, { kind: "component", type: i3.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateRangePortalComponent, deps: [{ token: i1.DatePipe }, { token: i1.LowerCasePipe }, { token: i0.ChangeDetectorRef }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XDateRangePortalComponent, isStandalone: true, 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: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "startPicker", first: true, predicate: ["startPicker"], descendants: true }, { propertyName: "endPicker", first: true, predicate: ["endPicker"], descendants: true }, { propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true }], ngImport: i0, template: "<div class=\"x-date-range-portal {{ type }}\">\r\n  <div class=\"x-date-range-portal-body\">\r\n    @switch (type) {\r\n      @case ('date') {\r\n        <x-picker-date\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [nextMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n        <x-picker-date\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [lastMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n      }\r\n      @case ('week') {\r\n        <x-picker-date\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          type=\"week\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [nextMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n        <x-picker-date\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          type=\"week\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [lastMonthBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-date>\r\n      }\r\n      @case ('month') {\r\n        <x-picker-month\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-month>\r\n        <x-picker-month\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-month>\r\n      }\r\n      @case ('quarter') {\r\n        <x-picker-quarter\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-quarter>\r\n        <x-picker-quarter\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-quarter>\r\n      }\r\n      @case ('year') {\r\n        <x-picker-year\r\n          #startPicker\r\n          class=\"x-date-range-portal-start\"\r\n          [(display)]=\"startDisplay\"\r\n          [model]=\"startModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [nextYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'start')\"\r\n          (monthChange)=\"monthChange($event, 'start')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-year>\r\n        <x-picker-year\r\n          #endPicker\r\n          class=\"x-date-range-portal-end\"\r\n          [(display)]=\"endDisplay\"\r\n          [model]=\"endModel\"\r\n          [rangeValue]=\"value\"\r\n          [rangeType]=\"activeType\"\r\n          [lastYearBtn]=\"false\"\r\n          [disabledDate]=\"disabledDate\"\r\n          (modelChange)=\"dateChange($event)\"\r\n          (yearChange)=\"yearChange($event, 'end')\"\r\n          (monthChange)=\"monthChange($event, 'end')\"\r\n          (rangeTdMouseenter)=\"setDatesState($event)\"\r\n          (rangeDateClick)=\"setDatesState($event)\"\r\n          rangePicker\r\n        ></x-picker-year>\r\n      }\r\n      @case ('date-time') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm:ss', timeType: 'time' }\"\r\n        ></ng-container>\r\n      }\r\n      @case ('date-hour') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH', timeType: 'hour' }\"\r\n        ></ng-container>\r\n      }\r\n      @case ('date-minute') {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"dateTimeHourMinuteTpl; context: { timeFormat: 'HH:mm', timeType: 'minute' }\"\r\n        ></ng-container>\r\n      }\r\n    }\r\n  </div>\r\n  @if (isDatePicker) {\r\n    @if (extraFooter) {\r\n      <div class=\"x-date-range-portal-extra-footer\">\r\n        <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n      </div>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<ng-template #dateTimeHourMinuteTpl let-timeFormat=\"timeFormat\" let-timeType=\"timeType\">\r\n  <div class=\"x-date-range-portal-content\">\r\n    <div class=\"x-date-range-portal-date\">\r\n      <x-picker-date\r\n        [class.x-date-range-portal-start]=\"activeType === 'start'\"\r\n        [class.x-date-range-portal-end]=\"activeType === 'end'\"\r\n        [(display)]=\"timeDisplay\"\r\n        [(model)]=\"timeModel\"\r\n        [rangeHover]=\"timeHover\"\r\n        [rangeValue]=\"value\"\r\n        [rangeType]=\"activeType\"\r\n        [disabledDate]=\"disabledDate\"\r\n        (modelChange)=\"dateChange($event)\"\r\n        rangePicker\r\n      ></x-picker-date>\r\n    </div>\r\n    <div class=\"x-date-range-portal-time\">\r\n      <div class=\"x-date-range-portal-time-label\">\r\n        {{ time | date: timeFormat }}\r\n      </div>\r\n      <x-time-picker-frame\r\n        #timePickerFrame\r\n        [type]=\"timeType\"\r\n        [value]=\"time\"\r\n        (nodeEmit)=\"selectTime($event)\"\r\n        [disabledTimeParam]=\"activeType\"\r\n        [disabledTime]=\"disabledTime\"\r\n        [defaultNow]=\"false\"\r\n      ></x-time-picker-frame>\r\n    </div>\r\n  </div>\r\n  @if (!isDatePicker && extraFooter) {\r\n    <ng-container *xOutlet=\"extraFooter\">{{ extraFooter }}</ng-container>\r\n  }\r\n  <div class=\"x-date-range-portal-footer\">\r\n    <div class=\"x-date-range-portal-footer-left\">\r\n      @if (!isDatePicker) {\r\n        <ng-container *ngTemplateOutlet=\"presetTpl\"></ng-container>\r\n      }\r\n    </div>\r\n    <x-button type=\"primary\" (click)=\"!sureDisabled && sureTime()\" size=\"small\" [disabled]=\"sureDisabled\">{{\r\n      locale.sure\r\n    }}</x-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #presetTpl>\r\n  @if (preset) {\r\n    <div class=\"x-date-range-portal-preset\">\r\n      @for (item of preset; track item.id) {\r\n        @switch (item.id) {\r\n          @case ('thisWeek') {\r\n            <x-link (click)=\"onPreset('week', 0)\">{{ locale.thisWeek }}</x-link>\r\n          }\r\n          @case ('lastWeek') {\r\n            <x-link (click)=\"onPreset('week', -1)\">{{ locale.lastWeek }}</x-link>\r\n          }\r\n          @case ('nextWeek') {\r\n            <x-link (click)=\"onPreset('week', 1)\">{{ locale.nextWeek }}</x-link>\r\n          }\r\n          @case ('thisMonth') {\r\n            <x-link (click)=\"onPreset('month', 0)\">{{ locale.thisMonth }}</x-link>\r\n          }\r\n          @case ('lastMonth') {\r\n            <x-link (click)=\"onPreset('month', -1)\">{{ locale.lastMonth }}</x-link>\r\n          }\r\n          @case ('nextMonth') {\r\n            <x-link (click)=\"onPreset('month', 1)\">{{ locale.nextMonth }}</x-link>\r\n          }\r\n          @case ('thisYear') {\r\n            <x-link (click)=\"onPreset('year', 0)\">{{ locale.thisYear }}</x-link>\r\n          }\r\n          @case ('lastYear') {\r\n            <x-link (click)=\"onPreset('year', -1)\">{{ locale.lastYear }}</x-link>\r\n          }\r\n          @case ('nextYear') {\r\n            <x-link (click)=\"onPreset('year', 1)\">{{ locale.nextYear }}</x-link>\r\n          }\r\n        }\r\n        @if (!!item.func) {\r\n          <x-link (click)=\"onPresetFunc(item)\">{{ item.label }}</x-link>\r\n        }\r\n      }\r\n    </div>\r\n  }\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}.x-date-range-portal.week .x-picker-date-body .x-picker-date-item:not(.x-date-in-range):not(.x-date-active) .x-date-text{background-color:transparent}.x-date-range-portal.week .x-picker-date-body tbody tr.x-date-week-in-range:not(.x-date-week-start-active):not(.x-date-week-end-active) .x-picker-date-item{background-color:var(--x-primary-800)}.x-date-range-portal.week .x-picker-date-body tbody tr:not(.x-date-week-active):not(.x-date-week-start-active):not(.x-date-week-end-active):not(.x-date-week-in-range):hover .x-picker-date-item{background-color:var(--x-background-a200);border-radius:var(--x-border-radius)}.x-date-range-portal.date-time{width:27rem}.x-date-range-portal.date-time .x-date-range-portal-body{flex-direction:column}.x-date-range-portal.date-hour{width:19.75rem}.x-date-range-portal.date-hour .x-date-range-portal-body{flex-direction:column}.x-date-range-portal.date-minute{width:23.375rem}.x-date-range-portal.date-minute .x-date-range-portal-body{flex-direction:column}.x-date-range-portal-content{display:flex}.x-date-range-portal-preset{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border-top:var(--x-border-width) solid var(--x-border)}.x-date-range-portal-preset>x-link{padding:.25rem}.x-date-range-portal-preset>x-link:not(:first-child){margin-left:1rem}.x-date-range-portal-extra-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-year-month{flex:1;text-align:center}.x-date-range-portal-body{display:flex}.x-date-range-portal-body .x-picker-date-item:before,.x-date-range-portal-body .x-picker-date-item:after{position:absolute;top:50%;right:0;left:0;z-index:1;border:var(--x-border-width) dashed transparent;transform:translateY(-50%);transition:var(--x-animation-duration-base);content:\"\"}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next),.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next){color:var(--x-background-100)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next) .x-date-text,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next) .x-date-text{background-color:var(--x-primary);border-color:var(--x-primary)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next):hover,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next):hover{color:var(--x-background-100)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start:not(.x-date-last-or-next):hover .x-date-text,.x-date-range-portal-body .x-picker-date-item.x-date-range-end:not(.x-date-last-or-next):hover .x-date-text{background-color:var(--x-primary)}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child) .x-date-text{z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child):after{background-color:var(--x-primary-800);transform:translate(-.25rem,-50%);border-radius:var(--x-border-radius);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-range-end-left:not(.x-date-last-or-next):not(.x-date-first-day):not(:first-child).x-date-in-range-hover:after{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child) .x-date-text{z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child):after{background-color:var(--x-primary-800);transform:translate(.25rem,-50%);border-radius:var(--x-border-radius);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child).x-date-in-range-hover:after{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-start.x-date-range-end.x-date-range-start-right:not(.x-date-last-or-next):not(.x-date-last-day):not(:last-child):after{display:none}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next) .x-date-text{position:relative;z-index:1}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):before{background-color:var(--x-primary-800);z-index:0}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):first-child:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next):last-child:before{transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover-left:before{transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover-right:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-in-range:not(.x-date-range-start):not(.x-date-range-end):not(.x-date-last-or-next).x-date-in-range-hover:before{background-color:var(--x-primary-700)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:not(.x-date-last-or-next):before{border-color:var(--x-primary);border-left-color:transparent;border-right-color:transparent;transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:first-child:not(.x-date-last-or-next):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day:before{border-left-color:var(--x-primary);transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:first-child:not(.x-date-last-or-next).x-date-range-hover-end:before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day.x-date-range-hover-end:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-first-day:last-child:not(.x-date-last-or-next):before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:last-child:not(.x-date-last-or-next):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-last-day:before{border-right-color:var(--x-primary);transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover:last-child:not(.x-date-last-or-next).x-date-range-hover-start:before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-last-day.x-date-range-hover-start:before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start:not(.x-date-last-or-next):before{border-left-color:var(--x-primary);transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover.x-date-range-hover-start:not(.x-date-last-or-next):before{transform:translate(.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end:not(.x-date-last-or-next):before{border-right-color:var(--x-primary);transform:translate(-.25rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start-left:not(:first-child):not(.x-date-last-or-next):not(.x-date-first-day):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end-left:not(:first-child):not(.x-date-last-or-next):not(.x-date-first-day):before{border-top-color:var(--x-primary);border-bottom-color:var(--x-primary);transform:translate(-.3125rem,-50%)}.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-start-right:not(:last-child):not(.x-date-last-or-next):not(.x-date-last-day):before,.x-date-range-portal-body .x-picker-date-item.x-date-range-hover-end-right:not(:last-child):not(.x-date-last-or-next):not(.x-date-last-day):before{border-top-color:var(--x-primary);border-bottom-color:var(--x-primary);transform:translate(.3125rem,-50%)}.x-date-range-portal-start,.x-date-range-portal-end{flex:1}.x-date-range-portal-footer{display:flex;align-items:center;justify-content:space-between;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);padding:.5rem}.x-date-range-portal-footer .x-date-range-portal-preset{border-top:none}.x-date-range-portal-footer .x-date-range-portal-preset>x-link{padding:0 .25rem}.x-date-range-portal-date{flex:1}.x-date-range-portal-time{display:flex;flex-direction:column;border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time-label{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:2.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-date-range-portal-time .x-time-picker-frame{border-width:0;box-shadow:none;margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XPickerYearComponent, selector: "x-picker-year" }, { kind: "component", type: XPickerQuarterComponent, selector: "x-picker-quarter" }, { kind: "ngmodule", type: XTimePickerModule }, { kind: "component", type: i3.XTimePickerFrameComponent, selector: "x-time-picker-frame", inputs: ["type", "value", "use12Hours", "hourStep", "minuteStep", "secondStep", "defaultNow", "disabledTime", "disabledTimeParam"], outputs: ["nodeEmit"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: XDateRangePortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDateRangePortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDateRangePortalPrefix}`, standalone: true, imports: [
                         NgTemplateOutlet,