mis-crystal-design-system 14.0.61-dayjs → 14.0.63
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/assets/images/close.svg +5 -0
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +1 -1
- package/dropdown/dropdown.component.d.ts +2 -1
- package/dynamic-form/dynamic-form.component.d.ts +1 -0
- package/esm2020/async-search-dropdown/async-dropdown.component.mjs +19 -18
- package/esm2020/checkbox/checkbox.component.mjs +3 -3
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +14 -24
- package/esm2020/daterangepicker_v2/models/drp-config.model.mjs +1 -1
- package/esm2020/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +36 -44
- package/esm2020/dropdown/dropdown.component.mjs +12 -8
- package/esm2020/dynamic-form/dynamic-form.component.mjs +12 -14
- package/esm2020/filter/animations/slideFromRight.mjs +12 -0
- package/esm2020/filter/filter-panel/filter-panel.component.mjs +403 -0
- package/esm2020/filter/filters.module.mjs +66 -0
- package/esm2020/filter/has-value.pipe.mjs +31 -0
- package/esm2020/filter/index.mjs +2 -0
- package/esm2020/filter/mis-crystal-design-system-filter.mjs +5 -0
- package/esm2020/filter/public_api.mjs +4 -0
- package/esm2020/multi-select-dropdown/multi-select-dropdown.component.mjs +20 -15
- package/esm2020/nested-multi-select-dropdown/nested-multi-select-dropdown.component.mjs +22 -15
- package/esm2020/radio-button/radio-button.component.mjs +3 -3
- package/esm2020/ske-loader/ske-loader.component.mjs +4 -4
- package/esm2020/specificdatepicker/public_api.mjs +2 -1
- package/esm2020/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +50 -61
- package/esm2020/table/filter/filter.component.mjs +12 -4
- package/esm2020/table/table.component.mjs +35 -19
- package/esm2020/timepicker/timepicker.component.mjs +48 -54
- package/esm2020/timerangepicker/timerangepicker.component.mjs +42 -46
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs +18 -17
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-checkbox.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-checkbox.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +13 -23
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs +35 -44
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.mjs +11 -7
- package/fesm2015/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +10 -13
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-filter.mjs +560 -0
- package/fesm2015/mis-crystal-design-system-filter.mjs.map +1 -0
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.mjs +19 -14
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.mjs +21 -14
- package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-radio-button.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-ske-loader.mjs +3 -3
- package/fesm2015/mis-crystal-design-system-ske-loader.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs +49 -60
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +53 -25
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timepicker.mjs +47 -53
- package/fesm2015/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs +41 -45
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs +18 -17
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-checkbox.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-checkbox.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +13 -23
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs +34 -43
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dropdown.mjs +11 -7
- package/fesm2020/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +10 -13
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-filter.mjs +510 -0
- package/fesm2020/mis-crystal-design-system-filter.mjs.map +1 -0
- package/fesm2020/mis-crystal-design-system-multi-select-dropdown.mjs +19 -14
- package/fesm2020/mis-crystal-design-system-multi-select-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-nested-multi-select-dropdown.mjs +21 -14
- package/fesm2020/mis-crystal-design-system-nested-multi-select-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-radio-button.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-ske-loader.mjs +3 -3
- package/fesm2020/mis-crystal-design-system-ske-loader.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs +49 -60
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +49 -25
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timepicker.mjs +47 -53
- package/fesm2020/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs +41 -45
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/filter/animations/slideFromRight.d.ts +1 -0
- package/filter/filter-panel/filter-panel.component.d.ts +51 -0
- package/filter/filters.module.d.ts +18 -0
- package/filter/has-value.pipe.d.ts +12 -0
- package/filter/index.d.ts +1 -0
- package/filter/public_api.d.ts +4 -0
- package/package.json +9 -1
- package/specificdatepicker/public_api.d.ts +1 -1
- package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +1 -1
- package/timepicker/timepicker.component.d.ts +2 -2
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
|
|
3
|
+
import { parseZone } from 'moment-timezone';
|
|
3
4
|
import * as i1$1 from '@angular/forms';
|
|
4
5
|
import { UntypedFormControl } from '@angular/forms';
|
|
5
6
|
import * as i5 from 'mis-crystal-design-system/datepicker_v2';
|
|
6
7
|
import { TzDatepickerDirective, DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
|
|
7
|
-
import dayjs from 'dayjs';
|
|
8
|
-
import timezone from 'dayjs/plugin/timezone';
|
|
9
|
-
import utc from 'dayjs/plugin/utc';
|
|
10
|
-
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
|
11
|
-
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
|
12
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
13
8
|
import * as i1 from 'mis-crystal-design-system/toast';
|
|
14
9
|
import { ToastModule } from 'mis-crystal-design-system/toast';
|
|
15
10
|
import * as i2 from '@angular/common';
|
|
@@ -196,7 +191,7 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) { if (rf & 1) {
|
|
|
196
191
|
} if (rf & 2) {
|
|
197
192
|
const ctx_r6 = i0.ɵɵnextContext();
|
|
198
193
|
i0.ɵɵadvance(2);
|
|
199
|
-
i0.ɵɵtextInterpolate1("",
|
|
194
|
+
i0.ɵɵtextInterpolate1("", (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
|
|
200
195
|
} }
|
|
201
196
|
function TzDrpContainerComponent_span_40_Template(rf, ctx) { if (rf & 1) {
|
|
202
197
|
i0.ɵɵelementStart(0, "span")(1, "span");
|
|
@@ -231,17 +226,13 @@ function TzDrpContainerComponent_button_45_Template(rf, ctx) { if (rf & 1) {
|
|
|
231
226
|
} }
|
|
232
227
|
const _c6 = function (a0) { return { "display": a0 }; };
|
|
233
228
|
const _c7 = function (a0) { return { "disabled-month": a0 }; };
|
|
234
|
-
|
|
235
|
-
dayjs.extend(timezone);
|
|
236
|
-
dayjs.extend(customParseFormat);
|
|
237
|
-
dayjs.extend(isSameOrAfter);
|
|
238
|
-
dayjs.extend(isSameOrBefore);
|
|
229
|
+
const _c8 = function () { return { display: "inline-block", "margin-left": "10px" }; };
|
|
239
230
|
class TzDrpContainerComponent {
|
|
240
231
|
constructor(data, toast, cdr) {
|
|
241
232
|
this.toast = toast;
|
|
242
233
|
this.cdr = cdr;
|
|
243
|
-
this.
|
|
244
|
-
return
|
|
234
|
+
this.parseZoneInstance = (...args) => {
|
|
235
|
+
return parseZone(...args);
|
|
245
236
|
};
|
|
246
237
|
this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
|
|
247
238
|
this.weekDays = [];
|
|
@@ -262,10 +253,10 @@ class TzDrpContainerComponent {
|
|
|
262
253
|
this.singleDateSelectedValue = '';
|
|
263
254
|
this.data = data;
|
|
264
255
|
this.localSelectedDatesRange = this.data.datesRange;
|
|
265
|
-
const startDate =
|
|
266
|
-
const endDate =
|
|
256
|
+
const startDate = new Date(this.localSelectedDatesRange?.startDate);
|
|
257
|
+
const endDate = new Date(this.localSelectedDatesRange?.endDate);
|
|
267
258
|
if (startDate && endDate) {
|
|
268
|
-
this.dateRangeLength = endDate.
|
|
259
|
+
this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
|
269
260
|
}
|
|
270
261
|
this.localSelectedDates = this.data.dates;
|
|
271
262
|
if (!this.data.isSPickerSelected) {
|
|
@@ -283,19 +274,19 @@ class TzDrpContainerComponent {
|
|
|
283
274
|
}
|
|
284
275
|
}
|
|
285
276
|
if (this.data?.dpConfig?.timezone) {
|
|
286
|
-
this.
|
|
287
|
-
return
|
|
277
|
+
this.parseZoneInstance = (...args) => {
|
|
278
|
+
return parseZone(...args).tz(this.data.dpConfig.timezone);
|
|
288
279
|
};
|
|
289
280
|
}
|
|
290
|
-
this.currentMonthNumber = this.
|
|
291
|
-
this.nextMonthNumber = this.
|
|
281
|
+
this.currentMonthNumber = this.parseZoneInstance().month();
|
|
282
|
+
this.nextMonthNumber = this.parseZoneInstance().add(1, "month").month();
|
|
292
283
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
293
284
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
294
|
-
this.currentYearNumber = this.
|
|
295
|
-
this.nextYearNumber = this.
|
|
285
|
+
this.currentYearNumber = this.parseZoneInstance().year();
|
|
286
|
+
this.nextYearNumber = this.parseZoneInstance().add(1, "month").year();
|
|
296
287
|
this.weekDays = this.rawWeekDays.map((day, index) => ({
|
|
297
288
|
label: `${day[0]}${day.slice(1).toLowerCase()}`,
|
|
298
|
-
isCurrentDay: this.
|
|
289
|
+
isCurrentDay: this.parseZoneInstance().day() === index
|
|
299
290
|
}));
|
|
300
291
|
if (!this.data?.dpConfig?.format) {
|
|
301
292
|
this.data.dpConfig = {
|
|
@@ -323,16 +314,16 @@ class TzDrpContainerComponent {
|
|
|
323
314
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
324
315
|
return;
|
|
325
316
|
}
|
|
326
|
-
selectedStartDate = this.
|
|
317
|
+
selectedStartDate = this.parseZoneInstance(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
|
|
327
318
|
}
|
|
328
319
|
else {
|
|
329
|
-
selectedStartDate = this.
|
|
320
|
+
selectedStartDate = this.parseZoneInstance(this.localSelectedDates?.[0].selectedDate, this.data.dpConfig.format);
|
|
330
321
|
}
|
|
331
322
|
if (selectedStartDate.isValid()) {
|
|
332
323
|
this.currentYearNumber = selectedStartDate.year();
|
|
333
324
|
this.nextYearNumber = selectedStartDate.add(1, "month").year();
|
|
334
|
-
this.currentMonthNumber = selectedStartDate.get("month");
|
|
335
|
-
this.nextMonthNumber = selectedStartDate.add(1, "month").month();
|
|
325
|
+
this.currentMonthNumber = selectedStartDate.get("month") - 1;
|
|
326
|
+
this.nextMonthNumber = selectedStartDate.add(1, "month").month() - 1;
|
|
336
327
|
if (this.currentMonthNumber === -1) {
|
|
337
328
|
this.currentMonthNumber = 11;
|
|
338
329
|
}
|
|
@@ -346,18 +337,18 @@ class TzDrpContainerComponent {
|
|
|
346
337
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
347
338
|
}
|
|
348
339
|
calculateMinMaxDays() {
|
|
349
|
-
const currentInstance = this.
|
|
350
|
-
const minDate =
|
|
340
|
+
const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
341
|
+
const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
|
|
351
342
|
if (minDate.isValid()) {
|
|
352
343
|
this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
|
|
353
344
|
}
|
|
354
|
-
const maxDate =
|
|
345
|
+
const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
|
|
355
346
|
if (maxDate.isValid()) {
|
|
356
347
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
357
348
|
}
|
|
358
349
|
}
|
|
359
350
|
navigateMonth(direction) {
|
|
360
|
-
let thisMonth =
|
|
351
|
+
let thisMonth = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
361
352
|
if (direction === "NEXT") {
|
|
362
353
|
thisMonth = thisMonth.add(1, "month");
|
|
363
354
|
}
|
|
@@ -389,23 +380,22 @@ class TzDrpContainerComponent {
|
|
|
389
380
|
}
|
|
390
381
|
generateDates(month, currentYearNumber) {
|
|
391
382
|
let dates = [];
|
|
392
|
-
const daysInMonth =
|
|
383
|
+
const daysInMonth = parseZone().year(currentYearNumber).month(month).daysInMonth();
|
|
393
384
|
for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
|
|
394
|
-
const date = this.
|
|
385
|
+
const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
|
|
395
386
|
const dateString = date.format(this.data.dpConfig.format);
|
|
396
387
|
let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
|
|
397
|
-
const minDate =
|
|
388
|
+
const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
|
|
398
389
|
if (!isDisabledDay && minDate.isValid()) {
|
|
399
390
|
isDisabledDay = minDate.isAfter(date, "day");
|
|
400
391
|
}
|
|
401
|
-
const maxDate =
|
|
392
|
+
const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
|
|
402
393
|
if (!isDisabledDay && maxDate.isValid()) {
|
|
403
394
|
isDisabledDay = maxDate.isBefore(date, "day");
|
|
404
395
|
}
|
|
405
|
-
const isCurrentDay = this.
|
|
406
|
-
this.
|
|
396
|
+
const isCurrentDay = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
|
|
397
|
+
this.parseZoneInstance().format(this.data.dpConfig.format);
|
|
407
398
|
let isSelectedDay = false;
|
|
408
|
-
console.log('abhay12', this.localSelectedDates);
|
|
409
399
|
for (const selectedDateConfig of this.localSelectedDates) {
|
|
410
400
|
if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
|
|
411
401
|
isSelectedDay = true;
|
|
@@ -422,8 +412,8 @@ class TzDrpContainerComponent {
|
|
|
422
412
|
const isSelectedStartDay = !isDisabledDay &&
|
|
423
413
|
(this.localSelectedDatesRange?.startDate ?? false) &&
|
|
424
414
|
date.format(this.data.dpConfig.format) === this.localSelectedDatesRange?.startDate;
|
|
425
|
-
const isAfterSelectedStartDate = this.
|
|
426
|
-
const isBeforeSelectedEndDate = this.
|
|
415
|
+
const isAfterSelectedStartDate = this.parseZoneInstance(date).isAfter(parseZone(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day");
|
|
416
|
+
const isBeforeSelectedEndDate = this.parseZoneInstance(date).isBefore(parseZone(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format), "day");
|
|
427
417
|
const inRangeDay = (this.localSelectedDatesRange?.startDate ?? false) &&
|
|
428
418
|
(this.localSelectedDatesRange?.endDate ?? false) &&
|
|
429
419
|
isAfterSelectedStartDate &&
|
|
@@ -456,13 +446,13 @@ class TzDrpContainerComponent {
|
|
|
456
446
|
if (!this.data.isSPickerSelected) {
|
|
457
447
|
if (!day.isDisabledDay) {
|
|
458
448
|
if (this.selectionStarted) {
|
|
459
|
-
const
|
|
449
|
+
const momentDay = parseZone()
|
|
460
450
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
461
451
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
462
452
|
.date(day.date);
|
|
463
|
-
if (
|
|
453
|
+
if (momentDay.isBefore(parseZone(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day")) {
|
|
464
454
|
this.localSelectedDatesRange = {
|
|
465
|
-
startDate:
|
|
455
|
+
startDate: momentDay.format(this.data.dpConfig.format),
|
|
466
456
|
endDate: null
|
|
467
457
|
};
|
|
468
458
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -472,13 +462,13 @@ class TzDrpContainerComponent {
|
|
|
472
462
|
this.selectionStarted = false;
|
|
473
463
|
this.localSelectedDatesRange = {
|
|
474
464
|
...this.localSelectedDatesRange,
|
|
475
|
-
endDate:
|
|
465
|
+
endDate: momentDay.format(this.data.dpConfig.format)
|
|
476
466
|
};
|
|
477
467
|
}
|
|
478
468
|
else {
|
|
479
469
|
this.selectionStarted = true;
|
|
480
470
|
this.localSelectedDatesRange = {
|
|
481
|
-
startDate:
|
|
471
|
+
startDate: parseZone()
|
|
482
472
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
483
473
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
484
474
|
.date(day.date)
|
|
@@ -496,7 +486,7 @@ class TzDrpContainerComponent {
|
|
|
496
486
|
this.calculateDateRangeLength();
|
|
497
487
|
}
|
|
498
488
|
else {
|
|
499
|
-
const currentSelection =
|
|
489
|
+
const currentSelection = parseZone()
|
|
500
490
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
501
491
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
502
492
|
.date(day.date).format(this.data.dpConfig.format);
|
|
@@ -549,9 +539,6 @@ class TzDrpContainerComponent {
|
|
|
549
539
|
changePicker(event) {
|
|
550
540
|
this.formControl.setValue(event);
|
|
551
541
|
this.singleDatePickerSelected = false;
|
|
552
|
-
this.data.isSPickerSelected = false;
|
|
553
|
-
this.data.isSPickerSelected = false;
|
|
554
|
-
this.openElement = false;
|
|
555
542
|
if (event === "Date Range") {
|
|
556
543
|
this.openElement = false;
|
|
557
544
|
this.data.isSPickerSelected = false;
|
|
@@ -571,10 +558,10 @@ class TzDrpContainerComponent {
|
|
|
571
558
|
}
|
|
572
559
|
calculateDateRangeLength() {
|
|
573
560
|
if (this.localSelectedDatesRange) {
|
|
574
|
-
const startDate =
|
|
575
|
-
const endDate =
|
|
561
|
+
const startDate = this.parseZoneInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format).toDate();
|
|
562
|
+
const endDate = this.parseZoneInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format).toDate();
|
|
576
563
|
if (startDate && endDate) {
|
|
577
|
-
this.dateRangeLength = endDate.
|
|
564
|
+
this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
|
578
565
|
}
|
|
579
566
|
}
|
|
580
567
|
}
|
|
@@ -590,7 +577,7 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
590
577
|
} if (rf & 2) {
|
|
591
578
|
let _t;
|
|
592
579
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.singleDatePickerElement = _t.first);
|
|
593
|
-
} }, decls: 49, vars:
|
|
580
|
+
} }, decls: 49, vars: 35, consts: [[1, "daterangepicker-container", 3, "ngClass"], [1, "radio-container"], ["class", "label", 4, "ngFor", "ngForOf"], [1, "specific-datepicker-container", 3, "ngStyle"], [1, "daterangepicker-container__view"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], [1, "daterangepicker-container__arrow__icon", 3, "ngClass", "click"], ["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"], [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", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], [1, "weekOffs_holidays_container"], [4, "ngFor", "ngForOf"], [1, "circular-dot", 3, "ngStyle"], [1, "daterangepicker__footer"], [4, "ngIf"], [1, "footer_action_btn"], ["mis-button", "", "size", "md", "type", "none", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click", 4, "ngIf"], [1, "single-datepicker-container", 3, "ngStyle"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", "placeholder", "Select", "positionX", "center", "positionY", "top", "offsetX", "71", "offsetY", "-1", 1, "date-input", 3, "dpConfig", "selectedDate", "value", "disableBoxShadow", "disableOverLay", "openElement", "dateChange"], ["singleDatePickerElement", ""], [1, "label"], ["ngDefaultControl", "", 1, "input", 3, "name", "value", "formControl", "valueChange"], [1, "daterangepicker-container__weekday"], [3, "ngClass"], [1, "daterangepicker-container__day", 3, "ngClass", "ngStyle", "click"], [3, "ngClass", 4, "ngIf"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
594
581
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
595
582
|
i0.ɵɵtemplate(2, TzDrpContainerComponent_div_2_Template, 4, 4, "div", 2);
|
|
596
583
|
i0.ɵɵelementEnd();
|
|
@@ -656,9 +643,9 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
656
643
|
i0.ɵɵadvance(2);
|
|
657
644
|
i0.ɵɵproperty("ngForOf", ctx.datePickerValue);
|
|
658
645
|
i0.ɵɵadvance(1);
|
|
659
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
646
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(26, _c6, ctx.singleDatePickerSelected ? "none" : ""));
|
|
660
647
|
i0.ɵɵadvance(4);
|
|
661
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
648
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(28, _c7, ctx.isPreviousMonthDisabled));
|
|
662
649
|
i0.ɵɵadvance(4);
|
|
663
650
|
i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
|
|
664
651
|
i0.ɵɵadvance(4);
|
|
@@ -668,14 +655,16 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
668
655
|
i0.ɵɵadvance(5);
|
|
669
656
|
i0.ɵɵtextInterpolate2(" ", ctx.nextMonth, " ", ctx.nextYearNumber, " ");
|
|
670
657
|
i0.ɵɵadvance(1);
|
|
671
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
658
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(30, _c7, ctx.isNextMonthDisabled));
|
|
672
659
|
i0.ɵɵadvance(5);
|
|
673
660
|
i0.ɵɵproperty("ngForOf", ctx.weekDays);
|
|
674
661
|
i0.ɵɵadvance(2);
|
|
675
662
|
i0.ɵɵproperty("ngForOf", ctx.nextMonthDates);
|
|
676
663
|
i0.ɵɵadvance(4);
|
|
677
664
|
i0.ɵɵproperty("ngForOf", ctx.data.weekOffs);
|
|
678
|
-
i0.ɵɵadvance(
|
|
665
|
+
i0.ɵɵadvance(3);
|
|
666
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(32, _c8));
|
|
667
|
+
i0.ɵɵadvance(2);
|
|
679
668
|
i0.ɵɵproperty("ngIf", ctx.data.isSPickerSelected);
|
|
680
669
|
i0.ɵɵadvance(1);
|
|
681
670
|
i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
|
|
@@ -684,13 +673,13 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
684
673
|
i0.ɵɵadvance(1);
|
|
685
674
|
i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
|
|
686
675
|
i0.ɵɵadvance(1);
|
|
687
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
676
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(33, _c6, !ctx.singleDatePickerSelected ? "none" : "block"));
|
|
688
677
|
i0.ɵɵadvance(1);
|
|
689
678
|
i0.ɵɵproperty("dpConfig", ctx.data.dpConfig)("selectedDate", ctx.singleDateSelectedValue)("value", ctx.singleDateSelectedValue)("disableBoxShadow", true)("disableOverLay", true)("openElement", ctx.openElement);
|
|
690
679
|
} }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.ButtonDirective, i4.RadioButtonComponent, i5.TzDatepickerDirective], styles: [".daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]{flex-direction:row}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%]{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{display:flex;align-items:center}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .input[_ngcontent-%COMP%]{margin-right:8px;width:20px;height:20px}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:nth-child(2){padding-left:0}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-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:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%]{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-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}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-start-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day.selected-start-day[_ngcontent-%COMP%]{border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%]{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{margin-right:16px}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] span[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-weight:700}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] .footer_action_btn[_ngcontent-%COMP%]{display:flex}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot[_ngcontent-%COMP%]{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text[_ngcontent-%COMP%]{color:#6a737d!important}.display-none[_ngcontent-%COMP%]{display:none!important}.single-datepicker-container[_ngcontent-%COMP%]{width:291px}"] });
|
|
691
680
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
692
681
|
type: Component,
|
|
693
|
-
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!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></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 [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\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\"\n (click)=\"!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-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" style=\"display: inline-block; margin-left: 10px;\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{data.isSPickerSelected && localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n <div class=\"footer_action_btn\">\n <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n </div>\n </div>\n </div>\n <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n <input\n misTzDp\n misInput\n type=\"text\"\n readonly\n class=\"date-input\"\n [dpConfig]=\"data.dpConfig\"\n placeholder=\"Select\"\n (dateChange)=\"onSingleDateChange($event)\"\n [selectedDate]=\"singleDateSelectedValue\"\n positionX=\"center\"\n positionY=\"top\"\n offsetX = 71\n offsetY = -1\n [value]=\"singleDateSelectedValue\"\n [disableBoxShadow]=\"true\"\n [disableOverLay]=\"true\"\n [openElement]=\"openElement\"\n #singleDatePickerElement\n />\n </div>\n\n</div>\n", styles: [".daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.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}.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)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.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}.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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.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):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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.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-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!important}.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!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
|
|
682
|
+
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!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></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 [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\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\"\n (click)=\"!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-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" [ngStyle]=\"{ display: 'inline-block', 'margin-left': '10px' }\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n <div class=\"footer_action_btn\">\n <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n </div>\n </div>\n </div>\n <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n <input\n misTzDp\n misInput\n type=\"text\"\n readonly\n class=\"date-input\"\n [dpConfig]=\"data.dpConfig\"\n placeholder=\"Select\"\n (dateChange)=\"onSingleDateChange($event)\"\n [selectedDate]=\"singleDateSelectedValue\"\n positionX=\"center\"\n positionY=\"top\"\n offsetX = 71\n offsetY = -1\n [value]=\"singleDateSelectedValue\"\n [disableBoxShadow]=\"true\"\n [disableOverLay]=\"true\"\n [openElement]=\"openElement\"\n #singleDatePickerElement\n />\n </div>\n\n</div>\n", styles: [".daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.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}.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)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.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}.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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.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):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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.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-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!important}.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!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
|
|
694
683
|
}], function () { return [{ type: undefined, decorators: [{
|
|
695
684
|
type: Inject,
|
|
696
685
|
args: [CONTAINER_DATA]
|