@ng-nest/ui 20.2.3 → 20.2.4

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

@@ -1992,7 +1992,7 @@ class XDatePickerPortalComponent {
         return this.model();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDatePickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XDatePickerPortalComponent, isStandalone: true, selector: "x-date-picker-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, extraFooter: { classPropertyName: "extraFooter", publicName: "extraFooter", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { type: "typeChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done($event)", "animationstart": "start($event)" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true, read: XTimePickerFrameComponent, isSignal: true }], ngImport: i0, template: "<div class=\"x-date-picker-portal {{ type() }}\" (click)=\"inputCom()?.inputFocus('focus')\">\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        #timePickerFrameD\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\r\n      type=\"primary\"\r\n      text\r\n      (click)=\"!sureDisabled() && nodeClick.emit({ date: model()!, sure: true })\"\r\n      size=\"small\"\r\n      [disabled]=\"sureDisabled()\"\r\n      >{{ locale().sure }}</x-button\r\n    >\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) {\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-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);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)}.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):first-child{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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):last-child{border-top-right-radius:var(--x-border-radius);border-bottom-right-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: "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"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XDatePickerPortalComponent, isStandalone: true, selector: "x-date-picker-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, extraFooter: { classPropertyName: "extraFooter", publicName: "extraFooter", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { type: "typeChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true, read: XTimePickerFrameComponent, isSignal: true }], ngImport: i0, template: "<div class=\"x-date-picker-portal {{ type() }}\" (click)=\"inputCom()?.inputFocus('focus')\">\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        #timePickerFrameD\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\r\n      type=\"primary\"\r\n      text\r\n      (click)=\"!sureDisabled() && nodeClick.emit({ date: model()!, sure: true })\"\r\n      size=\"small\"\r\n      [disabled]=\"sureDisabled()\"\r\n      >{{ locale().sure }}</x-button\r\n    >\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) {\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-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);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)}.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):first-child{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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):last-child{border-top-right-radius:var(--x-border-radius);border-bottom-right-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: "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"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDatePickerPortalComponent, decorators: [{
             type: Component,
@@ -2016,10 +2016,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
                 args: ['animate.leave']
             }], done: [{
                 type: HostListener,
-                args: ['animationend', ['$event']]
+                args: ['animationend']
             }], start: [{
                 type: HostListener,
-                args: ['animationstart', ['$event']]
+                args: ['animationstart']
             }], timePickerFrame: [{ type: i0.ViewChild, args: ['timePickerFrame', { ...{ read: XTimePickerFrameComponent }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }, { type: i0.Output, args: ["typeChange"] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], extraFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFooter", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], inputCom: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputCom", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], disabledTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTime", required: false }] }], animating: [{ type: i0.Output, args: ["animating"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
 
 class XDatePickerComponent extends XDatePickerProperty {
@@ -2627,7 +2627,7 @@ class XDateRangePortalComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDateRangePortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XDateRangePortalComponent, isStandalone: true, selector: "x-date-range-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, extraFooter: { classPropertyName: "extraFooter", publicName: "extraFooter", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, activeType: { classPropertyName: "activeType", publicName: "activeType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", type: "typeChange", animating: "animating", nodeClick: "nodeClick", startNodeChanged: "startNodeChanged", endNodeChanged: "endNodeChanged" }, host: { listeners: { "animationend": "done($event)", "animationstart": "start($event)" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "startPicker", first: true, predicate: ["startPicker"], descendants: true, isSignal: true }, { propertyName: "endPicker", first: true, predicate: ["endPicker"], descendants: true, isSignal: true }, { propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true, isSignal: 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          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          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          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          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          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          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          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          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          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          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\" text (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) {\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-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);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)}.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:first-child{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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:last-child{border-top-right-radius:var(--x-border-radius);border-bottom-right-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-top-right-radius:var(--x-border-radius);border-bottom-right-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-top-left-radius:var(--x-border-radius);border-bottom-left-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%);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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%);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.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%);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.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%);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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: "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: 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"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XDateRangePortalComponent, isStandalone: true, selector: "x-date-range-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, extraFooter: { classPropertyName: "extraFooter", publicName: "extraFooter", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, activeType: { classPropertyName: "activeType", publicName: "activeType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", type: "typeChange", animating: "animating", nodeClick: "nodeClick", startNodeChanged: "startNodeChanged", endNodeChanged: "endNodeChanged" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DatePipe, LowerCasePipe], viewQueries: [{ propertyName: "startPicker", first: true, predicate: ["startPicker"], descendants: true, isSignal: true }, { propertyName: "endPicker", first: true, predicate: ["endPicker"], descendants: true, isSignal: true }, { propertyName: "timePickerFrame", first: true, predicate: ["timePickerFrame"], descendants: true, isSignal: 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          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          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          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          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          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          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          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          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          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          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\" text (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) {\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-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);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)}.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:first-child{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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:last-child{border-top-right-radius:var(--x-border-radius);border-bottom-right-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-top-right-radius:var(--x-border-radius);border-bottom-right-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-top-left-radius:var(--x-border-radius);border-bottom-left-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%);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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%);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.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%);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.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%);border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.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: "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: 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"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDateRangePortalComponent, decorators: [{
             type: Component,
@@ -2651,10 +2651,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
                 args: ['animate.leave']
             }], done: [{
                 type: HostListener,
-                args: ['animationend', ['$event']]
+                args: ['animationend']
             }], start: [{
                 type: HostListener,
-                args: ['animationstart', ['$event']]
+                args: ['animationstart']
             }], startPicker: [{ type: i0.ViewChild, args: ['startPicker', { isSignal: true }] }], endPicker: [{ type: i0.ViewChild, args: ['endPicker', { isSignal: true }] }], timePickerFrame: [{ type: i0.ViewChild, args: ['timePickerFrame', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }, { type: i0.Output, args: ["typeChange"] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], extraFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFooter", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], disabledTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTime", required: false }] }], activeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeType", required: false }] }], animating: [{ type: i0.Output, args: ["animating"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], startNodeChanged: [{ type: i0.Output, args: ["startNodeChanged"] }], endNodeChanged: [{ type: i0.Output, args: ["endNodeChanged"] }] } });
 
 class XDateRangeComponent extends XDateRangeProperty {