mis-crystal-design-system 14.0.66 → 14.0.67-test
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/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +15 -1
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +279 -65
- package/esm2020/radio-button/radio-button.component.mjs +5 -9
- package/esm2020/table/table.component.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +314 -64
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-radio-button.mjs +4 -8
- package/fesm2015/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +278 -64
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-radio-button.mjs +4 -8
- package/fesm2020/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +1 -1
- package/radio-button/radio-button.component.d.ts +1 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Component, Inject, HostListener, EventEmitter, Injector, Directive, Self, Optional, Input, Output, NgModule } from '@angular/core';
|
|
3
|
-
import { parseZone, tz } from 'moment-timezone';
|
|
3
|
+
import moment, { parseZone, tz } from 'moment-timezone';
|
|
4
4
|
import * as i1 from 'mis-crystal-design-system/toast';
|
|
5
5
|
import { ToastModule } from 'mis-crystal-design-system/toast';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
@@ -65,61 +65,187 @@ const getMonth = (index) => {
|
|
|
65
65
|
return month;
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
function TzDpContainerComponent_div_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
69
|
+
i0.ɵɵelementContainerStart(0);
|
|
70
|
+
i0.ɵɵtext(1);
|
|
71
|
+
i0.ɵɵelementContainerEnd();
|
|
72
|
+
} if (rf & 2) {
|
|
73
|
+
const ctx_r7 = i0.ɵɵnextContext(2);
|
|
74
|
+
i0.ɵɵadvance(1);
|
|
75
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r7.selectedYear, " ");
|
|
76
|
+
} }
|
|
77
|
+
function TzDpContainerComponent_div_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
78
|
+
i0.ɵɵtext(0);
|
|
79
|
+
} if (rf & 2) {
|
|
80
|
+
const ctx_r9 = i0.ɵɵnextContext(2);
|
|
81
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r9.availableMonths[ctx_r9.currentMonthNumber], " ");
|
|
82
|
+
} }
|
|
83
|
+
function TzDpContainerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
|
|
84
|
+
const _r11 = i0.ɵɵgetCurrentView();
|
|
85
|
+
i0.ɵɵnamespaceSVG();
|
|
86
|
+
i0.ɵɵnamespaceHTML();
|
|
87
|
+
i0.ɵɵelementStart(0, "div", 15);
|
|
88
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.toggleMonthSelector()); });
|
|
89
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_6_ng_container_1_Template, 2, 1, "ng-container", 16);
|
|
90
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_6_ng_template_2_Template, 1, 1, "ng-template", null, 17, i0.ɵɵtemplateRefExtractor);
|
|
91
|
+
i0.ɵɵelementEnd();
|
|
92
|
+
} if (rf & 2) {
|
|
93
|
+
const _r8 = i0.ɵɵreference(3);
|
|
94
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
95
|
+
i0.ɵɵadvance(1);
|
|
96
|
+
i0.ɵɵproperty("ngIf", ctx_r0.isYearSelectionFlow)("ngIfElse", _r8);
|
|
97
|
+
} }
|
|
98
|
+
function TzDpContainerComponent_div_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
99
|
+
i0.ɵɵelementContainerStart(0);
|
|
100
|
+
i0.ɵɵtext(1);
|
|
101
|
+
i0.ɵɵelementContainerEnd();
|
|
102
|
+
} if (rf & 2) {
|
|
103
|
+
const ctx_r12 = i0.ɵɵnextContext(2);
|
|
104
|
+
i0.ɵɵadvance(1);
|
|
105
|
+
i0.ɵɵtextInterpolate2(" ", ctx_r12.selectedYear - 6, " - ", ctx_r12.selectedYear + 5, " ");
|
|
106
|
+
} }
|
|
107
|
+
function TzDpContainerComponent_div_7_ng_template_2_Template(rf, ctx) { if (rf & 1) {
|
|
108
|
+
i0.ɵɵtext(0);
|
|
109
|
+
} if (rf & 2) {
|
|
110
|
+
const ctx_r14 = i0.ɵɵnextContext(2);
|
|
111
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r14.currentYearNumber, " ");
|
|
112
|
+
} }
|
|
113
|
+
function TzDpContainerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
|
|
114
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
115
|
+
i0.ɵɵnamespaceSVG();
|
|
116
|
+
i0.ɵɵnamespaceHTML();
|
|
117
|
+
i0.ɵɵelementStart(0, "div", 18);
|
|
118
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.toggleYearSelector()); });
|
|
119
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_7_ng_container_1_Template, 2, 2, "ng-container", 16);
|
|
120
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_7_ng_template_2_Template, 1, 1, "ng-template", null, 19, i0.ɵɵtemplateRefExtractor);
|
|
121
|
+
i0.ɵɵelementEnd();
|
|
122
|
+
} if (rf & 2) {
|
|
123
|
+
const _r13 = i0.ɵɵreference(3);
|
|
124
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
125
|
+
i0.ɵɵadvance(1);
|
|
126
|
+
i0.ɵɵproperty("ngIf", ctx_r1.isSelectingYear)("ngIfElse", _r13);
|
|
127
|
+
} }
|
|
128
|
+
const _c0 = function (a0, a1) { return { "disable-month": a0, "select-month": a1 }; };
|
|
129
|
+
function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
130
|
+
const _r21 = i0.ɵɵgetCurrentView();
|
|
131
|
+
i0.ɵɵelementStart(0, "div", 23);
|
|
132
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_12_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r21); const month_r18 = restoredCtx.$implicit; const i_r19 = restoredCtx.index; const ctx_r20 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(month_r18 !== ctx_r20.availableMonths[ctx_r20.currentMonthNumber] && !ctx_r20.disabledMonths[i_r19] && ctx_r20.selectMonth(month_r18)); });
|
|
133
|
+
i0.ɵɵtext(1);
|
|
134
|
+
i0.ɵɵelementEnd();
|
|
135
|
+
} if (rf & 2) {
|
|
136
|
+
const month_r18 = ctx.$implicit;
|
|
137
|
+
const i_r19 = ctx.index;
|
|
138
|
+
const ctx_r17 = i0.ɵɵnextContext(2);
|
|
139
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0, ctx_r17.disabledMonths[i_r19], !ctx_r17.disabledMonths[ctx_r17.currentMonthNumber] && month_r18 === ctx_r17.availableMonths[ctx_r17.currentMonthNumber]));
|
|
140
|
+
i0.ɵɵadvance(1);
|
|
141
|
+
i0.ɵɵtextInterpolate1(" ", month_r18, " ");
|
|
142
|
+
} }
|
|
143
|
+
function TzDpContainerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
|
|
144
|
+
i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
|
|
145
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_12_div_2_Template, 2, 5, "div", 22);
|
|
146
|
+
i0.ɵɵelementEnd()();
|
|
147
|
+
} if (rf & 2) {
|
|
148
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
149
|
+
i0.ɵɵadvance(2);
|
|
150
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.availableMonths);
|
|
151
|
+
} }
|
|
152
|
+
const _c1 = function (a0, a1) { return { "disable-year": a0, "select-year": a1 }; };
|
|
153
|
+
function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) { if (rf & 1) {
|
|
154
|
+
const _r26 = i0.ɵɵgetCurrentView();
|
|
155
|
+
i0.ɵɵelementStart(0, "div", 26);
|
|
156
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_13_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const year_r23 = restoredCtx.$implicit; const i_r24 = restoredCtx.index; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(year_r23 !== ctx_r25.currentYearNumber && !ctx_r25.disabledYears[i_r24] && ctx_r25.selectYear(year_r23)); });
|
|
157
|
+
i0.ɵɵtext(1);
|
|
158
|
+
i0.ɵɵelementEnd();
|
|
159
|
+
} if (rf & 2) {
|
|
160
|
+
const year_r23 = ctx.$implicit;
|
|
161
|
+
const i_r24 = ctx.index;
|
|
162
|
+
const ctx_r22 = i0.ɵɵnextContext(2);
|
|
163
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c1, ctx_r22.disabledYears[i_r24], year_r23 === ctx_r22.currentYearNumber));
|
|
164
|
+
i0.ɵɵadvance(1);
|
|
165
|
+
i0.ɵɵtextInterpolate1(" ", year_r23, " ");
|
|
166
|
+
} }
|
|
69
167
|
function TzDpContainerComponent_div_13_Template(rf, ctx) { if (rf & 1) {
|
|
70
|
-
i0.ɵɵelementStart(0, "div",
|
|
168
|
+
i0.ɵɵelementStart(0, "div", 24)(1, "div", 21);
|
|
169
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_13_div_2_Template, 2, 5, "div", 25);
|
|
170
|
+
i0.ɵɵelementEnd()();
|
|
171
|
+
} if (rf & 2) {
|
|
172
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
173
|
+
i0.ɵɵadvance(2);
|
|
174
|
+
i0.ɵɵproperty("ngForOf", ctx_r3.availableYears);
|
|
175
|
+
} }
|
|
176
|
+
const _c2 = function (a0) { return { "current-day": a0 }; };
|
|
177
|
+
function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
178
|
+
i0.ɵɵelementStart(0, "div", 29)(1, "span", 30);
|
|
71
179
|
i0.ɵɵtext(2);
|
|
72
180
|
i0.ɵɵelementEnd()();
|
|
73
181
|
} if (rf & 2) {
|
|
74
|
-
const
|
|
182
|
+
const weekDay_r28 = ctx.$implicit;
|
|
75
183
|
i0.ɵɵadvance(1);
|
|
76
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2,
|
|
184
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, weekDay_r28.isCurrentDay));
|
|
77
185
|
i0.ɵɵadvance(1);
|
|
78
|
-
i0.ɵɵtextInterpolate(
|
|
186
|
+
i0.ɵɵtextInterpolate(weekDay_r28.label);
|
|
79
187
|
} }
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
i0.ɵɵ
|
|
188
|
+
function TzDpContainerComponent_div_14_Template(rf, ctx) { if (rf & 1) {
|
|
189
|
+
i0.ɵɵelementStart(0, "div", 27);
|
|
190
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_14_div_1_Template, 3, 4, "div", 28);
|
|
191
|
+
i0.ɵɵelementEnd();
|
|
192
|
+
} if (rf & 2) {
|
|
193
|
+
const ctx_r4 = i0.ɵɵnextContext();
|
|
194
|
+
i0.ɵɵadvance(1);
|
|
195
|
+
i0.ɵɵproperty("ngForOf", ctx_r4.weekDays);
|
|
196
|
+
} }
|
|
197
|
+
const _c3 = function (a0, a1, a2) { return { "current-day": a0, "selected-day": a1, "disabled-day": a2 }; };
|
|
198
|
+
function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
199
|
+
i0.ɵɵelementStart(0, "span", 35);
|
|
83
200
|
i0.ɵɵtext(1);
|
|
84
201
|
i0.ɵɵelementEnd();
|
|
85
202
|
} if (rf & 2) {
|
|
86
|
-
const
|
|
87
|
-
const
|
|
88
|
-
i0.ɵɵproperty("tabindex",
|
|
89
|
-
i0.ɵɵattribute("aria-label",
|
|
203
|
+
const day_r30 = i0.ɵɵnextContext().$implicit;
|
|
204
|
+
const ctx_r31 = i0.ɵɵnextContext(2);
|
|
205
|
+
i0.ɵɵproperty("tabindex", day_r30.isDisabledDay ? -1 : 0)("ngClass", i0.ɵɵpureFunction3(4, _c3, day_r30.isCurrentDay, !ctx_r31.localSelectedDate ? day_r30.isSelectedDay : day_r30 === ctx_r31.localSelectedDate, day_r30.isDisabledDay));
|
|
206
|
+
i0.ɵɵattribute("aria-label", ctx_r31.retractDayMonth(day_r30.date, ctx_r31.currentMonth, ctx_r31.currentYearNumber));
|
|
207
|
+
i0.ɵɵadvance(1);
|
|
208
|
+
i0.ɵɵtextInterpolate1(" ", day_r30.date, " ");
|
|
209
|
+
} }
|
|
210
|
+
const _c4 = function (a0, a1, a2) { return { "selected-day": a0, "disabled-day": a1, "is-valid-date": a2 }; };
|
|
211
|
+
function TzDpContainerComponent_div_15_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
212
|
+
const _r34 = i0.ɵɵgetCurrentView();
|
|
213
|
+
i0.ɵɵelementStart(0, "div", 33);
|
|
214
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_15_div_1_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r34); const day_r30 = restoredCtx.$implicit; const ctx_r33 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r33.selectDay(day_r30)); })("keyup.enter", function TzDpContainerComponent_div_15_div_1_Template_div_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r34); const day_r30 = restoredCtx.$implicit; const ctx_r35 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r35.selectDay(day_r30)); });
|
|
215
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_span_1_Template, 2, 8, "span", 34);
|
|
216
|
+
i0.ɵɵelementEnd();
|
|
217
|
+
} if (rf & 2) {
|
|
218
|
+
const day_r30 = ctx.$implicit;
|
|
219
|
+
const ctx_r29 = i0.ɵɵnextContext(2);
|
|
220
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c4, !ctx_r29.localSelectedDate ? day_r30.isSelectedDay : day_r30 === ctx_r29.localSelectedDate, day_r30.isDisabledDay, day_r30.date > 0 && !day_r30.isSelectedDay));
|
|
90
221
|
i0.ɵɵadvance(1);
|
|
91
|
-
i0.ɵɵ
|
|
222
|
+
i0.ɵɵproperty("ngIf", day_r30.date > 0);
|
|
92
223
|
} }
|
|
93
|
-
const _c2 = function (a0, a1, a2) { return { "selected-day": a0, "disabled-day": a1, "is-valid-date": a2 }; };
|
|
94
224
|
function TzDpContainerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
|
|
95
|
-
|
|
96
|
-
i0.ɵɵ
|
|
97
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_div_15_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const day_r4 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.selectDay(day_r4)); })("keyup.enter", function TzDpContainerComponent_div_15_Template_div_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const day_r4 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.selectDay(day_r4)); });
|
|
98
|
-
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_span_1_Template, 2, 8, "span", 16);
|
|
225
|
+
i0.ɵɵelementStart(0, "div", 31);
|
|
226
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_Template, 2, 6, "div", 32);
|
|
99
227
|
i0.ɵɵelementEnd();
|
|
100
228
|
} if (rf & 2) {
|
|
101
|
-
const
|
|
102
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
103
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c2, !ctx_r1.localSelectedDate ? day_r4.isSelectedDay : day_r4 === ctx_r1.localSelectedDate, day_r4.isDisabledDay, day_r4.date > 0 && !day_r4.isSelectedDay));
|
|
229
|
+
const ctx_r5 = i0.ɵɵnextContext();
|
|
104
230
|
i0.ɵɵadvance(1);
|
|
105
|
-
i0.ɵɵproperty("
|
|
231
|
+
i0.ɵɵproperty("ngForOf", ctx_r5.currentMonthDates);
|
|
106
232
|
} }
|
|
107
233
|
function TzDpContainerComponent_div_16_Template(rf, ctx) { if (rf & 1) {
|
|
108
|
-
const
|
|
109
|
-
i0.ɵɵelementStart(0, "div",
|
|
110
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(
|
|
234
|
+
const _r37 = i0.ɵɵgetCurrentView();
|
|
235
|
+
i0.ɵɵelementStart(0, "div", 36)(1, "button", 37);
|
|
236
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.cancelDatePicker()); });
|
|
111
237
|
i0.ɵɵtext(2, "Cancel");
|
|
112
238
|
i0.ɵɵelementEnd();
|
|
113
|
-
i0.ɵɵelementStart(3, "button",
|
|
114
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(
|
|
239
|
+
i0.ɵɵelementStart(3, "button", 38);
|
|
240
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r37); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.applyDate()); });
|
|
115
241
|
i0.ɵɵtext(4, "Apply");
|
|
116
242
|
i0.ɵɵelementEnd()();
|
|
117
243
|
} if (rf & 2) {
|
|
118
|
-
const
|
|
244
|
+
const ctx_r6 = i0.ɵɵnextContext();
|
|
119
245
|
i0.ɵɵadvance(3);
|
|
120
|
-
i0.ɵɵproperty("disabled", !(
|
|
246
|
+
i0.ɵɵproperty("disabled", !(ctx_r6.data.date || ctx_r6.localSelectedDate.date));
|
|
121
247
|
} }
|
|
122
|
-
const
|
|
248
|
+
const _c5 = function (a0) { return { "disabled-month": a0 }; };
|
|
123
249
|
class TzDpContainerComponent {
|
|
124
250
|
constructor(data, toast) {
|
|
125
251
|
this.toast = toast;
|
|
@@ -132,6 +258,13 @@ class TzDpContainerComponent {
|
|
|
132
258
|
this.isPreviousMonthDisabled = false;
|
|
133
259
|
this.isNextMonthDisabled = false;
|
|
134
260
|
this.allowBookingOnDisabledDay = false;
|
|
261
|
+
this.isSelectingMonth = false;
|
|
262
|
+
this.isSelectingYear = false;
|
|
263
|
+
this.availableYears = [];
|
|
264
|
+
this.availableMonths = [];
|
|
265
|
+
this.disabledMonths = [];
|
|
266
|
+
this.disabledYears = [];
|
|
267
|
+
this.isYearSelectionFlow = false;
|
|
135
268
|
this.data = data;
|
|
136
269
|
if (this.data?.dpConfig?.timezone) {
|
|
137
270
|
this.parseZoneInstance = (...args) => {
|
|
@@ -151,6 +284,8 @@ class TzDpContainerComponent {
|
|
|
151
284
|
format: DATE_FORMAT
|
|
152
285
|
};
|
|
153
286
|
}
|
|
287
|
+
this.availableMonths = moment.months();
|
|
288
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.currentYearNumber - 6 + index);
|
|
154
289
|
}
|
|
155
290
|
retractDayMonth(day, month, year) {
|
|
156
291
|
return `${day} ${month} ${year}`;
|
|
@@ -158,11 +293,12 @@ class TzDpContainerComponent {
|
|
|
158
293
|
ngOnInit() {
|
|
159
294
|
this.currentDateInstance();
|
|
160
295
|
this.calculateMinMaxDays();
|
|
296
|
+
this.calculateDisabledMonthsAndYears();
|
|
161
297
|
}
|
|
162
298
|
currentDateInstance() {
|
|
163
299
|
const selectedDate = parseZone(this.data.date, this.data.dpConfig.format);
|
|
164
300
|
if (selectedDate.isValid()) {
|
|
165
|
-
this.currentYearNumber = selectedDate.year();
|
|
301
|
+
this.selectedYear = this.currentYearNumber = selectedDate.year();
|
|
166
302
|
this.currentMonthNumber = selectedDate.month();
|
|
167
303
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
168
304
|
}
|
|
@@ -179,19 +315,50 @@ class TzDpContainerComponent {
|
|
|
179
315
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
180
316
|
}
|
|
181
317
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
318
|
+
calculateDisabledMonthsAndYears() {
|
|
319
|
+
const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
|
|
320
|
+
const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
|
|
321
|
+
this.disabledMonths = this.availableMonths.map((month, index) => {
|
|
322
|
+
const monthDate = this.parseZoneInstance().year(this.selectedYear).month(index);
|
|
323
|
+
return (minDate.isValid() && monthDate.isBefore(minDate, 'month')) ||
|
|
324
|
+
(maxDate.isValid() && monthDate.isAfter(maxDate, 'month'));
|
|
325
|
+
});
|
|
326
|
+
this.disabledYears = this.availableYears.map((year) => {
|
|
327
|
+
const yearDate = this.parseZoneInstance().year(year);
|
|
328
|
+
return (minDate.isValid() && yearDate.isBefore(minDate, 'year')) ||
|
|
329
|
+
(maxDate.isValid() && yearDate.isAfter(maxDate, 'year'));
|
|
330
|
+
});
|
|
331
|
+
if (this.isSelectingYear) {
|
|
332
|
+
this.isPreviousMonthDisabled = minDate.isValid() && (this.selectedYear - 6) <= minDate.year();
|
|
333
|
+
this.isNextMonthDisabled = maxDate.isValid() && (this.selectedYear + 5) >= maxDate.year();
|
|
186
334
|
}
|
|
187
|
-
|
|
188
|
-
|
|
335
|
+
}
|
|
336
|
+
navigateView(direction) {
|
|
337
|
+
if (this.isSelectingYear) {
|
|
338
|
+
if (direction === "PREVIOUS") {
|
|
339
|
+
this.selectedYear -= 12;
|
|
340
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
|
|
341
|
+
}
|
|
342
|
+
else if (direction === "NEXT") {
|
|
343
|
+
this.selectedYear += 12;
|
|
344
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
else {
|
|
348
|
+
let thisMonth = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
349
|
+
if (direction === "NEXT") {
|
|
350
|
+
thisMonth = thisMonth.add(1, "month");
|
|
351
|
+
}
|
|
352
|
+
else if (direction === "PREVIOUS") {
|
|
353
|
+
thisMonth = thisMonth.subtract(1, "month");
|
|
354
|
+
}
|
|
355
|
+
this.currentMonthNumber = thisMonth.month();
|
|
356
|
+
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
357
|
+
this.currentYearNumber = thisMonth.year();
|
|
358
|
+
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
189
359
|
}
|
|
190
|
-
this.currentMonthNumber = thisMonth.month();
|
|
191
|
-
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
192
|
-
this.currentYearNumber = thisMonth.year();
|
|
193
|
-
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
194
360
|
this.calculateMinMaxDays();
|
|
361
|
+
this.calculateDisabledMonthsAndYears();
|
|
195
362
|
}
|
|
196
363
|
generateDates(month, currentYearNumber) {
|
|
197
364
|
let dates = [];
|
|
@@ -258,56 +425,103 @@ class TzDpContainerComponent {
|
|
|
258
425
|
cancelDatePicker() {
|
|
259
426
|
this.data.dateChange("");
|
|
260
427
|
}
|
|
428
|
+
toggleMonthSelector() {
|
|
429
|
+
if (this.isYearSelectionFlow)
|
|
430
|
+
return;
|
|
431
|
+
this.isSelectingMonth = !this.isSelectingMonth;
|
|
432
|
+
this.isSelectingYear = false;
|
|
433
|
+
this.calculateDisabledMonthsAndYears();
|
|
434
|
+
}
|
|
435
|
+
toggleYearSelector() {
|
|
436
|
+
this.isSelectingYear = !this.isSelectingYear;
|
|
437
|
+
this.selectedYear = this.currentYearNumber;
|
|
438
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
|
|
439
|
+
this.isSelectingMonth = false;
|
|
440
|
+
this.calculateDisabledMonthsAndYears();
|
|
441
|
+
}
|
|
442
|
+
resetDateSelection() {
|
|
443
|
+
this.localSelectedDate = {
|
|
444
|
+
date: 0,
|
|
445
|
+
weekDay: 0,
|
|
446
|
+
isCurrentDay: false,
|
|
447
|
+
isSelectedDay: false,
|
|
448
|
+
isDisabledDay: false,
|
|
449
|
+
toastMessage: ''
|
|
450
|
+
};
|
|
451
|
+
this.data.date = '';
|
|
452
|
+
}
|
|
453
|
+
selectMonth(month) {
|
|
454
|
+
this.currentMonthNumber = this.availableMonths.indexOf(month);
|
|
455
|
+
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
456
|
+
this.isSelectingMonth = false;
|
|
457
|
+
this.isYearSelectionFlow = false;
|
|
458
|
+
this.resetDateSelection();
|
|
459
|
+
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
460
|
+
this.calculateMinMaxDays();
|
|
461
|
+
}
|
|
462
|
+
selectYear(year) {
|
|
463
|
+
this.selectedYear = this.currentYearNumber = year;
|
|
464
|
+
this.isSelectingYear = false;
|
|
465
|
+
this.isSelectingMonth = true;
|
|
466
|
+
this.isYearSelectionFlow = true;
|
|
467
|
+
this.resetDateSelection();
|
|
468
|
+
this.calculateDisabledMonthsAndYears();
|
|
469
|
+
}
|
|
261
470
|
}
|
|
262
471
|
TzDpContainerComponent.ɵfac = function TzDpContainerComponent_Factory(t) { return new (t || TzDpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); };
|
|
263
472
|
TzDpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDpContainerComponent, selectors: [["mis-tz-dp"]], hostBindings: function TzDpContainerComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
264
473
|
i0.ɵɵlistener("keydown.esc", function TzDpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
|
|
265
|
-
} }, decls: 17, vars:
|
|
474
|
+
} }, decls: 17, vars: 15, consts: [["aria-label", "date picker", "cdkTrapFocus", "", 1, "datepicker-container", 3, "ngClass", "cdkTrapFocusAutoCapture"], ["tabindex", "-1", "cdkFocusInitial", ""], [1, "datepicker-container__header"], ["tabindex", "0", "aria-label", "Previous Month", 1, "datepicker-container__arrow__icon", 3, "ngClass", "click", "keyup.enter"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], ["class", "month-header", 3, "click", 4, "ngIf"], ["class", "year-header", 3, "click", 4, "ngIf"], ["tabindex", "0", "aria-label", "Next Month", 1, "datepicker-container__arrow__icon", 3, "ngClass", "click", "keyup.enter"], [1, "datepicker-container__body"], ["class", "month-selector", 4, "ngIf"], ["class", "year-selector", 4, "ngIf"], ["class", "datepicker-container__weekdays", 4, "ngIf"], ["class", "datepicker-container__days", 4, "ngIf"], ["class", "datepicker-container__footer", 4, "ngIf"], [1, "month-header", 3, "click"], [4, "ngIf", "ngIfElse"], ["normalFlow", ""], [1, "year-header", 3, "click"], ["singleYear", ""], [1, "month-selector"], [1, "row"], ["class", "month", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "month", 3, "ngClass", "click"], [1, "year-selector"], ["class", "year", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "year", 3, "ngClass", "click"], [1, "datepicker-container__weekdays"], ["class", "datepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "datepicker-container__weekday"], [3, "ngClass"], [1, "datepicker-container__days"], ["class", "datepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker-container__day", 3, "ngClass", "click", "keyup.enter"], [3, "tabindex", "ngClass", 4, "ngIf"], [3, "tabindex", "ngClass"], [1, "datepicker-container__footer"], ["mis-button", "", "size", "md", "type", "'none'", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click"]], template: function TzDpContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
266
475
|
i0.ɵɵelementStart(0, "div", 0);
|
|
267
476
|
i0.ɵɵelement(1, "div", 1);
|
|
268
477
|
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
|
|
269
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_3_listener() { return !ctx.isPreviousMonthDisabled && ctx.
|
|
478
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_3_listener() { return !ctx.isPreviousMonthDisabled && !ctx.isSelectingMonth && ctx.navigateView("PREVIOUS"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_3_listener() { return !ctx.isPreviousMonthDisabled && !ctx.isSelectingMonth && ctx.navigateView("PREVIOUS"); });
|
|
270
479
|
i0.ɵɵnamespaceSVG();
|
|
271
480
|
i0.ɵɵelementStart(4, "svg", 4);
|
|
272
481
|
i0.ɵɵelement(5, "path", 5);
|
|
273
482
|
i0.ɵɵelementEnd()();
|
|
483
|
+
i0.ɵɵtemplate(6, TzDpContainerComponent_div_6_Template, 4, 2, "div", 6);
|
|
484
|
+
i0.ɵɵtemplate(7, TzDpContainerComponent_div_7_Template, 4, 2, "div", 7);
|
|
274
485
|
i0.ɵɵnamespaceHTML();
|
|
275
|
-
i0.ɵɵelementStart(
|
|
276
|
-
i0.ɵɵ
|
|
277
|
-
i0.ɵɵelementEnd();
|
|
278
|
-
i0.ɵɵelementStart(8, "div", 6);
|
|
279
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_8_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_8_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
|
|
486
|
+
i0.ɵɵelementStart(8, "div", 8);
|
|
487
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_8_listener() { return !ctx.isNextMonthDisabled && !ctx.isSelectingMonth && ctx.navigateView("NEXT"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_8_listener() { return !ctx.isNextMonthDisabled && !ctx.isSelectingMonth && ctx.navigateView("NEXT"); });
|
|
280
488
|
i0.ɵɵnamespaceSVG();
|
|
281
489
|
i0.ɵɵelementStart(9, "svg", 4);
|
|
282
490
|
i0.ɵɵelement(10, "path", 5);
|
|
283
491
|
i0.ɵɵelementEnd()()();
|
|
284
492
|
i0.ɵɵnamespaceHTML();
|
|
285
|
-
i0.ɵɵelementStart(11, "div",
|
|
286
|
-
i0.ɵɵtemplate(
|
|
493
|
+
i0.ɵɵelementStart(11, "div", 9);
|
|
494
|
+
i0.ɵɵtemplate(12, TzDpContainerComponent_div_12_Template, 3, 1, "div", 10);
|
|
495
|
+
i0.ɵɵtemplate(13, TzDpContainerComponent_div_13_Template, 3, 1, "div", 11);
|
|
496
|
+
i0.ɵɵtemplate(14, TzDpContainerComponent_div_14_Template, 2, 1, "div", 12);
|
|
497
|
+
i0.ɵɵtemplate(15, TzDpContainerComponent_div_15_Template, 2, 1, "div", 13);
|
|
287
498
|
i0.ɵɵelementEnd();
|
|
288
|
-
i0.ɵɵ
|
|
289
|
-
i0.ɵɵtemplate(15, TzDpContainerComponent_div_15_Template, 2, 6, "div", 11);
|
|
290
|
-
i0.ɵɵelementEnd()();
|
|
291
|
-
i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 12);
|
|
499
|
+
i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 14);
|
|
292
500
|
i0.ɵɵelementEnd();
|
|
293
501
|
} if (rf & 2) {
|
|
294
502
|
i0.ɵɵproperty("ngClass", ctx.data.disableBoxShadow ? "remove-box-shadow" : "")("cdkTrapFocusAutoCapture", true);
|
|
295
503
|
i0.ɵɵadvance(3);
|
|
296
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
504
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, ctx.isPreviousMonthDisabled || ctx.isSelectingMonth));
|
|
505
|
+
i0.ɵɵadvance(3);
|
|
506
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingYear);
|
|
507
|
+
i0.ɵɵadvance(1);
|
|
508
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth);
|
|
509
|
+
i0.ɵɵadvance(1);
|
|
510
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c5, ctx.isNextMonthDisabled || ctx.isSelectingMonth));
|
|
297
511
|
i0.ɵɵadvance(4);
|
|
298
|
-
i0.ɵɵ
|
|
512
|
+
i0.ɵɵproperty("ngIf", ctx.isSelectingMonth);
|
|
513
|
+
i0.ɵɵadvance(1);
|
|
514
|
+
i0.ɵɵproperty("ngIf", ctx.isSelectingYear);
|
|
515
|
+
i0.ɵɵadvance(1);
|
|
516
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
|
|
299
517
|
i0.ɵɵadvance(1);
|
|
300
|
-
i0.ɵɵproperty("
|
|
301
|
-
i0.ɵɵadvance(5);
|
|
302
|
-
i0.ɵɵproperty("ngForOf", ctx.weekDays);
|
|
303
|
-
i0.ɵɵadvance(2);
|
|
304
|
-
i0.ɵɵproperty("ngForOf", ctx.currentMonthDates);
|
|
518
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
|
|
305
519
|
i0.ɵɵadvance(1);
|
|
306
520
|
i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton);
|
|
307
|
-
} }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".datepicker-container[_ngcontent-%COMP%]{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:#0937b2;cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover span.selected-day[_ngcontent-%COMP%]{color:#181f33!important}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:#fff}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] });
|
|
521
|
+
} }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.datepicker-container[_ngcontent-%COMP%]{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]:hover{background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]{cursor:default;color:#c8cdd3}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]{background-color:#0937b2;color:#fff}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]:hover{cursor:default;background-color:#0937b2}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:#0937b2;cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover span.selected-day[_ngcontent-%COMP%]{color:#181f33!important}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:#fff}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] });
|
|
308
522
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDpContainerComponent, [{
|
|
309
523
|
type: Component,
|
|
310
|
-
args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div class=\"datepicker-container__header\">\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n tabindex=\"0\"\n aria-label=\"Previous Month\"\n (keyup.enter)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n tabindex=\"0\"\n aria-label=\"Next Month\"\n (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"datepicker-container__body\">\n <div class=\"datepicker-container__weekdays\">\n <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"datepicker-container__days\">\n <div\n class=\"datepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay,\n 'is-valid-date': day.date > 0 && !day.isSelectedDay\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay(day)\"\n (keyup.enter)=\"selectDay(day)\"\n >\n <span\n *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay\n }\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate)\">Apply</button>\n </div>\n</div>\n", styles: [".datepicker-container{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:#0937b2;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:#181f33!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:#fff}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:#c7c7c7}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
|
|
524
|
+
args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div class=\"datepicker-container__header\">\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && !isSelectingMonth && navigateView('PREVIOUS')\"\n tabindex=\"0\"\n aria-label=\"Previous Month\"\n (keyup.enter)=\"!isPreviousMonthDisabled && !isSelectingMonth && navigateView('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled || isSelectingMonth\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n\n <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n <ng-container *ngIf=\"isYearSelectionFlow; else normalFlow\">\n {{selectedYear}}\n </ng-container>\n <ng-template #normalFlow>\n {{ availableMonths[currentMonthNumber] }}\n </ng-template>\n </div>\n <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n <ng-container *ngIf=\"isSelectingYear; else singleYear\">\n {{ selectedYear - 6 }} - {{ selectedYear + 5 }}\n </ng-container>\n <ng-template #singleYear>\n {{ currentYearNumber }}\n </ng-template>\n </div>\n\n\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && !isSelectingMonth && navigateView('NEXT')\"\n tabindex=\"0\"\n aria-label=\"Next Month\"\n (keyup.enter)=\"!isNextMonthDisabled && !isSelectingMonth && navigateView('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled || isSelectingMonth\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"datepicker-container__body\">\n\n <div *ngIf=\"isSelectingMonth\" class=\"month-selector\">\n <div class=\"row\">\n <div *ngFor=\"let month of availableMonths; let i = index\" \n class=\"month\" \n (click)=\"month !== availableMonths[currentMonthNumber] && !disabledMonths[i] && selectMonth(month)\" \n [ngClass]=\"{\n 'disable-month': disabledMonths[i],\n 'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n }\">\n {{ month }}\n </div>\n </div>\n </div>\n \n <div *ngIf=\"isSelectingYear\" class=\"year-selector\">\n <div class=\"row\">\n <div *ngFor=\"let year of availableYears; let i = index\" \n class=\"year\" \n (click)=\"year !== currentYearNumber && !disabledYears[i] && selectYear(year)\" \n [ngClass]=\"{\n 'disable-year': disabledYears[i],\n 'select-year': year === currentYearNumber\n }\">\n {{ year }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n <div\n class=\"datepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay,\n 'is-valid-date': day.date > 0 && !day.isSelectedDay\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay(day)\"\n (keyup.enter)=\"selectDay(day)\"\n >\n <span\n *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay\n }\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.datepicker-container{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:#cbddfb}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:#c8cdd3}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:#0937b2;color:#fff}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:default;background-color:#0937b2}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:#0937b2;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:#181f33!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:#fff}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:#c7c7c7}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
|
|
311
525
|
}], function () { return [{ type: undefined, decorators: [{
|
|
312
526
|
type: Inject,
|
|
313
527
|
args: [CONTAINER_DATA]
|