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

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

@@ -1,24 +1,25 @@
 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';
 
 class Container {
@@ -48,12 +49,12 @@ class Container {
         this.secondaryButton = output();
     }
     #breakpoints;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Container, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 })], 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: i1.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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Container, decorators: [{
+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 })], 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"] }]
+            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"] }] } });
 
 class DateTimeInputComponent {
@@ -68,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);
@@ -80,24 +87,37 @@ class DateTimeInputComponent {
         this.minuteChange.emit(value);
         this.timeChange.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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]=\"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: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$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$1.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: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+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, 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: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"] }]
+            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"] }] } });
 
 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" }] : []));
@@ -105,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'],
@@ -160,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()) {
@@ -338,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 {
@@ -356,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;
         }
@@ -415,25 +434,32 @@ class DateSelector {
             this.endDate.set(endDate.toISOString());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, optionalFeatures: { classPropertyName: "optionalFeatures", publicName: "optionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, selectedTimeRange: { classPropertyName: "selectedTimeRange", publicName: "selectedTimeRange", isSignal: true, isRequired: false, transformFunction: null }, allDays: { classPropertyName: "allDays", publicName: "allDays", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, allHours: { classPropertyName: "allHours", publicName: "allHours", isSignal: true, isRequired: false, transformFunction: null } }, 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" }, providers: [provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], 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  <!-- \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"], 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$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTimepickerModule }, { 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: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateSelector, decorators: [{
+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: [provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], imports: [
+            args: [{ selector: 'date-time-picker-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        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"] }]
-        }], propDecorators: { 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"] }] } });
+                        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"] }] } });
 
 class DatePickerComponent {
     #breakpoints;
@@ -441,26 +467,35 @@ class DatePickerComponent {
     #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" }] : []));
@@ -473,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 更新
@@ -498,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, {
@@ -516,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()
@@ -574,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() {
@@ -616,8 +670,17 @@ class DatePickerComponent {
             this.dateRangeButton?.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DatePickerComponent, isStandalone: true, selector: "date-time-picker", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, 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 }, optionalFeatures: { classPropertyName: "optionalFeatures", publicName: "optionalFeatures", isSignal: true, 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: [
+    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,
@@ -628,11 +691,11 @@ class DatePickerComponent {
                 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=\"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 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}:host .date-range-primary{font-size:.875rem;font-weight:500;line-height:1.5;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-secondary{font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));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: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: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: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(.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 }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
+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, DatePipe, MatDialogModule], providers: [
+            args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, MatDialogModule], providers: [
                         provideTablerIcons({ IconCalendarDue, IconX }),
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -643,23 +706,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             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 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}:host .date-range-primary{font-size:.875rem;font-weight:500;line-height:1.5;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-secondary{font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));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: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: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: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(.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"] }]
+                    ], 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
-            }], disabled: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], valueFormat: [{
+            }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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"] }] } });
+            }], 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() {
@@ -764,10 +823,10 @@ class SmartDialogService {
         this.ref = null;
         this.data = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, 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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SmartDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });