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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs +79 -494
  2. package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs.map +1 -1
  3. package/package.json +3 -2
package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs CHANGED
@@ -21,110 +21,6 @@ import { MatButtonModule } from '@angular/material/button';
21
21
  import * as i1$2 from '@angular/cdk/bidi';
22
22
  import { MatBottomSheet } from '@angular/material/bottom-sheet';
23
23
 
24
- const _c0$1 = ["*"];
25
- function Container_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
26
- i0.ɵɵelementStart(0, "h2", 6);
27
- i0.ɵɵtext(1);
28
- i0.ɵɵelementEnd();
29
- } if (rf & 2) {
30
- const ctx_r1 = i0.ɵɵnextContext(2);
31
- i0.ɵɵadvance();
32
- i0.ɵɵtextInterpolate(ctx_r1.headerTitle());
33
- } }
34
- function Container_Conditional_1_Conditional_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
35
- i0.ɵɵelementContainer(0);
36
- } }
37
- function Container_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
38
- i0.ɵɵelementStart(0, "div", 7);
39
- i0.ɵɵtemplate(1, Container_Conditional_1_Conditional_4_ng_container_1_Template, 1, 0, "ng-container", 10);
40
- i0.ɵɵelementEnd();
41
- } if (rf & 2) {
42
- const ctx_r1 = i0.ɵɵnextContext(2);
43
- i0.ɵɵadvance();
44
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerExtraContent() ?? null);
45
- } }
46
- function Container_Conditional_1_Template(rf, ctx) { if (rf & 1) {
47
- const _r1 = i0.ɵɵgetCurrentView();
48
- i0.ɵɵelementStart(0, "header", 1)(1, "div", 4);
49
- i0.ɵɵelement(2, "i-tabler", 5);
50
- i0.ɵɵconditionalCreate(3, Container_Conditional_1_Conditional_3_Template, 2, 1, "h2", 6);
51
- i0.ɵɵelementEnd();
52
- i0.ɵɵconditionalCreate(4, Container_Conditional_1_Conditional_4_Template, 2, 1, "div", 7);
53
- i0.ɵɵelementStart(5, "button", 8);
54
- i0.ɵɵlistener("click", function Container_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dismiss.emit()); });
55
- i0.ɵɵelement(6, "i-tabler", 9);
56
- i0.ɵɵelementEnd()();
57
- } if (rf & 2) {
58
- const ctx_r1 = i0.ɵɵnextContext();
59
- i0.ɵɵadvance(3);
60
- i0.ɵɵconditional(ctx_r1.headerTitle() ? 3 : -1);
61
- i0.ɵɵadvance();
62
- i0.ɵɵconditional(ctx_r1.headerExtraContent() ? 4 : -1);
63
- i0.ɵɵadvance();
64
- i0.ɵɵattribute("aria-label", "\u5173\u95ED");
65
- } }
66
- function Container_Conditional_4_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
67
- i0.ɵɵelementContainer(0);
68
- } }
69
- function Container_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
70
- i0.ɵɵelementStart(0, "div", 11);
71
- i0.ɵɵtemplate(1, Container_Conditional_4_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 10);
72
- i0.ɵɵelementEnd();
73
- } if (rf & 2) {
74
- const ctx_r1 = i0.ɵɵnextContext(2);
75
- i0.ɵɵadvance();
76
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerExtraContent() ?? null);
77
- } }
78
- function Container_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
79
- const _r3 = i0.ɵɵgetCurrentView();
80
- i0.ɵɵelementStart(0, "button", 16);
81
- i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.dismiss.emit()); });
82
- i0.ɵɵtext(1, " \u53D6\u6D88 ");
83
- i0.ɵɵelementEnd();
84
- } }
85
- function Container_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
86
- const _r4 = i0.ɵɵgetCurrentView();
87
- i0.ɵɵelementStart(0, "button", 17);
88
- i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.secondaryButton.emit()); });
89
- i0.ɵɵtext(1);
90
- i0.ɵɵelementEnd();
91
- } if (rf & 2) {
92
- const ctx_r1 = i0.ɵɵnextContext(2);
93
- i0.ɵɵproperty("disabled", ctx_r1.disabledSecondaryButton());
94
- i0.ɵɵadvance();
95
- i0.ɵɵtextInterpolate1(" ", ctx_r1.secondaryButtonTitle(), " ");
96
- } }
97
- function Container_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
98
- const _r5 = i0.ɵɵgetCurrentView();
99
- i0.ɵɵelementStart(0, "button", 18);
100
- i0.ɵɵlistener("click", function Container_Conditional_4_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submit.emit()); });
101
- i0.ɵɵtext(1);
102
- i0.ɵɵelementEnd();
103
- } if (rf & 2) {
104
- const ctx_r1 = i0.ɵɵnextContext(2);
105
- i0.ɵɵproperty("disabled", ctx_r1.disabledSubmit());
106
- i0.ɵɵadvance();
107
- i0.ɵɵtextInterpolate1(" ", ctx_r1.submitTitle(), " ");
108
- } }
109
- function Container_Conditional_4_Template(rf, ctx) { if (rf & 1) {
110
- i0.ɵɵelementStart(0, "footer", 3);
111
- i0.ɵɵconditionalCreate(1, Container_Conditional_4_Conditional_1_Template, 2, 1, "div", 11);
112
- i0.ɵɵelementStart(2, "div", 12);
113
- i0.ɵɵconditionalCreate(3, Container_Conditional_4_Conditional_3_Template, 2, 0, "button", 13);
114
- i0.ɵɵconditionalCreate(4, Container_Conditional_4_Conditional_4_Template, 2, 2, "button", 14);
115
- i0.ɵɵconditionalCreate(5, Container_Conditional_4_Conditional_5_Template, 2, 2, "button", 15);
116
- i0.ɵɵelementEnd()();
117
- } if (rf & 2) {
118
- const ctx_r1 = i0.ɵɵnextContext();
119
- i0.ɵɵadvance();
120
- i0.ɵɵconditional(ctx_r1.footerExtraContent() ? 1 : -1);
121
- i0.ɵɵadvance(2);
122
- i0.ɵɵconditional(ctx_r1.hasDismiss() ? 3 : -1);
123
- i0.ɵɵadvance();
124
- i0.ɵɵconditional(ctx_r1.hasSecondaryButton() ? 4 : -1);
125
- i0.ɵɵadvance();
126
- i0.ɵɵconditional(ctx_r1.hasSubmit() ? 5 : -1);
127
- } }
128
24
  class Container {
129
25
  constructor() {
130
26
  this.#breakpoints = inject(BreakpointObserver);
@@ -152,51 +48,14 @@ class Container {
152
48
  this.secondaryButton = output();
153
49
  }
154
50
  #breakpoints;
155
- static { this.ɵfac = function Container_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Container)(); }; }
156
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Container, selectors: [["date-time-picker-container"]], inputs: { hasHeader: [1, "hasHeader"], hasFooter: [1, "hasFooter"], headerTitle: [1, "headerTitle"], headerExtraContent: [1, "headerExtraContent"], footerExtraContent: [1, "footerExtraContent"], hasDismiss: [1, "hasDismiss"], hasSubmit: [1, "hasSubmit"], submitTitle: [1, "submitTitle"], submitBg: [1, "submitBg"], submitColor: [1, "submitColor"], submitTitleColor: [1, "submitTitleColor"], disabledSubmit: [1, "disabledSubmit"], hasSecondaryButton: [1, "hasSecondaryButton"], secondaryButtonTitle: [1, "secondaryButtonTitle"], secondaryButtonBg: [1, "secondaryButtonBg"], secondaryButtonColor: [1, "secondaryButtonColor"], secondaryButtonTitleColor: [1, "secondaryButtonTitleColor"], disabledSecondaryButton: [1, "disabledSecondaryButton"] }, outputs: { hasHeader: "hasHeaderChange", hasFooter: "hasFooterChange", headerTitle: "headerTitleChange", headerExtraContent: "headerExtraContentChange", footerExtraContent: "footerExtraContentChange", hasDismiss: "hasDismissChange", hasSubmit: "hasSubmitChange", submitTitle: "submitTitleChange", submitBg: "submitBgChange", submitColor: "submitColorChange", submitTitleColor: "submitTitleColorChange", disabledSubmit: "disabledSubmitChange", hasSecondaryButton: "hasSecondaryButtonChange", secondaryButtonTitle: "secondaryButtonTitleChange", secondaryButtonBg: "secondaryButtonBgChange", secondaryButtonColor: "secondaryButtonColorChange", secondaryButtonTitleColor: "secondaryButtonTitleColorChange", disabledSecondaryButton: "disabledSecondaryButtonChange", dismiss: "dismiss", submit: "submit", secondaryButton: "secondaryButton" }, features: [i0.ɵɵProvidersFeature([provideTablerIcons({ IconInfoCircle, IconCalendarDue, IconX, IconClock })])], ngContentSelectors: _c0$1, decls: 5, vars: 2, consts: [[1, "container-wrapper"], [1, "container-header"], [1, "container-main"], [1, "container-footer"], [1, "container-header-start"], ["name", "clock", "strokeWidth", "2px", "size", "18px", 1, "container-header-icon"], [1, "container-header-title"], [1, "container-header-extra"], ["type", "button", "tabindex", "0", 1, "container-header-close", 3, "click"], ["name", "x", "strokeWidth", "2.5px", "size", "18px", 1, "container-header-close-icon"], [4, "ngTemplateOutlet"], [1, "container-footer-extra"], [1, "container-footer-actions"], ["mat-stroked-button", "", "color", "primary", "type", "button"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "disabled"], ["mat-raised-button", "", "color", "primary", "type", "button", 3, "disabled"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "click"], ["mat-stroked-button", "", "color", "primary", "type", "button", 3, "click", "disabled"], ["mat-raised-button", "", "color", "primary", "type", "button", 3, "click", "disabled"]], template: function Container_Template(rf, ctx) { if (rf & 1) {
157
- i0.ɵɵprojectionDef();
158
- i0.ɵɵelementStart(0, "aside", 0);
159
- i0.ɵɵconditionalCreate(1, Container_Conditional_1_Template, 7, 3, "header", 1);
160
- i0.ɵɵelementStart(2, "main", 2);
161
- i0.ɵɵprojection(3);
162
- i0.ɵɵelementEnd();
163
- i0.ɵɵconditionalCreate(4, Container_Conditional_4_Template, 6, 4, "footer", 3);
164
- i0.ɵɵelementEnd();
165
- } if (rf & 2) {
166
- i0.ɵɵadvance();
167
- i0.ɵɵconditional(ctx.hasHeader() ? 1 : -1);
168
- i0.ɵɵadvance(3);
169
- i0.ɵɵconditional(ctx.hasFooter() ? 4 : -1);
170
- } }, dependencies: [TablerIconComponent, NgTemplateOutlet, MatButtonModule, i1.MatButton], styles: ["@charset \"UTF-8\";[_nghost-%COMP%]{display:flex;height:100%}.container-wrapper[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.container-header[_ngcontent-%COMP%]{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-header-start[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.container-header-icon[_ngcontent-%COMP%]{color:var(--mat-sys-primary, #1976d2);flex-shrink:0}.container-header-title[_ngcontent-%COMP%]{font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-header-extra[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;font-size:.75rem}.container-header-close[_ngcontent-%COMP%]{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));transition:background-color .2s ease;flex-shrink:0}.container-header-close[_ngcontent-%COMP%]:hover{background-color:var(--mat-sys-surface-container-highest, rgba(0, 0, 0, .08))}.container-header-close[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.container-header-close-icon[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center}.container-main[_ngcontent-%COMP%]{flex:1;width:100%;display:flex;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}.container-footer[_ngcontent-%COMP%]{width:100%;padding:12px 16px;display:flex;gap:12px;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-low, #fafafa);border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.container-footer-extra[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:.75rem;padding:0 4px}.container-footer-actions[_ngcontent-%COMP%]{display:flex;gap:8px;align-items:center;flex-shrink:0}", "[_nghost-%COMP%]{height:100%}"], changeDetection: 0 }); }
51
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Container, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
52
+ 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 }); }
171
53
  }
