mis-crystal-design-system 14.0.54 → 14.0.55-test-v1
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/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 -35
- package/esm2020/dropdown/dropdown.component.mjs +18 -15
- package/esm2020/dynamic-form/dynamic-form.component.mjs +11 -6
- package/esm2020/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +55 -41
- 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-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 -34
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.mjs +17 -14
- package/fesm2015/mis-crystal-design-system-dropdown.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 +54 -40
- 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-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 -33
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dropdown.mjs +17 -14
- package/fesm2020/mis-crystal-design-system-dropdown.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 +54 -40
- 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 +1 -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
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,10 +301,10 @@ 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) {
|
|
@@ -312,19 +322,19 @@ class TzDrpContainerComponent {
|
|
|
312
322
|
}
|
|
313
323
|
}
|
|
314
324
|
if ((_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.dpConfig) === null || _f === void 0 ? void 0 : _f.timezone) {
|
|
315
|
-
this.
|
|
316
|
-
return
|
|
325
|
+
this.dayjsInstance = (...args) => {
|
|
326
|
+
return dayjs(...args).tz(this.data.dpConfig.timezone);
|
|
317
327
|
};
|
|
318
328
|
}
|
|
319
|
-
this.currentMonthNumber = this.
|
|
320
|
-
this.nextMonthNumber = this.
|
|
329
|
+
this.currentMonthNumber = this.dayjsInstance().month();
|
|
330
|
+
this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
|
|
321
331
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
322
332
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
323
|
-
this.currentYearNumber = this.
|
|
324
|
-
this.nextYearNumber = this.
|
|
333
|
+
this.currentYearNumber = this.dayjsInstance().year();
|
|
334
|
+
this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
|
|
325
335
|
this.weekDays = this.rawWeekDays.map((day, index) => ({
|
|
326
336
|
label: `${day[0]}${day.slice(1).toLowerCase()}`,
|
|
327
|
-
isCurrentDay: this.
|
|
337
|
+
isCurrentDay: this.dayjsInstance().day() === index
|
|
328
338
|
}));
|
|
329
339
|
if (!((_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.dpConfig) === null || _h === void 0 ? void 0 : _h.format)) {
|
|
330
340
|
this.data.dpConfig = Object.assign(Object.assign({}, this.data.dpConfig), { format: DATE_FORMAT });
|
|
@@ -351,16 +361,16 @@ class TzDrpContainerComponent {
|
|
|
351
361
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
352
362
|
return;
|
|
353
363
|
}
|
|
354
|
-
selectedStartDate = this.
|
|
364
|
+
selectedStartDate = this.dayjsInstance((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.startDate, this.data.dpConfig.format);
|
|
355
365
|
}
|
|
356
366
|
else {
|
|
357
|
-
selectedStartDate = this.
|
|
367
|
+
selectedStartDate = this.dayjsInstance((_c = this.localSelectedDates) === null || _c === void 0 ? void 0 : _c[0].selectedDate, this.data.dpConfig.format);
|
|
358
368
|
}
|
|
359
369
|
if (selectedStartDate.isValid()) {
|
|
360
370
|
this.currentYearNumber = selectedStartDate.year();
|
|
361
371
|
this.nextYearNumber = selectedStartDate.add(1, "month").year();
|
|
362
|
-
this.currentMonthNumber = selectedStartDate.get("month")
|
|
363
|
-
this.nextMonthNumber = selectedStartDate.add(1, "month").month()
|
|
372
|
+
this.currentMonthNumber = selectedStartDate.get("month");
|
|
373
|
+
this.nextMonthNumber = selectedStartDate.add(1, "month").month();
|
|
364
374
|
if (this.currentMonthNumber === -1) {
|
|
365
375
|
this.currentMonthNumber = 11;
|
|
366
376
|
}
|
|
@@ -374,18 +384,18 @@ class TzDrpContainerComponent {
|
|
|
374
384
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
375
385
|
}
|
|
376
386
|
calculateMinMaxDays() {
|
|
377
|
-
const currentInstance = this.
|
|
378
|
-
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');
|
|
379
389
|
if (minDate.isValid()) {
|
|
380
390
|
this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
|
|
381
391
|
}
|
|
382
|
-
const maxDate = this.
|
|
392
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
383
393
|
if (maxDate.isValid()) {
|
|
384
394
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
385
395
|
}
|
|
386
396
|
}
|
|
387
397
|
navigateMonth(direction) {
|
|
388
|
-
let thisMonth =
|
|
398
|
+
let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
389
399
|
if (direction === "NEXT") {
|
|
390
400
|
thisMonth = thisMonth.add(1, "month");
|
|
391
401
|
}
|
|
@@ -418,22 +428,23 @@ class TzDrpContainerComponent {
|
|
|
418
428
|
generateDates(month, currentYearNumber) {
|
|
419
429
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
420
430
|
let dates = [];
|
|
421
|
-
const daysInMonth =
|
|
431
|
+
const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
|
|
422
432
|
for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
|
|
423
|
-
const date = this.
|
|
433
|
+
const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
|
|
424
434
|
const dateString = date.format(this.data.dpConfig.format);
|
|
425
435
|
let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
|
|
426
|
-
const minDate = this.
|
|
436
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
427
437
|
if (!isDisabledDay && minDate.isValid()) {
|
|
428
438
|
isDisabledDay = minDate.isAfter(date, "day");
|
|
429
439
|
}
|
|
430
|
-
const maxDate = this.
|
|
440
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
431
441
|
if (!isDisabledDay && maxDate.isValid()) {
|
|
432
442
|
isDisabledDay = maxDate.isBefore(date, "day");
|
|
433
443
|
}
|
|
434
|
-
const isCurrentDay = this.
|
|
435
|
-
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);
|
|
436
446
|
let isSelectedDay = false;
|
|
447
|
+
console.log('abhay12', this.localSelectedDates);
|
|
437
448
|
for (const selectedDateConfig of this.localSelectedDates) {
|
|
438
449
|
if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
|
|
439
450
|
isSelectedDay = true;
|
|
@@ -450,8 +461,8 @@ class TzDrpContainerComponent {
|
|
|
450
461
|
const isSelectedStartDay = !isDisabledDay &&
|
|
451
462
|
((_b = (_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate) !== null && _b !== void 0 ? _b : false) &&
|
|
452
463
|
date.format(this.data.dpConfig.format) === ((_c = this.localSelectedDatesRange) === null || _c === void 0 ? void 0 : _c.startDate);
|
|
453
|
-
const isAfterSelectedStartDate = this.
|
|
454
|
-
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");
|
|
455
466
|
const inRangeDay = ((_g = (_f = this.localSelectedDatesRange) === null || _f === void 0 ? void 0 : _f.startDate) !== null && _g !== void 0 ? _g : false) &&
|
|
456
467
|
((_j = (_h = this.localSelectedDatesRange) === null || _h === void 0 ? void 0 : _h.endDate) !== null && _j !== void 0 ? _j : false) &&
|
|
457
468
|
isAfterSelectedStartDate &&
|
|
@@ -485,13 +496,13 @@ class TzDrpContainerComponent {
|
|
|
485
496
|
if (!this.data.isSPickerSelected) {
|
|
486
497
|
if (!day.isDisabledDay) {
|
|
487
498
|
if (this.selectionStarted) {
|
|
488
|
-
const
|
|
499
|
+
const dayjsDay = dayjs()
|
|
489
500
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
490
501
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
491
502
|
.date(day.date);
|
|
492
|
-
if (
|
|
503
|
+
if (dayjsDay.isBefore(dayjs((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate, this.data.dpConfig.format), "day")) {
|
|
493
504
|
this.localSelectedDatesRange = {
|
|
494
|
-
startDate:
|
|
505
|
+
startDate: dayjsDay.format(this.data.dpConfig.format),
|
|
495
506
|
endDate: null
|
|
496
507
|
};
|
|
497
508
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -499,12 +510,12 @@ class TzDrpContainerComponent {
|
|
|
499
510
|
return;
|
|
500
511
|
}
|
|
501
512
|
this.selectionStarted = false;
|
|
502
|
-
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) });
|
|
503
514
|
}
|
|
504
515
|
else {
|
|
505
516
|
this.selectionStarted = true;
|
|
506
517
|
this.localSelectedDatesRange = {
|
|
507
|
-
startDate:
|
|
518
|
+
startDate: dayjs()
|
|
508
519
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
509
520
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
510
521
|
.date(day.date)
|
|
@@ -522,7 +533,7 @@ class TzDrpContainerComponent {
|
|
|
522
533
|
this.calculateDateRangeLength();
|
|
523
534
|
}
|
|
524
535
|
else {
|
|
525
|
-
const currentSelection =
|
|
536
|
+
const currentSelection = dayjs()
|
|
526
537
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
527
538
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
528
539
|
.date(day.date).format(this.data.dpConfig.format);
|
|
@@ -576,6 +587,9 @@ class TzDrpContainerComponent {
|
|
|
576
587
|
var _a, _b;
|
|
577
588
|
this.formControl.setValue(event);
|
|
578
589
|
this.singleDatePickerSelected = false;
|
|
590
|
+
this.data.isSPickerSelected = false;
|
|
591
|
+
this.data.isSPickerSelected = false;
|
|
592
|
+
this.openElement = false;
|
|
579
593
|
if (event === "Date Range") {
|
|
580
594
|
this.openElement = false;
|
|
581
595
|
this.data.isSPickerSelected = false;
|
|
@@ -595,10 +609,10 @@ class TzDrpContainerComponent {
|
|
|
595
609
|
}
|
|
596
610
|
calculateDateRangeLength() {
|
|
597
611
|
if (this.localSelectedDatesRange) {
|
|
598
|
-
const startDate = this.
|
|
599
|
-
const endDate = this.
|
|
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');
|
|
600
614
|
if (startDate && endDate) {
|
|
601
|
-
this.dateRangeLength =
|
|
615
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
602
616
|
}
|
|
603
617
|
}
|
|
604
618
|
}
|
|
@@ -721,7 +735,7 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
721
735
|
(function () {
|
|
722
736
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
723
737
|
type: Component,
|
|
724
|
-
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"] }]
|
|
725
739
|
}], function () {
|
|
726
740
|
return [{ type: undefined, decorators: [{
|
|
727
741
|
type: Inject,
|