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

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

@@ -1,30 +1,28 @@
 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 { model, output, ChangeDetectionStrategy, Component, input, computed, inject, signal, ViewChild, ElementRef, Injector, DestroyRef, effect, untracked, forwardRef, Input } 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 { FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { 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 { MatBottomSheet } from '@angular/material/bottom-sheet';
+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';
 
 class Container {
     constructor() {
-        this.#breakpoints = inject(BreakpointObserver);
-        this.isMobile = this.#breakpoints.isMatched([Breakpoints.Handset, Breakpoints.Tablet]);
         this.hasHeader = model(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
         this.hasFooter = model(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
         this.headerTitle = model('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
@@ -47,13 +45,12 @@ class Container {
         this.submit = output();
         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 +65,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 +83,68 @@ 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"] }] } });
 
+function formatDate(date, dateAdapter, dateFormats) {
+    const datePart = dateAdapter.format(date, dateFormats.display.dateInput);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${datePart} ${hours}:${minutes}`;
+}
+
+const DEFAULT_TIME_RANGES = [
+    { label: '最近5分钟', start: 'offset:-5minutes', end: 'offset:now' },
+    { label: '最近15分钟', start: 'offset:-15minutes', end: 'offset:now' },
+    { label: '最近30分钟', start: 'offset:-30minutes', end: 'offset:now' },
+    { label: '最近1小时', start: 'offset:-1hours', end: 'offset:now' },
+    { label: '最近3小时', start: 'offset:-3hours', end: 'offset:now' },
+    { label: '最近6小时', start: 'offset:-6hours', end: 'offset:now' },
+    { label: '最近12小时', start: 'offset:-12hours', end: 'offset:now' },
+    { label: '最近24小时', start: 'offset:-24hours', end: 'offset:now' },
+    { label: '最近2天', start: 'offset:-2days', end: 'offset:now' },
+    { label: '最近7天', start: 'offset:-7days', end: 'offset:now' },
+    { label: '最近30天', start: 'offset:-30days', end: 'offset:now' },
+    { label: '最近90天', start: 'offset:-90days', end: 'offset:now' },
+    { label: '最近6个月', start: 'offset:-6months', end: 'offset:now' },
+    { label: '最近1年', start: 'offset:-1years', end: 'offset:now' },
+    { label: '最近2年', start: 'offset:-2years', end: 'offset:now' },
+    { label: '最近5年', start: 'offset:-5years', end: 'offset:now' },
+    { label: '昨天', start: 'offset:-1days/start', end: 'offset:-1days/end' },
+    { label: '前天', start: 'offset:-2days/start', end: 'offset:-2days/end' },
+    { label: '上周同一天', start: 'offset:-7days/start', end: 'offset:-7days/end' },
+    { label: '今天', start: 'offset:0days/start', end: 'offset:0days/end' },
+    { label: '今天至今', start: 'offset:0days/start', end: 'offset:now' },
+    { label: '本周至今', start: 'startof:week', end: 'offset:now' },
+    { label: '本月至今', start: 'startof:month', end: 'offset:now' },
+    { label: '今年至今', start: 'startof:year', end: 'offset:now' }
+];
+const FUTURE_TIME_RANGES = [
+    { label: '未来1天', start: 'offset:now', end: 'offset:+1days' },
+    { label: '未来1周', start: 'offset:now', end: 'offset:+1weeks' },
+    { label: '未来1月', start: 'offset:now', end: 'offset:+1months' },
+    { label: '未来3月', start: 'offset:now', end: 'offset:+3months' }
+];
+
 class DateSelector {
+    #dialogRef;
+    #data;
+    #selectionModel;
+    #breakpoints;
     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.startDate = model('', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
         this.endDate = model('', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
         this.startHour = model(null, ...(ngDevMode ? [{ debugName: "startHour" }] : []));
@@ -105,117 +152,57 @@ 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.relativeDurations = [
-            ['最近5分钟', '-5minutes'],
-            ['最近15分钟', '-15minutes'],
-            ['最近30分钟', '-30minutes'],
-            ['最近1小时', '-1hours'],
-            ['最近3小时', '-3hours'],
-            ['最近6小时', '-6hours'],
-            ['最近12小时', '-12hours'],
-            ['最近24小时', '-24hours'],
-            ['最近2天', '-2days'],
-            ['最近7天', '-7days'],
-            ['最近30天', '-30days'],
-            ['最近90天', '-90days'],
-            ['最近6个月', '-6months'],
-            ['最近1年', '-1years'],
-            ['最近2年', '-2years'],
-            ['最近5年', '-5years'],
-            ['上周', '-1weeks'],
-            ['上个月', '-1months'],
-            ['去年', '-1years']
-        ];
-        this.fixedDays = [
-            ['昨天', '-1days/day'],
-            ['前天', '-2days/day'],
-            ['上周同一天', '-7days/day'],
-            ['上周', '-1weeks/week'],
-            ['上个月', '-1months/month'],
-            ['去年', '-1years/year']
-        ];
-        this.currentPeriods = [
-            ['今天', 'today', 'today'],
-            ['今天至今', 'today', 'now'],
-            ['本周至今', 'thisweek', 'now'],
-            ['本月至今', 'thismonth', 'now'],
-            ['今年至今', 'thisyear', 'now']
-        ];
-        this.timeRanges = signal([
-            ...this.relativeDurations.map(([label, offset]) => ({
-                label,
-                start: `offset:${offset}`,
-                end: 'offset:now'
-            })),
-            ...this.fixedDays.map(([label, point]) => ({
-                label,
-                start: `offset:${point}`,
-                end: `offset:${point}`
-            })),
-            ...this.currentPeriods.map(([label, start, end]) => ({
-                label,
-                start: `offset:${start}`,
-                end: `offset:${end}`
-            }))
-        ], ...(ngDevMode ? [{ debugName: "timeRanges" }] : []));
+        this.displayStart = computed(() => {
+            const startStr = this.startDate();
+            if (!startStr)
+                return '';
+            return formatDate(new Date(startStr), this._dateAdapter, this._dateFormats);
+        }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
+        this.displayEnd = computed(() => {
+            const endStr = this.endDate();
+            if (!endStr)
+                return '';
+            return formatDate(new Date(endStr), this._dateAdapter, this._dateFormats);
+        }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
+        this.timeRanges = [...DEFAULT_TIME_RANGES];
         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.hours = Array.from({ length: 24 }, (_, i) => i);
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        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()) {
-                const futureOffsets = [
-                    { label: '未来1天', start: 'offset:now', end: 'offset:+1days' },
-                    { label: '未来1周', start: 'offset:now', end: 'offset:+1weeks' },
-                    { label: '未来1月', start: 'offset:now', end: 'offset:+1months' },
-                    { label: '未来3月', start: 'offset:now', end: 'offset:+3months' }
-                ];
-                this.timeRanges.update(ranges => [...ranges, ...futureOffsets]);
+                this.timeRanges = [...this.timeRanges, ...FUTURE_TIME_RANGES];
             }
         }
-        else {
-            this.selectTimeRange(this.timeRanges()[5]);
+        if (!this.data?.dateTimePicker) {
+            this.selectTimeRange(this.timeRanges[5]);
         }
     }
     selectTimeRange(timeRange) {
@@ -236,46 +223,89 @@ class DateSelector {
         const parseTime = (time) => {
             if (!time)
                 return new Date(now);
-            if (time.startsWith('offset:')) {
-                const offset = time.replace('offset:', '').trim();
-                if (offset === 'now')
-                    return new Date(now);
-                const regex = /([+-]?)(\d+)(months?|days?|years?|weeks?|hours?|minutes?)/i;
-                const match = regex.exec(offset);
-                if (!match)
-                    return new Date(now);
-                const sign = match[1] === '-' ? -1 : 1;
-                const value = parseInt(match[2], 10) * sign;
-                const unit = match[3].toLowerCase();
+            // 处理 startof: 前缀 (本周/本月/今年)
+            if (time.startsWith('startof:')) {
+                const unit = time.replace('startof:', '').trim().toLowerCase();
                 const result = new Date(now);
+                result.setHours(0, 0, 0, 0);
                 switch (unit) {
-                    case 'minutes':
-                    case 'minute':
-                        result.setMinutes(result.getMinutes() + value);
-                        break;
-                    case 'hours':
-                    case 'hour':
-                        result.setHours(result.getHours() + value);
-                        break;
-                    case 'days':
-                    case 'day':
-                        result.setDate(result.getDate() + value);
-                        break;
-                    case 'weeks':
                     case 'week':
-                        result.setDate(result.getDate() + value * 7);
+                        // 假设周一为一周的开始
+                        const day = result.getDay() || 7; // 0是周日，改为7
+                        if (day !== 1) {
+                            result.setHours(-24 * (day - 1));
+                        }
                         break;
-                    case 'months':
                     case 'month':
-                        result.setMonth(result.getMonth() + value);
+                        result.setDate(1);
                         break;
-                    case 'years':
                     case 'year':
-                        result.setFullYear(result.getFullYear() + value);
+                        result.setMonth(0, 1);
                         break;
                 }
                 return result;
             }
+            // 处理 offset: 前缀
+            if (time.startsWith('offset:')) {
+                const offsetStr = time.replace('offset:', '').trim();
+                if (offsetStr === 'now')
+                    return new Date(now);
+                // 检查是否有 /start 或 /end 后缀
+                let suffix = '';
+                let cleanOffset = offsetStr;
+                if (offsetStr.endsWith('/start')) {
+                    suffix = 'start';
+                    cleanOffset = offsetStr.replace('/start', '');
+                }
+                else if (offsetStr.endsWith('/end')) {
+                    suffix = 'end';
+                    cleanOffset = offsetStr.replace('/end', '');
+                }
+                const regex = /([+-]?)(\d+)(months?|days?|years?|weeks?|hours?|minutes?)/i;
+                const match = regex.exec(cleanOffset);
+                // 如果没有匹配到数字偏移量，但有后缀（例如 offset:0days/start），尝试解析
+                // 注意：上面的正则也能匹配 0days
+                const result = new Date(now);
+                if (match) {
+                    const sign = match[1] === '-' ? -1 : 1;
+                    const value = parseInt(match[2], 10) * sign;
+                    const unit = match[3].toLowerCase();
+                    switch (unit) {
+                        case 'minutes':
+                        case 'minute':
+                            result.setMinutes(result.getMinutes() + value);
+                            break;
+                        case 'hours':
+                        case 'hour':
+                            result.setHours(result.getHours() + value);
+                            break;
+                        case 'days':
+                        case 'day':
+                            result.setDate(result.getDate() + value);
+                            break;
+                        case 'weeks':
+                        case 'week':
+                            result.setDate(result.getDate() + value * 7);
+                            break;
+                        case 'months':
+                        case 'month':
+                            result.setMonth(result.getMonth() + value);
+                            break;
+                        case 'years':
+                        case 'year':
+                            result.setFullYear(result.getFullYear() + value);
+                            break;
+                    }
+                }
+                // 应用后缀修正
+                if (suffix === 'start') {
+                    result.setHours(0, 0, 0, 0);
+                }
+                else if (suffix === 'end') {
+                    result.setHours(23, 59, 59, 999);
+                }
+                return result;
+            }
             return new Date(time);
         };
         const startDate = timeRange.start ? parseTime(timeRange.start) : null;
@@ -334,30 +364,79 @@ class DateSelector {
         this.selectedDateRange = range;
         this.startDate.set(start?.toISOString() ?? '');
         this.endDate.set(end?.toISOString() ?? '');
+        if (start) {
+            this.startHour.set(start.getHours());
+            this.startMinute.set(start.getMinutes());
+        }
+        else {
+            this.startHour.set(null);
+            this.startMinute.set(null);
+        }
+        if (end) {
+            this.endHour.set(end.getHours());
+            this.endMinute.set(end.getMinutes());
+        }
+        else {
+            this.endHour.set(null);
+            this.endMinute.set(null);
+        }
     }
     rangeChanged(selectedDate) {
         if (!selectedDate)
             return;
         if (this.selectingStart) {
-            this.startDate.set(selectedDate.toISOString());
+            // 正在选择开始日期
+            let h = 0, m = 0, s = 0, ms = 0;
+            // 尝试保留之前的开始时间
+            if (this.selectedDateRange?.start) {
+                h = this.selectedDateRange.start.getHours();
+                m = this.selectedDateRange.start.getMinutes();
+                s = this.selectedDateRange.start.getSeconds();
+            }
+            const newStart = new Date(selectedDate);
+            newStart.setHours(h, m, s, ms);
+            this.startDate.set(newStart.toISOString());
             this.endDate.set('');
-            this.startHour.set(selectedDate.getHours());
-            this.startMinute.set(selectedDate.getMinutes());
+            this.startHour.set(newStart.getHours());
+            this.startMinute.set(newStart.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(newStart, null);
+            this.#selectionModel.updateSelection(this.selectedDateRange, this);
             this.selectingStart = false;
         }
         else {
+            // 正在选择结束日期
             const start = this.#selectionModel.selection.start;
             if (!start)
                 return;
-            const range = start.toDateString() === selectedDate.toDateString()
-                ? new DateRange(start, start)
-                : new DateRange(start < selectedDate ? start : selectedDate, start < selectedDate ? selectedDate : start);
-            this.updateSelection(range.start, range.end);
+            const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+            const selectedDay = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
+            let newStart;
+            let newEnd;
+            if (selectedDay.getTime() < startDay.getTime()) {
+                // 用户选了一个比 Start 更早的日期 -> 交换角色
+                // 新 Start (selectedDate) 设为 00:00
+                newStart = new Date(selectedDate);
+                newStart.setHours(0, 0, 0, 0);
+                // 新 End (旧 start) 设为 23:59
+                newEnd = new Date(start);
+                newEnd.setHours(23, 59, 59, 999);
+            }
+            else {
+                // 正常顺序 (selectedDate >= start)
+                // Start 保持原样
+                newStart = new Date(start);
+                // End (selectedDate) 设为 23:59
+                newEnd = new Date(selectedDate);
+                newEnd.setHours(23, 59, 59, 999);
+                // 如果是同一天，确保 Start <= End
+                if (newStart.getTime() > newEnd.getTime()) {
+                    newStart.setHours(0, 0, 0, 0);
+                }
+            }
+            this.updateSelection(newStart, newEnd);
             this.selectingStart = true;
         }
     }
@@ -373,13 +452,17 @@ class DateSelector {
         this.endMinute.set(end.getMinutes());
     }
     submit() {
-        const start = new Date(this.selectedDateRange?.start ?? '');
-        const end = new Date(this.selectedDateRange?.end ?? '');
-        const startISO = start.toISOString();
-        const endISO = end.toISOString();
+        if (!this.selectedDateRange?.start || !this.selectedDateRange?.end) {
+            return;
+        }
+        const start = new Date(this.selectedDateRange.start);
+        const end = new Date(this.selectedDateRange.end);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return;
+        }
         const result = {
-            start: startISO,
-            end: endISO
+            start: start.toISOString(),
+            end: end.toISOString()
         };
         this.data = { ...this.data, dateTimePicker: result };
         this.#dialogRef.close(this.data);
@@ -387,12 +470,6 @@ class DateSelector {
     dismiss() {
         this.#dialogRef.close(undefined);
     }
-    getHours() {
-        return Array.from({ length: 24 }, (_, i) => i);
-    }
-    getMinutes() {
-        return Array.from({ length: 60 }, (_, i) => i);
-    }
     updateStartTime() {
         if (this.selectedDateRange?.start && this.startHour() !== null && this.startMinute() !== null) {
             const startDate = new Date(this.selectedDateRange.start);
@@ -415,36 +492,42 @@ 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 #sidenav [mode]=\"isMobile() ? 'over' : 'side'\" [opened]=\"!isMobile()\" 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          @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]=\"hours\"\r\n                [minutes]=\"minutes\"\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]=\"hours\"\r\n                [minutes]=\"minutes\"\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          </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 #sidenav [mode]=\"isMobile() ? 'over' : 'side'\" [opened]=\"!isMobile()\" 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          @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]=\"hours\"\r\n                [minutes]=\"minutes\"\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]=\"hours\"\r\n                [minutes]=\"minutes\"\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          </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;
     #dialog;
     #focusMonitor;
     #elementRef;
-    #matFormField;
+    #injector;
     // 内部值存储：{start: string, end: string} 或 null/undefined
     #internalValue;
     #errorStateSignal;
-    #shouldLabelFloatSignal;
     #focusedSignal;
     #id;
     constructor() {
@@ -452,40 +535,48 @@ class DatePickerComponent {
         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.ngControl = inject(NgControl, { optional: true, self: true });
         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.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" }] : []));
         this.selectionChange = output();
         // 内部值存储：{start: string, end: string} 或 null/undefined
         this.#internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "#internalValue" }] : []));
         // MatFormFieldControl 属性
         this.stateChanges = new Subject();
         this.#errorStateSignal = signal(false, ...(ngDevMode ? [{ debugName: "#errorStateSignal" }] : []));
-        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 formatDate(range.start, this._dateAdapter, this._dateFormats);
+        }, ...(ngDevMode ? [{ debugName: "displayStart" }] : []));
+        this.displayEnd = computed(() => {
+            const range = this.selectedDateRange();
+            if (!range?.end)
+                return '';
+            return formatDate(range.end, this._dateAdapter, this._dateFormats);
+        }, ...(ngDevMode ? [{ debugName: "displayEnd" }] : []));
         this.ref = effect(() => {
-            const dateRange = this.selectedDateRange();
+            this.selectedDateRange();
             // 触发 MatFormField 更新
-            this.stateChanges.next();
-            this.#shouldLabelFloatSignal.set(!!dateRange);
-            // 通知 ControlValueAccessor（当通过 model 更新时）
-            if (dateRange && this.onChange) {
-                const value = this.#internalValue();
-                if (value) {
-                    this.onChange(value);
-                }
-            }
+            untracked(() => this.stateChanges.next());
         }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+            this.ngControl.statusChanges?.pipe(takeUntilDestroyed()).subscribe(() => {
+                this.stateChanges.next();
+            });
+        }
         // 监听 focus 事件
         this.#focusMonitor
             .monitor(this.#elementRef, true)
@@ -498,16 +589,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
+            future: this.future()
         };
         const dialogRef = this.#dialog.open(DateSelector, {
             width: isMobile ? '100%' : '850px',
@@ -516,24 +608,24 @@ class DatePickerComponent {
             maxHeight: '100vh',
             data,
             disableClose: false,
-            panelClass: 'date-time-picker-dialog'
+            panelClass: 'date-time-picker-dialog',
+            injector: this.#injector
         });
-        dialogRef
-            .afterOpened()
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef), tap(() => this.toggle.update((status) => !status)))
-            .subscribe();
         dialogRef
             .afterClosed()
             .pipe(take(1), takeUntilDestroyed(this.destroyRef), tap((result) => {
-            this.toggle.update((status) => !status);
             if (result && result.dateTimePicker) {
+                const start = new Date(result.dateTimePicker.start);
+                const end = new Date(result.dateTimePicker.end);
+                const startStr = formatDate(start, this._dateAdapter, this._dateFormats);
+                const endStr = formatDate(end, this._dateAdapter, this._dateFormats);
                 const rangeValue = {
-                    start: result.dateTimePicker.start,
-                    end: result.dateTimePicker.end
+                    start: startStr,
+                    end: endStr
                 };
                 this.#internalValue.set(rangeValue);
                 // 更新显示用的日期范围
-                this.selectedDateRange.set(new DateRange(new Date(result.dateTimePicker.start), new Date(result.dateTimePicker.end)));
+                this.selectedDateRange.set(new DateRange(start, end));
                 // 发出用户手动选择的值
                 this.selectionChange.emit(rangeValue);
                 // 通知表单控件
@@ -574,23 +666,27 @@ class DatePickerComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        // 可以根据需要在这里处理禁用状态
+        this._formDisabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this.disabledInput() || this._formDisabled();
     }
     // MatFormFieldControl 实现
     get empty() {
         return !this.#internalValue();
     }
     get shouldPlaceholderFloat() {
-        return this.#shouldLabelFloatSignal();
+        return this.shouldLabelFloat;
     }
     get focused() {
         return this.#focusedSignal();
     }
     get errorState() {
-        return this.#errorStateSignal();
+        return this.#errorStateSignal() || (!!this.ngControl?.invalid && (!!this.ngControl?.touched || !!this.ngControl?.dirty));
     }
     get shouldLabelFloat() {
-        return this.#shouldLabelFloatSignal();
+        return this.focused || !this.empty;
     }
     get id() {
         return this.#id();
@@ -616,189 +712,45 @@ 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, future: { classPropertyName: "future", publicName: "future", isSignal: true, isRequired: false, transformFunction: null }, selectedDateRange: { classPropertyName: "selectedDateRange", publicName: "selectedDateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, providers: [
             provideTablerIcons({ IconCalendarDue, IconX }),
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePickerComponent),
-                multi: true
-            },
             {
                 provide: MatFormFieldControl,
                 useExisting: forwardRef(() => DatePickerComponent)
             }
-        ], viewQueries: [{ propertyName: "dateRangeButton", first: true, predicate: ["dateRangeButton"], descendants: true }], ngImport: i0, template: "<div\r\n  #dateRangeButton\r\n  [attr.id]=\"id\"\r\n  [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n  [attr.aria-disabled]=\"disabled\"\r\n  (click)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n  tabindex=\"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,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true
-                        },
                         {
                             provide: MatFormFieldControl,
                             useExisting: forwardRef(() => DatePickerComponent)
                         }
-                    ], template: "<div\r\n  #dateRangeButton\r\n  [attr.id]=\"id\"\r\n  [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n  [attr.aria-disabled]=\"disabled\"\r\n  (click)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n  (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n  tabindex=\"0\"\r\n  [attr.role]=\"'button'\"\r\n  class=\"date-range-container\"\r\n>\r\n  @if (selectedDateRange()) {\r\n    <div class=\"date-range-content\">\r\n      <div class=\"date-range-primary\">\r\n        {{ selectedDateRange()?.start | date: dateFormat }}\r\n      </div>\r\n      <div class=\"date-range-secondary\">\r\n        {{ selectedDateRange()?.end | date: dateFormat }}\r\n      </div>\r\n    </div>\r\n  } @else if (placeholder) {\r\n    <span class=\"date-range-placeholder\">{{ placeholder }}</span>\r\n  } @else {\r\n    <div class=\"date-range-content\"></div>\r\n  }\r\n\r\n  <div class=\"date-range-actions\">\r\n    <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"18px\" class=\"date-range-icon\" />\r\n\r\n    @if (selectedDateRange()) {\r\n      <button\r\n        (click)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        type=\"button\"\r\n        class=\"date-range-clear-btn\"\r\n        [attr.aria-label]=\"'\u6E05\u9664\u65E5\u671F\u9009\u62E9'\"\r\n        tabindex=\"0\"\r\n        (keydown.enter)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        (keydown.space)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n        [attr.role]=\"'button'\"\r\n      >\r\n        <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"date-range-icon\" />\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-range-container{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid 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: [{
+            }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{
                 type: Input
-            }], dateFormat: [{
-                type: Input
-            }], valueFormat: [{
-                type: Input
-            }], dateTimePicker: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], optionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalFeatures", required: false }] }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }], selectedDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDateRange", required: false }] }, { type: i0.Output, args: ["selectedDateRangeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
-
-class SmartDialogService {
-    constructor() {
-        this.#dialog = inject(MatDialog);
-        this.#bottomSheet = inject(MatBottomSheet);
-        this.#breakpoints = inject(BreakpointObserver);
-        this.ref = null;
-        this.data = null;
-    }
-    #dialog;
-    #bottomSheet;
-    #breakpoints;
-    open(component, config = {}) {
-        const isMobile = this.#breakpoints.isMatched([
-            Breakpoints.Handset,
-            Breakpoints.Tablet
-        ]);
-        const smartRef = new SmartDialogRef({});
-        this.data = config.data;
-        if (isMobile) {
-            this.ref = this.#bottomSheet.open(component, {
-                ariaLabel: 'Bottomsheet',
-                ariaModal: true,
-                autoFocus: false,
-                data: config.data,
-                panelClass: config.panelClass,
-                disableClose: config.disableClose
-            });
-            Promise.resolve().then(() => {
-                const hostElement = this.ref?.containerInstance?._elementRef?.nativeElement;
-                const container = hostElement?.closest('.mat-bottom-sheet-container');
-                if (container) {
-                    if (config.width)
-                        container.style.width = config.width;
-                    if (config.height)
-                        container.style.height = config.height;
-                    if (config.maxWidth)
-                        container.style.maxWidth = config.maxWidth;
-                    container.style.minWidth = 'unset';
-                    container.style.maxHeight = 'unset';
-                    container.style.borderTopLeftRadius = '1rem';
-                    container.style.borderTopRightRadius = '1rem';
-                }
-                if (hostElement) {
-                    if (config.width)
-                        hostElement.style.width = config.width;
-                    if (config.maxWidth)
-                        hostElement.style.maxWidth = config.maxWidth;
-                    if (config.height)
-                        hostElement.style.height = config.height;
-                }
-            });
-            smartRef.ref = this.ref;
-        }
-        else {
-            this.ref = this.#dialog.open(component, {
-                data: config.data,
-                ariaLabel: 'Dialog',
-                ariaModal: true,
-                autoFocus: false,
-                panelClass: config.panelClass,
-                disableClose: config.disableClose,
-                width: config.width,
-                height: config.height,
-                maxWidth: config.maxWidth,
-            });
-            const hostElement = this.ref._containerInstance?._elementRef?.nativeElement;
-            const container = hostElement?.closest('.mat-mdc-dialog-panel');
-            if (container) {
-                if (config.width)
-                    container.style.width = config.width;
-                if (config.height)
-                    container.style.height = config.height;
-                if (config.maxWidth) {
-                    container.style.maxWidth = config.maxWidth;
-                }
-                else {
-                    container.style.maxWidth = 'unset';
-                }
-                container.style.minWidth = 'unset';
-                container.style.maxHeight = 'unset';
-            }
-            smartRef.ref = this.ref;
-        }
-        return smartRef;
-    }
-    getData() {
-        return this.data;
-    }
-    close(result) {
-        if (!this.ref)
-            return;
-        if ('close' in this.ref) {
-            this.ref.close(result);
-        }
-        else {
-            this.ref.dismiss(result);
-        }
-        this.clear();
-    }
-    clear() {
-        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' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class SmartDialogRef {
-    constructor(ref) {
-        this.ref = ref;
-    }
-    close(result) {
-        if ('close' in this.ref) {
-            this.ref.close(result);
-        }
-        else {
-            this.ref.dismiss(result);
-        }
-    }
-    afterOpened() {
-        return this.ref.afterOpened();
-    }
-    afterClosed() {
-        if ('afterClosed' in this.ref) {
-            return this.ref.afterClosed();
-        }
-        else {
-            return this.ref.afterDismissed();
-        }
-    }
-}
+            }], 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DatePickerComponent, DateSelector, SmartDialogRef, SmartDialogService };
+export { DatePickerComponent, DateSelector };
 //# sourceMappingURL=luoxiao123-angular-material-date-time-range-picker.mjs.map