172
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Container, [{
173
- type: Component,
174
- 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"] }]
175
- }], null, { hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }, { type: i0.Output, args: ["hasHeaderChange"] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }, { type: i0.Output, args: ["hasFooterChange"] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }, { type: i0.Output, args: ["headerTitleChange"] }], headerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerExtraContent", required: false }] }, { type: i0.Output, args: ["headerExtraContentChange"] }], footerExtraContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerExtraContent", required: false }] }, { type: i0.Output, args: ["footerExtraContentChange"] }], hasDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDismiss", required: false }] }, { type: i0.Output, args: ["hasDismissChange"] }], hasSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubmit", required: false }] }, { type: i0.Output, args: ["hasSubmitChange"] }], submitTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitle", required: false }] }, { type: i0.Output, args: ["submitTitleChange"] }], submitBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBg", required: false }] }, { type: i0.Output, args: ["submitBgChange"] }], submitColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitColor", required: false }] }, { type: i0.Output, args: ["submitColorChange"] }], submitTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitTitleColor", required: false }] }, { type: i0.Output, args: ["submitTitleColorChange"] }], disabledSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSubmit", required: false }] }, { type: i0.Output, args: ["disabledSubmitChange"] }], hasSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSecondaryButton", required: false }] }, { type: i0.Output, args: ["hasSecondaryButtonChange"] }], secondaryButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitle", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleChange"] }], secondaryButtonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonBg", required: false }] }, { type: i0.Output, args: ["secondaryButtonBgChange"] }], secondaryButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonColorChange"] }], secondaryButtonTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonTitleColor", required: false }] }, { type: i0.Output, args: ["secondaryButtonTitleColorChange"] }], disabledSecondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledSecondaryButton", required: false }] }, { type: i0.Output, args: ["disabledSecondaryButtonChange"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], submit: [{ type: i0.Output, args: ["submit"] }], secondaryButton: [{ type: i0.Output, args: ["secondaryButton"] }] }); })();
176
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Container, { className: "Container", filePath: "lib/date-picker/components/container/container.component.ts", lineNumber: 21 }); })();
54
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Container, decorators: [{
55
+ type: Component,
56
+ 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"] }]
57
+ }], 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"] }] } });
177
58
 
