mis-crystal-design-system 14.0.67 → 14.0.69
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/async-search-dropdown/async-dropdown.component.d.ts +2 -0
- package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +16 -1
- package/esm2020/async-search-dropdown/async-dropdown.component.mjs +9 -5
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +241 -65
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs +8 -4
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +264 -64
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs +8 -4
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +240 -64
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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,73 +65,189 @@ const getMonth = (index) => {
|
|
|
65
65
|
return month;
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
function TzDpContainerComponent_div_6_Template(rf, ctx) {
|
|
69
|
+
if (rf & 1) {
|
|
70
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
71
|
+
i0.ɵɵnamespaceSVG();
|
|
72
|
+
i0.ɵɵnamespaceHTML();
|
|
73
|
+
i0.ɵɵelementStart(0, "div", 15);
|
|
74
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.toggleMonthSelector()); });
|
|
75
|
+
i0.ɵɵtext(1);
|
|
76
|
+
i0.ɵɵelementEnd();
|
|
77
|
+
}
|
|
78
|
+
if (rf & 2) {
|
|
79
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
80
|
+
i0.ɵɵadvance(1);
|
|
81
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.isYearSelectionFlow ? ctx_r0.selectedYear : ctx_r0.availableMonths[ctx_r0.currentMonthNumber], " ");
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
function TzDpContainerComponent_div_7_Template(rf, ctx) {
|
|
85
|
+
if (rf & 1) {
|
|
86
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
87
|
+
i0.ɵɵnamespaceSVG();
|
|
88
|
+
i0.ɵɵnamespaceHTML();
|
|
89
|
+
i0.ɵɵelementStart(0, "div", 16);
|
|
90
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.toggleYearSelector()); });
|
|
91
|
+
i0.ɵɵtext(1);
|
|
92
|
+
i0.ɵɵelementEnd();
|
|
93
|
+
}
|
|
94
|
+
if (rf & 2) {
|
|
95
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
96
|
+
i0.ɵɵadvance(1);
|
|
97
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.isSelectingYear ? ctx_r1.yearRange : ctx_r1.currentYearNumber, " ");
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
const _c0 = function (a0, a1) { return { "disable-month": a0, "select-month": a1 }; };
|
|
101
|
+
function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) {
|
|
102
|
+
if (rf & 1) {
|
|
103
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
104
|
+
i0.ɵɵelementStart(0, "div", 20);
|
|
105
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_12_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r15); const i_r13 = restoredCtx.index; const month_r12 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r14.disabledMonths[i_r13] && ctx_r14.selectMonth(month_r12)); });
|
|
106
|
+
i0.ɵɵtext(1);
|
|
107
|
+
i0.ɵɵelementEnd();
|
|
108
|
+
}
|
|
109
|
+
if (rf & 2) {
|
|
110
|
+
const month_r12 = ctx.$implicit;
|
|
111
|
+
const i_r13 = ctx.index;
|
|
112
|
+
const ctx_r11 = i0.ɵɵnextContext(2);
|
|
113
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0, ctx_r11.disabledMonths[i_r13], !ctx_r11.disabledMonths[ctx_r11.currentMonthNumber] && month_r12 === ctx_r11.availableMonths[ctx_r11.currentMonthNumber]));
|
|
114
|
+
i0.ɵɵadvance(1);
|
|
115
|
+
i0.ɵɵtextInterpolate1(" ", month_r12, " ");
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
function TzDpContainerComponent_div_12_Template(rf, ctx) {
|
|
119
|
+
if (rf & 1) {
|
|
120
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
|
|
121
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_12_div_2_Template, 2, 5, "div", 19);
|
|
122
|
+
i0.ɵɵelementEnd()();
|
|
123
|
+
}
|
|
124
|
+
if (rf & 2) {
|
|
125
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
126
|
+
i0.ɵɵadvance(2);
|
|
127
|
+
i0.ɵɵproperty("ngForOf", ctx_r2.availableMonths);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
const _c1 = function (a0, a1) { return { "disable-year": a0, "select-year": a1 }; };
|
|
131
|
+
function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) {
|
|
132
|
+
if (rf & 1) {
|
|
133
|
+
const _r20 = i0.ɵɵgetCurrentView();
|
|
134
|
+
i0.ɵɵelementStart(0, "div", 23);
|
|
135
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_13_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const i_r18 = restoredCtx.index; const year_r17 = restoredCtx.$implicit; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r19.disabledYears[i_r18] && ctx_r19.selectYear(year_r17)); });
|
|
136
|
+
i0.ɵɵtext(1);
|
|
137
|
+
i0.ɵɵelementEnd();
|
|
138
|
+
}
|
|
139
|
+
if (rf & 2) {
|
|
140
|
+
const year_r17 = ctx.$implicit;
|
|
141
|
+
const i_r18 = ctx.index;
|
|
142
|
+
const ctx_r16 = i0.ɵɵnextContext(2);
|
|
143
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c1, ctx_r16.disabledYears[i_r18], year_r17 === ctx_r16.currentYearNumber));
|
|
144
|
+
i0.ɵɵadvance(1);
|
|
145
|
+
i0.ɵɵtextInterpolate1(" ", year_r17, " ");
|
|
146
|
+
}
|
|
147
|
+
}
|
|
69
148
|
function TzDpContainerComponent_div_13_Template(rf, ctx) {
|
|
70
149
|
if (rf & 1) {
|
|
71
|
-
i0.ɵɵelementStart(0, "div",
|
|
150
|
+
i0.ɵɵelementStart(0, "div", 21)(1, "div", 18);
|
|
151
|
+
i0.ɵɵtemplate(2, TzDpContainerComponent_div_13_div_2_Template, 2, 5, "div", 22);
|
|
152
|
+
i0.ɵɵelementEnd()();
|
|
153
|
+
}
|
|
154
|
+
if (rf & 2) {
|
|
155
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
156
|
+
i0.ɵɵadvance(2);
|
|
157
|
+
i0.ɵɵproperty("ngForOf", ctx_r3.availableYears);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
const _c2 = function (a0) { return { "current-day": a0 }; };
|
|
161
|
+
function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) {
|
|
162
|
+
if (rf & 1) {
|
|
163
|
+
i0.ɵɵelementStart(0, "div", 26)(1, "span", 27);
|
|
72
164
|
i0.ɵɵtext(2);
|
|
73
165
|
i0.ɵɵelementEnd()();
|
|
74
166
|
}
|
|
75
167
|
if (rf & 2) {
|
|
76
|
-
const
|
|
168
|
+
const weekDay_r22 = ctx.$implicit;
|
|
169
|
+
i0.ɵɵadvance(1);
|
|
170
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, weekDay_r22.isCurrentDay));
|
|
77
171
|
i0.ɵɵadvance(1);
|
|
78
|
-
i0.ɵɵ
|
|
172
|
+
i0.ɵɵtextInterpolate(weekDay_r22.label);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
function TzDpContainerComponent_div_14_Template(rf, ctx) {
|
|
176
|
+
if (rf & 1) {
|
|
177
|
+
i0.ɵɵelementStart(0, "div", 24);
|
|
178
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_14_div_1_Template, 3, 4, "div", 25);
|
|
179
|
+
i0.ɵɵelementEnd();
|
|
180
|
+
}
|
|
181
|
+
if (rf & 2) {
|
|
182
|
+
const ctx_r4 = i0.ɵɵnextContext();
|
|
79
183
|
i0.ɵɵadvance(1);
|
|
80
|
-
i0.ɵɵ
|
|
184
|
+
i0.ɵɵproperty("ngForOf", ctx_r4.weekDays);
|
|
81
185
|
}
|
|
82
186
|
}
|
|
83
|
-
const
|
|
84
|
-
function
|
|
187
|
+
const _c3 = function (a0, a1, a2) { return { "current-day": a0, "selected-day": a1, "disabled-day": a2 }; };
|
|
188
|
+
function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) {
|
|
85
189
|
if (rf & 1) {
|
|
86
|
-
i0.ɵɵelementStart(0, "span",
|
|
190
|
+
i0.ɵɵelementStart(0, "span", 32);
|
|
87
191
|
i0.ɵɵtext(1);
|
|
88
192
|
i0.ɵɵelementEnd();
|
|
89
193
|
}
|
|
90
194
|
if (rf & 2) {
|
|
91
|
-
const
|
|
92
|
-
const
|
|
93
|
-
i0.ɵɵproperty("tabindex",
|
|
94
|
-
i0.ɵɵattribute("aria-label",
|
|
195
|
+
const day_r24 = i0.ɵɵnextContext().$implicit;
|
|
196
|
+
const ctx_r25 = i0.ɵɵnextContext(2);
|
|
197
|
+
i0.ɵɵproperty("tabindex", day_r24.isDisabledDay ? -1 : 0)("ngClass", i0.ɵɵpureFunction3(4, _c3, day_r24.isCurrentDay, !ctx_r25.localSelectedDate ? day_r24.isSelectedDay : day_r24 === ctx_r25.localSelectedDate, day_r24.isDisabledDay));
|
|
198
|
+
i0.ɵɵattribute("aria-label", ctx_r25.retractDayMonth(day_r24.date, ctx_r25.currentMonth, ctx_r25.currentYearNumber));
|
|
95
199
|
i0.ɵɵadvance(1);
|
|
96
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
200
|
+
i0.ɵɵtextInterpolate1(" ", day_r24.date, " ");
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
const _c4 = function (a0, a1, a2) { return { "selected-day": a0, "disabled-day": a1, "is-valid-date": a2 }; };
|
|
204
|
+
function TzDpContainerComponent_div_15_div_1_Template(rf, ctx) {
|
|
205
|
+
if (rf & 1) {
|
|
206
|
+
const _r28 = i0.ɵɵgetCurrentView();
|
|
207
|
+
i0.ɵɵelementStart(0, "div", 30);
|
|
208
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_15_div_1_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r28); const day_r24 = restoredCtx.$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.selectDay(day_r24)); })("keyup.enter", function TzDpContainerComponent_div_15_div_1_Template_div_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r28); const day_r24 = restoredCtx.$implicit; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.selectDay(day_r24)); });
|
|
209
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_span_1_Template, 2, 8, "span", 31);
|
|
210
|
+
i0.ɵɵelementEnd();
|
|
211
|
+
}
|
|
212
|
+
if (rf & 2) {
|
|
213
|
+
const day_r24 = ctx.$implicit;
|
|
214
|
+
const ctx_r23 = i0.ɵɵnextContext(2);
|
|
215
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c4, !ctx_r23.localSelectedDate ? day_r24.isSelectedDay : day_r24 === ctx_r23.localSelectedDate, day_r24.isDisabledDay, day_r24.date > 0 && !day_r24.isSelectedDay));
|
|
216
|
+
i0.ɵɵadvance(1);
|
|
217
|
+
i0.ɵɵproperty("ngIf", day_r24.date > 0);
|
|
97
218
|
}
|
|
98
219
|
}
|
|
99
|
-
const _c2 = function (a0, a1, a2) { return { "selected-day": a0, "disabled-day": a1, "is-valid-date": a2 }; };
|
|
100
220
|
function TzDpContainerComponent_div_15_Template(rf, ctx) {
|
|
101
221
|
if (rf & 1) {
|
|
102
|
-
|
|
103
|
-
i0.ɵɵ
|
|
104
|
-
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)); });
|
|
105
|
-
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_span_1_Template, 2, 8, "span", 16);
|
|
222
|
+
i0.ɵɵelementStart(0, "div", 28);
|
|
223
|
+
i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_Template, 2, 6, "div", 29);
|
|
106
224
|
i0.ɵɵelementEnd();
|
|
107
225
|
}
|
|
108
226
|
if (rf & 2) {
|
|
109
|
-
const
|
|
110
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
111
|
-
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));
|
|
227
|
+
const ctx_r5 = i0.ɵɵnextContext();
|
|
112
228
|
i0.ɵɵadvance(1);
|
|
113
|
-
i0.ɵɵproperty("
|
|
229
|
+
i0.ɵɵproperty("ngForOf", ctx_r5.currentMonthDates);
|
|
114
230
|
}
|
|
115
231
|
}
|
|
116
232
|
function TzDpContainerComponent_div_16_Template(rf, ctx) {
|
|
117
233
|
if (rf & 1) {
|
|
118
|
-
const
|
|
119
|
-
i0.ɵɵelementStart(0, "div",
|
|
120
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(
|
|
234
|
+
const _r31 = i0.ɵɵgetCurrentView();
|
|
235
|
+
i0.ɵɵelementStart(0, "div", 33)(1, "button", 34);
|
|
236
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.cancelDatePicker()); });
|
|
121
237
|
i0.ɵɵtext(2, "Cancel");
|
|
122
238
|
i0.ɵɵelementEnd();
|
|
123
|
-
i0.ɵɵelementStart(3, "button",
|
|
124
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(
|
|
239
|
+
i0.ɵɵelementStart(3, "button", 35);
|
|
240
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r31); const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.applyDate()); });
|
|
125
241
|
i0.ɵɵtext(4, "Apply");
|
|
126
242
|
i0.ɵɵelementEnd()();
|
|
127
243
|
}
|
|
128
244
|
if (rf & 2) {
|
|
129
|
-
const
|
|
245
|
+
const ctx_r6 = i0.ɵɵnextContext();
|
|
130
246
|
i0.ɵɵadvance(3);
|
|
131
|
-
i0.ɵɵproperty("disabled", !(
|
|
247
|
+
i0.ɵɵproperty("disabled", !(ctx_r6.data.date || ctx_r6.localSelectedDate.date));
|
|
132
248
|
}
|
|
133
249
|
}
|
|
134
|
-
const
|
|
250
|
+
const _c5 = function (a0) { return { "disabled-month": a0 }; };
|
|
135
251
|
class TzDpContainerComponent {
|
|
136
252
|
constructor(data, toast) {
|
|
137
253
|
var _a, _b, _c, _d;
|
|
@@ -145,6 +261,13 @@ class TzDpContainerComponent {
|
|
|
145
261
|
this.isPreviousMonthDisabled = false;
|
|
146
262
|
this.isNextMonthDisabled = false;
|
|
147
263
|
this.allowBookingOnDisabledDay = false;
|
|
264
|
+
this.isSelectingMonth = false;
|
|
265
|
+
this.isSelectingYear = false;
|
|
266
|
+
this.availableYears = [];
|
|
267
|
+
this.availableMonths = [];
|
|
268
|
+
this.disabledMonths = [];
|
|
269
|
+
this.disabledYears = [];
|
|
270
|
+
this.isYearSelectionFlow = false;
|
|
148
271
|
this.data = data;
|
|
149
272
|
if ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.dpConfig) === null || _b === void 0 ? void 0 : _b.timezone) {
|
|
150
273
|
this.parseZoneInstance = (...args) => {
|
|
@@ -161,6 +284,8 @@ class TzDpContainerComponent {
|
|
|
161
284
|
if (!((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.dpConfig) === null || _d === void 0 ? void 0 : _d.format)) {
|
|
162
285
|
this.data.dpConfig = Object.assign(Object.assign({}, this.data.dpConfig), { format: DATE_FORMAT });
|
|
163
286
|
}
|
|
287
|
+
this.availableMonths = moment.months();
|
|
288
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.currentYearNumber - 6 + index);
|
|
164
289
|
}
|
|
165
290
|
retractDayMonth(day, month, year) {
|
|
166
291
|
return `${day} ${month} ${year}`;
|
|
@@ -168,11 +293,12 @@ class TzDpContainerComponent {
|
|
|
168
293
|
ngOnInit() {
|
|
169
294
|
this.currentDateInstance();
|
|
170
295
|
this.calculateMinMaxDays();
|
|
296
|
+
this.calculateDisabledMonthsAndYears();
|
|
171
297
|
}
|
|
172
298
|
currentDateInstance() {
|
|
173
299
|
const selectedDate = parseZone(this.data.date, this.data.dpConfig.format);
|
|
174
300
|
if (selectedDate.isValid()) {
|
|
175
|
-
this.currentYearNumber = selectedDate.year();
|
|
301
|
+
this.selectedYear = this.currentYearNumber = selectedDate.year();
|
|
176
302
|
this.currentMonthNumber = selectedDate.month();
|
|
177
303
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
178
304
|
}
|
|
@@ -189,19 +315,46 @@ class TzDpContainerComponent {
|
|
|
189
315
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
190
316
|
}
|
|
191
317
|
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
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());
|
|
196
334
|
}
|
|
197
|
-
|
|
198
|
-
|
|
335
|
+
}
|
|
336
|
+
get yearRange() {
|
|
337
|
+
return `${this.selectedYear - 6} - ${this.selectedYear + 5}`;
|
|
338
|
+
}
|
|
339
|
+
navigateView(direction) {
|
|
340
|
+
if ((direction === 'NEXT' && (this.isNextMonthDisabled || this.isSelectingMonth)) ||
|
|
341
|
+
(direction === 'PREVIOUS' && (this.isPreviousMonthDisabled || this.isSelectingMonth))) {
|
|
342
|
+
return;
|
|
343
|
+
}
|
|
344
|
+
if (this.isSelectingYear) {
|
|
345
|
+
this.selectedYear += direction === "NEXT" ? 12 : -12;
|
|
346
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
|
|
347
|
+
}
|
|
348
|
+
else {
|
|
349
|
+
let thisMonth = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
350
|
+
thisMonth = direction === "NEXT" ? thisMonth.add(1, "month") : thisMonth.subtract(1, "month");
|
|
351
|
+
this.currentMonthNumber = thisMonth.month();
|
|
352
|
+
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
353
|
+
this.selectedYear = this.currentYearNumber = thisMonth.year();
|
|
354
|
+
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
199
355
|
}
|
|
200
|
-
this.currentMonthNumber = thisMonth.month();
|
|
201
|
-
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
202
|
-
this.currentYearNumber = thisMonth.year();
|
|
203
|
-
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
204
356
|
this.calculateMinMaxDays();
|
|
357
|
+
this.calculateDisabledMonthsAndYears();
|
|
205
358
|
}
|
|
206
359
|
generateDates(month, currentYearNumber) {
|
|
207
360
|
var _a;
|
|
@@ -269,62 +422,109 @@ class TzDpContainerComponent {
|
|
|
269
422
|
cancelDatePicker() {
|
|
270
423
|
this.data.dateChange("");
|
|
271
424
|
}
|
|
425
|
+
toggleMonthSelector() {
|
|
426
|
+
if (this.isYearSelectionFlow)
|
|
427
|
+
return;
|
|
428
|
+
this.isSelectingMonth = !this.isSelectingMonth;
|
|
429
|
+
this.isSelectingYear = false;
|
|
430
|
+
this.calculateDisabledMonthsAndYears();
|
|
431
|
+
}
|
|
432
|
+
toggleYearSelector() {
|
|
433
|
+
this.isSelectingYear = !this.isSelectingYear;
|
|
434
|
+
this.selectedYear = this.currentYearNumber;
|
|
435
|
+
this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
|
|
436
|
+
this.isSelectingMonth = false;
|
|
437
|
+
this.calculateDisabledMonthsAndYears();
|
|
438
|
+
}
|
|
439
|
+
resetDateSelection() {
|
|
440
|
+
this.localSelectedDate = {
|
|
441
|
+
date: 0,
|
|
442
|
+
weekDay: 0,
|
|
443
|
+
isCurrentDay: false,
|
|
444
|
+
isSelectedDay: false,
|
|
445
|
+
isDisabledDay: false,
|
|
446
|
+
toastMessage: ''
|
|
447
|
+
};
|
|
448
|
+
this.data.date = '';
|
|
449
|
+
}
|
|
450
|
+
selectMonth(month) {
|
|
451
|
+
this.currentMonthNumber = this.availableMonths.indexOf(month);
|
|
452
|
+
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
453
|
+
this.isSelectingMonth = false;
|
|
454
|
+
this.isYearSelectionFlow = false;
|
|
455
|
+
this.resetDateSelection();
|
|
456
|
+
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
457
|
+
this.calculateMinMaxDays();
|
|
458
|
+
}
|
|
459
|
+
selectYear(year) {
|
|
460
|
+
this.selectedYear = this.currentYearNumber = year;
|
|
461
|
+
this.isSelectingYear = false;
|
|
462
|
+
this.isSelectingMonth = true;
|
|
463
|
+
this.isYearSelectionFlow = true;
|
|
464
|
+
this.resetDateSelection();
|
|
465
|
+
this.calculateDisabledMonthsAndYears();
|
|
466
|
+
}
|
|
272
467
|
}
|
|
273
468
|
TzDpContainerComponent.ɵfac = function TzDpContainerComponent_Factory(t) { return new (t || TzDpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); };
|
|
274
469
|
TzDpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDpContainerComponent, selectors: [["mis-tz-dp"]], hostBindings: function TzDpContainerComponent_HostBindings(rf, ctx) {
|
|
275
470
|
if (rf & 1) {
|
|
276
471
|
i0.ɵɵlistener("keydown.esc", function TzDpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
|
|
277
472
|
}
|
|
278
|
-
}, decls: 17, vars:
|
|
473
|
+
}, 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"], [1, "year-header", 3, "click"], [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) {
|
|
279
474
|
if (rf & 1) {
|
|
280
475
|
i0.ɵɵelementStart(0, "div", 0);
|
|
281
476
|
i0.ɵɵelement(1, "div", 1);
|
|
282
477
|
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
|
|
283
|
-
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_3_listener() { return
|
|
478
|
+
i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_3_listener() { return ctx.navigateView("PREVIOUS"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_3_listener() { return ctx.navigateView("PREVIOUS"); });
|
|
284
479
|
i0.ɵɵnamespaceSVG();
|
|
285
480
|
i0.ɵɵelementStart(4, "svg", 4);
|
|
286
481
|
i0.ɵɵelement(5, "path", 5);
|
|
287
482
|
i0.ɵɵelementEnd()();
|
|
483
|
+
i0.ɵɵtemplate(6, TzDpContainerComponent_div_6_Template, 2, 1, "div", 6);
|
|
484
|
+
i0.ɵɵtemplate(7, TzDpContainerComponent_div_7_Template, 2, 1, "div", 7);
|
|
288
485
|
i0.ɵɵnamespaceHTML();
|
|
289
|
-
i0.ɵɵelementStart(
|
|
290
|
-
i0.ɵɵ
|
|
291
|
-
i0.ɵɵelementEnd();
|
|
292
|
-
i0.ɵɵelementStart(8, "div", 6);
|
|
293
|
-
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.navigateView("NEXT"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_8_listener() { return ctx.navigateView("NEXT"); });
|
|
294
488
|
i0.ɵɵnamespaceSVG();
|
|
295
489
|
i0.ɵɵelementStart(9, "svg", 4);
|
|
296
490
|
i0.ɵɵelement(10, "path", 5);
|
|
297
491
|
i0.ɵɵelementEnd()()();
|
|
298
492
|
i0.ɵɵnamespaceHTML();
|
|
299
|
-
i0.ɵɵelementStart(11, "div",
|
|
300
|
-
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);
|
|
301
498
|
i0.ɵɵelementEnd();
|
|
302
|
-
i0.ɵɵ
|
|
303
|
-
i0.ɵɵtemplate(15, TzDpContainerComponent_div_15_Template, 2, 6, "div", 11);
|
|
304
|
-
i0.ɵɵelementEnd()();
|
|
305
|
-
i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 12);
|
|
499
|
+
i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 14);
|
|
306
500
|
i0.ɵɵelementEnd();
|
|
307
501
|
}
|
|
308
502
|
if (rf & 2) {
|
|
309
503
|
i0.ɵɵproperty("ngClass", ctx.data.disableBoxShadow ? "remove-box-shadow" : "")("cdkTrapFocusAutoCapture", true);
|
|
310
504
|
i0.ɵɵadvance(3);
|
|
311
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
505
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, ctx.isPreviousMonthDisabled || ctx.isSelectingMonth));
|
|
506
|
+
i0.ɵɵadvance(3);
|
|
507
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingYear);
|
|
508
|
+
i0.ɵɵadvance(1);
|
|
509
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth);
|
|
510
|
+
i0.ɵɵadvance(1);
|
|
511
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c5, ctx.isNextMonthDisabled || ctx.isSelectingMonth));
|
|
312
512
|
i0.ɵɵadvance(4);
|
|
313
|
-
i0.ɵɵ
|
|
513
|
+
i0.ɵɵproperty("ngIf", ctx.isSelectingMonth && !ctx.isSelectingYear);
|
|
514
|
+
i0.ɵɵadvance(1);
|
|
515
|
+
i0.ɵɵproperty("ngIf", ctx.isSelectingYear && !ctx.isSelectingMonth);
|
|
516
|
+
i0.ɵɵadvance(1);
|
|
517
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
|
|
314
518
|
i0.ɵɵadvance(1);
|
|
315
|
-
i0.ɵɵproperty("
|
|
316
|
-
i0.ɵɵadvance(5);
|
|
317
|
-
i0.ɵɵproperty("ngForOf", ctx.weekDays);
|
|
318
|
-
i0.ɵɵadvance(2);
|
|
319
|
-
i0.ɵɵproperty("ngForOf", ctx.currentMonthDates);
|
|
519
|
+
i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
|
|
320
520
|
i0.ɵɵadvance(1);
|
|
321
521
|
i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton);
|
|
322
522
|
}
|
|
323
|
-
}, 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}"] });
|
|
523
|
+
}, 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:pointer;background-color:#cbddfb}.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}"] });
|
|
324
524
|
(function () {
|
|
325
525
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDpContainerComponent, [{
|
|
326
526
|
type: Component,
|
|
327
|
-
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"] }]
|
|
527
|
+
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)=\"navigateView('PREVIOUS')\"\n tabindex=\"0\"\n aria-label=\"Previous Month\"\n (keyup.enter)=\"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 {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n </div>\n <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n {{ isSelectingYear ? yearRange : currentYearNumber }}\n </div>\n\n\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"navigateView('NEXT')\"\n tabindex=\"0\"\n aria-label=\"Next Month\"\n (keyup.enter)=\"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 && !isSelectingYear\" class=\"month-selector\">\n <div class=\"row\">\n <div *ngFor=\"let month of availableMonths; let i = index\" \n class=\"month\" \n (click)=\"!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 && !isSelectingMonth\" class=\"year-selector\">\n <div class=\"row\">\n <div *ngFor=\"let year of availableYears; let i = index\" \n class=\"year\" \n (click)=\"!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:pointer;background-color:#cbddfb}.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"] }]
|
|
328
528
|
}], function () {
|
|
329
529
|
return [{ type: undefined, decorators: [{
|
|
330
530
|
type: Inject,
|