@luoxiao123/angular-material-date-time-range-picker 21.0.0 → 21.1.1

package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs

@@ -1,130 +1,27 @@
 import * as i0 from '@angular/core';
-import { inject, model, output, ChangeDetectionStrategy, Component, input, ChangeDetectorRef, signal, ElementRef, DestroyRef, effect, forwardRef, Input, ViewChild, Injectable } from '@angular/core';
+import { inject, model, output, ChangeDetectionStrategy, Component, input, computed, ChangeDetectorRef, signal, ViewChild, ElementRef, Injector, DestroyRef, effect, untracked, forwardRef, Input, Injectable } from '@angular/core';
 import { Subject, take, tap } from 'rxjs';
-import { NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/material/datepicker';
+import * as i1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatRangeDateSelectionModel, DateRange, MatCalendar, DefaultMatCalendarRangeStrategy } from '@angular/material/datepicker';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { TablerIconComponent, provideTablerIcons } from '@luoxiao123/angular-tabler-icons';
-import { IconClock, IconX, IconCalendarDue, IconInfoCircle } from '@luoxiao123/angular-tabler-icons/icons';
+import { IconLayoutSidebarLeftCollapse, IconClock, IconX, IconCalendarDue, IconInfoCircle } from '@luoxiao123/angular-tabler-icons/icons';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatTimepickerModule } from '@angular/material/timepicker';
-import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
-import * as i1 from '@angular/material/button';
+import * as i3$1 from '@angular/common';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$2 from '@angular/cdk/bidi';
+import * as i2$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import * as i1$1 from '@angular/cdk/bidi';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
-const _c0$1 = ["*"];
-function Container_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 6);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.headerTitle());
-} }
-function Container_Conditional_1_Conditional_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function Container_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵtemplate(1, Container_Conditional_1_Conditional_4_ng_container_1_Template, 1, 0, "ng-container", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerExtraContent() ?? null);
-} }
-function Container_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "header", 1)(1, "div", 4);
-    i0.ɵɵelement(2, "i-tabler", 5);
-    i0.ɵɵconditionalCreate(3, Container_Conditional_1_Conditional_3_Template, 2, 1, "h2", 6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, Container_Conditional_1_Conditional_4_Template, 2, 1, "div", 7);
-    i0.ɵɵelementStart(5, "button", 8);
-    i0.ɵɵlistener("click", function Container_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dismiss.emit()); });
-    i0.ɵɵelement(6, "i-tabler", 9);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.headerTitle() ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.headerExtraContent() ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", "\u5173\u95ED");
-} }
-function Container_Conditional_4_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function Container_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵtemplate(1, Container_Conditional_4_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerExtraContent() ?? null);
-} }
-function Container_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.dismiss.emit()); });
-    i0.ɵɵtext(1, " \u53D6\u6D88 ");
-    i0.ɵɵelementEnd();
-} }
-function Container_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 17);
-    i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.secondaryButton.emit()); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r1.disabledSecondaryButton());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.secondaryButtonTitle(), " ");
-} }
-function Container_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submit.emit()); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", ctx_r1.disabledSubmit());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.submitTitle(), " ");
-} }
-function Container_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "footer", 3);
-    i0.ɵɵconditionalCreate(1, Container_Conditional_4_Conditional_1_Template, 2, 1, "div", 11);
-    i0.ɵɵelementStart(2, "div", 12);
-    i0.ɵɵconditionalCreate(3, Container_Conditional_4_Conditional_3_Template, 2, 0, "button", 13);
-    i0.ɵɵconditionalCreate(4, Container_Conditional_4_Conditional_4_Template, 2, 2, "button", 14);
-    i0.ɵɵconditionalCreate(5, Container_Conditional_4_Conditional_5_Template, 2, 2, "button", 15);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.footerExtraContent() ? 1 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasDismiss() ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasSecondaryButton() ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasSubmit() ? 5 : -1);
-} }
 class Container {
     constructor() {
         this.#breakpoints = inject(BreakpointObserver);
@@ -152,51 +49,14 @@ class Container {
         this.secondaryButton = output();
     }
     #breakpoints;
-    static { this.ɵfac = function Container_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Container)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Container, selectors: [["date-time-picker-container"]], inputs: { hasHeader: [1, "hasHeader"], hasFooter: [1, "hasFooter"], headerTitle: [1, "headerTitle"], headerExtraContent: [1, "headerExtraContent"], footerExtraContent: [1, "footerExtraContent"], hasDismiss: [1, "hasDismiss"], hasSubmit: [1, "hasSubmit"], submitTitle: [1, "submitTitle"], submitBg: [1, "submitBg"], submitColor: [1, "submitColor"], submitTitleColor: [1, "submitTitleColor"], disabledSubmit: [1, "disabledSubmit"], hasSecondaryButton: [1, "hasSecondaryButton"], secondaryButtonTitle: [1, "secondaryButtonTitle"], secondaryButtonBg: [1, "secondaryButtonBg"], secondaryButtonColor: [1, "secondaryButtonColor"], secondaryButtonTitleColor: [1, "secondaryButtonTitleColor"], disabledSecondaryButton: [1, "disabledSecondaryButton"] }, outputs: { hasHeader: "hasHeaderChange", hasFooter: "hasFooterChange", headerTitle: "headerTitleChange", headerExtraContent: "headerExtraContentChange", footerExtraContent: "footerExtraContentChange", hasDismiss: "hasDismissChange", hasSubmit: "hasSubmitChange", submitTitle: "submitTitleChange", submitBg: "submitBgChange", submitColor: "submitColorChange", submitTitleColor: "submitTitleColorChange", disabledSubmit: "disabledSubmitChange", hasSecondaryButton: "hasSecondaryButtonChange", secondaryButtonTitle: "secondaryButtonTitleChange", secondaryButtonBg: "secondaryButtonBgChange", secondaryButtonColor: "secondaryButtonColorChange", secondaryButtonTitleColor: "secondaryButtonTitleColorChange", disabledSecondaryButton: "disabledSecondaryButtonChange", dismiss: "dismiss", submit: "submit", secondaryButton: "secondaryButton" }, features: [i0.ɵɵProvidersFeature([provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock })])], ngContentSelectors: _c0$1, decls: 5, vars: 2, consts: [[1, "container-wrapper"], [1, "container-header"], [1, "container-main"], [1, "container-footer"], [1, "container-header-start"], ["name", "clock", "strokeWidth", "2px", "size", "18px", 1, "container-header-icon"], [1, "container-header-title"], [1, "container-header-extra"], ["type", "button", "tabindex", "0", 1, "container-header-close", 3, "click"], ["name", "x", "strokeWidth", "2.5px", "size", "18px", 1, "container-header-close-icon"], [4, "ngTemplateOutlet"], [1, "container-footer-extra"], [1, "container-footer-actions"], ["mat-stroked-button", "", "color", "primary", "type", "button"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "disabled"], ["mat-raised-button", "", "color", "primary", "type", "button", 3, "disabled"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "click"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "click", "disabled"], ["mat-raised-button", "", "color", "primary", "type", "button", 3, "click", "disabled"]], template: function Container_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "aside", 0);
-            i0.ɵɵconditionalCreate(1, Container_Conditional_1_Template, 7, 3, "header", 1);
-            i0.ɵɵelementStart(2, "main", 2);
-            i0.ɵɵprojection(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, Container_Conditional_4_Template, 6, 4, "footer", 3);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasHeader() ? 1 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.hasFooter() ? 4 : -1);
-        } }, dependencies: [TablerIconComponent, NgTemplateOutlet, MatButtonModule, i1.MatButton], styles: ["@charset \"UTF-8\";[_nghost-%COMP%]{display:flex;height:100%}.container-wrapper[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header[_ngcontent-%COMP%]{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon[_ngcontent-%COMP%]{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title[_ngcontent-%COMP%]{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close[_ngcontent-%COMP%]{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close[_ngcontent-%COMP%]:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center}.container-main[_ngcontent-%COMP%]{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer[_ngcontent-%COMP%]{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions[_ngcontent-%COMP%]{display:flex;gap:8px;align-items:center;flex-shrink:0}", "[_nghost-%COMP%]{height:100%}"], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Container, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: Container, isStandalone: true, selector: "date-time-picker-container", inputs: { hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerExtraContent: { classPropertyName: "headerExtraContent", publicName: "headerExtraContent", isSignal: true, isRequired: false, transformFunction: null }, footerExtraContent: { classPropertyName: "footerExtraContent", publicName: "footerExtraContent", isSignal: true, isRequired: false, transformFunction: null }, hasDismiss: { classPropertyName: "hasDismiss", publicName: "hasDismiss", isSignal: true, isRequired: false, transformFunction: null }, hasSubmit: { classPropertyName: "hasSubmit", publicName: "hasSubmit", isSignal: true, isRequired: false, transformFunction: null }, submitTitle: { classPropertyName: "submitTitle", publicName: "submitTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBg: { classPropertyName: "submitBg", publicName: "submitBg", isSignal: true, isRequired: false, transformFunction: null }, submitColor: { classPropertyName: "submitColor", publicName: "submitColor", isSignal: true, isRequired: false, transformFunction: null }, submitTitleColor: { classPropertyName: "submitTitleColor", publicName: "submitTitleColor", isSignal: true, isRequired: false, transformFunction: null }, disabledSubmit: { classPropertyName: "disabledSubmit", publicName: "disabledSubmit", isSignal: true, isRequired: false, transformFunction: null }, hasSecondaryButton: { classPropertyName: "hasSecondaryButton", publicName: "hasSecondaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonTitle: { classPropertyName: "secondaryButtonTitle", publicName: "secondaryButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonBg: { classPropertyName: "secondaryButtonBg", publicName: "secondaryButtonBg", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonColor: { classPropertyName: "secondaryButtonColor", publicName: "secondaryButtonColor", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonTitleColor: { classPropertyName: "secondaryButtonTitleColor", publicName: "secondaryButtonTitleColor", isSignal: true, isRequired: false, transformFunction: null }, disabledSecondaryButton: { classPropertyName: "disabledSecondaryButton", publicName: "disabledSecondaryButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasHeader: "hasHeaderChange", hasFooter: "hasFooterChange", headerTitle: "headerTitleChange", headerExtraContent: "headerExtraContentChange", footerExtraContent: "footerExtraContentChange", hasDismiss: "hasDismissChange", hasSubmit: "hasSubmitChange", submitTitle: "submitTitleChange", submitBg: "submitBgChange", submitColor: "submitColorChange", submitTitleColor: "submitTitleColorChange", disabledSubmit: "disabledSubmitChange", hasSecondaryButton: "hasSecondaryButtonChange", secondaryButtonTitle: "secondaryButtonTitleChange", secondaryButtonBg: "secondaryButtonBgChange", secondaryButtonColor: "secondaryButtonColorChange", secondaryButtonTitleColor: "secondaryButtonTitleColorChange", disabledSecondaryButton: "disabledSecondaryButtonChange", dismiss: "dismiss", submit: "submit", secondaryButton: "secondaryButton" }, providers: [provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock, IconLayoutSidebarLeftCollapse })], ngImport: i0, template: "<aside class=\"container-wrapper\">\r\n  @if (hasHeader()) {\r\n    <header class=\"container-header\">\r\n      <div class=\"container-header-start\">\r\n        <i-tabler name=\"clock\" strokeWidth=\"2px\" size=\"18px\" class=\"container-header-icon\" />\r\n\r\n        @if (headerTitle()) {\r\n          <h2 class=\"container-header-title\">{{ headerTitle() }}</h2>\r\n        }\r\n      </div>\r\n\r\n      @if (headerExtraContent()) {\r\n        <div class=\"container-header-extra\">\r\n          <ng-container *ngTemplateOutlet=\"headerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <button (click)=\"dismiss.emit()\" type=\"button\" class=\"container-header-close\" [attr.aria-label]=\"'\u5173\u95ED'\" tabindex=\"0\">\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"container-header-close-icon\" />\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <main class=\"container-main\">\r\n    <ng-content />\r\n  </main>\r\n\r\n  @if (hasFooter()) {\r\n    <footer class=\"container-footer\">\r\n      @if (footerExtraContent()) {\r\n        <div class=\"container-footer-extra\">\r\n          <ng-container *ngTemplateOutlet=\"footerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"container-footer-actions\">\r\n        @if (hasDismiss()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"dismiss.emit()\" type=\"button\"> \u53D6\u6D88 </button>\r\n        }\r\n\r\n        @if (hasSecondaryButton()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"secondaryButton.emit()\" type=\"button\" [disabled]=\"disabledSecondaryButton()\">\r\n            {{ secondaryButtonTitle() }}\r\n          </button>\r\n        }\r\n\r\n        @if (hasSubmit()) {\r\n          <button mat-raised-button color=\"primary\" (click)=\"submit.emit()\" type=\"button\" [disabled]=\"disabledSubmit()\">\r\n            {{ submitTitle() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </footer>\r\n  }\r\n</aside>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;height:100%}.container-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon{display:flex;align-items:center;justify-content:center}.container-main{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}\n", ":host{height:100%}\n"], dependencies: [{ kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Container, [{
-        type: Component,
-        args: [{ selector: 'date-time-picker-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, NgTemplateOutlet, MatButtonModule], providers: [provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock })], template: "<aside class=\"container-wrapper\">\r\n  @if (hasHeader()) {\r\n    <header class=\"container-header\">\r\n      <div class=\"container-header-start\">\r\n        <i-tabler name=\"clock\" strokeWidth=\"2px\" size=\"18px\" class=\"container-header-icon\" />\r\n\r\n        @if (headerTitle()) {\r\n          <h2 class=\"container-header-title\">{{ headerTitle() }}</h2>\r\n        }\r\n      </div>\r\n\r\n      @if (headerExtraContent()) {\r\n        <div class=\"container-header-extra\">\r\n          <ng-container *ngTemplateOutlet=\"headerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <button (click)=\"dismiss.emit()\" type=\"button\" class=\"container-header-close\" [attr.aria-label]=\"'\u5173\u95ED'\" tabindex=\"0\">\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"container-header-close-icon\" />\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <main class=\"container-main\">\r\n    <ng-content />\r\n  </main>\r\n\r\n  @if (hasFooter()) {\r\n    <footer class=\"container-footer\">\r\n      @if (footerExtraContent()) {\r\n        <div class=\"container-footer-extra\">\r\n          <ng-container *ngTemplateOutlet=\"footerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"container-footer-actions\">\r\n        @if (hasDismiss()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"dismiss.emit()\" type=\"button\"> \u53D6\u6D88 </button>\r\n        }\r\n\r\n        @if (hasSecondaryButton()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"secondaryButton.emit()\" type=\"button\" [disabled]=\"disabledSecondaryButton()\">\r\n            {{ secondaryButtonTitle() }}\r\n          </button>\r\n        }\r\n\r\n        @if (hasSubmit()) {\r\n          <button mat-raised-button color=\"primary\" (click)=\"submit.emit()\" type=\"button\" [disabled]=\"disabledSubmit()\">\r\n            {{ submitTitle() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </footer>\r\n  }\r\n</aside>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;height:100%}.container-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon{display:flex;align-items:center;justify-content:center}.container-main{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}\n", ":host{height:100%}\n"] }]
-    }], null, { hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }, { type: i0.Output, args: ["hasHeaderChange"] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }, { type: i0.Output, args: ["hasFooterChange"] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }, { type: i0.Output, args: ["headerTitleChange"] }], headerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerExtraContent", required: false }] }, { type: i0.Output, args: ["headerExtraContentChange"] }], footerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerExtraContent", required: false }] }, { type: i0.Output, args: ["footerExtraContentChange"] }], hasDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDismiss", required: false }] }, { type: i0.Output, args: ["hasDismissChange"] }], hasSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubmit", required: false }] }, { type: i0.Output, args: ["hasSubmitChange"] }], submitTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitle", required: false }] }, { type: i0.Output, args: ["submitTitleChange"] }], submitBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBg", required: false }] }, { type: i0.Output, args: ["submitBgChange"] }], submitColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitColor", required: false }] }, { type: i0.Output, args: ["submitColorChange"] }], submitTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitleColor", required: false }] }, { type: i0.Output, args: ["submitTitleColorChange"] }], disabledSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSubmit", required: false }] }, { type: i0.Output, args: ["disabledSubmitChange"] }], hasSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSecondaryButton", required: false }] }, { type: i0.Output, args: ["hasSecondaryButtonChange"] }], secondaryButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitle", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleChange"] }], secondaryButtonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonBg", required: false }] }, { type: i0.Output, args: ["secondaryButtonBgChange"] }], secondaryButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonColorChange"] }], secondaryButtonTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitleColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleColorChange"] }], disabledSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSecondaryButton", required: false }] }, { type: i0.Output, args: ["disabledSecondaryButtonChange"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], submit: [{ type: i0.Output, args: ["submit"] }], secondaryButton: [{ type: i0.Output, args: ["secondaryButton"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Container, { className: "Container", filePath: "lib/date-picker/components/container/container.component.ts", lineNumber: 21 }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Container, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-picker-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, NgTemplateOutlet, MatButtonModule], providers: [provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock, IconLayoutSidebarLeftCollapse })], template: "<aside class=\"container-wrapper\">\r\n  @if (hasHeader()) {\r\n    <header class=\"container-header\">\r\n      <div class=\"container-header-start\">\r\n        <i-tabler name=\"clock\" strokeWidth=\"2px\" size=\"18px\" class=\"container-header-icon\" />\r\n\r\n        @if (headerTitle()) {\r\n          <h2 class=\"container-header-title\">{{ headerTitle() }}</h2>\r\n        }\r\n      </div>\r\n\r\n      @if (headerExtraContent()) {\r\n        <div class=\"container-header-extra\">\r\n          <ng-container *ngTemplateOutlet=\"headerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <button (click)=\"dismiss.emit()\" type=\"button\" class=\"container-header-close\" [attr.aria-label]=\"'\u5173\u95ED'\" tabindex=\"0\">\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"container-header-close-icon\" />\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <main class=\"container-main\">\r\n    <ng-content />\r\n  </main>\r\n\r\n  @if (hasFooter()) {\r\n    <footer class=\"container-footer\">\r\n      @if (footerExtraContent()) {\r\n        <div class=\"container-footer-extra\">\r\n          <ng-container *ngTemplateOutlet=\"footerExtraContent() ?? null\"></ng-container>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"container-footer-actions\">\r\n        @if (hasDismiss()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"dismiss.emit()\" type=\"button\"> \u53D6\u6D88 </button>\r\n        }\r\n\r\n        @if (hasSecondaryButton()) {\r\n          <button mat-stroked-button color=\"primary\" (click)=\"secondaryButton.emit()\" type=\"button\" [disabled]=\"disabledSecondaryButton()\">\r\n            {{ secondaryButtonTitle() }}\r\n          </button>\r\n        }\r\n\r\n        @if (hasSubmit()) {\r\n          <button mat-raised-button color=\"primary\" (click)=\"submit.emit()\" type=\"button\" [disabled]=\"disabledSubmit()\">\r\n            {{ submitTitle() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </footer>\r\n  }\r\n</aside>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;height:100%}.container-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon{display:flex;align-items:center;justify-content:center}.container-main{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}\n", ":host{height:100%}\n"] }]
+        }], propDecorators: { hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }, { type: i0.Output, args: ["hasHeaderChange"] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }, { type: i0.Output, args: ["hasFooterChange"] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }, { type: i0.Output, args: ["headerTitleChange"] }], headerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerExtraContent", required: false }] }, { type: i0.Output, args: ["headerExtraContentChange"] }], footerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerExtraContent", required: false }] }, { type: i0.Output, args: ["footerExtraContentChange"] }], hasDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDismiss", required: false }] }, { type: i0.Output, args: ["hasDismissChange"] }], hasSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubmit", required: false }] }, { type: i0.Output, args: ["hasSubmitChange"] }], submitTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitle", required: false }] }, { type: i0.Output, args: ["submitTitleChange"] }], submitBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBg", required: false }] }, { type: i0.Output, args: ["submitBgChange"] }], submitColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitColor", required: false }] }, { type: i0.Output, args: ["submitColorChange"] }], submitTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitleColor", required: false }] }, { type: i0.Output, args: ["submitTitleColorChange"] }], disabledSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSubmit", required: false }] }, { type: i0.Output, args: ["disabledSubmitChange"] }], hasSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSecondaryButton", required: false }] }, { type: i0.Output, args: ["hasSecondaryButtonChange"] }], secondaryButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitle", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleChange"] }], secondaryButtonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonBg", required: false }] }, { type: i0.Output, args: ["secondaryButtonBgChange"] }], secondaryButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonColorChange"] }], secondaryButtonTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitleColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleColorChange"] }], disabledSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSecondaryButton", required: false }] }, { type: i0.Output, args: ["disabledSecondaryButtonChange"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], submit: [{ type: i0.Output, args: ["submit"] }], secondaryButton: [{ type: i0.Output, args: ["secondaryButton"] }] } });
 