178
- function DateTimeInputComponent_For_16_Template(rf, ctx) { if (rf & 1) {
179
- i0.ɵɵelementStart(0, "option", 12);
180
- i0.ɵɵtext(1);
181
- i0.ɵɵpipe(2, "number");
182
- i0.ɵɵelementEnd();
183
- } if (rf & 2) {
184
- const hour_r3 = ctx.$implicit;
185
- i0.ɵɵproperty("value", hour_r3);
186
- i0.ɵɵadvance();
187
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 2, hour_r3, "2.0-0"));
188
- } }
189
- function DateTimeInputComponent_For_23_Template(rf, ctx) { if (rf & 1) {
190
- i0.ɵɵelementStart(0, "option", 12);
191
- i0.ɵɵtext(1);
192
- i0.ɵɵpipe(2, "number");
193
- i0.ɵɵelementEnd();
194
- } if (rf & 2) {
195
- const minute_r4 = ctx.$implicit;
196
- i0.ɵɵproperty("value", minute_r4);
197
- i0.ɵɵadvance();
198
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 2, minute_r4, "2.0-0"));
199
- } }
200
59
  class DateTimeInputComponent {
201
60
  constructor() {
202
61
  this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -221,177 +80,14 @@ class DateTimeInputComponent {
221
80
  this.minuteChange.emit(value);
222
81
  this.timeChange.emit();
223
82
  }
224
- static { this.ɵfac = function DateTimeInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateTimeInputComponent)(); }; }
225
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateTimeInputComponent, selectors: [["date-time-input"]], inputs: { label: [1, "label"], dateValue: [1, "dateValue"], hourValue: [1, "hourValue"], minuteValue: [1, "minuteValue"], hours: [1, "hours"], minutes: [1, "minutes"] }, outputs: { dateChange: "dateChange", hourChange: "hourChange", minuteChange: "minuteChange", timeChange: "timeChange" }, decls: 24, vars: 9, consts: [["datePicker", ""], [1, "date-time-input-wrapper"], [1, "date-time-input-label"], [1, "date-time-input-container"], [1, "date-time-input-date"], ["type", "text", "matInput", "", "placeholder", "\u9009\u62E9\u65E5\u671F", 1, "date-time-input-field", 3, "ngModelChange", "click", "focus", "ngModel", "matDatepicker"], ["type", "button", "tabindex", "-1", "aria-hidden", "true", 1, "date-time-input-icon-btn"], ["name", "calendar-due", "strokeWidth", "2px", "size", "16px"], [1, "date-time-input-divider"], [1, "date-time-input-time"], [1, "date-time-input-select", "date-time-input-select-hour", 3, "ngModelChange", "ngModel"], ["disabled", "", 3, "value"], [3, "value"], [1, "date-time-input-separator"], [1, "date-time-input-select", "date-time-input-select-minute", 3, "ngModelChange", "ngModel"]], template: function DateTimeInputComponent_Template(rf, ctx) { if (rf & 1) {
226
- const _r1 = i0.ɵɵgetCurrentView();
227
- i0.ɵɵelementStart(0, "div", 1)(1, "label", 2);
228
- i0.ɵɵtext(2);
229
- i0.ɵɵelementEnd();
230
- i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "input", 5);
231
- i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); })("click", function DateTimeInputComponent_Template_input_click_5_listener() { i0.ɵɵrestoreView(_r1); const datePicker_r2 = i0.ɵɵreference(7); return i0.ɵɵresetView(datePicker_r2.open()); })("focus", function DateTimeInputComponent_Template_input_focus_5_listener() { i0.ɵɵrestoreView(_r1); const datePicker_r2 = i0.ɵɵreference(7); return i0.ɵɵresetView(datePicker_r2.open()); });
232
- i0.ɵɵelementEnd();
233
- i0.ɵɵelement(6, "mat-datepicker", null, 0);
234
- i0.ɵɵelementStart(8, "button", 6);
235
- i0.ɵɵelement(9, "i-tabler", 7);
236
- i0.ɵɵelementEnd()();
237
- i0.ɵɵelement(10, "div", 8);
238
- i0.ɵɵelementStart(11, "div", 9)(12, "select", 10);
239
- i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onHourChange($event)); });
240
- i0.ɵɵelementStart(13, "option", 11);
241
- i0.ɵɵtext(14, "--");
242
- i0.ɵɵelementEnd();
243
- i0.ɵɵrepeaterCreate(15, DateTimeInputComponent_For_16_Template, 3, 5, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
244
- i0.ɵɵelementEnd();
245
- i0.ɵɵelementStart(17, "span", 13);
246
- i0.ɵɵtext(18, ":");
247
- i0.ɵɵelementEnd();
248
- i0.ɵɵelementStart(19, "select", 14);
249
- i0.ɵɵlistener("ngModelChange", function DateTimeInputComponent_Template_select_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMinuteChange($event)); });
250
- i0.ɵɵelementStart(20, "option", 11);
251
- i0.ɵɵtext(21, "--");
252
- i0.ɵɵelementEnd();
253
- i0.ɵɵrepeaterCreate(22, DateTimeInputComponent_For_23_Template, 3, 5, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
254
- i0.ɵɵelementEnd()()()();
255
- } if (rf & 2) {
256
- const datePicker_r2 = i0.ɵɵreference(7);
257
- i0.ɵɵadvance(2);
258
- i0.ɵɵtextInterpolate(ctx.label());
259
- i0.ɵɵadvance(3);
260
- i0.ɵɵproperty("ngModel", ctx.dateValue())("matDatepicker", datePicker_r2);
261
- i0.ɵɵadvance(7);
262
- i0.ɵɵproperty("ngModel", ctx.hourValue());
263
- i0.ɵɵattribute("aria-label", "\u5C0F\u65F6");
264
- i0.ɵɵadvance();
265
- i0.ɵɵproperty("value", null);
266
- i0.ɵɵadvance(2);
267
- i0.ɵɵrepeater(ctx.hours());
268
- i0.ɵɵadvance(4);
269
- i0.ɵɵproperty("ngModel", ctx.minuteValue());
270
- i0.ɵɵattribute("aria-label", "\u5206\u949F");
271
- i0.ɵɵadvance();
272
- i0.ɵɵproperty("value", null);
273
- i0.ɵɵadvance(2);
274
- i0.ɵɵrepeater(ctx.minutes());
275
- } }, dependencies: [MatDatepickerModule, i1$1.MatDatepicker, i1$1.MatDatepickerInput, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, TablerIconComponent, DecimalPipe], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%] .date-time-input-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px;padding:12px 16px}[_nghost-%COMP%] .date-time-input-label[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#0009}[_nghost-%COMP%] .date-time-input-container[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid rgba(0,0,0,.12);border-radius:4px;overflow:hidden;background-color:#00000005;transition:border-color .2s ease;box-sizing:border-box}[_nghost-%COMP%] .date-time-input-container[_ngcontent-%COMP%]:hover{border-color:#0000003d}[_nghost-%COMP%] .date-time-input-container[_ngcontent-%COMP%]:focus-within{border-color:#1976d2;background-color:#fff}[_nghost-%COMP%] .date-time-input-date[_ngcontent-%COMP%]{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}[_nghost-%COMP%] .date-time-input-field[_ngcontent-%COMP%]{flex:1;height:36px;padding:0;border:none;background:transparent;color:#000000de;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%] .date-time-input-field[_ngcontent-%COMP%]::placeholder{color:#0006}[_nghost-%COMP%] .date-time-input-field[_ngcontent-%COMP%]:focus{outline:none}[_nghost-%COMP%] .date-time-input-icon-btn[_ngcontent-%COMP%]{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#0009;pointer-events:none}[_nghost-%COMP%] .date-time-input-divider[_ngcontent-%COMP%]{width:1px;height:20px;background-color:#0000001f}[_nghost-%COMP%] .date-time-input-time[_ngcontent-%COMP%]{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}[_nghost-%COMP%] .date-time-input-select[_ngcontent-%COMP%]{flex:1;height:36px;border:none;background:transparent;color:#000000de;font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}[_nghost-%COMP%] .date-time-input-select[_ngcontent-%COMP%]:focus{outline:none}[_nghost-%COMP%] .date-time-input-separator[_ngcontent-%COMP%]{color:#0009;font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}"], changeDetection: 0 }); }
83
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
84
+ 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 }); }
276
85
  }
