mis-crystal-design-system 14.0.42 → 14.0.43-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +1 -1
- package/dynamic-form/dynamic-form.component.d.ts +0 -1
- package/esm2020/async-search-dropdown/async-dropdown.component.mjs +3 -3
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +24 -14
- package/esm2020/daterangepicker_v2/models/drp-config.model.mjs +1 -1
- package/esm2020/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +43 -34
- package/esm2020/dynamic-form/dynamic-form.component.mjs +11 -6
- package/esm2020/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +68 -44
- package/esm2020/table/table.component.mjs +2 -2
- package/esm2020/timepicker/timepicker.component.mjs +54 -48
- package/esm2020/timerangepicker/timerangepicker.component.mjs +46 -42
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +23 -13
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs +43 -33
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +10 -4
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs +72 -47
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timepicker.mjs +53 -47
- package/fesm2015/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs +45 -41
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +23 -13
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs +42 -32
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +10 -4
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs +67 -43
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timepicker.mjs +53 -47
- package/fesm2020/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs +45 -41
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/package.json +1 -1
- package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +2 -1
- package/timepicker/timepicker.component.d.ts +2 -2
|
@@ -1,10 +1,15 @@
|
|
|
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';
|
|
4
3
|
import * as i1$1 from '@angular/forms';
|
|
5
4
|
import { UntypedFormControl } from '@angular/forms';
|
|
6
5
|
import * as i5 from 'mis-crystal-design-system/datepicker_v2';
|
|
7
6
|
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';
|
|
8
13
|
import * as i1 from 'mis-crystal-design-system/toast';
|
|
9
14
|
import { ToastModule } from 'mis-crystal-design-system/toast';
|
|
10
15
|
import * as i2 from '@angular/common';
|
|
@@ -219,7 +224,7 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) {
|
|
|
219
224
|
if (rf & 2) {
|
|
220
225
|
const ctx_r6 = i0.ɵɵnextContext();
|
|
221
226
|
i0.ɵɵadvance(2);
|
|
222
|
-
i0.ɵɵtextInterpolate1("", (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
|
|
227
|
+
i0.ɵɵtextInterpolate1("", ctx_r6.data.isSPickerSelected && (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
|
|
223
228
|
}
|
|
224
229
|
}
|
|
225
230
|
function TzDrpContainerComponent_span_40_Template(rf, ctx) {
|
|
@@ -264,13 +269,18 @@ function TzDrpContainerComponent_button_45_Template(rf, ctx) {
|
|
|
264
269
|
}
|
|
265
270
|
const _c6 = function (a0) { return { "display": a0 }; };
|
|
266
271
|
const _c7 = function (a0) { return { "disabled-month": a0 }; };
|
|
272
|
+
dayjs.extend(utc);
|
|
273
|
+
dayjs.extend(timezone);
|
|
274
|
+
dayjs.extend(customParseFormat);
|
|
275
|
+
dayjs.extend(isSameOrAfter);
|
|
276
|
+
dayjs.extend(isSameOrBefore);
|
|
267
277
|
class TzDrpContainerComponent {
|
|
268
278
|
constructor(data, toast, cdr) {
|
|
269
|
-
var _a, _b, _c, _d, _e, _f;
|
|
279
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
270
280
|
this.toast = toast;
|
|
271
281
|
this.cdr = cdr;
|
|
272
|
-
this.
|
|
273
|
-
return
|
|
282
|
+
this.dayjsInstance = (...args) => {
|
|
283
|
+
return dayjs(...args);
|
|
274
284
|
};
|
|
275
285
|
this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
|
|
276
286
|
this.weekDays = [];
|
|
@@ -291,17 +301,18 @@ class TzDrpContainerComponent {
|
|
|
291
301
|
this.singleDateSelectedValue = '';
|
|
292
302
|
this.data = data;
|
|
293
303
|
this.localSelectedDatesRange = this.data.datesRange;
|
|
294
|
-
const startDate =
|
|
295
|
-
const endDate =
|
|
304
|
+
const startDate = dayjs((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate, this.data.dpConfig.format);
|
|
305
|
+
const endDate = dayjs((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.endDate, this.data.dpConfig.format);
|
|
296
306
|
if (startDate && endDate) {
|
|
297
|
-
this.dateRangeLength =
|
|
307
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
298
308
|
}
|
|
299
309
|
this.localSelectedDates = this.data.dates;
|
|
300
310
|
if (!this.data.isSPickerSelected) {
|
|
301
311
|
this.formControl.setValue("Date Range");
|
|
302
312
|
this.isDatesValid = false;
|
|
303
|
-
if (this.localSelectedDatesRange.startDate && this.localSelectedDatesRange.endDate) {
|
|
313
|
+
if (((_c = this.localSelectedDatesRange) === null || _c === void 0 ? void 0 : _c.startDate) && ((_d = this.localSelectedDatesRange) === null || _d === void 0 ? void 0 : _d.endDate)) {
|
|
304
314
|
this.isDatesValid = true;
|
|
315
|
+
this.calculateDateRangeLength();
|
|
305
316
|
}
|
|
306
317
|
}
|
|
307
318
|
else {
|
|
@@ -310,22 +321,22 @@ class TzDrpContainerComponent {
|
|
|
310
321
|
this.isDatesValid = true;
|
|
311
322
|
}
|
|
312
323
|
}
|
|
313
|
-
if ((
|
|
314
|
-
this.
|
|
315
|
-
return
|
|
324
|
+
if ((_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.dpConfig) === null || _f === void 0 ? void 0 : _f.timezone) {
|
|
325
|
+
this.dayjsInstance = (...args) => {
|
|
326
|
+
return dayjs(...args).tz(this.data.dpConfig.timezone);
|
|
316
327
|
};
|
|
317
328
|
}
|
|
318
|
-
this.currentMonthNumber = this.
|
|
319
|
-
this.nextMonthNumber = this.
|
|
329
|
+
this.currentMonthNumber = this.dayjsInstance().month();
|
|
330
|
+
this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
|
|
320
331
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
321
332
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
322
|
-
this.currentYearNumber = this.
|
|
323
|
-
this.nextYearNumber = this.
|
|
333
|
+
this.currentYearNumber = this.dayjsInstance().year();
|
|
334
|
+
this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
|
|
324
335
|
this.weekDays = this.rawWeekDays.map((day, index) => ({
|
|
325
336
|
label: `${day[0]}${day.slice(1).toLowerCase()}`,
|
|
326
|
-
isCurrentDay: this.
|
|
337
|
+
isCurrentDay: this.dayjsInstance().day() === index
|
|
327
338
|
}));
|
|
328
|
-
if (!((
|
|
339
|
+
if (!((_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.dpConfig) === null || _h === void 0 ? void 0 : _h.format)) {
|
|
329
340
|
this.data.dpConfig = Object.assign(Object.assign({}, this.data.dpConfig), { format: DATE_FORMAT });
|
|
330
341
|
}
|
|
331
342
|
}
|
|
@@ -350,16 +361,16 @@ class TzDrpContainerComponent {
|
|
|
350
361
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
351
362
|
return;
|
|
352
363
|
}
|
|
353
|
-
selectedStartDate = this.
|
|
364
|
+
selectedStartDate = this.dayjsInstance((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.startDate, this.data.dpConfig.format);
|
|
354
365
|
}
|
|
355
366
|
else {
|
|
356
|
-
selectedStartDate = this.
|
|
367
|
+
selectedStartDate = this.dayjsInstance((_c = this.localSelectedDates) === null || _c === void 0 ? void 0 : _c[0].selectedDate, this.data.dpConfig.format);
|
|
357
368
|
}
|
|
358
369
|
if (selectedStartDate.isValid()) {
|
|
359
370
|
this.currentYearNumber = selectedStartDate.year();
|
|
360
371
|
this.nextYearNumber = selectedStartDate.add(1, "month").year();
|
|
361
|
-
this.currentMonthNumber = selectedStartDate.get("month")
|
|
362
|
-
this.nextMonthNumber = selectedStartDate.add(1, "month").month()
|
|
372
|
+
this.currentMonthNumber = selectedStartDate.get("month");
|
|
373
|
+
this.nextMonthNumber = selectedStartDate.add(1, "month").month();
|
|
363
374
|
if (this.currentMonthNumber === -1) {
|
|
364
375
|
this.currentMonthNumber = 11;
|
|
365
376
|
}
|
|
@@ -373,18 +384,18 @@ class TzDrpContainerComponent {
|
|
|
373
384
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
374
385
|
}
|
|
375
386
|
calculateMinMaxDays() {
|
|
376
|
-
const currentInstance = this.
|
|
377
|
-
const minDate = this.
|
|
387
|
+
const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
388
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
378
389
|
if (minDate.isValid()) {
|
|
379
390
|
this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
|
|
380
391
|
}
|
|
381
|
-
const maxDate = this.
|
|
392
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
382
393
|
if (maxDate.isValid()) {
|
|
383
394
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
384
395
|
}
|
|
385
396
|
}
|
|
386
397
|
navigateMonth(direction) {
|
|
387
|
-
let thisMonth =
|
|
398
|
+
let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
388
399
|
if (direction === "NEXT") {
|
|
389
400
|
thisMonth = thisMonth.add(1, "month");
|
|
390
401
|
}
|
|
@@ -417,22 +428,23 @@ class TzDrpContainerComponent {
|
|
|
417
428
|
generateDates(month, currentYearNumber) {
|
|
418
429
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
419
430
|
let dates = [];
|
|
420
|
-
const daysInMonth =
|
|
431
|
+
const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
|
|
421
432
|
for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
|
|
422
|
-
const date = this.
|
|
433
|
+
const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
|
|
423
434
|
const dateString = date.format(this.data.dpConfig.format);
|
|
424
435
|
let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
|
|
425
|
-
const minDate = this.
|
|
436
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
426
437
|
if (!isDisabledDay && minDate.isValid()) {
|
|
427
438
|
isDisabledDay = minDate.isAfter(date, "day");
|
|
428
439
|
}
|
|
429
|
-
const maxDate = this.
|
|
440
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
430
441
|
if (!isDisabledDay && maxDate.isValid()) {
|
|
431
442
|
isDisabledDay = maxDate.isBefore(date, "day");
|
|
432
443
|
}
|
|
433
|
-
const isCurrentDay = this.
|
|
434
|
-
this.
|
|
444
|
+
const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
|
|
445
|
+
this.dayjsInstance().format(this.data.dpConfig.format);
|
|
435
446
|
let isSelectedDay = false;
|
|
447
|
+
console.log('abhay12', this.localSelectedDates);
|
|
436
448
|
for (const selectedDateConfig of this.localSelectedDates) {
|
|
437
449
|
if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
|
|
438
450
|
isSelectedDay = true;
|
|
@@ -449,8 +461,8 @@ class TzDrpContainerComponent {
|
|
|
449
461
|
const isSelectedStartDay = !isDisabledDay &&
|
|
450
462
|
((_b = (_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate) !== null && _b !== void 0 ? _b : false) &&
|
|
451
463
|
date.format(this.data.dpConfig.format) === ((_c = this.localSelectedDatesRange) === null || _c === void 0 ? void 0 : _c.startDate);
|
|
452
|
-
const isAfterSelectedStartDate = this.
|
|
453
|
-
const isBeforeSelectedEndDate = this.
|
|
464
|
+
const isAfterSelectedStartDate = this.dayjsInstance(date).isAfter(dayjs((_d = this.localSelectedDatesRange) === null || _d === void 0 ? void 0 : _d.startDate, this.data.dpConfig.format), "day");
|
|
465
|
+
const isBeforeSelectedEndDate = this.dayjsInstance(date).isBefore(dayjs((_e = this.localSelectedDatesRange) === null || _e === void 0 ? void 0 : _e.endDate, this.data.dpConfig.format), "day");
|
|
454
466
|
const inRangeDay = ((_g = (_f = this.localSelectedDatesRange) === null || _f === void 0 ? void 0 : _f.startDate) !== null && _g !== void 0 ? _g : false) &&
|
|
455
467
|
((_j = (_h = this.localSelectedDatesRange) === null || _h === void 0 ? void 0 : _h.endDate) !== null && _j !== void 0 ? _j : false) &&
|
|
456
468
|
isAfterSelectedStartDate &&
|
|
@@ -478,19 +490,19 @@ class TzDrpContainerComponent {
|
|
|
478
490
|
return dates;
|
|
479
491
|
}
|
|
480
492
|
selectDay(from, day) {
|
|
481
|
-
var _a, _b, _c
|
|
493
|
+
var _a, _b, _c;
|
|
482
494
|
if (day.date <= 0)
|
|
483
495
|
return;
|
|
484
496
|
if (!this.data.isSPickerSelected) {
|
|
485
497
|
if (!day.isDisabledDay) {
|
|
486
498
|
if (this.selectionStarted) {
|
|
487
|
-
const
|
|
499
|
+
const dayjsDay = dayjs()
|
|
488
500
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
489
501
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
490
502
|
.date(day.date);
|
|
491
|
-
if (
|
|
503
|
+
if (dayjsDay.isBefore(dayjs((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate, this.data.dpConfig.format), "day")) {
|
|
492
504
|
this.localSelectedDatesRange = {
|
|
493
|
-
startDate:
|
|
505
|
+
startDate: dayjsDay.format(this.data.dpConfig.format),
|
|
494
506
|
endDate: null
|
|
495
507
|
};
|
|
496
508
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -498,12 +510,12 @@ class TzDrpContainerComponent {
|
|
|
498
510
|
return;
|
|
499
511
|
}
|
|
500
512
|
this.selectionStarted = false;
|
|
501
|
-
this.localSelectedDatesRange = Object.assign(Object.assign({}, this.localSelectedDatesRange), { endDate:
|
|
513
|
+
this.localSelectedDatesRange = Object.assign(Object.assign({}, this.localSelectedDatesRange), { endDate: dayjsDay.format(this.data.dpConfig.format) });
|
|
502
514
|
}
|
|
503
515
|
else {
|
|
504
516
|
this.selectionStarted = true;
|
|
505
517
|
this.localSelectedDatesRange = {
|
|
506
|
-
startDate:
|
|
518
|
+
startDate: dayjs()
|
|
507
519
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
508
520
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
509
521
|
.date(day.date)
|
|
@@ -518,14 +530,10 @@ class TzDrpContainerComponent {
|
|
|
518
530
|
this.isDatesValid = true;
|
|
519
531
|
}
|
|
520
532
|
}
|
|
521
|
-
|
|
522
|
-
const endDate = new Date((_e = this.localSelectedDatesRange) === null || _e === void 0 ? void 0 : _e.endDate);
|
|
523
|
-
if (startDate && endDate) {
|
|
524
|
-
this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
|
525
|
-
}
|
|
533
|
+
this.calculateDateRangeLength();
|
|
526
534
|
}
|
|
527
535
|
else {
|
|
528
|
-
const currentSelection =
|
|
536
|
+
const currentSelection = dayjs()
|
|
529
537
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
530
538
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
531
539
|
.date(day.date).format(this.data.dpConfig.format);
|
|
@@ -576,11 +584,19 @@ class TzDrpContainerComponent {
|
|
|
576
584
|
this.data.close();
|
|
577
585
|
}
|
|
578
586
|
changePicker(event) {
|
|
587
|
+
var _a, _b;
|
|
579
588
|
this.formControl.setValue(event);
|
|
580
589
|
this.singleDatePickerSelected = false;
|
|
590
|
+
this.data.isSPickerSelected = false;
|
|
591
|
+
this.data.isSPickerSelected = false;
|
|
592
|
+
this.openElement = false;
|
|
581
593
|
if (event === "Date Range") {
|
|
582
594
|
this.openElement = false;
|
|
583
595
|
this.data.isSPickerSelected = false;
|
|
596
|
+
if (((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate) && ((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.endDate)) {
|
|
597
|
+
this.isDatesValid = true;
|
|
598
|
+
this.calculateDateRangeLength();
|
|
599
|
+
}
|
|
584
600
|
}
|
|
585
601
|
else if (event === "Single Date") {
|
|
586
602
|
this.singleDatePickerSelected = true;
|
|
@@ -591,6 +607,15 @@ class TzDrpContainerComponent {
|
|
|
591
607
|
this.data.isSPickerSelected = true;
|
|
592
608
|
}
|
|
593
609
|
}
|
|
610
|
+
calculateDateRangeLength() {
|
|
611
|
+
if (this.localSelectedDatesRange) {
|
|
612
|
+
const startDate = !!this.localSelectedDatesRange.startDate ? this.dayjsInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
613
|
+
const endDate = !!this.localSelectedDatesRange.endDate ? this.dayjsInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
614
|
+
if (startDate && endDate) {
|
|
615
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
}
|
|
594
619
|
ngOnDestroy() {
|
|
595
620
|
if (this.singleDatePickerElement) {
|
|
596
621
|
this.singleDatePickerElement.close();
|
|
@@ -710,7 +735,7 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
710
735
|
(function () {
|
|
711
736
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
712
737
|
type: Component,
|
|
713
|
-
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>{{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"] }]
|
|
738
|
+
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"] }]
|
|
714
739
|
}], function () {
|
|
715
740
|
return [{ type: undefined, decorators: [{
|
|
716
741
|
type: Inject,
|