-function DateTimeInputComponent_For_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 12);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "number");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const hour_r3 = ctx.$implicit;
-    i0.ɵɵproperty("value", hour_r3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 2, hour_r3, "2.0-0"));
-} }
-function DateTimeInputComponent_For_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 12);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "number");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const minute_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", minute_r4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 2, minute_r4, "2.0-0"));
-} }
 class DateTimeInputComponent {
     constructor() {
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -209,9 +69,15 @@ class DateTimeInputComponent {
         this.hourChange = output();
         this.minuteChange = output();
         this.timeChange = output();
+        this.dateObj = computed(() => {
+            const val = this.dateValue();
+            return val ? new Date(val) : null;
+        }, ...(ngDevMode ? [{ debugName: "dateObj" }] : []));
     }
     onDateChange(value) {
-        this.dateChange.emit(value);
+        if (value) {
+            this.dateChange.emit(value.toISOString());
+        }
     }
     onHourChange(value) {
         this.hourChange.emit(value);
@@ -221,187 +87,37 @@ class DateTimeInputComponent {
         this.minuteChange.emit(value);
         this.timeChange.emit();
     }
-    static { this.ɵfac = function DateTimeInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateTimeInputComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateTimeInputComponent, selectors: [["date-time-input"]], inputs: { label: [1, "label"], dateValue: [1, "dateValue"], hourValue: [1, "hourValue"], minuteValue: [1, "minuteValue"], hours: [1, "hours"], minutes: [1, "minutes"] }, outputs: { dateChange: "dateChange", hourChange: "hourChange", minuteChange: "minuteChange", timeChange: "timeChange" }, decls: 24, vars: 9, consts: [["datePicker", ""], [1, "date-time-input-wrapper"], [1, "date-time-input-label"], [1, "date-time-input-container"], [1, "date-time-input-date"], ["type", "text", "matInput", "", "placeholder", "\u9009\u62E9\u65E5\u671F", 1, "date-time-input-field", 3, "ngModelChange", "click", "focus", "ngModel", "matDatepicker"], ["type", "button", "tabindex", "-1", "aria-hidden", "true", 1, "date-time-input-icon-btn"], ["name", "calendar-due", "strokeWidth", "2px", "size", "16px"], [1, "date-time-input-divider"], [1, "date-time-input-time"], [1, "date-time-input-select", "date-time-input-select-hour", 3, "ngModelChange", "ngModel"], ["disabled", "", 3, "value"], [3, "value"], [1, "date-time-input-separator"], [1, "date-time-input-select", "date-time-input-select-minute", 3, "ngModelChange", "ngModel"]], template: function DateTimeInputComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1)(1, "label", 2);
-            i0.ɵɵtext(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "input", 5);
-            i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); })("click", function DateTimeInputComponent_Template_input_click_5_listener() { i0.ɵɵrestoreView(_r1); const datePicker_r2 = i0.ɵɵreference(7); return i0.ɵɵresetView(datePicker_r2.open()); })("focus", function DateTimeInputComponent_Template_input_focus_5_listener() { i0.ɵɵrestoreView(_r1); const datePicker_r2 = i0.ɵɵreference(7); return i0.ɵɵresetView(datePicker_r2.open()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(6, "mat-datepicker", null, 0);
-            i0.ɵɵelementStart(8, "button", 6);
-            i0.ɵɵelement(9, "i-tabler", 7);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(10, "div", 8);
-            i0.ɵɵelementStart(11, "div", 9)(12, "select", 10);
-            i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onHourChange($event)); });
-            i0.ɵɵelementStart(13, "option", 11);
-            i0.ɵɵtext(14, "--");
-            i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(15, DateTimeInputComponent_For_16_Template, 3, 5, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "span", 13);
-            i0.ɵɵtext(18, ":");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "select", 14);
-            i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_select_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMinuteChange($event)); });
-            i0.ɵɵelementStart(20, "option", 11);
-            i0.ɵɵtext(21, "--");
-            i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(22, DateTimeInputComponent_For_23_Template, 3, 5, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementEnd()()()();
-        } if (rf & 2) {
-            const datePicker_r2 = i0.ɵɵreference(7);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.label());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngModel", ctx.dateValue())("matDatepicker", datePicker_r2);
-            i0.ɵɵadvance(7);
-            i0.ɵɵproperty("ngModel", ctx.hourValue());
-            i0.ɵɵattribute("aria-label", "\u5C0F\u65F6");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("value", null);
-            i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.hours());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngModel", ctx.minuteValue());
-            i0.ɵɵattribute("aria-label", "\u5206\u949F");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("value", null);
-            i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.minutes());
-        } }, dependencies: [MatDatepickerModule, i1$1.MatDatepicker, i1$1.MatDatepickerInput, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, TablerIconComponent, DecimalPipe], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%]   .date-time-input-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px;padding:12px 16px}[_nghost-%COMP%]   .date-time-input-label[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#0009}[_nghost-%COMP%]   .date-time-input-container[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid rgba(0,0,0,.12);border-radius:4px;overflow:hidden;background-color:#00000005;transition:border-color .2s ease;box-sizing:border-box}[_nghost-%COMP%]   .date-time-input-container[_ngcontent-%COMP%]:hover{border-color:#0000003d}[_nghost-%COMP%]   .date-time-input-container[_ngcontent-%COMP%]:focus-within{border-color:#1976d2;background-color:#fff}[_nghost-%COMP%]   .date-time-input-date[_ngcontent-%COMP%]{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}[_nghost-%COMP%]   .date-time-input-field[_ngcontent-%COMP%]{flex:1;height:36px;padding:0;border:none;background:transparent;color:#000000de;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   .date-time-input-field[_ngcontent-%COMP%]::placeholder{color:#0006}[_nghost-%COMP%]   .date-time-input-field[_ngcontent-%COMP%]:focus{outline:none}[_nghost-%COMP%]   .date-time-input-icon-btn[_ngcontent-%COMP%]{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#0009;pointer-events:none}[_nghost-%COMP%]   .date-time-input-divider[_ngcontent-%COMP%]{width:1px;height:20px;background-color:#0000001f}[_nghost-%COMP%]   .date-time-input-time[_ngcontent-%COMP%]{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}[_nghost-%COMP%]   .date-time-input-select[_ngcontent-%COMP%]{flex:1;height:36px;border:none;background:transparent;color:#000000de;font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}[_nghost-%COMP%]   .date-time-input-select[_ngcontent-%COMP%]:focus{outline:none}[_nghost-%COMP%]   .date-time-input-separator[_ngcontent-%COMP%]{color:#0009;font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}"], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DateTimeInputComponent, isStandalone: true, selector: "date-time-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dateValue: { classPropertyName: "dateValue", publicName: "dateValue", isSignal: true, isRequired: false, transformFunction: null }, hourValue: { classPropertyName: "hourValue", publicName: "hourValue", isSignal: true, isRequired: false, transformFunction: null }, minuteValue: { classPropertyName: "minuteValue", publicName: "minuteValue", isSignal: true, isRequired: false, transformFunction: null }, hours: { classPropertyName: "hours", publicName: "hours", isSignal: true, isRequired: false, transformFunction: null }, minutes: { classPropertyName: "minutes", publicName: "minutes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", hourChange: "hourChange", minuteChange: "minuteChange", timeChange: "timeChange" }, ngImport: i0, template: "<div class=\"date-time-input-wrapper\">\r\n  <label class=\"date-time-input-label\">{{ label() }}</label>\r\n\r\n  <div class=\"date-time-input-container\">\r\n    <!-- \u65E5\u671F\u90E8\u5206 -->\r\n    <div class=\"date-time-input-date\">\r\n      <input\r\n        type=\"text\"\r\n        matInput\r\n        [ngModel]=\"dateObj()\"\r\n        (ngModelChange)=\"onDateChange($event)\"\r\n        [matDatepicker]=\"datePicker\"\r\n        (click)=\"datePicker.open()\"\r\n        (focus)=\"datePicker.open()\"\r\n        placeholder=\"\u9009\u62E9\u65E5\u671F\"\r\n        class=\"date-time-input-field\"\r\n      />\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <button type=\"button\" class=\"date-time-input-icon-btn\" tabindex=\"-1\" aria-hidden=\"true\">\r\n        <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"16px\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u5206\u9694\u7B26 -->\r\n    <div class=\"date-time-input-divider\"></div>\r\n\r\n    <!-- \u65F6\u95F4\u90E8\u5206 -->\r\n    <div class=\"date-time-input-time\">\r\n      <!-- \u5C0F\u65F6 -->\r\n      <select class=\"date-time-input-select date-time-input-select-hour\" [ngModel]=\"hourValue()\" (ngModelChange)=\"onHourChange($event)\" [attr.aria-label]=\"'\u5C0F\u65F6'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (hour of hours(); track hour) {\r\n          <option [ngValue]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n\r\n      <!-- \u5206\u9694\u7B26 -->\r\n      <span class=\"date-time-input-separator\">:</span>\r\n\r\n      <!-- \u5206\u949F -->\r\n      <select class=\"date-time-input-select date-time-input-select-minute\" [ngModel]=\"minuteValue()\" (ngModelChange)=\"onMinuteChange($event)\" [attr.aria-label]=\"'\u5206\u949F'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (minute of minutes(); track minute) {\r\n          <option [ngValue]=\"minute\">{{ minute | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-time-input-wrapper{display:flex;flex-direction:column;gap:8px;padding:12px 16px}@media(max-width:767px){:host .date-time-input-wrapper{padding-bottom:0}}:host .date-time-input-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}:host .date-time-input-container{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;overflow:hidden;background-color:var(--mat-sys-surface-container-low, rgba(0, 0, 0, .02));transition:border-color .2s ease;box-sizing:border-box}:host .date-time-input-container:hover{border-color:var(--mat-divider-color, rgba(0, 0, 0, .24))}:host .date-time-input-container:focus-within{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-surface, #fff)}:host .date-time-input-date{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}:host .date-time-input-field{flex:1;height:36px;padding:0;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}:host .date-time-input-field::placeholder{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}:host .date-time-input-field:focus{outline:none}:host .date-time-input-icon-btn{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));pointer-events:none}:host .date-time-input-divider{width:1px;height:20px;background-color:var(--mat-divider-color, rgba(0, 0, 0, .12))}:host .date-time-input-time{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}:host .date-time-input-select{flex:1;height:36px;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}:host .date-time-input-select:focus{outline:none}:host .date-time-input-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimeInputComponent, [{
-        type: Component,
-        args: [{ selector: 'date-time-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule, FormsModule, TablerIconComponent, DecimalPipe], template: "<div class=\"date-time-input-wrapper\">\r\n  <label class=\"date-time-input-label\">{{ label() }}</label>\r\n\r\n  <div class=\"date-time-input-container\">\r\n    <!-- \u65E5\u671F\u90E8\u5206 -->\r\n    <div class=\"date-time-input-date\">\r\n      <input\r\n        type=\"text\"\r\n        matInput\r\n        [ngModel]=\"dateValue()\"\r\n        (ngModelChange)=\"onDateChange($event)\"\r\n        [matDatepicker]=\"datePicker\"\r\n        (click)=\"datePicker.open()\"\r\n        (focus)=\"datePicker.open()\"\r\n        placeholder=\"\u9009\u62E9\u65E5\u671F\"\r\n        class=\"date-time-input-field\"\r\n      />\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <button type=\"button\" class=\"date-time-input-icon-btn\" tabindex=\"-1\" aria-hidden=\"true\">\r\n        <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"16px\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u5206\u9694\u7B26 -->\r\n    <div class=\"date-time-input-divider\"></div>\r\n\r\n    <!-- \u65F6\u95F4\u90E8\u5206 -->\r\n    <div class=\"date-time-input-time\">\r\n      <!-- \u5C0F\u65F6 -->\r\n      <select class=\"date-time-input-select date-time-input-select-hour\" [ngModel]=\"hourValue()\" (ngModelChange)=\"onHourChange($event)\" [attr.aria-label]=\"'\u5C0F\u65F6'\">\r\n        <option [value]=\"null\" disabled>--</option>\r\n        @for (hour of hours(); track hour) {\r\n          <option [value]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n\r\n      <!-- \u5206\u9694\u7B26 -->\r\n      <span class=\"date-time-input-separator\">:</span>\r\n\r\n      <!-- \u5206\u949F -->\r\n      <select class=\"date-time-input-select date-time-input-select-minute\" [ngModel]=\"minuteValue()\" (ngModelChange)=\"onMinuteChange($event)\" [attr.aria-label]=\"'\u5206\u949F'\">\r\n        <option [value]=\"null\" disabled>--</option>\r\n        @for (minute of minutes(); track minute) {\r\n          <option [value]=\"minute\">{{ minute | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-time-input-wrapper{display:flex;flex-direction:column;gap:8px;padding:12px 16px}:host .date-time-input-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#0009}:host .date-time-input-container{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid rgba(0,0,0,.12);border-radius:4px;overflow:hidden;background-color:#00000005;transition:border-color .2s ease;box-sizing:border-box}:host .date-time-input-container:hover{border-color:#0000003d}:host .date-time-input-container:focus-within{border-color:#1976d2;background-color:#fff}:host .date-time-input-date{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}:host .date-time-input-field{flex:1;height:36px;padding:0;border:none;background:transparent;color:#000000de;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}:host .date-time-input-field::placeholder{color:#0006}:host .date-time-input-field:focus{outline:none}:host .date-time-input-icon-btn{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#0009;pointer-events:none}:host .date-time-input-divider{width:1px;height:20px;background-color:#0000001f}:host .date-time-input-time{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}:host .date-time-input-select{flex:1;height:36px;border:none;background:transparent;color:#000000de;font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}:host .date-time-input-select:focus{outline:none}:host .date-time-input-separator{color:#0009;font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}\n"] }]
-    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }], hourValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourValue", required: false }] }], minuteValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteValue", required: false }] }], hours: [{ type: i0.Input, args: [{ isSignal: true, alias: "hours", required: false }] }], minutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutes", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], hourChange: [{ type: i0.Output, args: ["hourChange"] }], minuteChange: [{ type: i0.Output, args: ["minuteChange"] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateTimeInputComponent, { className: "DateTimeInputComponent", filePath: "lib/date-picker/components/date-time-input/date-time-input.component.ts", lineNumber: 15 }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule, FormsModule, TablerIconComponent, CommonModule], template: "<div class=\"date-time-input-wrapper\">\r\n  <label class=\"date-time-input-label\">{{ label() }}</label>\r\n\r\n  <div class=\"date-time-input-container\">\r\n    <!-- \u65E5\u671F\u90E8\u5206 -->\r\n    <div class=\"date-time-input-date\">\r\n      <input\r\n        type=\"text\"\r\n        matInput\r\n        [ngModel]=\"dateObj()\"\r\n        (ngModelChange)=\"onDateChange($event)\"\r\n        [matDatepicker]=\"datePicker\"\r\n        (click)=\"datePicker.open()\"\r\n        (focus)=\"datePicker.open()\"\r\n        placeholder=\"\u9009\u62E9\u65E5\u671F\"\r\n        class=\"date-time-input-field\"\r\n      />\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <button type=\"button\" class=\"date-time-input-icon-btn\" tabindex=\"-1\" aria-hidden=\"true\">\r\n        <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"16px\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u5206\u9694\u7B26 -->\r\n    <div class=\"date-time-input-divider\"></div>\r\n\r\n    <!-- \u65F6\u95F4\u90E8\u5206 -->\r\n    <div class=\"date-time-input-time\">\r\n      <!-- \u5C0F\u65F6 -->\r\n      <select class=\"date-time-input-select date-time-input-select-hour\" [ngModel]=\"hourValue()\" (ngModelChange)=\"onHourChange($event)\" [attr.aria-label]=\"'\u5C0F\u65F6'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (hour of hours(); track hour) {\r\n          <option [ngValue]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n\r\n      <!-- \u5206\u9694\u7B26 -->\r\n      <span class=\"date-time-input-separator\">:</span>\r\n\r\n      <!-- \u5206\u949F -->\r\n      <select class=\"date-time-input-select date-time-input-select-minute\" [ngModel]=\"minuteValue()\" (ngModelChange)=\"onMinuteChange($event)\" [attr.aria-label]=\"'\u5206\u949F'\">\r\n        <option [ngValue]=\"null\" disabled>--</option>\r\n        @for (minute of minutes(); track minute) {\r\n          <option [ngValue]=\"minute\">{{ minute | number: '2.0-0' }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-time-input-wrapper{display:flex;flex-direction:column;gap:8px;padding:12px 16px}@media(max-width:767px){:host .date-time-input-wrapper{padding-bottom:0}}:host .date-time-input-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}:host .date-time-input-container{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;overflow:hidden;background-color:var(--mat-sys-surface-container-low, rgba(0, 0, 0, .02));transition:border-color .2s ease;box-sizing:border-box}:host .date-time-input-container:hover{border-color:var(--mat-divider-color, rgba(0, 0, 0, .24))}:host .date-time-input-container:focus-within{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-surface, #fff)}:host .date-time-input-date{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}:host .date-time-input-field{flex:1;height:36px;padding:0;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}:host .date-time-input-field::placeholder{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}:host .date-time-input-field:focus{outline:none}:host .date-time-input-icon-btn{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));pointer-events:none}:host .date-time-input-divider{width:1px;height:20px;background-color:var(--mat-divider-color, rgba(0, 0, 0, .12))}:host .date-time-input-time{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}:host .date-time-input-select{flex:1;height:36px;border:none;background:transparent;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}:host .date-time-input-select:focus{outline:none}:host .date-time-input-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }], hourValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourValue", required: false }] }], minuteValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteValue", required: false }] }], hours: [{ type: i0.Input, args: [{ isSignal: true, alias: "hours", required: false }] }], minutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutes", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], hourChange: [{ type: i0.Output, args: ["hourChange"] }], minuteChange: [{ type: i0.Output, args: ["minuteChange"] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
 
-const _forTrack0 = ($index, $item) => $item.value;
-function DateSelector_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 7)(1, "button", 21);
-    i0.ɵɵlistener("click", function DateSelector_For_8_Template_button_click_1_listener() { const timeRangeItem_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectTimeRange(timeRangeItem_r3)); });
-    i0.ɵɵelementStart(2, "span", 22);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    let tmp_11_0;
-    const timeRangeItem_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("selected", ctx_r3.selectedTimeRange() && ((tmp_11_0 = ctx_r3.selectedTimeRange()) == null ? null : tmp_11_0.start) === timeRangeItem_r3.start && ((tmp_11_0 = ctx_r3.selectedTimeRange()) == null ? null : tmp_11_0.end) === timeRangeItem_r3.end);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(timeRangeItem_r3.label);
-} }
-function DateSelector_Conditional_22_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function DateSelector_Conditional_22_Conditional_5_For_2_Template_button_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; return i0.ɵɵresetView(day_r7.selected = !day_r7.selected); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const day_r7 = ctx.$implicit;
-    i0.ɵɵclassProp("selected", day_r7.selected);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", day_r7.label, " ");
-} }
-function DateSelector_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, DateSelector_Conditional_22_Conditional_5_For_2_Template, 2, 3, "button", 27, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r3.weekdays());
-} }
-function DateSelector_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 23)(2, "mat-checkbox", 24);
-    i0.ɵɵtwoWayListener("ngModelChange", function DateSelector_Conditional_22_Template_mat_checkbox_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.allDays, $event) || (ctx_r3.allDays = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(3, "span", 25);
-    i0.ɵɵtext(4, "\u6240\u6709\u5929");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, DateSelector_Conditional_22_Conditional_5_Template, 3, 0, "div", 26);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 23)(7, "mat-checkbox", 24);
-    i0.ɵɵtwoWayListener("ngModelChange", function DateSelector_Conditional_22_Template_mat_checkbox_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.allHours, $event) || (ctx_r3.allHours = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(8, "span", 25);
-    i0.ɵɵtext(9, "\u6240\u6709\u5C0F\u65F6");
-    i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.allDays);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(!ctx_r3.allDays() ? 5 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.allHours);
-} }
-function DateSelector_ng_template_23_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "date");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r3.selectedDateRange.start, ctx_r3.dateFormat));
-} }
-function DateSelector_ng_template_23_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
-    i0.ɵɵtext(1, "-");
-    i0.ɵɵelementEnd();
-} }
-function DateSelector_ng_template_23_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "date");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r3.selectedDateRange.end, ctx_r3.dateFormat));
-} }
-function DateSelector_ng_template_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵconditionalCreate(1, DateSelector_ng_template_23_Conditional_3_Conditional_1_Template, 3, 4, "span", 32);
-    i0.ɵɵconditionalCreate(2, DateSelector_ng_template_23_Conditional_3_Conditional_2_Template, 2, 0, "span", 33);
-    i0.ɵɵconditionalCreate(3, DateSelector_ng_template_23_Conditional_3_Conditional_3_Template, 3, 4, "span", 32);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.selectedDateRange.start ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.selectedDateRange.start && ctx_r3.selectedDateRange.end ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.selectedDateRange.end ? 3 : -1);
-} }
-function DateSelector_ng_template_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "span", 30);
-    i0.ɵɵtext(2, "\u8303\u56F4\uFF1A");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DateSelector_ng_template_23_Conditional_3_Template, 4, 3, "div", 31);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r3.selectedDateRange ? 3 : -1);
-} }
 class DateSelector {
+    #cdr;
+    #dialogRef;
+    #data;
+    #selectionModel;
+    #breakpoints;
+    formatDate(date) {
+        const datePart = this._dateAdapter.format(date, this._dateFormats.display.dateInput);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${datePart} ${hours}:${minutes}`;
+    }
     constructor() {
         this.#cdr = inject(ChangeDetectorRef);
         this.#dialogRef = inject((MatDialogRef));
         this.#data = inject(MAT_DIALOG_DATA);
         this.#selectionModel = inject((MatRangeDateSelectionModel));
+        this.#breakpoints = inject(BreakpointObserver);
+        this._dateAdapter = inject(DateAdapter);
+        this._dateFormats = inject(MAT_DATE_FORMATS);
+        this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
         this.data = this.#data;
-        // 从 data 中获取格式，如果没有则使用默认值
-        this.dateFormat = this.data?.dateFormat ?? 'yyyy年M月d日 HH:mm';
-        this.valueFormat = this.data?.valueFormat ?? 'yyyy-MM-dd HH:mm:ss';
+        this.valueFormat = this.data?.valueFormat ?? 'yyyy-MM-dd HH:mm';
         this.startDate = model('', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
         this.endDate = model('', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
         this.startHour = model(null, ...(ngDevMode ? [{ debugName: "startHour" }] : []));
@@ -409,7 +125,18 @@ class DateSelector {
         this.endHour = model(null, ...(ngDevMode ? [{ debugName: "endHour" }] : []));
         this.endMinute = model(null, ...(ngDevMode ? [{ debugName: "endMinute" }] : []));
         this.future = model(false, ...(ngDevMode ? [{ debugName: "future" }] : []));
-        this.optionalFeatures = model(true, ...(ngDevMode ? [{ debugName: "optionalFeatures" }] : []));
+        this.displayStart = computed(() => {
+            const startStr = this.startDate();
+            if (!startStr)
+                return '';
+            return this.formatDate(new Date(startStr));
+        }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
+        this.displayEnd = computed(() => {
+            const endStr = this.endDate();
+            if (!endStr)
+                return '';
+            return this.formatDate(new Date(endStr));
+        }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
         this.relativeDurations = [
             ['最近5分钟', '-5minutes'],
             ['最近15分钟', '-15minutes'],
@@ -464,48 +191,33 @@ class DateSelector {
             }))
         ], ...(ngDevMode ? [{ debugName: "timeRanges" }] : []));
         this.selectedTimeRange = model(undefined, ...(ngDevMode ? [{ debugName: "selectedTimeRange" }] : []));
-        this.allDays = model(true, ...(ngDevMode ? [{ debugName: "allDays" }] : []));
-        this.weekdays = model([
-            { label: '六', data: 'Saturday', value: 0, selected: false },
-            { label: '日', data: 'Sunday', value: 1, selected: false },
-            { label: '一', data: 'Monday', value: 2, selected: false },
-            { label: '二', data: 'Tuesday', value: 3, selected: false },
-            { label: '三', data: 'Wednesday', value: 4, selected: false },
-            { label: '四', data: 'Thursday', value: 5, selected: false },
-            { label: '五', data: 'Friday', value: 6, selected: false }
-        ], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
-        this.allHours = model(true, ...(ngDevMode ? [{ debugName: "allHours" }] : []));
-        this.hourTypes = signal([
-            { label: '全部', value: 0, selected: false },
-            { label: '忙碌时间', value: 1, selected: false },
-            { label: '自定义', value: 2, selected: true }
-        ], ...(ngDevMode ? [{ debugName: "hourTypes" }] : []));
         this.selectedDateRange = null;
         this.now = new Date();
         this.selectingStart = true;
+        this.#breakpoints
+            .observe([Breakpoints.Handset, Breakpoints.Tablet])
+            .pipe(takeUntilDestroyed())
+            .subscribe(result => {
+            this.isMobile.set(result.matches);
+        });
     }
-    #cdr;
-    #dialogRef;
-    #data;
-    #selectionModel;
     ngOnInit() {
         if (this.data) {
-            this.optionalFeatures.set(this.data.optionalFeatures);
             this.future.set(this.data.future);
             const picker = this.data.dateTimePicker;
             if (picker) {
                 if (picker.start && picker.end) {
-                    this.selectedDateRange = {
-                        start: new Date(picker.start),
-                        end: new Date(picker.end)
-                    };
+                    const start = new Date(picker.start);
+                    const end = new Date(picker.end);
+                    this.selectedDateRange = new DateRange(start, end);
+                    this.#selectionModel.updateSelection(this.selectedDateRange, this);
                     // 初始化时间值
-                    const startDate = new Date(picker.start);
-                    const endDate = new Date(picker.end);
-                    this.startHour.set(startDate.getHours());
-                    this.startMinute.set(startDate.getMinutes());
-                    this.endHour.set(endDate.getHours());
-                    this.endMinute.set(endDate.getMinutes());
+                    this.startDate.set(picker.start);
+                    this.endDate.set(picker.end);
+                    this.startHour.set(start.getHours());
+                    this.startMinute.set(start.getMinutes());
+                    this.endHour.set(end.getHours());
+                    this.endMinute.set(end.getMinutes());
                 }
             }
             if (this.future()) {
@@ -642,16 +354,19 @@ class DateSelector {
     rangeChanged(selectedDate) {
         if (!selectedDate)
             return;
+        // 创建一个新日期对象，保留日期部分，但使用当前时间作为时间部分
+        const now = new Date();
+        const dateWithCurrentTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
         if (this.selectingStart) {
-            this.startDate.set(selectedDate.toISOString());
+            this.startDate.set(dateWithCurrentTime.toISOString());
             this.endDate.set('');
-            this.startHour.set(selectedDate.getHours());
-            this.startMinute.set(selectedDate.getMinutes());
+            this.startHour.set(dateWithCurrentTime.getHours());
+            this.startMinute.set(dateWithCurrentTime.getMinutes());
             this.endHour.set(null);
             this.endMinute.set(null);
             this.selectedTimeRange.set(undefined);
-            this.selectedDateRange = null;
-            this.#selectionModel.updateSelection(new DateRange(selectedDate, null), this);
+            this.selectedDateRange = new DateRange(dateWithCurrentTime, null);
+            this.#selectionModel.updateSelection(this.selectedDateRange, this);
             this.selectingStart = false;
         }
         else {
@@ -660,7 +375,7 @@ class DateSelector {
                 return;
             const range = start.toDateString() === selectedDate.toDateString()
                 ? new DateRange(start, start)
-                : new DateRange(start < selectedDate ? start : selectedDate, start < selectedDate ? selectedDate : start);
+                : new DateRange(start < dateWithCurrentTime ? start : dateWithCurrentTime, start < dateWithCurrentTime ? dateWithCurrentTime : start);
             this.updateSelection(range.start, range.end);
             this.selectingStart = true;
         }
@@ -719,142 +434,68 @@ class DateSelector {
             this.endDate.set(endDate.toISOString());
         }
     }
-    static { this.ɵfac = function DateSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateSelector)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateSelector, selectors: [["date-time-picker-selector"]], inputs: { startDate: [1, "startDate"], endDate: [1, "endDate"], startHour: [1, "startHour"], startMinute: [1, "startMinute"], endHour: [1, "endHour"], endMinute: [1, "endMinute"], future: [1, "future"], optionalFeatures: [1, "optionalFeatures"], selectedTimeRange: [1, "selectedTimeRange"], allDays: [1, "allDays"], weekdays: [1, "weekdays"], allHours: [1, "allHours"] }, outputs: { startDate: "startDateChange", endDate: "endDateChange", startHour: "startHourChange", startMinute: "startMinuteChange", endHour: "endHourChange", endMinute: "endMinuteChange", future: "futureChange", optionalFeatures: "optionalFeaturesChange", selectedTimeRange: "selectedTimeRangeChange", allDays: "allDaysChange", weekdays: "weekdaysChange", allHours: "allHoursChange" }, features: [i0.ɵɵProvidersFeature([provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel])], decls: 25, vars: 15, consts: [["footerExtraContent", ""], ["headerTitle", "\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668", "submitTitle", "\u5E94\u7528", 3, "submit", "dismiss", "disabledSubmit", "footerExtraContent"], ["dir", "rtl", 1, "date-selector-sidebar"], ["dir", "ltr", 1, "date-selector-sidebar-inner"], [1, "date-selector-sidebar-header"], [1, "date-selector-sidebar-title"], [1, "date-selector-sidebar-list"], [1, "date-selector-sidebar-item"], [1, "date-selector-main"], [1, "date-selector-content"], [1, "date-selector-calendar-section"], [1, "date-selector-calendar-wrapper"], [1, "date-selector-calendar", 3, "selectedChange", "maxDate", "selected"], [1, "date-selector-hint"], ["name", "info-circle", "strokeWidth", "2px", 1, "date-selector-hint-icon"], [1, "date-selector-hint-text"], [1, "date-selector-time-section"], [1, "date-selector-inputs"], ["label", "\u5F00\u59CB\u65E5\u671F", 3, "dateChange", "timeChange", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], ["label", "\u7ED3\u675F\u65E5\u671F", 3, "dateChange", "timeChange", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], [1, "date-selector-options"], ["type", "button", 1, "date-selector-sidebar-btn", 3, "click"], [1, "date-selector-sidebar-text"], [1, "date-selector-option-group"], [1, "date-selector-option-checkbox", 3, "ngModelChange", "ngModel"], [1, "date-selector-option-label"], [1, "date-selector-weekdays"], ["type", "button", 1, "date-selector-weekday-btn", 3, "selected"], ["type", "button", 1, "date-selector-weekday-btn", 3, "click"], [1, "date-selector-footer-range"], [1, "date-selector-footer-label"], [1, "date-selector-footer-value"], [1, "date-selector-footer-date"], [1, "date-selector-footer-separator"]], template: function DateSelector_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "date-time-picker-container", 1);
-            i0.ɵɵlistener("submit", function DateSelector_Template_date_time_picker_container_submit_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.submit()); })("dismiss", function DateSelector_Template_date_time_picker_container_dismiss_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.dismiss()); });
-            i0.ɵɵelementStart(1, "aside", 2)(2, "div", 3)(3, "div", 4)(4, "span", 5);
-            i0.ɵɵtext(5, "\u5FEB\u6377\u9009\u62E9");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "ul", 6);
-            i0.ɵɵrepeaterCreate(7, DateSelector_For_8_Template, 4, 3, "li", 7, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "section", 10)(12, "div", 11)(13, "mat-calendar", 12);
-            i0.ɵɵtwoWayListener("selectedChange", function DateSelector_Template_mat_calendar_selectedChange_13_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedDateRange, $event) || (ctx.selectedDateRange = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("selectedChange", function DateSelector_Template_mat_calendar_selectedChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.rangeChanged($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "div", 13);
-            i0.ɵɵelement(15, "i-tabler", 14);
-            i0.ɵɵelementStart(16, "span", 15);
-            i0.ɵɵtext(17, "\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(18, "section", 16)(19, "div", 17)(20, "date-time-input", 18);
-            i0.ɵɵlistener("dateChange", function DateSelector_Template_date_time_input_dateChange_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeDatePart("start", $event)); })("timeChange", function DateSelector_Template_date_time_input_timeChange_20_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateStartTime()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "date-time-input", 19);
-            i0.ɵɵlistener("dateChange", function DateSelector_Template_date_time_input_dateChange_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeDatePart("end", $event)); })("timeChange", function DateSelector_Template_date_time_input_timeChange_21_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateEndTime()); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(22, DateSelector_Conditional_22_Template, 10, 3, "div", 20);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(23, DateSelector_ng_template_23_Template, 4, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        } if (rf & 2) {
-            const footerExtraContent_r8 = i0.ɵɵreference(24);
-            i0.ɵɵproperty("disabledSubmit", !ctx.selectedDateRange)("footerExtraContent", footerExtraContent_r8);
-            i0.ɵɵadvance(7);
-            i0.ɵɵrepeater(ctx.timeRanges());
-            i0.ɵɵadvance(6);
-            i0.ɵɵproperty("maxDate", !ctx.future() ? ctx.now : undefined);
-            i0.ɵɵtwoWayProperty("selected", ctx.selectedDateRange);
-            i0.ɵɵadvance(7);
-            i0.ɵɵproperty("dateValue", ctx.startDate())("hourValue", ctx.startHour())("minuteValue", ctx.startMinute())("hours", ctx.getHours())("minutes", ctx.getMinutes());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("dateValue", ctx.endDate())("hourValue", ctx.endHour())("minuteValue", ctx.endMinute())("hours", ctx.getHours())("minutes", ctx.getMinutes());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.optionalFeatures() ? 22 : -1);
-        } }, dependencies: [MatCalendar,
-            TablerIconComponent,
-            MatDatepickerModule, i1$2.Dir, MatNativeDateModule,
-            ReactiveFormsModule, i2.NgControlStatus, FormsModule, i2.NgModel, MatCheckbox,
-            MatTimepickerModule,
-            Container,
-            DateTimeInputComponent,
-            DatePipe], styles: ["@charset \"UTF-8\";[_nghost-%COMP%]{display:block;height:100%}.date-selector-sidebar[_ngcontent-%COMP%]{width:12rem;height:100%;display:none;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}@media(min-width:1024px){.date-selector-sidebar[_ngcontent-%COMP%]{display:flex}}.date-selector-sidebar-inner[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header[_ngcontent-%COMP%]{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1}.date-selector-sidebar-title[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list[_ngcontent-%COMP%]{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item[_ngcontent-%COMP%]{margin:0;padding:0}.date-selector-sidebar-btn[_ngcontent-%COMP%]{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn[_ngcontent-%COMP%]:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected[_ngcontent-%COMP%]{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text[_ngcontent-%COMP%]{display:block}.date-selector-main[_ngcontent-%COMP%]{flex:1;width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(min-width:1024px){.date-selector-main[_ngcontent-%COMP%]{width:calc(100% - 12rem)}}.date-selector-content[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content[_ngcontent-%COMP%]{flex-direction:row}}.date-selector-calendar-section[_ngcontent-%COMP%]{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section[_ngcontent-%COMP%]{width:50%}}@media(max-width:767px){.date-selector-calendar-section[_ngcontent-%COMP%]{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}}.date-selector-calendar-wrapper[_ngcontent-%COMP%]{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar[_ngcontent-%COMP%]{width:100%}.date-selector-hint[_ngcontent-%COMP%]{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon[_ngcontent-%COMP%]{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text[_ngcontent-%COMP%]{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-time-section[_ngcontent-%COMP%]{width:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}@media(min-width:768px){.date-selector-time-section[_ngcontent-%COMP%]{width:50%}}.date-selector-inputs[_ngcontent-%COMP%]{display:flex;flex-direction:column;padding:0}.date-selector-options[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:0;padding:12px 16px;border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface-container, #fafafa)}.date-selector-option-group[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px}.date-selector-option-label[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));margin-left:4px}.date-selector-weekdays[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}.date-selector-weekday-btn[_ngcontent-%COMP%]{padding:8px 4px;background-color:var(--mat-sys-surface, #fff);border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:500;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:center;white-space:nowrap;transition:all .2s ease}.date-selector-weekday-btn[_ngcontent-%COMP%]:hover{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08))}.date-selector-weekday-btn.selected[_ngcontent-%COMP%]{background-color:var(--mat-sys-primary, #1976d2);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary, white);font-weight:600}.date-selector-weekday-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.date-selector-footer-range[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label[_ngcontent-%COMP%]{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label[_ngcontent-%COMP%]{display:block}}.date-selector-footer-value[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value[_ngcontent-%COMP%]{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date[_ngcontent-%COMP%]{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator[_ngcontent-%COMP%]{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator[_ngcontent-%COMP%]{display:block}}", "[_nghost-%COMP%]{display:block;height:100%}"], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DateSelector, isStandalone: true, selector: "date-time-picker-selector", inputs: { startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, startMinute: { classPropertyName: "startMinute", publicName: "startMinute", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, endMinute: { classPropertyName: "endMinute", publicName: "endMinute", isSignal: true, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, selectedTimeRange: { classPropertyName: "selectedTimeRange", publicName: "selectedTimeRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", startHour: "startHourChange", startMinute: "startMinuteChange", endHour: "endHourChange", endMinute: "endMinuteChange", future: "futureChange", selectedTimeRange: "selectedTimeRangeChange" }, providers: [
+            DefaultMatCalendarRangeStrategy,
+            MatRangeDateSelectionModel
+        ], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav\r\n      #sidenav\r\n      [mode]=\"isMobile() ? 'over' : 'side'\"\r\n      [opened]=\"!isMobile()\"\r\n      class=\"date-selector-sidebar\"\r\n      dir=\"rtl\"\r\n    >\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges(); track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n\r\n      </section>\r\n    </div>\r\n  </div>\r\n  </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i1$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Container, selector: "date-time-picker-container", inputs: ["hasHeader", "hasFooter", "headerTitle", "headerExtraContent", "footerExtraContent", "hasDismiss", "hasSubmit", "submitTitle", "submitBg", "submitColor", "submitTitleColor", "disabledSubmit", "hasSecondaryButton", "secondaryButtonTitle", "secondaryButtonBg", "secondaryButtonColor", "secondaryButtonTitleColor", "disabledSecondaryButton"], outputs: ["hasHeaderChange", "hasFooterChange", "headerTitleChange", "headerExtraContentChange", "footerExtraContentChange", "hasDismissChange", "hasSubmitChange", "submitTitleChange", "submitBgChange", "submitColorChange", "submitTitleColorChange", "disabledSubmitChange", "hasSecondaryButtonChange", "secondaryButtonTitleChange", "secondaryButtonBgChange", "secondaryButtonColorChange", "secondaryButtonTitleColorChange", "disabledSecondaryButtonChange", "dismiss", "submit", "secondaryButton"] }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input", inputs: ["label", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], outputs: ["dateChange", "hourChange", "minuteChange", "timeChange"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateSelector, [{
-        type: Component,
-        args: [{ selector: 'date-time-picker-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], imports: [
-                    MatCalendar,
-                    TablerIconComponent,
-                    MatDatepickerModule,
-                    MatNativeDateModule,
-                    ReactiveFormsModule,
-                    FormsModule,
-                    MatCheckbox,
-                    DatePipe,
-                    MatTimepickerModule,
-                    Container,
-                    DateTimeInputComponent
-                ], template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n  <aside class=\"date-selector-sidebar\" dir=\"rtl\">\r\n    <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n      <div class=\"date-selector-sidebar-header\">\r\n        <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n      </div>\r\n      <ul class=\"date-selector-sidebar-list\">\r\n        @for (timeRangeItem of timeRanges(); track timeRangeItem) {\r\n          <li class=\"date-selector-sidebar-item\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"selectTimeRange(timeRangeItem)\"\r\n              [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n              class=\"date-selector-sidebar-btn\"\r\n            >\r\n              <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  </aside>\r\n  <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n  <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n  <div class=\"date-selector-main\">\r\n    <div class=\"date-selector-content\">\r\n      <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n      <section class=\"date-selector-calendar-section\">\r\n        <div class=\"date-selector-calendar-wrapper\">\r\n          <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n\r\n          <div class=\"date-selector-hint\">\r\n            <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n            <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n      <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n      <section class=\"date-selector-time-section\">\r\n        <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n        <div class=\"date-selector-inputs\">\r\n          <!-- \u4ECE\u65E5\u671F -->\r\n          <date-time-input\r\n            label=\"\u5F00\u59CB\u65E5\u671F\"\r\n            [dateValue]=\"startDate()\"\r\n            [hourValue]=\"startHour()\"\r\n            [minuteValue]=\"startMinute()\"\r\n            [hours]=\"getHours()\"\r\n            [minutes]=\"getMinutes()\"\r\n            (dateChange)=\"changeDatePart('start', $event)\"\r\n            (timeChange)=\"updateStartTime()\"\r\n          />\r\n\r\n          <!-- \u7ED3\u675F\u65E5\u671F -->\r\n          <date-time-input\r\n            label=\"\u7ED3\u675F\u65E5\u671F\"\r\n            [dateValue]=\"endDate()\"\r\n            [hourValue]=\"endHour()\"\r\n            [minuteValue]=\"endMinute()\"\r\n            [hours]=\"getHours()\"\r\n            [minutes]=\"getMinutes()\"\r\n            (dateChange)=\"changeDatePart('end', $event)\"\r\n            (timeChange)=\"updateEndTime()\"\r\n          />\r\n        </div>\r\n\r\n        @if (optionalFeatures()) {\r\n          <!-- \u81EA\u5B9A\u4E49\u9009\u9879 -->\r\n          <div class=\"date-selector-options\">\r\n            <!-- \u81EA\u5B9A\u4E49\u5929\u6570 -->\r\n            <div class=\"date-selector-option-group\">\r\n              <mat-checkbox [(ngModel)]=\"allDays\" class=\"date-selector-option-checkbox\">\r\n                <span class=\"date-selector-option-label\">\u6240\u6709\u5929</span>\r\n              </mat-checkbox>\r\n\r\n              @if (!allDays()) {\r\n                <div class=\"date-selector-weekdays\">\r\n                  @for (day of weekdays(); track day.value) {\r\n                    <button type=\"button\" (click)=\"day.selected = !day.selected\" [class.selected]=\"day.selected\" class=\"date-selector-weekday-btn\">\r\n                      {{ day.label }}\r\n                    </button>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- \u81EA\u5B9A\u4E49\u5C0F\u65F6 -->\r\n            <div class=\"date-selector-option-group\">\r\n              <mat-checkbox [(ngModel)]=\"allHours\" class=\"date-selector-option-checkbox\">\r\n                <span class=\"date-selector-option-label\">\u6240\u6709\u5C0F\u65F6</span>\r\n              </mat-checkbox>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n  </div>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (selectedDateRange) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (selectedDateRange.start) {\r\n          <span class=\"date-selector-footer-date\">{{ selectedDateRange.start | date: dateFormat }}</span>\r\n        }\r\n\r\n        @if (selectedDateRange.start && selectedDateRange.end) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (selectedDateRange.end) {\r\n          <span class=\"date-selector-footer-date\">{{ selectedDateRange.end | date: dateFormat }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;display:none;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}@media(min-width:1024px){.date-selector-sidebar{display:flex}}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{flex:1;width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(min-width:1024px){.date-selector-main{width:calc(100% - 12rem)}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-time-section{width:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-options{display:flex;flex-direction:column;gap:0;padding:12px 16px;border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface-container, #fafafa)}.date-selector-option-group{display:flex;flex-direction:column;gap:8px}.date-selector-option-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));margin-left:4px}.date-selector-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}.date-selector-weekday-btn{padding:8px 4px;background-color:var(--mat-sys-surface, #fff);border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:500;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:center;white-space:nowrap;transition:all .2s ease}.date-selector-weekday-btn:hover{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08))}.date-selector-weekday-btn.selected{background-color:var(--mat-sys-primary, #1976d2);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary, white);font-weight:600}.date-selector-weekday-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}\n", ":host{display:block;height:100%}\n"] }]
-    }], null, { startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }, { type: i0.Output, args: ["startHourChange"] }], startMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "startMinute", required: false }] }, { type: i0.Output, args: ["startMinuteChange"] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }, { type: i0.Output, args: ["endHourChange"] }], endMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMinute", required: false }] }, { type: i0.Output, args: ["endMinuteChange"] }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }, { type: i0.Output, args: ["futureChange"] }], optionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalFeatures", required: false }] }, { type: i0.Output, args: ["optionalFeaturesChange"] }], selectedTimeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTimeRange", required: false }] }, { type: i0.Output, args: ["selectedTimeRangeChange"] }], allDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDays", required: false }] }, { type: i0.Output, args: ["allDaysChange"] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }, { type: i0.Output, args: ["weekdaysChange"] }], allHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "allHours", required: false }] }, { type: i0.Output, args: ["allHoursChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateSelector, { className: "DateSelector", filePath: "lib/date-picker/date-selector/date-selector.component.ts", lineNumber: 41 }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-picker-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        DefaultMatCalendarRangeStrategy,
+                        MatRangeDateSelectionModel
+                    ], imports: [
+                        MatCalendar,
+                        TablerIconComponent,
+                        MatDatepickerModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        Container,
+                        DateTimeInputComponent,
+                        MatSidenavModule,
+                        MatButtonModule
+                    ], template: "<date-time-picker-container\r\n  headerTitle=\"\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\"\r\n  submitTitle=\"\u5E94\u7528\"\r\n  [disabledSubmit]=\"!selectedDateRange\"\r\n  [footerExtraContent]=\"footerExtraContent\"\r\n  (submit)=\"submit()\"\r\n  (dismiss)=\"dismiss()\"\r\n>\r\n  <mat-sidenav-container class=\"date-selector-sidenav-container\">\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F -->\r\n    <mat-sidenav\r\n      #sidenav\r\n      [mode]=\"isMobile() ? 'over' : 'side'\"\r\n      [opened]=\"!isMobile()\"\r\n      class=\"date-selector-sidebar\"\r\n      dir=\"rtl\"\r\n    >\r\n      <div class=\"date-selector-sidebar-inner\" dir=\"ltr\">\r\n        <div class=\"date-selector-sidebar-header\">\r\n          <span class=\"date-selector-sidebar-title\">\u5FEB\u6377\u9009\u62E9</span>\r\n          @if (isMobile()) {\r\n            <button mat-icon-button (click)=\"sidenav.close()\">\r\n              <i-tabler name=\"layout-sidebar-left-collapse\" />\r\n            </button>\r\n          }\r\n        </div>\r\n        <ul class=\"date-selector-sidebar-list\">\r\n          @for (timeRangeItem of timeRanges(); track timeRangeItem) {\r\n            <li class=\"date-selector-sidebar-item\">\r\n              <button\r\n                type=\"button\"\r\n                (click)=\"selectTimeRange(timeRangeItem); isMobile() && sidenav.close()\"\r\n                [class.selected]=\"selectedTimeRange() && selectedTimeRange()?.start === timeRangeItem.start && selectedTimeRange()?.end === timeRangeItem.end\"\r\n                class=\"date-selector-sidebar-btn\"\r\n              >\r\n                <span class=\"date-selector-sidebar-text\">{{ timeRangeItem.label }}</span>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    </mat-sidenav>\r\n    <!-- \u5DE6\u4FA7\u5FEB\u6377\u9009\u62E9\u9762\u677F\u7ED3\u675F -->\r\n\r\n    <mat-sidenav-content>\r\n      @if (isMobile()) {\r\n        <div class=\"date-selector-mobile-toolbar\">\r\n          <button mat-button (click)=\"sidenav.open()\">\r\n            <span>\u5FEB\u6377\u9009\u62E9</span>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- \u4E3B\u8981\u5185\u5BB9\u533A\u57DF -->\r\n      <div class=\"date-selector-main\">\r\n        <div class=\"date-selector-content\">\r\n          <!-- \u65E5\u5386\u5BB9\u5668 -->\r\n          <section class=\"date-selector-calendar-section\">\r\n            <div class=\"date-selector-calendar-wrapper\">\r\n              <mat-calendar [maxDate]=\"!future() ? now : undefined\" [(selected)]=\"selectedDateRange\" (selectedChange)=\"rangeChanged($event)\" class=\"date-selector-calendar\" />\r\n            </div>\r\n          </section>\r\n          <!-- \u65E5\u5386\u5BB9\u5668\u7ED3\u675F -->\r\n\r\n          <!-- \u65F6\u95F4\u8BBE\u7F6E\u5BB9\u5668 -->\r\n          <section class=\"date-selector-time-section\">\r\n            <!-- \u5F00\u59CB\u548C\u7ED3\u675F\u8F93\u5165\u65E5\u671F -->\r\n            <div class=\"date-selector-inputs\">\r\n              <!-- \u4ECE\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u5F00\u59CB\u65E5\u671F\"\r\n                [dateValue]=\"startDate()\"\r\n                [hourValue]=\"startHour()\"\r\n                (hourChange)=\"startHour.set($event)\"\r\n                [minuteValue]=\"startMinute()\"\r\n                (minuteChange)=\"startMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('start', $event)\"\r\n                (timeChange)=\"updateStartTime()\"\r\n              />\r\n\r\n              <!-- \u7ED3\u675F\u65E5\u671F -->\r\n              <date-time-input\r\n                label=\"\u7ED3\u675F\u65E5\u671F\"\r\n                [dateValue]=\"endDate()\"\r\n                [hourValue]=\"endHour()\"\r\n                (hourChange)=\"endHour.set($event)\"\r\n                [minuteValue]=\"endMinute()\"\r\n                (minuteChange)=\"endMinute.set($event)\"\r\n                [hours]=\"getHours()\"\r\n                [minutes]=\"getMinutes()\"\r\n                (dateChange)=\"changeDatePart('end', $event)\"\r\n                (timeChange)=\"updateEndTime()\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"date-selector-hint-wrapper\">\r\n              <div class=\"date-selector-hint\">\r\n                <i-tabler name=\"info-circle\" strokeWidth=\"2px\" class=\"date-selector-hint-icon\"></i-tabler>\r\n                <span class=\"date-selector-hint-text\">\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002</span>\r\n              </div>\r\n            </div>\r\n\r\n      </section>\r\n    </div>\r\n  </div>\r\n  </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</date-time-picker-container>\r\n\r\n<ng-template #footerExtraContent>\r\n  <div class=\"date-selector-footer-range\">\r\n    <span class=\"date-selector-footer-label\">\u8303\u56F4\uFF1A</span>\r\n\r\n    @if (startDate()) {\r\n      <div class=\"date-selector-footer-value\">\r\n        @if (startDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayStart() }}</span>\r\n        }\r\n\r\n        @if (startDate() && endDate()) {\r\n          <span class=\"date-selector-footer-separator\">-</span>\r\n        }\r\n\r\n        @if (endDate()) {\r\n          <span class=\"date-selector-footer-date\">{{ displayEnd() }}</span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.date-selector-sidebar{width:12rem;height:100%;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}.date-selector-sidebar-inner{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center}.date-selector-sidebar-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item{margin:0;padding:0}.date-selector-sidebar-btn{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text{display:block}.date-selector-main{width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(max-width:767px){.date-selector-main{height:auto;flex:1}}.date-selector-content{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content{flex-direction:row}}.date-selector-calendar-section{width:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section{width:50%}}@media(max-width:767px){.date-selector-calendar-section{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));padding-top:0;padding-bottom:0}}.date-selector-calendar-wrapper{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar{width:100%}.date-selector-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-hint-wrapper{padding:12px 16px}.date-selector-time-section{width:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-time-section{width:50%}}.date-selector-inputs{display:flex;flex-direction:column;padding:0}.date-selector-footer-range{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label{display:block}}.date-selector-footer-value{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator{display:block}}.date-selector-sidenav-container{width:100%;height:100%;background-color:transparent}.date-selector-mobile-toolbar{padding:8px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;align-items:center}\n", ":host{display:block;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: ['sidenav']
+            }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }, { type: i0.Output, args: ["startHourChange"] }], startMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "startMinute", required: false }] }, { type: i0.Output, args: ["startMinuteChange"] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }, { type: i0.Output, args: ["endHourChange"] }], endMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMinute", required: false }] }, { type: i0.Output, args: ["endMinuteChange"] }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }, { type: i0.Output, args: ["futureChange"] }], selectedTimeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTimeRange", required: false }] }, { type: i0.Output, args: ["selectedTimeRangeChange"] }] } });
 
-const _c0 = ["dateRangeButton"];
-function DatePickerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 7);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "date");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 8);
-    i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "date");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    let tmp_2_0;
-    let tmp_3_0;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 2, (tmp_2_0 = ctx_r1.selectedDateRange()) == null ? null : tmp_2_0.start, ctx_r1.dateFormat), " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 5, (tmp_3_0 = ctx_r1.selectedDateRange()) == null ? null : tmp_3_0.end, ctx_r1.dateFormat), " ");
-} }
-function DatePickerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 3);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.placeholder);
-} }
-function DatePickerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 2);
-} }
-function DatePickerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function DatePickerComponent_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); })("keydown.enter", function DatePickerComponent_Conditional_7_Template_button_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); })("keydown.space", function DatePickerComponent_Conditional_7_Template_button_keydown_space_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i-tabler", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵattribute("aria-label", "\u6E05\u9664\u65E5\u671F\u9009\u62E9")("role", "button");
-} }
 class DatePickerComponent {
     #breakpoints;
     #dialog;
     #focusMonitor;
     #elementRef;
     #matFormField;
+    #injector;
     // 内部值存储：{start: string, end: string} 或 null/undefined
     #internalValue;
     #errorStateSignal;
     #shouldLabelFloatSignal;
     #focusedSignal;
     #id;
+    formatDate(date) {
+        const datePart = this._dateAdapter.format(date, this._dateFormats.display.dateInput);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${datePart} ${hours}:${minutes}`;
+    }
     constructor() {
         this.#breakpoints = inject(BreakpointObserver);
         this.#dialog = inject(MatDialog);
         this.#focusMonitor = inject(FocusMonitor);
         this.#elementRef = inject(ElementRef);
         this.#matFormField = inject(MatFormField, { optional: true });
+        this.#injector = inject(Injector);
+        this._dateAdapter = inject(DateAdapter);
+        this._dateFormats = inject(MAT_DATE_FORMATS);
         this.destroyRef = inject(DestroyRef);
         this.ngControl = null;
         this.required = false;
-        this.disabled = false;
-        this.dateFormat = 'yyyy年M月d日 HH:mm';
-        this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+        this._formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+        this.valueFormat = 'yyyy-MM-dd HH:mm';
         this.placeholder = '';
-        this.optionalFeatures = input(true, ...(ngDevMode ? [{ debugName: "optionalFeatures" }] : []));
         this.future = input(false, ...(ngDevMode ? [{ debugName: "future" }] : []));
         this.selectedDateRange = model(...(ngDevMode ? [undefined, { debugName: "selectedDateRange" }] : []));
         this.toggle = signal(false, ...(ngDevMode ? [{ debugName: "toggle" }] : []));
@@ -867,6 +508,18 @@ class DatePickerComponent {
         this.#shouldLabelFloatSignal = signal(false, ...(ngDevMode ? [{ debugName: "#shouldLabelFloatSignal" }] : []));
         this.#focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "#focusedSignal" }] : []));
         this.#id = signal(`date-time-picker-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "#id" }] : []));
+        this.displayStart = computed(() => {
+            const range = this.selectedDateRange();
+            if (!range?.start)
+                return '';
+            return this.formatDate(range.start);
+        }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
+        this.displayEnd = computed(() => {
+            const range = this.selectedDateRange();
+            if (!range?.end)
+                return '';
+            return this.formatDate(range.end);
+        }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
         this.ref = effect(() => {
             const dateRange = this.selectedDateRange();
             // 触发 MatFormField 更新
@@ -892,15 +545,17 @@ class DatePickerComponent {
                 this.onTouched?.();
             }
         });
+        effect(() => {
+            this.disabledInput();
+            untracked(() => this.stateChanges.next());
+        });
     }
     openDateDialogSelector() {
         const isMobile = this.#breakpoints.isMatched([Breakpoints.Handset, Breakpoints.Tablet]);
         const currentValue = this.#internalValue();
         const data = {
-            optionalFeatures: this.optionalFeatures(),
             dateTimePicker: currentValue ?? undefined,
             future: this.future(),
-            dateFormat: this.dateFormat,
             valueFormat: this.valueFormat
         };
         const dialogRef = this.#dialog.open(DateSelector, {
@@ -910,7 +565,8 @@ class DatePickerComponent {
             maxHeight: '100vh',
             data,
             disableClose: false,
-            panelClass: 'date-time-picker-dialog'
+            panelClass: 'date-time-picker-dialog',
+            injector: this.#injector
         });
         dialogRef
             .afterOpened()
@@ -968,7 +624,11 @@ class DatePickerComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        // 可以根据需要在这里处理禁用状态
+        this._formDisabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this.disabledInput() || this._formDisabled();
     }
     // MatFormFieldControl 实现
     get empty() {
@@ -1010,71 +670,55 @@ class DatePickerComponent {
             this.dateRangeButton?.nativeElement.focus();
         }
     }
-    static { this.ɵfac = function DatePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatePickerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatePickerComponent, selectors: [["date-time-picker"]], viewQuery: function DatePickerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dateRangeButton = _t.first);
-        } }, inputs: { required: "required", disabled: "disabled", dateFormat: "dateFormat", valueFormat: "valueFormat", dateTimePicker: "dateTimePicker", placeholder: "placeholder", optionalFeatures: [1, "optionalFeatures"], future: [1, "future"], selectedDateRange: [1, "selectedDateRange"] }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, features: [i0.ɵɵProvidersFeature([
-                provideTablerIcons({ IconCalendarDue, IconX }),
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(() => DatePickerComponent),
-                    multi: true
-                },
-                {
-                    provide: MatFormFieldControl,
-                    useExisting: forwardRef(() => DatePickerComponent)
-                }
-            ])], decls: 8, vars: 6, consts: [["dateRangeButton", ""], ["tabindex", "0", 1, "date-range-container", 3, "click", "keydown.enter", "keydown.space"], [1, "date-range-content"], [1, "date-range-placeholder"], [1, "date-range-actions"], ["name", "calendar-due", "strokeWidth", "2px", "size", "18px", 1, "date-range-icon"], ["type", "button", "tabindex", "0", 1, "date-range-clear-btn"], [1, "date-range-primary"], [1, "date-range-secondary"], ["type", "button", "tabindex", "0", 1, "date-range-clear-btn", 3, "click", "keydown.enter", "keydown.space"], ["name", "x", "strokeWidth", "2.5px", "size", "18px", 1, "date-range-icon"]], template: function DatePickerComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1, 0);
-            i0.ɵɵlistener("click", function DatePickerComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); })("keydown.enter", function DatePickerComponent_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); })("keydown.space", function DatePickerComponent_Template_div_keydown_space_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); });
-            i0.ɵɵconditionalCreate(2, DatePickerComponent_Conditional_2_Template, 7, 8, "div", 2)(3, DatePickerComponent_Conditional_3_Template, 2, 1, "span", 3)(4, DatePickerComponent_Conditional_4_Template, 1, 0, "div", 2);
-            i0.ɵɵelementStart(5, "div", 4);
-            i0.ɵɵelement(6, "i-tabler", 5);
-            i0.ɵɵconditionalCreate(7, DatePickerComponent_Conditional_7_Template, 2, 2, "button", 6);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵattribute("id", ctx.id)("aria-label", "\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4")("aria-disabled", ctx.disabled)("role", "button");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.selectedDateRange() ? 2 : ctx.placeholder ? 3 : 4);
-            i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.selectedDateRange() ? 7 : -1);
-        } }, dependencies: [TablerIconComponent, MatDatepickerModule, MatDialogModule, DatePipe], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:hover{border-color:#0000003d}[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}[_nghost-%COMP%]   .date-range-container[aria-disabled=true][_ngcontent-%COMP%]{cursor:not-allowed;opacity:.6;pointer-events:none}[_nghost-%COMP%]   .date-range-content[_ngcontent-%COMP%]{flex:1;min-width:0}[_nghost-%COMP%]   .date-range-primary[_ngcontent-%COMP%]{font-size:.875rem;font-weight:500;line-height:1.5;color:#000000de;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[_nghost-%COMP%]   .date-range-secondary[_ngcontent-%COMP%]{font-size:.75rem;line-height:1.5;color:#0009;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[_nghost-%COMP%]   .date-range-text[_ngcontent-%COMP%], [_nghost-%COMP%]   .date-range-text-muted[_ngcontent-%COMP%]{display:block}[_nghost-%COMP%]   .date-range-placeholder[_ngcontent-%COMP%]{flex:1;font-size:.875rem;color:#0006}[_nghost-%COMP%]   .date-range-actions[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px;flex-shrink:0}[_nghost-%COMP%]   .date-range-icon[_ngcontent-%COMP%]{color:#0009;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   .date-range-clear-btn[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:#0009}[_nghost-%COMP%]   .date-range-clear-btn[_ngcontent-%COMP%]:hover{background-color:#00000014}[_nghost-%COMP%]   .date-range-clear-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid #1976d2;outline-offset:2px}.mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]{border:none;border-radius:0;padding:0;box-shadow:none}.mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:transparent;box-shadow:none}.mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%], .mat-mdc-form-field   [_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%], [hide-default-styles][_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}.mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field   [_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field[_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:focus-within, .mat-mdc-form-field   [_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:focus-within, [hide-default-styles][_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:hover, [hide-default-styles][_nghost-%COMP%]   .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:transparent!important;box-shadow:none!important}"], changeDetection: 0 }); }
+    clear(event) {
+        event?.stopPropagation();
+        this.selectedDateRange.set(undefined);
+        this.#internalValue.set(null);
+        this.onChange?.(null);
+        this.onTouched?.();
+        this.selectionChange.emit(undefined);
+        this.stateChanges.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DatePickerComponent, isStandalone: true, selector: "date-time-picker", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: false, isRequired: false, transformFunction: null }, dateTimePicker: { classPropertyName: "dateTimePicker", publicName: "dateTimePicker", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, selectedDateRange: { classPropertyName: "selectedDateRange", publicName: "selectedDateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, providers: [
+            provideTablerIcons({ IconCalendarDue, IconX }),
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true
+            },
+            {
+                provide: MatFormFieldControl,
+                useExisting: forwardRef(() => DatePickerComponent)
+            }
+        ], viewQueries: [{ propertyName: "dateRangeButton", first: true, predicate: ["dateRangeButton"], descendants: true }], ngImport: i0, template: "<div\r\n  #dateRangeButton\r\n  [attr.id]=\"id\"\r\n  [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n  [attr.aria-disabled]=\"disabled\"\r\n  (click)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n  [tabindex]=\"disabled ? -1 : 0\"\r\n  [attr.role]=\"'button'\"\r\n  class=\"date-range-container\"\r\n>\r\n  @if (selectedDateRange()) {\r\n    <div class=\"date-range-content\">\r\n      <span class=\"date-range-value\">{{ displayStart() }}</span>\r\n      <span class=\"date-range-separator\"> ~ </span>\r\n      <span class=\"date-range-value\">{{ displayEnd() }}</span>\r\n    </div>\r\n  } @else if (placeholder) {\r\n    <span class=\"date-range-placeholder\">{{ placeholder }}</span>\r\n  } @else {\r\n    <div class=\"date-range-content\"></div>\r\n  }\r\n\r\n  <div class=\"date-range-actions\">\r\n    @if (selectedDateRange() && !disabled) {\r\n      <button\r\n        (click)=\"clear($event)\"\r\n        type=\"button\"\r\n        class=\"date-range-clear-btn\"\r\n        [attr.aria-label]=\"'\u6E05\u9664\u65E5\u671F\u9009\u62E9'\"\r\n        [tabindex]=\"disabled ? -1 : 0\"\r\n        [disabled]=\"disabled\"\r\n        (keydown.enter)=\"clear($event)\"\r\n        (keydown.space)=\"clear($event)\"\r\n        [attr.role]=\"'button'\"\r\n      >\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"date-range-icon\" />\r\n      </button>\r\n    }\r\n\r\n    <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"18px\" class=\"date-range-icon\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-range-container{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}:host .date-range-container:hover{border-color:var(--mat-divider-color, rgba(0, 0, 0, .24))}:host .date-range-container:focus-within{border-color:var(--mat-sys-primary, #1976d2);box-shadow:0 0 0 3px var(--mat-sys-primary-container, rgba(25, 118, 210, .1))}:host .date-range-container[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}:host .date-range-content{flex:1;min-width:0;display:flex;align-items:center;height:24px}:host .date-range-value{font-size:.875rem;line-height:24px;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}:host .date-range-separator{margin:0 4px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:24px}:host .date-range-text,:host .date-range-text-muted{display:block}:host .date-range-placeholder{flex:1;font-size:.875rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}:host .date-range-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}:host .date-range-icon{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:flex;align-items:center;justify-content:center}:host .date-range-clear-btn{display:none;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}:host .date-range-clear-btn:hover{background-color:var(--mat-sys-surface-variant, rgba(0, 0, 0, .08))}:host .date-range-clear-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}:host .date-range-container:hover .date-range-clear-btn{display:flex}:host(.mat-mdc-form-field) .date-range-container{border:none;border-radius:0;padding:0;box-shadow:none}:host(.mat-mdc-form-field) .date-range-container:hover,:host(.mat-mdc-form-field) .date-range-container:focus-within{border-color:transparent;box-shadow:none}:host-context(.mat-mdc-form-field) .date-range-container,:host([hide-default-styles]) .date-range-container{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important;background-color:var(--mat-sys-surface, rgba(0, 0, 0, 0))}:host-context(.mat-mdc-form-field) .date-range-container:hover,:host-context(.mat-mdc-form-field) .date-range-container:focus-within,:host([hide-default-styles]) .date-range-container:hover,:host([hide-default-styles]) .date-range-container:focus-within{border-color:transparent!important;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatePickerComponent, [{
-        type: Component,
-        args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, DatePipe, MatDialogModule], providers: [
-                    provideTablerIcons({ IconCalendarDue, IconX }),
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => DatePickerComponent),
-                        multi: true
-                    },
-                    {
-                        provide: MatFormFieldControl,
-                        useExisting: forwardRef(() => DatePickerComponent)
-                    }
-                ], template: "<div\r\n  #dateRangeButton\r\n  [attr.id]=\"id\"\r\n  [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n  [attr.aria-disabled]=\"disabled\"\r\n  (click)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n  tabindex=\"0\"\r\n  [attr.role]=\"'button'\"\r\n  class=\"date-range-container\"\r\n>\r\n  @if (selectedDateRange()) {\r\n    <div class=\"date-range-content\">\r\n      <div class=\"date-range-primary\">\r\n        {{ selectedDateRange()?.start | date: dateFormat }}\r\n      </div>\r\n      <div class=\"date-range-secondary\">\r\n        {{ selectedDateRange()?.end | date: dateFormat }}\r\n      </div>\r\n    </div>\r\n  } @else if (placeholder) {\r\n    <span class=\"date-range-placeholder\">{{ placeholder }}</span>\r\n  } @else {\r\n    <div class=\"date-range-content\"></div>\r\n  }\r\n\r\n  <div class=\"date-range-actions\">\r\n    <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"18px\" class=\"date-range-icon\" />\r\n\r\n    @if (selectedDateRange()) {\r\n      <button\r\n        (click)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        type=\"button\"\r\n        class=\"date-range-clear-btn\"\r\n        [attr.aria-label]=\"'\u6E05\u9664\u65E5\u671F\u9009\u62E9'\"\r\n        tabindex=\"0\"\r\n        (keydown.enter)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        (keydown.space)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        [attr.role]=\"'button'\"\r\n      >\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"date-range-icon\" />\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-range-container{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}:host .date-range-container:hover{border-color:#0000003d}:host .date-range-container:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}:host .date-range-container[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}:host .date-range-content{flex:1;min-width:0}:host .date-range-primary{font-size:.875rem;font-weight:500;line-height:1.5;color:#000000de;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-secondary{font-size:.75rem;line-height:1.5;color:#0009;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-text,:host .date-range-text-muted{display:block}:host .date-range-placeholder{flex:1;font-size:.875rem;color:#0006}:host .date-range-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}:host .date-range-icon{color:#0009;display:flex;align-items:center;justify-content:center}:host .date-range-clear-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:#0009}:host .date-range-clear-btn:hover{background-color:#00000014}:host .date-range-clear-btn:focus-visible{outline:2px solid #1976d2;outline-offset:2px}:host(.mat-mdc-form-field) .date-range-container{border:none;border-radius:0;padding:0;box-shadow:none}:host(.mat-mdc-form-field) .date-range-container:hover,:host(.mat-mdc-form-field) .date-range-container:focus-within{border-color:transparent;box-shadow:none}:host-context(.mat-mdc-form-field) .date-range-container,:host([hide-default-styles]) .date-range-container{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}:host-context(.mat-mdc-form-field) .date-range-container:hover,:host-context(.mat-mdc-form-field) .date-range-container:focus-within,:host([hide-default-styles]) .date-range-container:hover,:host([hide-default-styles]) .date-range-container:focus-within{border-color:transparent!important;box-shadow:none!important}\n"] }]
-    }], () => [], { dateRangeButton: [{
-            type: ViewChild,
-            args: ['dateRangeButton']
-        }], required: [{
-            type: Input
-        }], disabled: [{
-            type: Input
-        }], dateFormat: [{
-            type: Input
-        }], valueFormat: [{
-            type: Input
-        }], dateTimePicker: [{
-            type: Input
-        }], placeholder: [{
-            type: Input
-        }], optionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalFeatures", required: false }] }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }], selectedDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDateRange", required: false }] }, { type: i0.Output, args: ["selectedDateRangeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatePickerComponent, { className: "DatePickerComponent", filePath: "lib/date-picker/date-picker.component.ts", lineNumber: 37 }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, MatDialogModule], providers: [
+                        provideTablerIcons({ IconCalendarDue, IconX }),
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true
+                        },
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: forwardRef(() => DatePickerComponent)
+                        }
+                    ], template: "<div\r\n  #dateRangeButton\r\n  [attr.id]=\"id\"\r\n  [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n  [attr.aria-disabled]=\"disabled\"\r\n  (click)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n  [tabindex]=\"disabled ? -1 : 0\"\r\n  [attr.role]=\"'button'\"\r\n  class=\"date-range-container\"\r\n>\r\n  @if (selectedDateRange()) {\r\n    <div class=\"date-range-content\">\r\n      <span class=\"date-range-value\">{{ displayStart() }}</span>\r\n      <span class=\"date-range-separator\"> ~ </span>\r\n      <span class=\"date-range-value\">{{ displayEnd() }}</span>\r\n    </div>\r\n  } @else if (placeholder) {\r\n    <span class=\"date-range-placeholder\">{{ placeholder }}</span>\r\n  } @else {\r\n    <div class=\"date-range-content\"></div>\r\n  }\r\n\r\n  <div class=\"date-range-actions\">\r\n    @if (selectedDateRange() && !disabled) {\r\n      <button\r\n        (click)=\"clear($event)\"\r\n        type=\"button\"\r\n        class=\"date-range-clear-btn\"\r\n        [attr.aria-label]=\"'\u6E05\u9664\u65E5\u671F\u9009\u62E9'\"\r\n        [tabindex]=\"disabled ? -1 : 0\"\r\n        [disabled]=\"disabled\"\r\n        (keydown.enter)=\"clear($event)\"\r\n        (keydown.space)=\"clear($event)\"\r\n        [attr.role]=\"'button'\"\r\n      >\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"date-range-icon\" />\r\n      </button>\r\n    }\r\n\r\n    <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"18px\" class=\"date-range-icon\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-range-container{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}:host .date-range-container:hover{border-color:var(--mat-divider-color, rgba(0, 0, 0, .24))}:host .date-range-container:focus-within{border-color:var(--mat-sys-primary, #1976d2);box-shadow:0 0 0 3px var(--mat-sys-primary-container, rgba(25, 118, 210, .1))}:host .date-range-container[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}:host .date-range-content{flex:1;min-width:0;display:flex;align-items:center;height:24px}:host .date-range-value{font-size:.875rem;line-height:24px;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}:host .date-range-separator{margin:0 4px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));line-height:24px}:host .date-range-text,:host .date-range-text-muted{display:block}:host .date-range-placeholder{flex:1;font-size:.875rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}:host .date-range-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}:host .date-range-icon{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:flex;align-items:center;justify-content:center}:host .date-range-clear-btn{display:none;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}:host .date-range-clear-btn:hover{background-color:var(--mat-sys-surface-variant, rgba(0, 0, 0, .08))}:host .date-range-clear-btn:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}:host .date-range-container:hover .date-range-clear-btn{display:flex}:host(.mat-mdc-form-field) .date-range-container{border:none;border-radius:0;padding:0;box-shadow:none}:host(.mat-mdc-form-field) .date-range-container:hover,:host(.mat-mdc-form-field) .date-range-container:focus-within{border-color:transparent;box-shadow:none}:host-context(.mat-mdc-form-field) .date-range-container,:host([hide-default-styles]) .date-range-container{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important;background-color:var(--mat-sys-surface, rgba(0, 0, 0, 0))}:host-context(.mat-mdc-form-field) .date-range-container:hover,:host-context(.mat-mdc-form-field) .date-range-container:focus-within,:host([hide-default-styles]) .date-range-container:hover,:host([hide-default-styles]) .date-range-container:focus-within{border-color:transparent!important;box-shadow:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dateRangeButton: [{
+                type: ViewChild,
+                args: ['dateRangeButton']
+            }], required: [{
+                type: Input
+            }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueFormat: [{
+                type: Input
+            }], dateTimePicker: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }], selectedDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDateRange", required: false }] }, { type: i0.Output, args: ["selectedDateRangeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class SmartDialogService {
     constructor() {
@@ -1179,13 +823,13 @@ class SmartDialogService {
         this.ref = null;
         this.data = null;
     }
-    static { this.ɵfac = function SmartDialogService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SmartDialogService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SmartDialogService, factory: SmartDialogService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, providedIn: 'root' }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartDialogService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 class SmartDialogRef {
     constructor(ref) {
         this.ref = ref;