277
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimeInputComponent, [{
278
- type: Component,
279
- args: [{ selector: 'date-time-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule, FormsModule, TablerIconComponent, DecimalPipe], template: "<div class=\"date-time-input-wrapper\">\r\n <label class=\"date-time-input-label\">{{ label() }}</label>\r\n\r\n <div class=\"date-time-input-container\">\r\n <!-- \u65E5\u671F\u90E8\u5206 -->\r\n <div class=\"date-time-input-date\">\r\n <input\r\n type=\"text\"\r\n matInput\r\n [ngModel]=\"dateValue()\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n [matDatepicker]=\"datePicker\"\r\n (click)=\"datePicker.open()\"\r\n (focus)=\"datePicker.open()\"\r\n placeholder=\"\u9009\u62E9\u65E5\u671F\"\r\n class=\"date-time-input-field\"\r\n />\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n <button type=\"button\" class=\"date-time-input-icon-btn\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"16px\" />\r\n </button>\r\n </div>\r\n\r\n <!-- \u5206\u9694\u7B26 -->\r\n <div class=\"date-time-input-divider\"></div>\r\n\r\n <!-- \u65F6\u95F4\u90E8\u5206 -->\r\n <div class=\"date-time-input-time\">\r\n <!-- \u5C0F\u65F6 -->\r\n <select class=\"date-time-input-select date-time-input-select-hour\" [ngModel]=\"hourValue()\" (ngModelChange)=\"onHourChange($event)\" [attr.aria-label]=\"'\u5C0F\u65F6'\">\r\n <option [value]=\"null\" disabled>--</option>\r\n @for (hour of hours(); track hour) {\r\n <option [value]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n }\r\n </select>\r\n\r\n <!-- \u5206\u9694\u7B26 -->\r\n <span class=\"date-time-input-separator\">:</span>\r\n\r\n <!-- \u5206\u949F -->\r\n <select class=\"date-time-input-select date-time-input-select-minute\" [ngModel]=\"minuteValue()\" (ngModelChange)=\"onMinuteChange($event)\" [attr.aria-label]=\"'\u5206\u949F'\">\r\n <option [value]=\"null\" disabled>--</option>\r\n @for (minute of minutes(); track minute) {\r\n <option [value]=\"minute\">{{ minute | number: '2.0-0' }}</option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-time-input-wrapper{display:flex;flex-direction:column;gap:8px;padding:12px 16px}:host .date-time-input-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#0009}:host .date-time-input-container{display:flex;align-items:center;width:100%;max-width:100%;border:1px solid rgba(0,0,0,.12);border-radius:4px;overflow:hidden;background-color:#00000005;transition:border-color .2s ease;box-sizing:border-box}:host .date-time-input-container:hover{border-color:#0000003d}:host .date-time-input-container:focus-within{border-color:#1976d2;background-color:#fff}:host .date-time-input-date{flex:1;display:flex;align-items:center;position:relative;padding:0 8px;min-width:0;overflow:hidden}:host .date-time-input-field{flex:1;height:36px;padding:0;border:none;background:transparent;color:#000000de;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis}:host .date-time-input-field::placeholder{color:#0006}:host .date-time-input-field:focus{outline:none}:host .date-time-input-icon-btn{position:absolute;right:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#0009;pointer-events:none}:host .date-time-input-divider{width:1px;height:20px;background-color:#0000001f}:host .date-time-input-time{flex:1;display:flex;min-width:0;align-items:center;gap:2px;padding:0 8px}:host .date-time-input-select{flex:1;height:36px;border:none;background:transparent;color:#000000de;font-size:.875rem;font-weight:500;padding:0 2px;cursor:pointer;text-align:center}:host .date-time-input-select:focus{outline:none}:host .date-time-input-separator{color:#0009;font-weight:500;padding:0 2px;-webkit-user-select:none;user-select:none}\n"] }]
280
- }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }], hourValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourValue", required: false }] }], minuteValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteValue", required: false }] }], hours: [{ type: i0.Input, args: [{ isSignal: true, alias: "hours", required: false }] }], minutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutes", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], hourChange: [{ type: i0.Output, args: ["hourChange"] }], minuteChange: [{ type: i0.Output, args: ["minuteChange"] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] }); })();
281
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateTimeInputComponent, { className: "DateTimeInputComponent", filePath: "lib/date-picker/components/date-time-input/date-time-input.component.ts", lineNumber: 15 }); })();
86
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputComponent, decorators: [{
87
+ type: Component,
88
+ 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"] }]
89
+ }], 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"] }] } });
282
90
 
