mis-crystal-design-system 18.0.3 → 18.0.4
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/daterangepicker_v2/models/drp-config.model.d.ts +2 -0
- package/daterangepicker_v2/tz-daterangepicker.directive.d.ts +2 -1
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +2 -0
- package/esm2022/daterangepicker_v2/models/drp-config.model.mjs +1 -1
- package/esm2022/daterangepicker_v2/tz-daterangepicker.directive.mjs +14 -5
- package/esm2022/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +82 -52
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs +94 -55
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/package.json +60 -60
|
@@ -76,98 +76,100 @@ const _c1 = () => [];
|
|
|
76
76
|
const _c2 = a0 => ({ "active-range": a0 });
|
|
77
77
|
const _c3 = (a0, a1, a2, a3, a4, a5) => ({ "selected-same-day": a0, "selected-start-day": a1, "selected-end-day": a2, "disabled-day": a3, "in-range-day": a4, "is-valid-date": a5 });
|
|
78
78
|
function TzDrpContainerComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
|
|
79
|
-
const
|
|
80
|
-
i0.ɵɵelementStart(0, "div")(1, "button",
|
|
81
|
-
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_3_div_1_Template_button_click_1_listener() { const
|
|
79
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
80
|
+
i0.ɵɵelementStart(0, "div")(1, "button", 22);
|
|
81
|
+
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_3_div_1_Template_button_click_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.selectRange(item_r3)); });
|
|
82
82
|
i0.ɵɵtext(2);
|
|
83
83
|
i0.ɵɵelementEnd()();
|
|
84
84
|
} if (rf & 2) {
|
|
85
|
-
const
|
|
86
|
-
const
|
|
85
|
+
const item_r3 = ctx.$implicit;
|
|
86
|
+
const ctx_r3 = i0.ɵɵnextContext(2);
|
|
87
87
|
i0.ɵɵadvance();
|
|
88
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2,
|
|
88
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, ctx_r3.selectedItemLabel === item_r3.label));
|
|
89
89
|
i0.ɵɵadvance();
|
|
90
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
90
|
+
i0.ɵɵtextInterpolate1(" ", item_r3.label, " ");
|
|
91
91
|
} }
|
|
92
92
|
function TzDrpContainerComponent_div_3_Template(rf, ctx) { if (rf & 1) {
|
|
93
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
93
94
|
i0.ɵɵelementStart(0, "div", 20);
|
|
94
95
|
i0.ɵɵtemplate(1, TzDrpContainerComponent_div_3_div_1_Template, 3, 4, "div", 21);
|
|
95
96
|
i0.ɵɵelementStart(2, "div")(3, "button", 22);
|
|
97
|
+
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.resetRange()); });
|
|
96
98
|
i0.ɵɵtext(4, "Custom Range");
|
|
97
99
|
i0.ɵɵelementEnd()()();
|
|
98
100
|
} if (rf & 2) {
|
|
99
101
|
let tmp_1_0;
|
|
100
|
-
const
|
|
102
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
101
103
|
i0.ɵɵadvance();
|
|
102
|
-
i0.ɵɵproperty("ngForOf", (tmp_1_0 =
|
|
104
|
+
i0.ɵɵproperty("ngForOf", (tmp_1_0 = ctx_r3.data == null ? null : ctx_r3.data.dpConfig == null ? null : ctx_r3.data.dpConfig.ranges) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(2, _c1));
|
|
103
105
|
i0.ɵɵadvance(2);
|
|
104
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2,
|
|
106
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r3.selectedItemLabel === "Custom Range"));
|
|
105
107
|
} }
|
|
106
108
|
function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
|
|
107
|
-
i0.ɵɵelementStart(0, "div",
|
|
109
|
+
i0.ɵɵelementStart(0, "div", 23)(1, "span");
|
|
108
110
|
i0.ɵɵtext(2);
|
|
109
111
|
i0.ɵɵelementEnd()();
|
|
110
112
|
} if (rf & 2) {
|
|
111
|
-
const
|
|
113
|
+
const weekDay_r5 = ctx.$implicit;
|
|
112
114
|
i0.ɵɵadvance(2);
|
|
113
|
-
i0.ɵɵtextInterpolate(
|
|
115
|
+
i0.ɵɵtextInterpolate(weekDay_r5.label);
|
|
114
116
|
} }
|
|
115
117
|
function TzDrpContainerComponent_div_19_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
116
|
-
i0.ɵɵelementStart(0, "span",
|
|
118
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
117
119
|
i0.ɵɵtext(1);
|
|
118
120
|
i0.ɵɵelementEnd();
|
|
119
121
|
} if (rf & 2) {
|
|
120
|
-
const
|
|
121
|
-
const
|
|
122
|
-
i0.ɵɵproperty("tabindex",
|
|
123
|
-
i0.ɵɵattribute("aria-label",
|
|
122
|
+
const day_r7 = i0.ɵɵnextContext().$implicit;
|
|
123
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
124
|
+
i0.ɵɵproperty("tabindex", day_r7.isDisabledDay ? -1 : 0);
|
|
125
|
+
i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r7.date, ctx_r3.currentMonth, ctx_r3.currentYearNumber));
|
|
124
126
|
i0.ɵɵadvance();
|
|
125
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
127
|
+
i0.ɵɵtextInterpolate1(" ", day_r7.date, " ");
|
|
126
128
|
} }
|
|
127
129
|
function TzDrpContainerComponent_div_19_Template(rf, ctx) { if (rf & 1) {
|
|
128
|
-
const
|
|
129
|
-
i0.ɵɵelementStart(0, "div",
|
|
130
|
-
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_19_Template_div_click_0_listener() { const
|
|
131
|
-
i0.ɵɵtemplate(1, TzDrpContainerComponent_div_19_span_1_Template, 2, 3, "span",
|
|
130
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
131
|
+
i0.ɵɵelementStart(0, "div", 24);
|
|
132
|
+
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_19_Template_div_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("LEFT", day_r7)); })("keyup.enter", function TzDrpContainerComponent_div_19_Template_div_keyup_enter_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("LEFT", day_r7)); });
|
|
133
|
+
i0.ɵɵtemplate(1, TzDrpContainerComponent_div_19_span_1_Template, 2, 3, "span", 25);
|
|
132
134
|
i0.ɵɵelementEnd();
|
|
133
135
|
} if (rf & 2) {
|
|
134
|
-
const
|
|
135
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3,
|
|
136
|
+
const day_r7 = ctx.$implicit;
|
|
137
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3, day_r7.isSelectedStartDay && day_r7.isSelectedEndDay, day_r7.isSelectedStartDay, day_r7.isSelectedEndDay, day_r7.isDisabledDay, day_r7.inRangeDay, day_r7.date > 0 && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)));
|
|
136
138
|
i0.ɵɵadvance();
|
|
137
|
-
i0.ɵɵproperty("ngIf",
|
|
139
|
+
i0.ɵɵproperty("ngIf", day_r7.date > 0);
|
|
138
140
|
} }
|
|
139
141
|
function TzDrpContainerComponent_div_30_Template(rf, ctx) { if (rf & 1) {
|
|
140
|
-
i0.ɵɵelementStart(0, "div",
|
|
142
|
+
i0.ɵɵelementStart(0, "div", 23)(1, "span");
|
|
141
143
|
i0.ɵɵtext(2);
|
|
142
144
|
i0.ɵɵelementEnd()();
|
|
143
145
|
} if (rf & 2) {
|
|
144
|
-
const
|
|
146
|
+
const weekDay_r8 = ctx.$implicit;
|
|
145
147
|
i0.ɵɵadvance(2);
|
|
146
|
-
i0.ɵɵtextInterpolate(
|
|
148
|
+
i0.ɵɵtextInterpolate(weekDay_r8.label);
|
|
147
149
|
} }
|
|
148
150
|
function TzDrpContainerComponent_div_32_span_1_Template(rf, ctx) { if (rf & 1) {
|
|
149
|
-
i0.ɵɵelementStart(0, "span",
|
|
151
|
+
i0.ɵɵelementStart(0, "span", 26);
|
|
150
152
|
i0.ɵɵtext(1);
|
|
151
153
|
i0.ɵɵelementEnd();
|
|
152
154
|
} if (rf & 2) {
|
|
153
|
-
const
|
|
154
|
-
const
|
|
155
|
-
i0.ɵɵproperty("tabindex",
|
|
156
|
-
i0.ɵɵattribute("aria-label",
|
|
155
|
+
const day_r10 = i0.ɵɵnextContext().$implicit;
|
|
156
|
+
const ctx_r3 = i0.ɵɵnextContext();
|
|
157
|
+
i0.ɵɵproperty("tabindex", day_r10.isDisabledDay ? -1 : 0);
|
|
158
|
+
i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r10.date, ctx_r3.nextMonth, ctx_r3.nextYearNumber));
|
|
157
159
|
i0.ɵɵadvance();
|
|
158
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
160
|
+
i0.ɵɵtextInterpolate1(" ", day_r10.date, " ");
|
|
159
161
|
} }
|
|
160
162
|
function TzDrpContainerComponent_div_32_Template(rf, ctx) { if (rf & 1) {
|
|
161
|
-
const
|
|
162
|
-
i0.ɵɵelementStart(0, "div",
|
|
163
|
-
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_32_Template_div_click_0_listener() { const
|
|
164
|
-
i0.ɵɵtemplate(1, TzDrpContainerComponent_div_32_span_1_Template, 2, 3, "span",
|
|
163
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
164
|
+
i0.ɵɵelementStart(0, "div", 24);
|
|
165
|
+
i0.ɵɵlistener("click", function TzDrpContainerComponent_div_32_Template_div_click_0_listener() { const day_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("RIGHT", day_r10)); })("keyup.enter", function TzDrpContainerComponent_div_32_Template_div_keyup_enter_0_listener() { const day_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("RIGHT", day_r10)); });
|
|
166
|
+
i0.ɵɵtemplate(1, TzDrpContainerComponent_div_32_span_1_Template, 2, 3, "span", 25);
|
|
165
167
|
i0.ɵɵelementEnd();
|
|
166
168
|
} if (rf & 2) {
|
|
167
|
-
const
|
|
168
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3,
|
|
169
|
+
const day_r10 = ctx.$implicit;
|
|
170
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3, day_r10.isSelectedStartDay && day_r10.isSelectedEndDay, day_r10.isSelectedStartDay, day_r10.isSelectedEndDay, day_r10.isDisabledDay, day_r10.inRangeDay, day_r10.date > 0 && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)));
|
|
169
171
|
i0.ɵɵadvance();
|
|
170
|
-
i0.ɵɵproperty("ngIf",
|
|
172
|
+
i0.ɵɵproperty("ngIf", day_r10.date > 0);
|
|
171
173
|
} }
|
|
172
174
|
dayjs.extend(isBetween);
|
|
173
175
|
dayjs.extend(utc);
|
|
@@ -178,6 +180,7 @@ dayjs.extend(isSameOrBefore);
|
|
|
178
180
|
class TzDrpContainerComponent {
|
|
179
181
|
constructor(data, toast) {
|
|
180
182
|
this.toast = toast;
|
|
183
|
+
this.CUSTOM_RANGE_LABEL = "Custom Range";
|
|
181
184
|
this.dayjsInstance = (...args) => {
|
|
182
185
|
return tz(args[0], args[1] || 'DD/MM/YYYY', this.data.dpConfig.timezone || 'Asia/Kolkata');
|
|
183
186
|
};
|
|
@@ -189,13 +192,17 @@ class TzDrpContainerComponent {
|
|
|
189
192
|
this.isNextMonthDisabled = false;
|
|
190
193
|
this.selectionStarted = false;
|
|
191
194
|
this.isDatesValid = false;
|
|
192
|
-
this.selectedItemLabel =
|
|
195
|
+
this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
|
|
193
196
|
this.data = data;
|
|
194
197
|
this.localSelectedDates = this.data.dates;
|
|
195
198
|
this.isDatesValid = false;
|
|
196
199
|
if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
|
|
197
200
|
this.isDatesValid = true;
|
|
198
201
|
}
|
|
202
|
+
// Initialize selectedItemLabel from data.selectedRangeLabel if available
|
|
203
|
+
if (this.data.selectedRangeLabel) {
|
|
204
|
+
this.selectedItemLabel = this.data.selectedRangeLabel;
|
|
205
|
+
}
|
|
199
206
|
if (this.data?.dpConfig?.timezone) {
|
|
200
207
|
this.dayjsInstance = (...args) => {
|
|
201
208
|
return tz(args[0], args[1], this.data.dpConfig.timezone);
|
|
@@ -351,7 +358,7 @@ class TzDrpContainerComponent {
|
|
|
351
358
|
if (day.date <= 0)
|
|
352
359
|
return;
|
|
353
360
|
if (!day.isDisabledDay) {
|
|
354
|
-
this.selectedItemLabel =
|
|
361
|
+
this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
|
|
355
362
|
if (this.selectionStarted) {
|
|
356
363
|
const dayjsDay = dayjs()
|
|
357
364
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
@@ -360,7 +367,8 @@ class TzDrpContainerComponent {
|
|
|
360
367
|
if (dayjsDay.isBefore(dayjs(this.localSelectedDates.startDate, this.data.dpConfig.format), 'day')) {
|
|
361
368
|
this.localSelectedDates = {
|
|
362
369
|
startDate: dayjsDay.format(this.data.dpConfig.format),
|
|
363
|
-
endDate: null
|
|
370
|
+
endDate: null,
|
|
371
|
+
selectedRangeLabel: this.CUSTOM_RANGE_LABEL
|
|
364
372
|
};
|
|
365
373
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
366
374
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
@@ -369,7 +377,8 @@ class TzDrpContainerComponent {
|
|
|
369
377
|
this.selectionStarted = false;
|
|
370
378
|
this.localSelectedDates = {
|
|
371
379
|
...this.localSelectedDates,
|
|
372
|
-
endDate: dayjsDay.format(this.data.dpConfig.format)
|
|
380
|
+
endDate: dayjsDay.format(this.data.dpConfig.format),
|
|
381
|
+
selectedRangeLabel: this.CUSTOM_RANGE_LABEL
|
|
373
382
|
};
|
|
374
383
|
}
|
|
375
384
|
else {
|
|
@@ -380,7 +389,8 @@ class TzDrpContainerComponent {
|
|
|
380
389
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
381
390
|
.date(day.date)
|
|
382
391
|
.format(this.data.dpConfig.format),
|
|
383
|
-
endDate: null
|
|
392
|
+
endDate: null,
|
|
393
|
+
selectedRangeLabel: this.CUSTOM_RANGE_LABEL
|
|
384
394
|
};
|
|
385
395
|
}
|
|
386
396
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -421,15 +431,35 @@ class TzDrpContainerComponent {
|
|
|
421
431
|
this.nextMonthNumber = this.currentMonthNumber + 1;
|
|
422
432
|
this.nextYearNumber = this.currentYearNumber;
|
|
423
433
|
}
|
|
424
|
-
this.localSelectedDates = {
|
|
434
|
+
this.localSelectedDates = {
|
|
435
|
+
startDate: startDateStr,
|
|
436
|
+
endDate: endDateStr,
|
|
437
|
+
selectedRangeLabel: item.label
|
|
438
|
+
};
|
|
425
439
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
426
440
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
427
441
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
428
442
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
429
443
|
this.isDatesValid = !!(this.localSelectedDates.startDate && this.localSelectedDates.endDate);
|
|
430
444
|
}
|
|
445
|
+
resetRange() {
|
|
446
|
+
this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
|
|
447
|
+
this.localSelectedDates = {
|
|
448
|
+
startDate: null,
|
|
449
|
+
endDate: null,
|
|
450
|
+
selectedRangeLabel: this.CUSTOM_RANGE_LABEL
|
|
451
|
+
};
|
|
452
|
+
this.selectionStarted = false;
|
|
453
|
+
this.isDatesValid = false;
|
|
454
|
+
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
455
|
+
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
456
|
+
}
|
|
431
457
|
applyDates() {
|
|
432
|
-
|
|
458
|
+
const result = {
|
|
459
|
+
...this.localSelectedDates,
|
|
460
|
+
selectedRangeLabel: this.selectedItemLabel
|
|
461
|
+
};
|
|
462
|
+
this.data.dateChange(result);
|
|
433
463
|
}
|
|
434
464
|
cancelDatePicker() {
|
|
435
465
|
this.data.close();
|
|
@@ -437,7 +467,7 @@ class TzDrpContainerComponent {
|
|
|
437
467
|
static { this.ɵfac = function TzDrpContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDrpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); }; }
|
|
438
468
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDrpContainerComponent, selectors: [["mis-tz-drp"]], hostBindings: function TzDrpContainerComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
439
469
|
i0.ɵɵlistener("keydown.esc", function TzDrpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
|
|
440
|
-
} }, decls: 38, vars: 20, consts: [["aria-label", "date range picker", "cdkTrapFocus", "", 1, "daterangepicker-container", 3, "cdkTrapFocusAutoCapture"], [1, "daterangepicker-container__view"], ["tabindex", "-1", "cdkFocusInitial", ""], ["class", "daterangepicker-container__ranges", 4, "ngIf"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], ["tabindex", "0", "aria-label", "Previous Month", 1, "daterangepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], ["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"], ["tabindex", "0", "aria-label", "Next Month", 1, "daterangepicker-container__arrow__icon", "mobile_view", 3, "click", "keyup.enter", "ngClass"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], ["tabindex", "0", 1, "daterangepicker-container__arrow__icon", "pc_view", 3, "click", "keyup.enter", "ngClass"], [1, "daterangepicker__footer"], ["mis-button", "", "type", "none", "id", "mobile-footer-btn", 3, "click"], ["mis-button", "", "type", "primary", "id", "mobile-footer-btn", 3, "click", "disabled"], [1, "daterangepicker-container__ranges"], [4, "ngFor", "ngForOf"], [1, "mis-btn", 3, "
|
|
470
|
+
} }, decls: 38, vars: 20, consts: [["aria-label", "date range picker", "cdkTrapFocus", "", 1, "daterangepicker-container", 3, "cdkTrapFocusAutoCapture"], [1, "daterangepicker-container__view"], ["tabindex", "-1", "cdkFocusInitial", ""], ["class", "daterangepicker-container__ranges", 4, "ngIf"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], ["tabindex", "0", "aria-label", "Previous Month", 1, "daterangepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], ["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"], ["tabindex", "0", "aria-label", "Next Month", 1, "daterangepicker-container__arrow__icon", "mobile_view", 3, "click", "keyup.enter", "ngClass"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], ["tabindex", "0", 1, "daterangepicker-container__arrow__icon", "pc_view", 3, "click", "keyup.enter", "ngClass"], [1, "daterangepicker__footer"], ["mis-button", "", "type", "none", "id", "mobile-footer-btn", 3, "click"], ["mis-button", "", "type", "primary", "id", "mobile-footer-btn", 3, "click", "disabled"], [1, "daterangepicker-container__ranges"], [4, "ngFor", "ngForOf"], [1, "mis-btn", 3, "click", "ngClass"], [1, "daterangepicker-container__weekday"], [1, "daterangepicker-container__day", 3, "click", "keyup.enter", "ngClass"], [3, "tabindex", 4, "ngIf"], [3, "tabindex"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
441
471
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
442
472
|
i0.ɵɵelement(2, "div", 2);
|
|
443
473
|
i0.ɵɵtemplate(3, TzDrpContainerComponent_div_3_Template, 5, 5, "div", 3);
|
|
@@ -519,7 +549,7 @@ class TzDrpContainerComponent {
|
|
|
519
549
|
}
|
|
520
550
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
521
551
|
type: Component,
|
|
522
|
-
args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\" aria-label=\"date range picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div class=\"daterangepicker-container__view\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div *ngIf=\"data?.dpConfig?.ranges?.length > 0\" class=\"daterangepicker-container__ranges\">\n <div *ngFor=\"let item of data?.dpConfig?.ranges ?? []\" >\n <button\n [ngClass]=\"{'active-range' : selectedItemLabel === item.label}\"\n (click)=\"selectRange(item)\"\n class=\"mis-btn\"\n >\n {{ item.label }}\n </button>\n </div>\n <div> <button class=\"mis-btn\" [ngClass]=\"{'active-range' : selectedItemLabel === 'Custom Range'}\">Custom Range</button> </div>\n </div>\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n tabindex=\"0\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n (keyup.enter)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n aria-label=\"Previous Month\"\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></div>\n <!-- Button visible in mobile view -->\n <div\n class=\"daterangepicker-container__arrow__icon mobile_view\"\n tabindex=\"0\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n aria-label=\"Next Month\"\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=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span>{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\" \n [ngClass]=\"{\n 'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n 'selected-start-day': day.isSelectedStartDay,\n 'selected-end-day': day.isSelectedEndDay,\n 'disabled-day': day.isDisabledDay,\n 'in-range-day': day.inRangeDay,\n 'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT', day)\"\n (keyup.enter)=\"selectDay('LEFT', day)\"\n >\n <span *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\">\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon pc_view\"\n tabindex=\"0\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\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=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span>{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n 'selected-start-day': day.isSelectedStartDay,\n 'selected-end-day': day.isSelectedEndDay,\n 'disabled-day': day.isDisabledDay,\n 'in-range-day': day.inRangeDay,\n 'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT', day)\"\n (keyup.enter)=\"selectDay('RIGHT', day)\"\n >\n <span *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [attr.aria-label]=\"retractDayMonth(day.date, nextMonth, nextYearNumber)\">\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"daterangepicker__footer\">\n <button mis-button type=\"none\" id='mobile-footer-btn' (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button type=\"primary\" id=\"mobile-footer-btn\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\">Apply</button>\n </div>\n</div>", styles: [":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}.daterangepicker-container{background:#fff;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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container{max-width:100vw;border:none}}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__ranges{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .mis-btn{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .active-range{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__view::-webkit-scrollbar{display:none}}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{width:90%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{margin:0 auto;font-size:4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .mobile_view{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .pc_view{display:none}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{width:100%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{margin:0 auto}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:3vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day)>span{color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:3.4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker__footer{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container .daterangepicker__footer #mobile-footer-btn{width:36%;font-size:3.8vw}}\n"] }]
|
|
552
|
+
args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\" aria-label=\"date range picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div class=\"daterangepicker-container__view\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div *ngIf=\"data?.dpConfig?.ranges?.length > 0\" class=\"daterangepicker-container__ranges\">\n <div *ngFor=\"let item of data?.dpConfig?.ranges ?? []\" >\n <button\n [ngClass]=\"{'active-range' : selectedItemLabel === item.label}\"\n (click)=\"selectRange(item)\"\n class=\"mis-btn\"\n >\n {{ item.label }}\n </button>\n </div>\n <div> <button class=\"mis-btn\" [ngClass]=\"{'active-range' : selectedItemLabel === 'Custom Range'}\" (click)=\"resetRange()\">Custom Range</button> </div>\n </div>\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n tabindex=\"0\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n (keyup.enter)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n aria-label=\"Previous Month\"\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></div>\n <!-- Button visible in mobile view -->\n <div\n class=\"daterangepicker-container__arrow__icon mobile_view\"\n tabindex=\"0\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n aria-label=\"Next Month\"\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=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span>{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\" \n [ngClass]=\"{\n 'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n 'selected-start-day': day.isSelectedStartDay,\n 'selected-end-day': day.isSelectedEndDay,\n 'disabled-day': day.isDisabledDay,\n 'in-range-day': day.inRangeDay,\n 'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT', day)\"\n (keyup.enter)=\"selectDay('LEFT', day)\"\n >\n <span *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\">\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon pc_view\"\n tabindex=\"0\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\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=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span>{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n 'selected-start-day': day.isSelectedStartDay,\n 'selected-end-day': day.isSelectedEndDay,\n 'disabled-day': day.isDisabledDay,\n 'in-range-day': day.inRangeDay,\n 'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT', day)\"\n (keyup.enter)=\"selectDay('RIGHT', day)\"\n >\n <span *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [attr.aria-label]=\"retractDayMonth(day.date, nextMonth, nextYearNumber)\">\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"daterangepicker__footer\">\n <button mis-button type=\"none\" id='mobile-footer-btn' (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button type=\"primary\" id=\"mobile-footer-btn\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\">Apply</button>\n </div>\n</div>", styles: [":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}.daterangepicker-container{background:#fff;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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container{max-width:100vw;border:none}}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__ranges{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .mis-btn{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .active-range{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__view::-webkit-scrollbar{display:none}}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{width:90%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{margin:0 auto;font-size:4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .mobile_view{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .pc_view{display:none}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{width:100%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{margin:0 auto}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:3vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day)>span{color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:3.4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker__footer{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container .daterangepicker__footer #mobile-footer-btn{width:36%;font-size:3.8vw}}\n"] }]
|
|
523
553
|
}], () => [{ type: undefined, decorators: [{
|
|
524
554
|
type: Inject,
|
|
525
555
|
args: [CONTAINER_DATA]
|
|
@@ -549,6 +579,7 @@ class TzDaterangepickerDirective {
|
|
|
549
579
|
maxAllowedRange: 0,
|
|
550
580
|
ranges: []
|
|
551
581
|
};
|
|
582
|
+
this.selectedRangeLabel = 'Custom Range';
|
|
552
583
|
this.dateMessages = [];
|
|
553
584
|
this.positionX = "center";
|
|
554
585
|
this.positionY = "bottom";
|
|
@@ -607,6 +638,7 @@ class TzDaterangepickerDirective {
|
|
|
607
638
|
dates: this.control?.control.value || this.dates,
|
|
608
639
|
dpConfig: this.dpConfig,
|
|
609
640
|
datesDisabled: this.dpDisabledDates,
|
|
641
|
+
selectedRangeLabel: this.selectedRangeLabel,
|
|
610
642
|
dateChange: this.applyDate.bind(this),
|
|
611
643
|
close: this.close.bind(this)
|
|
612
644
|
}
|
|
@@ -622,9 +654,14 @@ class TzDaterangepickerDirective {
|
|
|
622
654
|
});
|
|
623
655
|
}
|
|
624
656
|
applyDate(dates) {
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
657
|
+
// If selectedRangeLabel is present in the date object, keep it, otherwise it's a custom range
|
|
658
|
+
const result = {
|
|
659
|
+
...dates,
|
|
660
|
+
selectedRangeLabel: dates['selectedRangeLabel'] || 'Custom Range'
|
|
661
|
+
};
|
|
662
|
+
this.dateChange.emit(result);
|
|
663
|
+
this.control?.control.patchValue(result);
|
|
664
|
+
this.dates = result;
|
|
628
665
|
this.close();
|
|
629
666
|
}
|
|
630
667
|
close() {
|
|
@@ -635,7 +672,7 @@ class TzDaterangepickerDirective {
|
|
|
635
672
|
static { this.ɵfac = function TzDaterangepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDaterangepickerDirective)(i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
|
|
636
673
|
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TzDaterangepickerDirective, selectors: [["input", "misTzDrp", ""]], hostBindings: function TzDaterangepickerDirective_HostBindings(rf, ctx) { if (rf & 1) {
|
|
637
674
|
i0.ɵɵlistener("click", function TzDaterangepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzDaterangepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzDaterangepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
|
|
638
|
-
} }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", datesDisabled: "datesDisabled", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY" }, outputs: { dateChange: "dateChange" } }); }
|
|
675
|
+
} }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", datesDisabled: "datesDisabled", selectedRangeLabel: "selectedRangeLabel", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY" }, outputs: { dateChange: "dateChange" } }); }
|
|
639
676
|
}
|
|
640
677
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDaterangepickerDirective, [{
|
|
641
678
|
type: Directive,
|
|
@@ -652,6 +689,8 @@ class TzDaterangepickerDirective {
|
|
|
652
689
|
type: Input
|
|
653
690
|
}], datesDisabled: [{
|
|
654
691
|
type: Input
|
|
692
|
+
}], selectedRangeLabel: [{
|
|
693
|
+
type: Input
|
|
655
694
|
}], dateMessages: [{
|
|
656
695
|
type: Input
|
|
657
696
|
}], positionX: [{
|