@luoxiao123/angular-material-date-time-range-picker 21.0.0
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.
- package/LICENSE +21 -0
- package/README.md +324 -0
- package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs +1219 -0
- package/fesm2022/luoxiao123-angular-material-date-time-range-picker.mjs.map +1 -0
- package/package.json +49 -0
- package/types/luoxiao123-angular-material-date-time-range-picker.d.ts +155 -0
|
@@ -0,0 +1,1219 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, model, output, ChangeDetectionStrategy, Component, input, ChangeDetectorRef, signal, ElementRef, DestroyRef, effect, forwardRef, Input, ViewChild, Injectable } from '@angular/core';
|
|
3
|
+
import { Subject, take, tap } from 'rxjs';
|
|
4
|
+
import { NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
|
+
import * as i1$1 from '@angular/material/datepicker';
|
|
7
|
+
import { MatDatepickerModule, MatRangeDateSelectionModel, DateRange, MatCalendar, DefaultMatCalendarRangeStrategy } from '@angular/material/datepicker';
|
|
8
|
+
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
9
|
+
import { TablerIconComponent, provideTablerIcons } from '@luoxiao123/angular-tabler-icons';
|
|
10
|
+
import { IconClock, IconX, IconCalendarDue, IconInfoCircle } from '@luoxiao123/angular-tabler-icons/icons';
|
|
11
|
+
import * as i2 from '@angular/forms';
|
|
12
|
+
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
13
|
+
import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
|
|
14
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
15
|
+
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
16
|
+
import { MatCheckbox } from '@angular/material/checkbox';
|
|
17
|
+
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
18
|
+
import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
|
|
19
|
+
import * as i1 from '@angular/material/button';
|
|
20
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
21
|
+
import * as i1$2 from '@angular/cdk/bidi';
|
|
22
|
+
import { MatBottomSheet } from '@angular/material/bottom-sheet';
|
|
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
|
+
class Container {
|
|
129
|
+
constructor() {
|
|
130
|
+
this.#breakpoints = inject(BreakpointObserver);
|
|
131
|
+
this.isMobile = this.#breakpoints.isMatched([Breakpoints.Handset, Breakpoints.Tablet]);
|
|
132
|
+
this.hasHeader = model(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
|
|
133
|
+
this.hasFooter = model(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
|
|
134
|
+
this.headerTitle = model('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : []));
|
|
135
|
+
this.headerExtraContent = model(...(ngDevMode ? [undefined, { debugName: "headerExtraContent" }] : []));
|
|
136
|
+
this.footerExtraContent = model(...(ngDevMode ? [undefined, { debugName: "footerExtraContent" }] : []));
|
|
137
|
+
this.hasDismiss = model(true, ...(ngDevMode ? [{ debugName: "hasDismiss" }] : []));
|
|
138
|
+
this.hasSubmit = model(true, ...(ngDevMode ? [{ debugName: "hasSubmit" }] : []));
|
|
139
|
+
this.submitTitle = model('Save', ...(ngDevMode ? [{ debugName: "submitTitle" }] : []));
|
|
140
|
+
this.submitBg = model('', ...(ngDevMode ? [{ debugName: "submitBg" }] : []));
|
|
141
|
+
this.submitColor = model('', ...(ngDevMode ? [{ debugName: "submitColor" }] : []));
|
|
142
|
+
this.submitTitleColor = model('', ...(ngDevMode ? [{ debugName: "submitTitleColor" }] : []));
|
|
143
|
+
this.disabledSubmit = model(false, ...(ngDevMode ? [{ debugName: "disabledSubmit" }] : []));
|
|
144
|
+
this.hasSecondaryButton = model(false, ...(ngDevMode ? [{ debugName: "hasSecondaryButton" }] : []));
|
|
145
|
+
this.secondaryButtonTitle = model('', ...(ngDevMode ? [{ debugName: "secondaryButtonTitle" }] : []));
|
|
146
|
+
this.secondaryButtonBg = model('', ...(ngDevMode ? [{ debugName: "secondaryButtonBg" }] : []));
|
|
147
|
+
this.secondaryButtonColor = model('', ...(ngDevMode ? [{ debugName: "secondaryButtonColor" }] : []));
|
|
148
|
+
this.secondaryButtonTitleColor = model('', ...(ngDevMode ? [{ debugName: "secondaryButtonTitleColor" }] : []));
|
|
149
|
+
this.disabledSecondaryButton = model(false, ...(ngDevMode ? [{ debugName: "disabledSecondaryButton" }] : []));
|
|
150
|
+
this.dismiss = output();
|
|
151
|
+
this.submit = output();
|
|
152
|
+
this.secondaryButton = output();
|
|
153
|
+
}
|
|
154
|
+
#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 }); }
|
|
171
|
+
}
|
|
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 }); })();
|
|
177
|
+
|
|
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
|
+
class DateTimeInputComponent {
|
|
201
|
+
constructor() {
|
|
202
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
203
|
+
this.dateValue = input(null, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
|
|
204
|
+
this.hourValue = input(null, ...(ngDevMode ? [{ debugName: "hourValue" }] : []));
|
|
205
|
+
this.minuteValue = input(null, ...(ngDevMode ? [{ debugName: "minuteValue" }] : []));
|
|
206
|
+
this.hours = input([], ...(ngDevMode ? [{ debugName: "hours" }] : []));
|
|
207
|
+
this.minutes = input([], ...(ngDevMode ? [{ debugName: "minutes" }] : []));
|
|
208
|
+
this.dateChange = output();
|
|
209
|
+
this.hourChange = output();
|
|
210
|
+
this.minuteChange = output();
|
|
211
|
+
this.timeChange = output();
|
|
212
|
+
}
|
|
213
|
+
onDateChange(value) {
|
|
214
|
+
this.dateChange.emit(value);
|
|
215
|
+
}
|
|
216
|
+
onHourChange(value) {
|
|
217
|
+
this.hourChange.emit(value);
|
|
218
|
+
this.timeChange.emit();
|
|
219
|
+
}
|
|
220
|
+
onMinuteChange(value) {
|
|
221
|
+
this.minuteChange.emit(value);
|
|
222
|
+
this.timeChange.emit();
|
|
223
|
+
}
|
|
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 }); }
|
|
276
|
+
}
|
|
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 }); })();
|
|
282
|
+
|
|
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
|
+
class DateSelector {
|
|
396
|
+
constructor() {
|
|
397
|
+
this.#cdr = inject(ChangeDetectorRef);
|
|
398
|
+
this.#dialogRef = inject((MatDialogRef));
|
|
399
|
+
this.#data = inject(MAT_DIALOG_DATA);
|
|
400
|
+
this.#selectionModel = inject((MatRangeDateSelectionModel));
|
|
401
|
+
this.data = this.#data;
|
|
402
|
+
// 从 data 中获取格式，如果没有则使用默认值
|
|
403
|
+
this.dateFormat = this.data?.dateFormat ?? 'yyyy年M月d日 HH:mm';
|
|
404
|
+
this.valueFormat = this.data?.valueFormat ?? 'yyyy-MM-dd HH:mm:ss';
|
|
405
|
+
this.startDate = model('', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
|
|
406
|
+
this.endDate = model('', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
|
|
407
|
+
this.startHour = model(null, ...(ngDevMode ? [{ debugName: "startHour" }] : []));
|
|
408
|
+
this.startMinute = model(null, ...(ngDevMode ? [{ debugName: "startMinute" }] : []));
|
|
409
|
+
this.endHour = model(null, ...(ngDevMode ? [{ debugName: "endHour" }] : []));
|
|
410
|
+
this.endMinute = model(null, ...(ngDevMode ? [{ debugName: "endMinute" }] : []));
|
|
411
|
+
this.future = model(false, ...(ngDevMode ? [{ debugName: "future" }] : []));
|
|
412
|
+
this.optionalFeatures = model(true, ...(ngDevMode ? [{ debugName: "optionalFeatures" }] : []));
|
|
413
|
+
this.relativeDurations = [
|
|
414
|
+
['最近5分钟', '-5minutes'],
|
|
415
|
+
['最近15分钟', '-15minutes'],
|
|
416
|
+
['最近30分钟', '-30minutes'],
|
|
417
|
+
['最近1小时', '-1hours'],
|
|
418
|
+
['最近3小时', '-3hours'],
|
|
419
|
+
['最近6小时', '-6hours'],
|
|
420
|
+
['最近12小时', '-12hours'],
|
|
421
|
+
['最近24小时', '-24hours'],
|
|
422
|
+
['最近2天', '-2days'],
|
|
423
|
+
['最近7天', '-7days'],
|
|
424
|
+
['最近30天', '-30days'],
|
|
425
|
+
['最近90天', '-90days'],
|
|
426
|
+
['最近6个月', '-6months'],
|
|
427
|
+
['最近1年', '-1years'],
|
|
428
|
+
['最近2年', '-2years'],
|
|
429
|
+
['最近5年', '-5years'],
|
|
430
|
+
['上周', '-1weeks'],
|
|
431
|
+
['上个月', '-1months'],
|
|
432
|
+
['去年', '-1years']
|
|
433
|
+
];
|
|
434
|
+
this.fixedDays = [
|
|
435
|
+
['昨天', '-1days/day'],
|
|
436
|
+
['前天', '-2days/day'],
|
|
437
|
+
['上周同一天', '-7days/day'],
|
|
438
|
+
['上周', '-1weeks/week'],
|
|
439
|
+
['上个月', '-1months/month'],
|
|
440
|
+
['去年', '-1years/year']
|
|
441
|
+
];
|
|
442
|
+
this.currentPeriods = [
|
|
443
|
+
['今天', 'today', 'today'],
|
|
444
|
+
['今天至今', 'today', 'now'],
|
|
445
|
+
['本周至今', 'thisweek', 'now'],
|
|
446
|
+
['本月至今', 'thismonth', 'now'],
|
|
447
|
+
['今年至今', 'thisyear', 'now']
|
|
448
|
+
];
|
|
449
|
+
this.timeRanges = signal([
|
|
450
|
+
...this.relativeDurations.map(([label, offset]) => ({
|
|
451
|
+
label,
|
|
452
|
+
start: `offset:${offset}`,
|
|
453
|
+
end: 'offset:now'
|
|
454
|
+
})),
|
|
455
|
+
...this.fixedDays.map(([label, point]) => ({
|
|
456
|
+
label,
|
|
457
|
+
start: `offset:${point}`,
|
|
458
|
+
end: `offset:${point}`
|
|
459
|
+
})),
|
|
460
|
+
...this.currentPeriods.map(([label, start, end]) => ({
|
|
461
|
+
label,
|
|
462
|
+
start: `offset:${start}`,
|
|
463
|
+
end: `offset:${end}`
|
|
464
|
+
}))
|
|
465
|
+
], ...(ngDevMode ? [{ debugName: "timeRanges" }] : []));
|
|
466
|
+
this.selectedTimeRange = model(undefined, ...(ngDevMode ? [{ debugName: "selectedTimeRange" }] : []));
|
|
467
|
+
this.allDays = model(true, ...(ngDevMode ? [{ debugName: "allDays" }] : []));
|
|
468
|
+
this.weekdays = model([
|
|
469
|
+
{ label: '六', data: 'Saturday', value: 0, selected: false },
|
|
470
|
+
{ label: '日', data: 'Sunday', value: 1, selected: false },
|
|
471
|
+
{ label: '一', data: 'Monday', value: 2, selected: false },
|
|
472
|
+
{ label: '二', data: 'Tuesday', value: 3, selected: false },
|
|
473
|
+
{ label: '三', data: 'Wednesday', value: 4, selected: false },
|
|
474
|
+
{ label: '四', data: 'Thursday', value: 5, selected: false },
|
|
475
|
+
{ label: '五', data: 'Friday', value: 6, selected: false }
|
|
476
|
+
], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
|
|
477
|
+
this.allHours = model(true, ...(ngDevMode ? [{ debugName: "allHours" }] : []));
|
|
478
|
+
this.hourTypes = signal([
|
|
479
|
+
{ label: '全部', value: 0, selected: false },
|
|
480
|
+
{ label: '忙碌时间', value: 1, selected: false },
|
|
481
|
+
{ label: '自定义', value: 2, selected: true }
|
|
482
|
+
], ...(ngDevMode ? [{ debugName: "hourTypes" }] : []));
|
|
483
|
+
this.selectedDateRange = null;
|
|
484
|
+
this.now = new Date();
|
|
485
|
+
this.selectingStart = true;
|
|
486
|
+
}
|
|
487
|
+
#cdr;
|
|
488
|
+
#dialogRef;
|
|
489
|
+
#data;
|
|
490
|
+
#selectionModel;
|
|
491
|
+
ngOnInit() {
|
|
492
|
+
if (this.data) {
|
|
493
|
+
this.optionalFeatures.set(this.data.optionalFeatures);
|
|
494
|
+
this.future.set(this.data.future);
|
|
495
|
+
const picker = this.data.dateTimePicker;
|
|
496
|
+
if (picker) {
|
|
497
|
+
if (picker.start && picker.end) {
|
|
498
|
+
this.selectedDateRange = {
|
|
499
|
+
start: new Date(picker.start),
|
|
500
|
+
end: new Date(picker.end)
|
|
501
|
+
};
|
|
502
|
+
// 初始化时间值
|
|
503
|
+
const startDate = new Date(picker.start);
|
|
504
|
+
const endDate = new Date(picker.end);
|
|
505
|
+
this.startHour.set(startDate.getHours());
|
|
506
|
+
this.startMinute.set(startDate.getMinutes());
|
|
507
|
+
this.endHour.set(endDate.getHours());
|
|
508
|
+
this.endMinute.set(endDate.getMinutes());
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
if (this.future()) {
|
|
512
|
+
const futureOffsets = [
|
|
513
|
+
{ label: '未来1天', start: 'offset:now', end: 'offset:+1days' },
|
|
514
|
+
{ label: '未来1周', start: 'offset:now', end: 'offset:+1weeks' },
|
|
515
|
+
{ label: '未来1月', start: 'offset:now', end: 'offset:+1months' },
|
|
516
|
+
{ label: '未来3月', start: 'offset:now', end: 'offset:+3months' }
|
|
517
|
+
];
|
|
518
|
+
this.timeRanges.update(ranges => [...ranges, ...futureOffsets]);
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
else {
|
|
522
|
+
this.selectTimeRange(this.timeRanges()[5]);
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
selectTimeRange(timeRange) {
|
|
526
|
+
this.selectedTimeRange.set(timeRange);
|
|
527
|
+
const { startDate, endDate } = this.processTimeRange(timeRange);
|
|
528
|
+
const start = new Date(startDate);
|
|
529
|
+
const end = new Date(endDate);
|
|
530
|
+
this.startDate.set(start.toISOString());
|
|
531
|
+
this.endDate.set(end.toISOString());
|
|
532
|
+
this.startHour.set(start.getHours());
|
|
533
|
+
this.startMinute.set(start.getMinutes());
|
|
534
|
+
this.endHour.set(end.getHours());
|
|
535
|
+
this.endMinute.set(end.getMinutes());
|
|
536
|
+
this.selectedDateRange = new DateRange(start, end);
|
|
537
|
+
}
|
|
538
|
+
processTimeRange(timeRange) {
|
|
539
|
+
const now = new Date();
|
|
540
|
+
const parseTime = (time) => {
|
|
541
|
+
if (!time)
|
|
542
|
+
return new Date(now);
|
|
543
|
+
if (time.startsWith('offset:')) {
|
|
544
|
+
const offset = time.replace('offset:', '').trim();
|
|
545
|
+
if (offset === 'now')
|
|
546
|
+
return new Date(now);
|
|
547
|
+
const regex = /([+-]?)(\d+)(months?|days?|years?|weeks?|hours?|minutes?)/i;
|
|
548
|
+
const match = regex.exec(offset);
|
|
549
|
+
if (!match)
|
|
550
|
+
return new Date(now);
|
|
551
|
+
const sign = match[1] === '-' ? -1 : 1;
|
|
552
|
+
const value = parseInt(match[2], 10) * sign;
|
|
553
|
+
const unit = match[3].toLowerCase();
|
|
554
|
+
const result = new Date(now);
|
|
555
|
+
switch (unit) {
|
|
556
|
+
case 'minutes':
|
|
557
|
+
case 'minute':
|
|
558
|
+
result.setMinutes(result.getMinutes() + value);
|
|
559
|
+
break;
|
|
560
|
+
case 'hours':
|
|
561
|
+
case 'hour':
|
|
562
|
+
result.setHours(result.getHours() + value);
|
|
563
|
+
break;
|
|
564
|
+
case 'days':
|
|
565
|
+
case 'day':
|
|
566
|
+
result.setDate(result.getDate() + value);
|
|
567
|
+
break;
|
|
568
|
+
case 'weeks':
|
|
569
|
+
case 'week':
|
|
570
|
+
result.setDate(result.getDate() + value * 7);
|
|
571
|
+
break;
|
|
572
|
+
case 'months':
|
|
573
|
+
case 'month':
|
|
574
|
+
result.setMonth(result.getMonth() + value);
|
|
575
|
+
break;
|
|
576
|
+
case 'years':
|
|
577
|
+
case 'year':
|
|
578
|
+
result.setFullYear(result.getFullYear() + value);
|
|
579
|
+
break;
|
|
580
|
+
}
|
|
581
|
+
return result;
|
|
582
|
+
}
|
|
583
|
+
return new Date(time);
|
|
584
|
+
};
|
|
585
|
+
const startDate = timeRange.start ? parseTime(timeRange.start) : null;
|
|
586
|
+
const endDate = timeRange.end ? parseTime(timeRange.end) : now;
|
|
587
|
+
return {
|
|
588
|
+
startDate: (startDate ?? endDate).toISOString(),
|
|
589
|
+
endDate: endDate.toISOString()
|
|
590
|
+
};
|
|
591
|
+
}
|
|
592
|
+
changeDatePart(part, date) {
|
|
593
|
+
if (!date)
|
|
594
|
+
return;
|
|
595
|
+
let dateObj;
|
|
596
|
+
if (typeof date === 'string') {
|
|
597
|
+
// 如果是字符串，尝试解析它
|
|
598
|
+
dateObj = new Date(date);
|
|
599
|
+
// 如果不能解析为有效日期，返回
|
|
600
|
+
if (isNaN(dateObj.getTime()))
|
|
601
|
+
return;
|
|
602
|
+
}
|
|
603
|
+
else {
|
|
604
|
+
dateObj = new Date(date);
|
|
605
|
+
}
|
|
606
|
+
// 保持原有的时间部分（只修改日期部分）
|
|
607
|
+
if (part === 'start') {
|
|
608
|
+
const currentStart = this.selectedDateRange?.start;
|
|
609
|
+
if (currentStart) {
|
|
610
|
+
dateObj.setHours(currentStart.getHours(), currentStart.getMinutes(), currentStart.getSeconds());
|
|
611
|
+
}
|
|
612
|
+
else {
|
|
613
|
+
dateObj.setHours(0, 0, 0, 0);
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
else {
|
|
617
|
+
const currentEnd = this.selectedDateRange?.end;
|
|
618
|
+
if (currentEnd) {
|
|
619
|
+
dateObj.setHours(currentEnd.getHours(), currentEnd.getMinutes(), currentEnd.getSeconds());
|
|
620
|
+
}
|
|
621
|
+
else {
|
|
622
|
+
dateObj.setHours(0, 0, 0, 0);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
this.selectedTimeRange.set(undefined);
|
|
626
|
+
let start = this.selectedDateRange?.start ?? null;
|
|
627
|
+
let end = this.selectedDateRange?.end ?? null;
|
|
628
|
+
if (part === 'start') {
|
|
629
|
+
start = dateObj;
|
|
630
|
+
}
|
|
631
|
+
else {
|
|
632
|
+
end = dateObj;
|
|
633
|
+
}
|
|
634
|
+
if (start && end && start.getTime() > end.getTime()) {
|
|
635
|
+
[start, end] = [end, start];
|
|
636
|
+
}
|
|
637
|
+
const range = new DateRange(start, end);
|
|
638
|
+
this.selectedDateRange = range;
|
|
639
|
+
this.startDate.set(start?.toISOString() ?? '');
|
|
640
|
+
this.endDate.set(end?.toISOString() ?? '');
|
|
641
|
+
}
|
|
642
|
+
rangeChanged(selectedDate) {
|
|
643
|
+
if (!selectedDate)
|
|
644
|
+
return;
|
|
645
|
+
if (this.selectingStart) {
|
|
646
|
+
this.startDate.set(selectedDate.toISOString());
|
|
647
|
+
this.endDate.set('');
|
|
648
|
+
this.startHour.set(selectedDate.getHours());
|
|
649
|
+
this.startMinute.set(selectedDate.getMinutes());
|
|
650
|
+
this.endHour.set(null);
|
|
651
|
+
this.endMinute.set(null);
|
|
652
|
+
this.selectedTimeRange.set(undefined);
|
|
653
|
+
this.selectedDateRange = null;
|
|
654
|
+
this.#selectionModel.updateSelection(new DateRange(selectedDate, null), this);
|
|
655
|
+
this.selectingStart = false;
|
|
656
|
+
}
|
|
657
|
+
else {
|
|
658
|
+
const start = this.#selectionModel.selection.start;
|
|
659
|
+
if (!start)
|
|
660
|
+
return;
|
|
661
|
+
const range = start.toDateString() === selectedDate.toDateString()
|
|
662
|
+
? new DateRange(start, start)
|
|
663
|
+
: new DateRange(start < selectedDate ? start : selectedDate, start < selectedDate ? selectedDate : start);
|
|
664
|
+
this.updateSelection(range.start, range.end);
|
|
665
|
+
this.selectingStart = true;
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
updateSelection(start, end) {
|
|
669
|
+
const range = new DateRange(start, end);
|
|
670
|
+
this.selectedDateRange = range;
|
|
671
|
+
this.#selectionModel.updateSelection(range, this);
|
|
672
|
+
this.startDate.set(start.toISOString());
|
|
673
|
+
this.endDate.set(end.toISOString());
|
|
674
|
+
this.startHour.set(start.getHours());
|
|
675
|
+
this.startMinute.set(start.getMinutes());
|
|
676
|
+
this.endHour.set(end.getHours());
|
|
677
|
+
this.endMinute.set(end.getMinutes());
|
|
678
|
+
}
|
|
679
|
+
submit() {
|
|
680
|
+
const start = new Date(this.selectedDateRange?.start ?? '');
|
|
681
|
+
const end = new Date(this.selectedDateRange?.end ?? '');
|
|
682
|
+
const startISO = start.toISOString();
|
|
683
|
+
const endISO = end.toISOString();
|
|
684
|
+
const result = {
|
|
685
|
+
start: startISO,
|
|
686
|
+
end: endISO
|
|
687
|
+
};
|
|
688
|
+
this.data = { ...this.data, dateTimePicker: result };
|
|
689
|
+
this.#dialogRef.close(this.data);
|
|
690
|
+
}
|
|
691
|
+
dismiss() {
|
|
692
|
+
this.#dialogRef.close(undefined);
|
|
693
|
+
}
|
|
694
|
+
getHours() {
|
|
695
|
+
return Array.from({ length: 24 }, (_, i) => i);
|
|
696
|
+
}
|
|
697
|
+
getMinutes() {
|
|
698
|
+
return Array.from({ length: 60 }, (_, i) => i);
|
|
699
|
+
}
|
|
700
|
+
updateStartTime() {
|
|
701
|
+
if (this.selectedDateRange?.start && this.startHour() !== null && this.startMinute() !== null) {
|
|
702
|
+
const startDate = new Date(this.selectedDateRange.start);
|
|
703
|
+
startDate.setHours(this.startHour() ?? 0, this.startMinute() ?? 0, 0, 0);
|
|
704
|
+
let endDate = this.selectedDateRange.end;
|
|
705
|
+
const range = new DateRange(startDate, endDate);
|
|
706
|
+
this.selectedDateRange = range;
|
|
707
|
+
this.#selectionModel.updateSelection(range, this);
|
|
708
|
+
this.startDate.set(startDate.toISOString());
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
updateEndTime() {
|
|
712
|
+
if (this.selectedDateRange?.end && this.endHour() !== null && this.endMinute() !== null) {
|
|
713
|
+
const endDate = new Date(this.selectedDateRange.end);
|
|
714
|
+
endDate.setHours(this.endHour() ?? 0, this.endMinute() ?? 0, 0, 0);
|
|
715
|
+
let startDate = this.selectedDateRange.start;
|
|
716
|
+
const range = new DateRange(startDate, endDate);
|
|
717
|
+
this.selectedDateRange = range;
|
|
718
|
+
this.#selectionModel.updateSelection(range, this);
|
|
719
|
+
this.endDate.set(endDate.toISOString());
|
|
720
|
+
}
|
|
721
|
+
}
|
|
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 }); }
|
|
773
|
+
}
|
|
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 }); })();
|
|
791
|
+
|
|
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
|
+
class DatePickerComponent {
|
|
833
|
+
#breakpoints;
|
|
834
|
+
#dialog;
|
|
835
|
+
#focusMonitor;
|
|
836
|
+
#elementRef;
|
|
837
|
+
#matFormField;
|
|
838
|
+
// 内部值存储：{start: string, end: string} 或 null/undefined
|
|
839
|
+
#internalValue;
|
|
840
|
+
#errorStateSignal;
|
|
841
|
+
#shouldLabelFloatSignal;
|
|
842
|
+
#focusedSignal;
|
|
843
|
+
#id;
|
|
844
|
+
constructor() {
|
|
845
|
+
this.#breakpoints = inject(BreakpointObserver);
|
|
846
|
+
this.#dialog = inject(MatDialog);
|
|
847
|
+
this.#focusMonitor = inject(FocusMonitor);
|
|
848
|
+
this.#elementRef = inject(ElementRef);
|
|
849
|
+
this.#matFormField = inject(MatFormField, { optional: true });
|
|
850
|
+
this.destroyRef = inject(DestroyRef);
|
|
851
|
+
this.ngControl = null;
|
|
852
|
+
this.required = false;
|
|
853
|
+
this.disabled = false;
|
|
854
|
+
this.dateFormat = 'yyyy年M月d日 HH:mm';
|
|
855
|
+
this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
|
|
856
|
+
this.placeholder = '';
|
|
857
|
+
this.optionalFeatures = input(true, ...(ngDevMode ? [{ debugName: "optionalFeatures" }] : []));
|
|
858
|
+
this.future = input(false, ...(ngDevMode ? [{ debugName: "future" }] : []));
|
|
859
|
+
this.selectedDateRange = model(...(ngDevMode ? [undefined, { debugName: "selectedDateRange" }] : []));
|
|
860
|
+
this.toggle = signal(false, ...(ngDevMode ? [{ debugName: "toggle" }] : []));
|
|
861
|
+
this.selectionChange = output();
|
|
862
|
+
// 内部值存储：{start: string, end: string} 或 null/undefined
|
|
863
|
+
this.#internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "#internalValue" }] : []));
|
|
864
|
+
// MatFormFieldControl 属性
|
|
865
|
+
this.stateChanges = new Subject();
|
|
866
|
+
this.#errorStateSignal = signal(false, ...(ngDevMode ? [{ debugName: "#errorStateSignal" }] : []));
|
|
867
|
+
this.#shouldLabelFloatSignal = signal(false, ...(ngDevMode ? [{ debugName: "#shouldLabelFloatSignal" }] : []));
|
|
868
|
+
this.#focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "#focusedSignal" }] : []));
|
|
869
|
+
this.#id = signal(`date-time-picker-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "#id" }] : []));
|
|
870
|
+
this.ref = effect(() => {
|
|
871
|
+
const dateRange = this.selectedDateRange();
|
|
872
|
+
// 触发 MatFormField 更新
|
|
873
|
+
this.stateChanges.next();
|
|
874
|
+
this.#shouldLabelFloatSignal.set(!!dateRange);
|
|
875
|
+
// 通知 ControlValueAccessor（当通过 model 更新时）
|
|
876
|
+
if (dateRange && this.onChange) {
|
|
877
|
+
const value = this.#internalValue();
|
|
878
|
+
if (value) {
|
|
879
|
+
this.onChange(value);
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
}, ...(ngDevMode ? [{ debugName: "ref" }] : []));
|
|
883
|
+
// 监听 focus 事件
|
|
884
|
+
this.#focusMonitor
|
|
885
|
+
.monitor(this.#elementRef, true)
|
|
886
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
887
|
+
.subscribe(origin => {
|
|
888
|
+
const isFocused = !!origin;
|
|
889
|
+
this.#focusedSignal.set(isFocused);
|
|
890
|
+
this.stateChanges.next();
|
|
891
|
+
if (!isFocused) {
|
|
892
|
+
this.onTouched?.();
|
|
893
|
+
}
|
|
894
|
+
});
|
|
895
|
+
}
|
|
896
|
+
openDateDialogSelector() {
|
|
897
|
+
const isMobile = this.#breakpoints.isMatched([Breakpoints.Handset, Breakpoints.Tablet]);
|
|
898
|
+
const currentValue = this.#internalValue();
|
|
899
|
+
const data = {
|
|
900
|
+
optionalFeatures: this.optionalFeatures(),
|
|
901
|
+
dateTimePicker: currentValue ?? undefined,
|
|
902
|
+
future: this.future(),
|
|
903
|
+
dateFormat: this.dateFormat,
|
|
904
|
+
valueFormat: this.valueFormat
|
|
905
|
+
};
|
|
906
|
+
const dialogRef = this.#dialog.open(DateSelector, {
|
|
907
|
+
width: isMobile ? '100%' : '850px',
|
|
908
|
+
height: isMobile ? '90vh' : '520px',
|
|
909
|
+
maxWidth: '100vw',
|
|
910
|
+
maxHeight: '100vh',
|
|
911
|
+
data,
|
|
912
|
+
disableClose: false,
|
|
913
|
+
panelClass: 'date-time-picker-dialog'
|
|
914
|
+
});
|
|
915
|
+
dialogRef
|
|
916
|
+
.afterOpened()
|
|
917
|
+
.pipe(take(1), takeUntilDestroyed(this.destroyRef), tap(() => this.toggle.update((status) => !status)))
|
|
918
|
+
.subscribe();
|
|
919
|
+
dialogRef
|
|
920
|
+
.afterClosed()
|
|
921
|
+
.pipe(take(1), takeUntilDestroyed(this.destroyRef), tap((result) => {
|
|
922
|
+
this.toggle.update((status) => !status);
|
|
923
|
+
if (result && result.dateTimePicker) {
|
|
924
|
+
const rangeValue = {
|
|
925
|
+
start: result.dateTimePicker.start,
|
|
926
|
+
end: result.dateTimePicker.end
|
|
927
|
+
};
|
|
928
|
+
this.#internalValue.set(rangeValue);
|
|
929
|
+
// 更新显示用的日期范围
|
|
930
|
+
this.selectedDateRange.set(new DateRange(new Date(result.dateTimePicker.start), new Date(result.dateTimePicker.end)));
|
|
931
|
+
// 发出用户手动选择的值
|
|
932
|
+
this.selectionChange.emit(rangeValue);
|
|
933
|
+
// 通知表单控件
|
|
934
|
+
if (this.onChange) {
|
|
935
|
+
this.onChange(rangeValue);
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
this.onTouched?.();
|
|
939
|
+
}))
|
|
940
|
+
.subscribe();
|
|
941
|
+
}
|
|
942
|
+
// ControlValueAccessor 实现
|
|
943
|
+
writeValue(value) {
|
|
944
|
+
// 处理各种值类型：null, undefined, '', {start, end}
|
|
945
|
+
if (value === null || value === undefined || value === '') {
|
|
946
|
+
this.#internalValue.set(null);
|
|
947
|
+
this.selectedDateRange.set(undefined);
|
|
948
|
+
}
|
|
949
|
+
else if (typeof value === 'object' && value.start && value.end) {
|
|
950
|
+
this.#internalValue.set(value);
|
|
951
|
+
// 尝试转换为 Date 对象以显示在选择器中
|
|
952
|
+
try {
|
|
953
|
+
const startDate = new Date(value.start);
|
|
954
|
+
const endDate = new Date(value.end);
|
|
955
|
+
if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
|
|
956
|
+
this.selectedDateRange.set(new DateRange(startDate, endDate));
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
catch (e) {
|
|
960
|
+
console.warn('Failed to parse date values:', value);
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
registerOnChange(fn) {
|
|
965
|
+
this.onChange = fn;
|
|
966
|
+
}
|
|
967
|
+
registerOnTouched(fn) {
|
|
968
|
+
this.onTouched = fn;
|
|
969
|
+
}
|
|
970
|
+
setDisabledState(isDisabled) {
|
|
971
|
+
// 可以根据需要在这里处理禁用状态
|
|
972
|
+
}
|
|
973
|
+
// MatFormFieldControl 实现
|
|
974
|
+
get empty() {
|
|
975
|
+
return !this.#internalValue();
|
|
976
|
+
}
|
|
977
|
+
get shouldPlaceholderFloat() {
|
|
978
|
+
return this.#shouldLabelFloatSignal();
|
|
979
|
+
}
|
|
980
|
+
get focused() {
|
|
981
|
+
return this.#focusedSignal();
|
|
982
|
+
}
|
|
983
|
+
get errorState() {
|
|
984
|
+
return this.#errorStateSignal();
|
|
985
|
+
}
|
|
986
|
+
get shouldLabelFloat() {
|
|
987
|
+
return this.#shouldLabelFloatSignal();
|
|
988
|
+
}
|
|
989
|
+
get id() {
|
|
990
|
+
return this.#id();
|
|
991
|
+
}
|
|
992
|
+
set value(val) {
|
|
993
|
+
if (!val) {
|
|
994
|
+
this.#internalValue.set(null);
|
|
995
|
+
}
|
|
996
|
+
else {
|
|
997
|
+
this.#internalValue.set(val);
|
|
998
|
+
this.selectedDateRange.set(new DateRange(new Date(val.start), new Date(val.end)));
|
|
999
|
+
}
|
|
1000
|
+
this.stateChanges.next();
|
|
1001
|
+
}
|
|
1002
|
+
get value() {
|
|
1003
|
+
return this.#internalValue();
|
|
1004
|
+
}
|
|
1005
|
+
setDescribedByIds(ids) {
|
|
1006
|
+
// Material form field 使用此方法将错误 ID 传递给控件
|
|
1007
|
+
}
|
|
1008
|
+
onContainerClick(event) {
|
|
1009
|
+
if (event.target.tagName.toLowerCase() !== 'button') {
|
|
1010
|
+
this.dateRangeButton?.nativeElement.focus();
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
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 }); }
|
|
1046
|
+
}
|
|
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 }); })();
|
|
1078
|
+
|
|
1079
|
+
class SmartDialogService {
|
|
1080
|
+
constructor() {
|
|
1081
|
+
this.#dialog = inject(MatDialog);
|
|
1082
|
+
this.#bottomSheet = inject(MatBottomSheet);
|
|
1083
|
+
this.#breakpoints = inject(BreakpointObserver);
|
|
1084
|
+
this.ref = null;
|
|
1085
|
+
this.data = null;
|
|
1086
|
+
}
|
|
1087
|
+
#dialog;
|
|
1088
|
+
#bottomSheet;
|
|
1089
|
+
#breakpoints;
|
|
1090
|
+
open(component, config = {}) {
|
|
1091
|
+
const isMobile = this.#breakpoints.isMatched([
|
|
1092
|
+
Breakpoints.Handset,
|
|
1093
|
+
Breakpoints.Tablet
|
|
1094
|
+
]);
|
|
1095
|
+
const smartRef = new SmartDialogRef({});
|
|
1096
|
+
this.data = config.data;
|
|
1097
|
+
if (isMobile) {
|
|
1098
|
+
this.ref = this.#bottomSheet.open(component, {
|
|
1099
|
+
ariaLabel: 'Bottomsheet',
|
|
1100
|
+
ariaModal: true,
|
|
1101
|
+
autoFocus: false,
|
|
1102
|
+
data: config.data,
|
|
1103
|
+
panelClass: config.panelClass,
|
|
1104
|
+
disableClose: config.disableClose
|
|
1105
|
+
});
|
|
1106
|
+
Promise.resolve().then(() => {
|
|
1107
|
+
const hostElement = this.ref?.containerInstance?._elementRef?.nativeElement;
|
|
1108
|
+
const container = hostElement?.closest('.mat-bottom-sheet-container');
|
|
1109
|
+
if (container) {
|
|
1110
|
+
if (config.width)
|
|
1111
|
+
container.style.width = config.width;
|
|
1112
|
+
if (config.height)
|
|
1113
|
+
container.style.height = config.height;
|
|
1114
|
+
if (config.maxWidth)
|
|
1115
|
+
container.style.maxWidth = config.maxWidth;
|
|
1116
|
+
container.style.minWidth = 'unset';
|
|
1117
|
+
container.style.maxHeight = 'unset';
|
|
1118
|
+
container.style.borderTopLeftRadius = '1rem';
|
|
1119
|
+
container.style.borderTopRightRadius = '1rem';
|
|
1120
|
+
}
|
|
1121
|
+
if (hostElement) {
|
|
1122
|
+
if (config.width)
|
|
1123
|
+
hostElement.style.width = config.width;
|
|
1124
|
+
if (config.maxWidth)
|
|
1125
|
+
hostElement.style.maxWidth = config.maxWidth;
|
|
1126
|
+
if (config.height)
|
|
1127
|
+
hostElement.style.height = config.height;
|
|
1128
|
+
}
|
|
1129
|
+
});
|
|
1130
|
+
smartRef.ref = this.ref;
|
|
1131
|
+
}
|
|
1132
|
+
else {
|
|
1133
|
+
this.ref = this.#dialog.open(component, {
|
|
1134
|
+
data: config.data,
|
|
1135
|
+
ariaLabel: 'Dialog',
|
|
1136
|
+
ariaModal: true,
|
|
1137
|
+
autoFocus: false,
|
|
1138
|
+
panelClass: config.panelClass,
|
|
1139
|
+
disableClose: config.disableClose,
|
|
1140
|
+
width: config.width,
|
|
1141
|
+
height: config.height,
|
|
1142
|
+
maxWidth: config.maxWidth,
|
|
1143
|
+
});
|
|
1144
|
+
const hostElement = this.ref._containerInstance?._elementRef?.nativeElement;
|
|
1145
|
+
const container = hostElement?.closest('.mat-mdc-dialog-panel');
|
|
1146
|
+
if (container) {
|
|
1147
|
+
if (config.width)
|
|
1148
|
+
container.style.width = config.width;
|
|
1149
|
+
if (config.height)
|
|
1150
|
+
container.style.height = config.height;
|
|
1151
|
+
if (config.maxWidth) {
|
|
1152
|
+
container.style.maxWidth = config.maxWidth;
|
|
1153
|
+
}
|
|
1154
|
+
else {
|
|
1155
|
+
container.style.maxWidth = 'unset';
|
|
1156
|
+
}
|
|
1157
|
+
container.style.minWidth = 'unset';
|
|
1158
|
+
container.style.maxHeight = 'unset';
|
|
1159
|
+
}
|
|
1160
|
+
smartRef.ref = this.ref;
|
|
1161
|
+
}
|
|
1162
|
+
return smartRef;
|
|
1163
|
+
}
|
|
1164
|
+
getData() {
|
|
1165
|
+
return this.data;
|
|
1166
|
+
}
|
|
1167
|
+
close(result) {
|
|
1168
|
+
if (!this.ref)
|
|
1169
|
+
return;
|
|
1170
|
+
if ('close' in this.ref) {
|
|
1171
|
+
this.ref.close(result);
|
|
1172
|
+
}
|
|
1173
|
+
else {
|
|
1174
|
+
this.ref.dismiss(result);
|
|
1175
|
+
}
|
|
1176
|
+
this.clear();
|
|
1177
|
+
}
|
|
1178
|
+
clear() {
|
|
1179
|
+
this.ref = null;
|
|
1180
|
+
this.data = null;
|
|
1181
|
+
}
|
|
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' }); }
|
|
1184
|
+
}
|
|
1185
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartDialogService, [{
|
|
1186
|
+
type: Injectable,
|
|
1187
|
+
args: [{ providedIn: 'root' }]
|
|
1188
|
+
}], null, null); })();
|
|
1189
|
+
class SmartDialogRef {
|
|
1190
|
+
constructor(ref) {
|
|
1191
|
+
this.ref = ref;
|
|
1192
|
+
}
|
|
1193
|
+
close(result) {
|
|
1194
|
+
if ('close' in this.ref) {
|
|
1195
|
+
this.ref.close(result);
|
|
1196
|
+
}
|
|
1197
|
+
else {
|
|
1198
|
+
this.ref.dismiss(result);
|
|
1199
|
+
}
|
|
1200
|
+
}
|
|
1201
|
+
afterOpened() {
|
|
1202
|
+
return this.ref.afterOpened();
|
|
1203
|
+
}
|
|
1204
|
+
afterClosed() {
|
|
1205
|
+
if ('afterClosed' in this.ref) {
|
|
1206
|
+
return this.ref.afterClosed();
|
|
1207
|
+
}
|
|
1208
|
+
else {
|
|
1209
|
+
return this.ref.afterDismissed();
|
|
1210
|
+
}
|
|
1211
|
+
}
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1214
|
+
/**
|
|
1215
|
+
* Generated bundle index. Do not edit.
|
|
1216
|
+
*/
|
|
1217
|
+
|
|
1218
|
+
export { DatePickerComponent, DateSelector, SmartDialogRef, SmartDialogService };
|
|
1219
|
+
//# sourceMappingURL=luoxiao123-angular-material-date-time-range-picker.mjs.map
|