283
- const _forTrack0 = ($index, $item) => $item.value;
284
- function DateSelector_For_8_Template(rf, ctx) { if (rf & 1) {
285
- const _r2 = i0.ɵɵgetCurrentView();
286
- i0.ɵɵelementStart(0, "li", 7)(1, "button", 21);
287
- i0.ɵɵlistener("click", function DateSelector_For_8_Template_button_click_1_listener() { const timeRangeItem_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectTimeRange(timeRangeItem_r3)); });
288
- i0.ɵɵelementStart(2, "span", 22);
289
- i0.ɵɵtext(3);
290
- i0.ɵɵelementEnd()()();
291
- } if (rf & 2) {
292
- let tmp_11_0;
293
- const timeRangeItem_r3 = ctx.$implicit;
294
- const ctx_r3 = i0.ɵɵnextContext();
295
- i0.ɵɵadvance();
296
- i0.ɵɵclassProp("selected", ctx_r3.selectedTimeRange() && ((tmp_11_0 = ctx_r3.selectedTimeRange()) == null ? null : tmp_11_0.start) === timeRangeItem_r3.start && ((tmp_11_0 = ctx_r3.selectedTimeRange()) == null ? null : tmp_11_0.end) === timeRangeItem_r3.end);
297
- i0.ɵɵadvance(2);
298
- i0.ɵɵtextInterpolate(timeRangeItem_r3.label);
299
- } }
300
- function DateSelector_Conditional_22_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
301
- const _r6 = i0.ɵɵgetCurrentView();
302
- i0.ɵɵelementStart(0, "button", 28);
303
- i0.ɵɵlistener("click", function DateSelector_Conditional_22_Conditional_5_For_2_Template_button_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; return i0.ɵɵresetView(day_r7.selected = !day_r7.selected); });
304
- i0.ɵɵtext(1);
305
- i0.ɵɵelementEnd();
306
- } if (rf & 2) {
307
- const day_r7 = ctx.$implicit;
308
- i0.ɵɵclassProp("selected", day_r7.selected);
309
- i0.ɵɵadvance();
310
- i0.ɵɵtextInterpolate1(" ", day_r7.label, " ");
311
- } }
312
- function DateSelector_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
313
- i0.ɵɵelementStart(0, "div", 26);
314
- i0.ɵɵrepeaterCreate(1, DateSelector_Conditional_22_Conditional_5_For_2_Template, 2, 3, "button", 27, _forTrack0);
315
- i0.ɵɵelementEnd();
316
- } if (rf & 2) {
317
- const ctx_r3 = i0.ɵɵnextContext(2);
318
- i0.ɵɵadvance();
319
- i0.ɵɵrepeater(ctx_r3.weekdays());
320
- } }
321
- function DateSelector_Conditional_22_Template(rf, ctx) { if (rf & 1) {
322
- const _r5 = i0.ɵɵgetCurrentView();
323
- i0.ɵɵelementStart(0, "div", 20)(1, "div", 23)(2, "mat-checkbox", 24);
324
- i0.ɵɵtwoWayListener("ngModelChange", function DateSelector_Conditional_22_Template_mat_checkbox_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.allDays, $event) || (ctx_r3.allDays = $event); return i0.ɵɵresetView($event); });
325
- i0.ɵɵelementStart(3, "span", 25);
326
- i0.ɵɵtext(4, "\u6240\u6709\u5929");
327
- i0.ɵɵelementEnd()();
328
- i0.ɵɵconditionalCreate(5, DateSelector_Conditional_22_Conditional_5_Template, 3, 0, "div", 26);
329
- i0.ɵɵelementEnd();
330
- i0.ɵɵelementStart(6, "div", 23)(7, "mat-checkbox", 24);
331
- i0.ɵɵtwoWayListener("ngModelChange", function DateSelector_Conditional_22_Template_mat_checkbox_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.allHours, $event) || (ctx_r3.allHours = $event); return i0.ɵɵresetView($event); });
332
- i0.ɵɵelementStart(8, "span", 25);
333
- i0.ɵɵtext(9, "\u6240\u6709\u5C0F\u65F6");
334
- i0.ɵɵelementEnd()()()();
335
- } if (rf & 2) {
336
- const ctx_r3 = i0.ɵɵnextContext();
337
- i0.ɵɵadvance(2);
338
- i0.ɵɵtwoWayProperty("ngModel", ctx_r3.allDays);
339
- i0.ɵɵadvance(3);
340
- i0.ɵɵconditional(!ctx_r3.allDays() ? 5 : -1);
341
- i0.ɵɵadvance(2);
342
- i0.ɵɵtwoWayProperty("ngModel", ctx_r3.allHours);
343
- } }
344
- function DateSelector_ng_template_23_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
345
- i0.ɵɵelementStart(0, "span", 32);
346
- i0.ɵɵtext(1);
347
- i0.ɵɵpipe(2, "date");
348
- i0.ɵɵelementEnd();
349
- } if (rf & 2) {
350
- const ctx_r3 = i0.ɵɵnextContext(3);
351
- i0.ɵɵadvance();
352
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r3.selectedDateRange.start, ctx_r3.dateFormat));
353
- } }
354
- function DateSelector_ng_template_23_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
355
- i0.ɵɵelementStart(0, "span", 33);
356
- i0.ɵɵtext(1, "-");
357
- i0.ɵɵelementEnd();
358
- } }
359
- function DateSelector_ng_template_23_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
360
- i0.ɵɵelementStart(0, "span", 32);
361
- i0.ɵɵtext(1);
362
- i0.ɵɵpipe(2, "date");
363
- i0.ɵɵelementEnd();
364
- } if (rf & 2) {
365
- const ctx_r3 = i0.ɵɵnextContext(3);
366
- i0.ɵɵadvance();
367
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r3.selectedDateRange.end, ctx_r3.dateFormat));
368
- } }
369
- function DateSelector_ng_template_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
370
- i0.ɵɵelementStart(0, "div", 31);
371
- i0.ɵɵconditionalCreate(1, DateSelector_ng_template_23_Conditional_3_Conditional_1_Template, 3, 4, "span", 32);
372
- i0.ɵɵconditionalCreate(2, DateSelector_ng_template_23_Conditional_3_Conditional_2_Template, 2, 0, "span", 33);
373
- i0.ɵɵconditionalCreate(3, DateSelector_ng_template_23_Conditional_3_Conditional_3_Template, 3, 4, "span", 32);
374
- i0.ɵɵelementEnd();
375
- } if (rf & 2) {
376
- const ctx_r3 = i0.ɵɵnextContext(2);
377
- i0.ɵɵadvance();
378
- i0.ɵɵconditional(ctx_r3.selectedDateRange.start ? 1 : -1);
379
- i0.ɵɵadvance();
380
- i0.ɵɵconditional(ctx_r3.selectedDateRange.start && ctx_r3.selectedDateRange.end ? 2 : -1);
381
- i0.ɵɵadvance();
382
- i0.ɵɵconditional(ctx_r3.selectedDateRange.end ? 3 : -1);
383
- } }
384
- function DateSelector_ng_template_23_Template(rf, ctx) { if (rf & 1) {
385
- i0.ɵɵelementStart(0, "div", 29)(1, "span", 30);
386
- i0.ɵɵtext(2, "\u8303\u56F4\uFF1A");
387
- i0.ɵɵelementEnd();
388
- i0.ɵɵconditionalCreate(3, DateSelector_ng_template_23_Conditional_3_Template, 4, 3, "div", 31);
389
- i0.ɵɵelementEnd();
390
- } if (rf & 2) {
391
- const ctx_r3 = i0.ɵɵnextContext();
392
- i0.ɵɵadvance(3);
393
- i0.ɵɵconditional(ctx_r3.selectedDateRange ? 3 : -1);
394
- } }
395
91
  class DateSelector {
396
92
  constructor() {
397
93
  this.#cdr = inject(ChangeDetectorRef);
@@ -719,116 +415,26 @@ class DateSelector {
719
415
  this.endDate.set(endDate.toISOString());
720
416
  }
721
417
  }
722
- static { this.ɵfac = function DateSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateSelector)(); }; }
723
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateSelector, selectors: [["date-time-picker-selector"]], inputs: { startDate: [1, "startDate"], endDate: [1, "endDate"], startHour: [1, "startHour"], startMinute: [1, "startMinute"], endHour: [1, "endHour"], endMinute: [1, "endMinute"], future: [1, "future"], optionalFeatures: [1, "optionalFeatures"], selectedTimeRange: [1, "selectedTimeRange"], allDays: [1, "allDays"], weekdays: [1, "weekdays"], allHours: [1, "allHours"] }, outputs: { startDate: "startDateChange", endDate: "endDateChange", startHour: "startHourChange", startMinute: "startMinuteChange", endHour: "endHourChange", endMinute: "endMinuteChange", future: "futureChange", optionalFeatures: "optionalFeaturesChange", selectedTimeRange: "selectedTimeRangeChange", allDays: "allDaysChange", weekdays: "weekdaysChange", allHours: "allHoursChange" }, features: [i0.ɵɵProvidersFeature([provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel])], decls: 25, vars: 15, consts: [["footerExtraContent", ""], ["headerTitle", "\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668", "submitTitle", "\u5E94\u7528", 3, "submit", "dismiss", "disabledSubmit", "footerExtraContent"], ["dir", "rtl", 1, "date-selector-sidebar"], ["dir", "ltr", 1, "date-selector-sidebar-inner"], [1, "date-selector-sidebar-header"], [1, "date-selector-sidebar-title"], [1, "date-selector-sidebar-list"], [1, "date-selector-sidebar-item"], [1, "date-selector-main"], [1, "date-selector-content"], [1, "date-selector-calendar-section"], [1, "date-selector-calendar-wrapper"], [1, "date-selector-calendar", 3, "selectedChange", "maxDate", "selected"], [1, "date-selector-hint"], ["name", "info-circle", "strokeWidth", "2px", 1, "date-selector-hint-icon"], [1, "date-selector-hint-text"], [1, "date-selector-time-section"], [1, "date-selector-inputs"], ["label", "\u5F00\u59CB\u65E5\u671F", 3, "dateChange", "timeChange", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], ["label", "\u7ED3\u675F\u65E5\u671F", 3, "dateChange", "timeChange", "dateValue", "hourValue", "minuteValue", "hours", "minutes"], [1, "date-selector-options"], ["type", "button", 1, "date-selector-sidebar-btn", 3, "click"], [1, "date-selector-sidebar-text"], [1, "date-selector-option-group"], [1, "date-selector-option-checkbox", 3, "ngModelChange", "ngModel"], [1, "date-selector-option-label"], [1, "date-selector-weekdays"], ["type", "button", 1, "date-selector-weekday-btn", 3, "selected"], ["type", "button", 1, "date-selector-weekday-btn", 3, "click"], [1, "date-selector-footer-range"], [1, "date-selector-footer-label"], [1, "date-selector-footer-value"], [1, "date-selector-footer-date"], [1, "date-selector-footer-separator"]], template: function DateSelector_Template(rf, ctx) { if (rf & 1) {
724
- const _r1 = i0.ɵɵgetCurrentView();
725
- i0.ɵɵelementStart(0, "date-time-picker-container", 1);
726
- i0.ɵɵlistener("submit", function DateSelector_Template_date_time_picker_container_submit_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.submit()); })("dismiss", function DateSelector_Template_date_time_picker_container_dismiss_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.dismiss()); });
727
- i0.ɵɵelementStart(1, "aside", 2)(2, "div", 3)(3, "div", 4)(4, "span", 5);
728
- i0.ɵɵtext(5, "\u5FEB\u6377\u9009\u62E9");
729
- i0.ɵɵelementEnd()();
730
- i0.ɵɵelementStart(6, "ul", 6);
731
- i0.ɵɵrepeaterCreate(7, DateSelector_For_8_Template, 4, 3, "li", 7, i0.ɵɵrepeaterTrackByIdentity);
732
- i0.ɵɵelementEnd()()();
733
- i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "section", 10)(12, "div", 11)(13, "mat-calendar", 12);
734
- i0.ɵɵtwoWayListener("selectedChange", function DateSelector_Template_mat_calendar_selectedChange_13_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedDateRange, $event) || (ctx.selectedDateRange = $event); return i0.ɵɵresetView($event); });
735
- i0.ɵɵlistener("selectedChange", function DateSelector_Template_mat_calendar_selectedChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.rangeChanged($event)); });
736
- i0.ɵɵelementEnd();
737
- i0.ɵɵelementStart(14, "div", 13);
738
- i0.ɵɵelement(15, "i-tabler", 14);
739
- i0.ɵɵelementStart(16, "span", 15);
740
- i0.ɵɵtext(17, "\u5982\u679C\u8981\u9009\u62E9\u4E00\u5929\uFF0C\u8BF7\u53CC\u51FB\u8BE5\u5929\u3002");
741
- i0.ɵɵelementEnd()()()();
742
- i0.ɵɵelementStart(18, "section", 16)(19, "div", 17)(20, "date-time-input", 18);
743
- i0.ɵɵlistener("dateChange", function DateSelector_Template_date_time_input_dateChange_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeDatePart("start", $event)); })("timeChange", function DateSelector_Template_date_time_input_timeChange_20_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateStartTime()); });
744
- i0.ɵɵelementEnd();
745
- i0.ɵɵelementStart(21, "date-time-input", 19);
746
- i0.ɵɵlistener("dateChange", function DateSelector_Template_date_time_input_dateChange_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeDatePart("end", $event)); })("timeChange", function DateSelector_Template_date_time_input_timeChange_21_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateEndTime()); });
747
- i0.ɵɵelementEnd()();
748
- i0.ɵɵconditionalCreate(22, DateSelector_Conditional_22_Template, 10, 3, "div", 20);
749
- i0.ɵɵelementEnd()()()();
750
- i0.ɵɵtemplate(23, DateSelector_ng_template_23_Template, 4, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
751
- } if (rf & 2) {
752
- const footerExtraContent_r8 = i0.ɵɵreference(24);
753
- i0.ɵɵproperty("disabledSubmit", !ctx.selectedDateRange)("footerExtraContent", footerExtraContent_r8);
754
- i0.ɵɵadvance(7);
755
- i0.ɵɵrepeater(ctx.timeRanges());
756
- i0.ɵɵadvance(6);
757
- i0.ɵɵproperty("maxDate", !ctx.future() ? ctx.now : undefined);
758
- i0.ɵɵtwoWayProperty("selected", ctx.selectedDateRange);
759
- i0.ɵɵadvance(7);
760
- i0.ɵɵproperty("dateValue", ctx.startDate())("hourValue", ctx.startHour())("minuteValue", ctx.startMinute())("hours", ctx.getHours())("minutes", ctx.getMinutes());
761
- i0.ɵɵadvance();
762
- i0.ɵɵproperty("dateValue", ctx.endDate())("hourValue", ctx.endHour())("minuteValue", ctx.endMinute())("hours", ctx.getHours())("minutes", ctx.getMinutes());
763
- i0.ɵɵadvance();
764
- i0.ɵɵconditional(ctx.optionalFeatures() ? 22 : -1);
765
- } }, dependencies: [MatCalendar,
766
- TablerIconComponent,
767
- MatDatepickerModule, i1$2.Dir, MatNativeDateModule,
768
- ReactiveFormsModule, i2.NgControlStatus, FormsModule, i2.NgModel, MatCheckbox,
769
- MatTimepickerModule,
770
- Container,
771
- DateTimeInputComponent,
772
- DatePipe], styles: ["@charset \"UTF-8\";[_nghost-%COMP%]{display:block;height:100%}.date-selector-sidebar[_ngcontent-%COMP%]{width:12rem;height:100%;display:none;background-color:var(--mat-sys-surface-container, #fafafa);border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));display:flex;flex-direction:column}@media(min-width:1024px){.date-selector-sidebar[_ngcontent-%COMP%]{display:flex}}.date-selector-sidebar-inner[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column;padding:0}.date-selector-sidebar-header[_ngcontent-%COMP%]{padding:12px 16px;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface, #fff);position:sticky;top:0;z-index:1}.date-selector-sidebar-title[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-sidebar-list[_ngcontent-%COMP%]{list-style:none;margin:0;padding:4px 0;flex:1;overflow-y:auto;overflow-x:hidden}.date-selector-sidebar-item[_ngcontent-%COMP%]{margin:0;padding:0}.date-selector-sidebar-btn[_ngcontent-%COMP%]{width:100%;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:left;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-selector-sidebar-btn[_ngcontent-%COMP%]:hover{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));color:var(--mat-sys-primary, #1976d2);padding-left:16px}.date-selector-sidebar-btn.selected[_ngcontent-%COMP%]{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .16));color:var(--mat-sys-primary, #1976d2);font-weight:600;padding-left:16px}.date-selector-sidebar-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:-2px}.date-selector-sidebar-text[_ngcontent-%COMP%]{display:block}.date-selector-main[_ngcontent-%COMP%]{flex:1;width:100%;height:100%;display:flex;background-color:var(--mat-sys-surface, #fff)}@media(min-width:1024px){.date-selector-main[_ngcontent-%COMP%]{width:calc(100% - 12rem)}}.date-selector-content[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;flex-direction:column}@media(min-width:768px){.date-selector-content[_ngcontent-%COMP%]{flex-direction:row}}.date-selector-calendar-section[_ngcontent-%COMP%]{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));box-sizing:border-box}@media(min-width:768px){.date-selector-calendar-section[_ngcontent-%COMP%]{width:50%}}@media(max-width:767px){.date-selector-calendar-section[_ngcontent-%COMP%]{border-right:none;border-bottom:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12))}}.date-selector-calendar-wrapper[_ngcontent-%COMP%]{width:100%;display:flex;flex-direction:column;gap:16px}.date-selector-calendar[_ngcontent-%COMP%]{width:100%}.date-selector-hint[_ngcontent-%COMP%]{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08));border:1px solid var(--mat-outline-variant, rgba(25, 118, 210, .16));border-radius:4px;align-items:center}.date-selector-hint-icon[_ngcontent-%COMP%]{flex-shrink:0;color:var(--mat-sys-primary, #1976d2);margin-top:2px}.date-selector-hint-text[_ngcontent-%COMP%]{font-size:.75rem;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.date-selector-time-section[_ngcontent-%COMP%]{width:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}@media(min-width:768px){.date-selector-time-section[_ngcontent-%COMP%]{width:50%}}.date-selector-inputs[_ngcontent-%COMP%]{display:flex;flex-direction:column;padding:0}.date-selector-options[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:0;padding:12px 16px;border-top:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));background-color:var(--mat-sys-surface-container, #fafafa)}.date-selector-option-group[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px}.date-selector-option-label[_ngcontent-%COMP%]{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));margin-left:4px}.date-selector-weekdays[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}.date-selector-weekday-btn[_ngcontent-%COMP%]{padding:8px 4px;background-color:var(--mat-sys-surface, #fff);border:1px solid var(--mat-divider-color, rgba(0, 0, 0, .12));border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:500;line-height:1.25;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));text-align:center;white-space:nowrap;transition:all .2s ease}.date-selector-weekday-btn[_ngcontent-%COMP%]:hover{border-color:var(--mat-sys-primary, #1976d2);background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .08))}.date-selector-weekday-btn.selected[_ngcontent-%COMP%]{background-color:var(--mat-sys-primary, #1976d2);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary, white);font-weight:600}.date-selector-weekday-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid var(--mat-sys-primary, #1976d2);outline-offset:2px}.date-selector-footer-range[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-right:auto;padding:0 8px}.date-selector-footer-label[_ngcontent-%COMP%]{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-label[_ngcontent-%COMP%]{display:block}}.date-selector-footer-value[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:0;font-weight:600}@media(min-width:768px){.date-selector-footer-value[_ngcontent-%COMP%]{flex-direction:row;gap:8px;align-items:center}}.date-selector-footer-date[_ngcontent-%COMP%]{color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87));white-space:nowrap}.date-selector-footer-separator[_ngcontent-%COMP%]{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6));display:none}@media(min-width:768px){.date-selector-footer-separator[_ngcontent-%COMP%]{display:block}}", "[_nghost-%COMP%]{display:block;height:100%}"], changeDetection: 0 }); }
418
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
419
+ 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 }); }
773
420
  }
774
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateSelector, [{
775
- type: Component,
776
- args: [{ selector: 'date-time-picker-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], imports: [
777
- MatCalendar,
778
- TablerIconComponent,
779
- MatDatepickerModule,
780
- MatNativeDateModule,
781
- ReactiveFormsModule,
782
- FormsModule,
783
- MatCheckbox,
784
- DatePipe,
785
- MatTimepickerModule,
786
- Container,
787
- DateTimeInputComponent
788
- ], 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"] }]
789
- }], null, { startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }, { type: i0.Output, args: ["startHourChange"] }], startMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "startMinute", required: false }] }, { type: i0.Output, args: ["startMinuteChange"] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }, { type: i0.Output, args: ["endHourChange"] }], endMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMinute", required: false }] }, { type: i0.Output, args: ["endMinuteChange"] }], future: [{ type: i0.Input, args: [{ isSignal: true, alias: "future", required: false }] }, { type: i0.Output, args: ["futureChange"] }], optionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalFeatures", required: false }] }, { type: i0.Output, args: ["optionalFeaturesChange"] }], selectedTimeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTimeRange", required: false }] }, { type: i0.Output, args: ["selectedTimeRangeChange"] }], allDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDays", required: false }] }, { type: i0.Output, args: ["allDaysChange"] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }, { type: i0.Output, args: ["weekdaysChange"] }], allHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "allHours", required: false }] }, { type: i0.Output, args: ["allHoursChange"] }] }); })();
790
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateSelector, { className: "DateSelector", filePath: "lib/date-picker/date-selector/date-selector.component.ts", lineNumber: 41 }); })();
421
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateSelector, decorators: [{
422
+ type: Component,
423
+ args: [{ selector: 'date-time-picker-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter(), DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], imports: [
424
+ MatCalendar,
425
+ TablerIconComponent,
426
+ MatDatepickerModule,
427
+ MatNativeDateModule,
428
+ ReactiveFormsModule,
429
+ FormsModule,
430
+ MatCheckbox,
431
+ DatePipe,
432
+ MatTimepickerModule,
433
+ Container,
434
+ DateTimeInputComponent
435
+ ], 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"] }]
436
+ }], 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"] }] } });
791
437
 
792
- const _c0 = ["dateRangeButton"];
793
- function DatePickerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
794
- i0.ɵɵelementStart(0, "div", 2)(1, "div", 7);
795
- i0.ɵɵtext(2);
796
- i0.ɵɵpipe(3, "date");
797
- i0.ɵɵelementEnd();
798
- i0.ɵɵelementStart(4, "div", 8);
799
- i0.ɵɵtext(5);
800
- i0.ɵɵpipe(6, "date");
801
- i0.ɵɵelementEnd()();
802
- } if (rf & 2) {
803
- let tmp_2_0;
804
- let tmp_3_0;
805
- const ctx_r1 = i0.ɵɵnextContext();
806
- i0.ɵɵadvance(2);
807
- i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 2, (tmp_2_0 = ctx_r1.selectedDateRange()) == null ? null : tmp_2_0.start, ctx_r1.dateFormat), " ");
808
- i0.ɵɵadvance(3);
809
- i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 5, (tmp_3_0 = ctx_r1.selectedDateRange()) == null ? null : tmp_3_0.end, ctx_r1.dateFormat), " ");
810
- } }
811
- function DatePickerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
812
- i0.ɵɵelementStart(0, "span", 3);
813
- i0.ɵɵtext(1);
814
- i0.ɵɵelementEnd();
815
- } if (rf & 2) {
816
- const ctx_r1 = i0.ɵɵnextContext();
817
- i0.ɵɵadvance();
818
- i0.ɵɵtextInterpolate(ctx_r1.placeholder);
819
- } }
820
- function DatePickerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
821
- i0.ɵɵelement(0, "div", 2);
822
- } }
823
- function DatePickerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
824
- const _r3 = i0.ɵɵgetCurrentView();
825
- i0.ɵɵelementStart(0, "button", 9);
826
- i0.ɵɵlistener("click", function DatePickerComponent_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); })("keydown.enter", function DatePickerComponent_Conditional_7_Template_button_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); })("keydown.space", function DatePickerComponent_Conditional_7_Template_button_keydown_space_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.selectedDateRange.set(undefined); return i0.ɵɵresetView($event.stopPropagation()); });
827
- i0.ɵɵelement(1, "i-tabler", 10);
828
- i0.ɵɵelementEnd();
829
- } if (rf & 2) {
830
- i0.ɵɵattribute("aria-label", "\u6E05\u9664\u65E5\u671F\u9009\u62E9")("role", "button");
831
- } }
832
438
  class DatePickerComponent {
833
439
  #breakpoints;
834
440
  #dialog;
@@ -1010,71 +616,50 @@ class DatePickerComponent {
1010
616
  this.dateRangeButton?.nativeElement.focus();
1011
617
  }
1012
618
  }
1013
- static { this.ɵfac = function DatePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatePickerComponent)(); }; }
1014
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatePickerComponent, selectors: [["date-time-picker"]], viewQuery: function DatePickerComponent_Query(rf, ctx) { if (rf & 1) {
1015
- i0.ɵɵviewQuery(_c0, 5);
1016
- } if (rf & 2) {
1017
- let _t;
1018
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dateRangeButton = _t.first);
1019
- } }, inputs: { required: "required", disabled: "disabled", dateFormat: "dateFormat", valueFormat: "valueFormat", dateTimePicker: "dateTimePicker", placeholder: "placeholder", optionalFeatures: [1, "optionalFeatures"], future: [1, "future"], selectedDateRange: [1, "selectedDateRange"] }, outputs: { selectedDateRange: "selectedDateRangeChange", selectionChange: "selectionChange" }, features: [i0.ɵɵProvidersFeature([
1020
- provideTablerIcons({ IconCalendarDue, IconX }),
1021
- {
1022
- provide: NG_VALUE_ACCESSOR,
1023
- useExisting: forwardRef(() => DatePickerComponent),
1024
- multi: true
1025
- },
1026
- {
1027
- provide: MatFormFieldControl,
1028
- useExisting: forwardRef(() => DatePickerComponent)
1029
- }
1030
- ])], decls: 8, vars: 6, consts: [["dateRangeButton", ""], ["tabindex", "0", 1, "date-range-container", 3, "click", "keydown.enter", "keydown.space"], [1, "date-range-content"], [1, "date-range-placeholder"], [1, "date-range-actions"], ["name", "calendar-due", "strokeWidth", "2px", "size", "18px", 1, "date-range-icon"], ["type", "button", "tabindex", "0", 1, "date-range-clear-btn"], [1, "date-range-primary"], [1, "date-range-secondary"], ["type", "button", "tabindex", "0", 1, "date-range-clear-btn", 3, "click", "keydown.enter", "keydown.space"], ["name", "x", "strokeWidth", "2.5px", "size", "18px", 1, "date-range-icon"]], template: function DatePickerComponent_Template(rf, ctx) { if (rf & 1) {
1031
- const _r1 = i0.ɵɵgetCurrentView();
1032
- i0.ɵɵelementStart(0, "div", 1, 0);
1033
- i0.ɵɵlistener("click", function DatePickerComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); })("keydown.enter", function DatePickerComponent_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); })("keydown.space", function DatePickerComponent_Template_div_keydown_space_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.disabled && ctx.openDateDialogSelector()); });
1034
- i0.ɵɵconditionalCreate(2, DatePickerComponent_Conditional_2_Template, 7, 8, "div", 2)(3, DatePickerComponent_Conditional_3_Template, 2, 1, "span", 3)(4, DatePickerComponent_Conditional_4_Template, 1, 0, "div", 2);
1035
- i0.ɵɵelementStart(5, "div", 4);
1036
- i0.ɵɵelement(6, "i-tabler", 5);
1037
- i0.ɵɵconditionalCreate(7, DatePickerComponent_Conditional_7_Template, 2, 2, "button", 6);
1038
- i0.ɵɵelementEnd()();
1039
- } if (rf & 2) {
1040
- i0.ɵɵattribute("id", ctx.id)("aria-label", "\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4")("aria-disabled", ctx.disabled)("role", "button");
1041
- i0.ɵɵadvance(2);
1042
- i0.ɵɵconditional(ctx.selectedDateRange() ? 2 : ctx.placeholder ? 3 : 4);
1043
- i0.ɵɵadvance(5);
1044
- i0.ɵɵconditional(ctx.selectedDateRange() ? 7 : -1);
1045
- } }, dependencies: [TablerIconComponent, MatDatepickerModule, MatDialogModule, DatePipe], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:hover{border-color:#0000003d}[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}[_nghost-%COMP%] .date-range-container[aria-disabled=true][_ngcontent-%COMP%]{cursor:not-allowed;opacity:.6;pointer-events:none}[_nghost-%COMP%] .date-range-content[_ngcontent-%COMP%]{flex:1;min-width:0}[_nghost-%COMP%] .date-range-primary[_ngcontent-%COMP%]{font-size:.875rem;font-weight:500;line-height:1.5;color:#000000de;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[_nghost-%COMP%] .date-range-secondary[_ngcontent-%COMP%]{font-size:.75rem;line-height:1.5;color:#0009;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[_nghost-%COMP%] .date-range-text[_ngcontent-%COMP%], [_nghost-%COMP%] .date-range-text-muted[_ngcontent-%COMP%]{display:block}[_nghost-%COMP%] .date-range-placeholder[_ngcontent-%COMP%]{flex:1;font-size:.875rem;color:#0006}[_nghost-%COMP%] .date-range-actions[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px;flex-shrink:0}[_nghost-%COMP%] .date-range-icon[_ngcontent-%COMP%]{color:#0009;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] .date-range-clear-btn[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:#0009}[_nghost-%COMP%] .date-range-clear-btn[_ngcontent-%COMP%]:hover{background-color:#00000014}[_nghost-%COMP%] .date-range-clear-btn[_ngcontent-%COMP%]:focus-visible{outline:2px solid #1976d2;outline-offset:2px}.mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]{border:none;border-radius:0;padding:0;box-shadow:none}.mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:transparent;box-shadow:none}.mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%], .mat-mdc-form-field [_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%], [hide-default-styles][_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}.mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field [_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:hover, .mat-mdc-form-field[_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:focus-within, .mat-mdc-form-field [_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:focus-within, [hide-default-styles][_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:hover, [hide-default-styles][_nghost-%COMP%] .date-range-container[_ngcontent-%COMP%]:focus-within{border-color:transparent!important;box-shadow:none!important}"], changeDetection: 0 }); }
619
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
620
+ 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: [
621
+ provideTablerIcons({ IconCalendarDue, IconX }),
622
+ {
623
+ provide: NG_VALUE_ACCESSOR,
624
+ useExisting: forwardRef(() => DatePickerComponent),
625
+ multi: true
626
+ },
627
+ {
628
+ provide: MatFormFieldControl,
629
+ useExisting: forwardRef(() => DatePickerComponent)
630
+ }
631
+ ], 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 }); }
1046
632
  }
1047
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatePickerComponent, [{
1048
- type: Component,
1049
- args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, DatePipe, MatDialogModule], providers: [
1050
- provideTablerIcons({ IconCalendarDue, IconX }),
1051
- {
1052
- provide: NG_VALUE_ACCESSOR,
1053
- useExisting: forwardRef(() => DatePickerComponent),
1054
- multi: true
1055
- },
1056
- {
1057
- provide: MatFormFieldControl,
1058
- useExisting: forwardRef(() => DatePickerComponent)
1059
- }
1060
- ], template: "<div\r\n #dateRangeButton\r\n [attr.id]=\"id\"\r\n [attr.aria-label]=\"'\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4'\"\r\n [attr.aria-disabled]=\"disabled\"\r\n (click)=\"!disabled && openDateDialogSelector()\"\r\n (keydown.enter)=\"!disabled && openDateDialogSelector()\"\r\n (keydown.space)=\"!disabled && openDateDialogSelector()\"\r\n tabindex=\"0\"\r\n [attr.role]=\"'button'\"\r\n class=\"date-range-container\"\r\n>\r\n @if (selectedDateRange()) {\r\n <div class=\"date-range-content\">\r\n <div class=\"date-range-primary\">\r\n {{ selectedDateRange()?.start | date: dateFormat }}\r\n </div>\r\n <div class=\"date-range-secondary\">\r\n {{ selectedDateRange()?.end | date: dateFormat }}\r\n </div>\r\n </div>\r\n } @else if (placeholder) {\r\n <span class=\"date-range-placeholder\">{{ placeholder }}</span>\r\n } @else {\r\n <div class=\"date-range-content\"></div>\r\n }\r\n\r\n <div class=\"date-range-actions\">\r\n <i-tabler name=\"calendar-due\" strokeWidth=\"2px\" size=\"18px\" class=\"date-range-icon\" />\r\n\r\n @if (selectedDateRange()) {\r\n <button\r\n (click)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n type=\"button\"\r\n class=\"date-range-clear-btn\"\r\n [attr.aria-label]=\"'\u6E05\u9664\u65E5\u671F\u9009\u62E9'\"\r\n tabindex=\"0\"\r\n (keydown.enter)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n (keydown.space)=\"selectedDateRange.set(undefined); $event.stopPropagation()\"\r\n [attr.role]=\"'button'\"\r\n >\r\n <i-tabler name=\"x\" strokeWidth=\"2.5px\" size=\"18px\" class=\"date-range-icon\" />\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}:host .date-range-container{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background-color:var(--mat-sys-surface-container-lowest);cursor:pointer;transition:border-color .2s ease}:host .date-range-container:hover{border-color:#0000003d}:host .date-range-container:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}:host .date-range-container[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}:host .date-range-content{flex:1;min-width:0}:host .date-range-primary{font-size:.875rem;font-weight:500;line-height:1.5;color:#000000de;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-secondary{font-size:.75rem;line-height:1.5;color:#0009;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .date-range-text,:host .date-range-text-muted{display:block}:host .date-range-placeholder{flex:1;font-size:.875rem;color:#0006}:host .date-range-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}:host .date-range-icon{color:#0009;display:flex;align-items:center;justify-content:center}:host .date-range-clear-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:#0009}:host .date-range-clear-btn:hover{background-color:#00000014}:host .date-range-clear-btn:focus-visible{outline:2px solid #1976d2;outline-offset:2px}:host(.mat-mdc-form-field) .date-range-container{border:none;border-radius:0;padding:0;box-shadow:none}:host(.mat-mdc-form-field) .date-range-container:hover,:host(.mat-mdc-form-field) .date-range-container:focus-within{border-color:transparent;box-shadow:none}:host-context(.mat-mdc-form-field) .date-range-container,:host([hide-default-styles]) .date-range-container{border:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important}:host-context(.mat-mdc-form-field) .date-range-container:hover,:host-context(.mat-mdc-form-field) .date-range-container:focus-within,:host([hide-default-styles]) .date-range-container:hover,:host([hide-default-styles]) .date-range-container:focus-within{border-color:transparent!important;box-shadow:none!important}\n"] }]
1061
- }], () => [], { dateRangeButton: [{
1062
- type: ViewChild,
1063
- args: ['dateRangeButton']
1064
- }], required: [{
1065
- type: Input
1066
- }], disabled: [{
1067
- type: Input
1068
- }], dateFormat: [{
1069
- type: Input
1070
- }], valueFormat: [{
1071
- type: Input
1072
- }], dateTimePicker: [{
1073
- type: Input
1074
- }], placeholder: [{
1075
- type: Input
1076
- }], 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"] }] }); })();
1077
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatePickerComponent, { className: "DatePickerComponent", filePath: "lib/date-picker/date-picker.component.ts", lineNumber: 37 }); })();
633
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
634
+ type: Component,
635
+ args: [{ selector: 'date-time-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TablerIconComponent, MatDatepickerModule, DatePipe, MatDialogModule], providers: [
636
+ provideTablerIcons({ IconCalendarDue, IconX }),
637
+ {
638
+ provide: NG_VALUE_ACCESSOR,
639
+ useExisting: forwardRef(() => DatePickerComponent),
640
+ multi: true
641
+ },
642
+ {
643
+ provide: MatFormFieldControl,
644
+ useExisting: forwardRef(() => DatePickerComponent)
645
+ }
646
+ ], 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"] }]
647
+ }], ctorParameters: () => [], propDecorators: { dateRangeButton: [{
648
+ type: ViewChild,
649
+ args: ['dateRangeButton']
650
+ }], required: [{
651
+ type: Input
652
+ }], disabled: [{
653
+ type: Input
654
+ }], dateFormat: [{
655
+ type: Input
656
+ }], valueFormat: [{
657
+ type: Input
658
+ }], dateTimePicker: [{
659
+ type: Input
660
+ }], placeholder: [{
661
+ type: Input
662
+ }], 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"] }] } });
1078
663
 
1079
664
  class SmartDialogService {
1080
665
  constructor() {
@@ -1179,13 +764,13 @@ class SmartDialogService {
1179
764
  this.ref = null;
1180
765
  this.data = null;
1181
766
  }
1182
- static { this.ɵfac = function SmartDialogService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SmartDialogService)(); }; }
1183
- static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SmartDialogService, factory: SmartDialogService.ɵfac, providedIn: 'root' }); }
767
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
768
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, providedIn: 'root' }); }
1184
769
  }
1185
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartDialogService, [{
1186
- type: Injectable,
1187
- args: [{ providedIn: 'root' }]
1188
- }], null, null); })();
770
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SmartDialogService, decorators: [{
771
+ type: Injectable,
772
+ args: [{ providedIn: 'root' }]
773
+ }] });
1189
774
  class SmartDialogRef {
1190
775
  constructor(ref) {
1191
776
  this.ref = ref;