mis-crystal-design-system 17.0.1 → 17.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/async-search-dropdown/async-dropdown.component.d.ts +1 -4
- 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/esm2022/async-search-dropdown/async-dropdown.component.mjs +9 -27
- package/esm2022/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +27 -17
- package/esm2022/daterangepicker_v2/models/drp-config.model.mjs +1 -1
- package/esm2022/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +52 -46
- package/esm2022/dynamic-form/dynamic-form.component.mjs +11 -6
- package/esm2022/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +55 -41
- package/esm2022/timepicker/timepicker.component.mjs +54 -48
- package/esm2022/timerangepicker/timerangepicker.component.mjs +46 -42
- package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs +8 -26
- package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs +26 -16
- package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs +51 -44
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-dynamic-form.mjs +10 -4
- package/fesm2022/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs +54 -40
- package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-timepicker.mjs +53 -47
- package/fesm2022/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-timerangepicker.mjs +45 -41
- package/fesm2022/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/package.json +13 -13
- package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +1 -1
- package/table/filter/filter.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, HostListener, Output, Input, 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';
|
|
@@ -194,7 +199,7 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) { if (rf & 1) {
|
|
|
194
199
|
} if (rf & 2) {
|
|
195
200
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
196
201
|
i0.ɵɵadvance(2);
|
|
197
|
-
i0.ɵɵtextInterpolate1("", (ctx_r2.localSelectedDates[0] == null ? null : ctx_r2.localSelectedDates[0].selectedDate) ? ctx_r2.localSelectedDates.length : ctx_r2.localSelectedDates.length - 1 && 0, " ");
|
|
202
|
+
i0.ɵɵtextInterpolate1("", ctx_r2.data.isSPickerSelected && (ctx_r2.localSelectedDates[0] == null ? null : ctx_r2.localSelectedDates[0].selectedDate) ? ctx_r2.localSelectedDates.length : ctx_r2.localSelectedDates.length - 1 && 0, " ");
|
|
198
203
|
} }
|
|
199
204
|
function TzDrpContainerComponent_span_40_Template(rf, ctx) { if (rf & 1) {
|
|
200
205
|
i0.ɵɵelementStart(0, "span")(1, "span");
|
|
@@ -227,12 +232,17 @@ function TzDrpContainerComponent_button_45_Template(rf, ctx) { if (rf & 1) {
|
|
|
227
232
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
228
233
|
i0.ɵɵproperty("disabled", !ctx_r2.isDatesValid || ctx_r2.dateRangeLength === 0);
|
|
229
234
|
} }
|
|
235
|
+
dayjs.extend(utc);
|
|
236
|
+
dayjs.extend(timezone);
|
|
237
|
+
dayjs.extend(customParseFormat);
|
|
238
|
+
dayjs.extend(isSameOrAfter);
|
|
239
|
+
dayjs.extend(isSameOrBefore);
|
|
230
240
|
class TzDrpContainerComponent {
|
|
231
241
|
constructor(data, toast, cdr) {
|
|
232
242
|
this.toast = toast;
|
|
233
243
|
this.cdr = cdr;
|
|
234
|
-
this.
|
|
235
|
-
return
|
|
244
|
+
this.dayjsInstance = (...args) => {
|
|
245
|
+
return dayjs(...args);
|
|
236
246
|
};
|
|
237
247
|
this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
|
|
238
248
|
this.weekDays = [];
|
|
@@ -253,10 +263,10 @@ class TzDrpContainerComponent {
|
|
|
253
263
|
this.singleDateSelectedValue = '';
|
|
254
264
|
this.data = data;
|
|
255
265
|
this.localSelectedDatesRange = this.data.datesRange;
|
|
256
|
-
const startDate =
|
|
257
|
-
const endDate =
|
|
266
|
+
const startDate = dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
|
|
267
|
+
const endDate = dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format);
|
|
258
268
|
if (startDate && endDate) {
|
|
259
|
-
this.dateRangeLength =
|
|
269
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
260
270
|
}
|
|
261
271
|
this.localSelectedDates = this.data.dates;
|
|
262
272
|
if (!this.data.isSPickerSelected) {
|
|
@@ -274,19 +284,19 @@ class TzDrpContainerComponent {
|
|
|
274
284
|
}
|
|
275
285
|
}
|
|
276
286
|
if (this.data?.dpConfig?.timezone) {
|
|
277
|
-
this.
|
|
278
|
-
return
|
|
287
|
+
this.dayjsInstance = (...args) => {
|
|
288
|
+
return dayjs(...args).tz(this.data.dpConfig.timezone);
|
|
279
289
|
};
|
|
280
290
|
}
|
|
281
|
-
this.currentMonthNumber = this.
|
|
282
|
-
this.nextMonthNumber = this.
|
|
291
|
+
this.currentMonthNumber = this.dayjsInstance().month();
|
|
292
|
+
this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
|
|
283
293
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
284
294
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
285
|
-
this.currentYearNumber = this.
|
|
286
|
-
this.nextYearNumber = this.
|
|
295
|
+
this.currentYearNumber = this.dayjsInstance().year();
|
|
296
|
+
this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
|
|
287
297
|
this.weekDays = this.rawWeekDays.map((day, index) => ({
|
|
288
298
|
label: `${day[0]}${day.slice(1).toLowerCase()}`,
|
|
289
|
-
isCurrentDay: this.
|
|
299
|
+
isCurrentDay: this.dayjsInstance().day() === index
|
|
290
300
|
}));
|
|
291
301
|
if (!this.data?.dpConfig?.format) {
|
|
292
302
|
this.data.dpConfig = {
|
|
@@ -314,16 +324,16 @@ class TzDrpContainerComponent {
|
|
|
314
324
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
315
325
|
return;
|
|
316
326
|
}
|
|
317
|
-
selectedStartDate = this.
|
|
327
|
+
selectedStartDate = this.dayjsInstance(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
|
|
318
328
|
}
|
|
319
329
|
else {
|
|
320
|
-
selectedStartDate = this.
|
|
330
|
+
selectedStartDate = this.dayjsInstance(this.localSelectedDates?.[0].selectedDate, this.data.dpConfig.format);
|
|
321
331
|
}
|
|
322
332
|
if (selectedStartDate.isValid()) {
|
|
323
333
|
this.currentYearNumber = selectedStartDate.year();
|
|
324
334
|
this.nextYearNumber = selectedStartDate.add(1, "month").year();
|
|
325
|
-
this.currentMonthNumber = selectedStartDate.get("month")
|
|
326
|
-
this.nextMonthNumber = selectedStartDate.add(1, "month").month()
|
|
335
|
+
this.currentMonthNumber = selectedStartDate.get("month");
|
|
336
|
+
this.nextMonthNumber = selectedStartDate.add(1, "month").month();
|
|
327
337
|
if (this.currentMonthNumber === -1) {
|
|
328
338
|
this.currentMonthNumber = 11;
|
|
329
339
|
}
|
|
@@ -337,18 +347,18 @@ class TzDrpContainerComponent {
|
|
|
337
347
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
338
348
|
}
|
|
339
349
|
calculateMinMaxDays() {
|
|
340
|
-
const currentInstance = this.
|
|
341
|
-
const minDate = this.
|
|
350
|
+
const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
351
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
342
352
|
if (minDate.isValid()) {
|
|
343
353
|
this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
|
|
344
354
|
}
|
|
345
|
-
const maxDate = this.
|
|
355
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
346
356
|
if (maxDate.isValid()) {
|
|
347
357
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
348
358
|
}
|
|
349
359
|
}
|
|
350
360
|
navigateMonth(direction) {
|
|
351
|
-
let thisMonth =
|
|
361
|
+
let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
352
362
|
if (direction === "NEXT") {
|
|
353
363
|
thisMonth = thisMonth.add(1, "month");
|
|
354
364
|
}
|
|
@@ -380,22 +390,23 @@ class TzDrpContainerComponent {
|
|
|
380
390
|
}
|
|
381
391
|
generateDates(month, currentYearNumber) {
|
|
382
392
|
let dates = [];
|
|
383
|
-
const daysInMonth =
|
|
393
|
+
const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
|
|
384
394
|
for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
|
|
385
|
-
const date = this.
|
|
395
|
+
const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
|
|
386
396
|
const dateString = date.format(this.data.dpConfig.format);
|
|
387
397
|
let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
|
|
388
|
-
const minDate = this.
|
|
398
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
389
399
|
if (!isDisabledDay && minDate.isValid()) {
|
|
390
400
|
isDisabledDay = minDate.isAfter(date, "day");
|
|
391
401
|
}
|
|
392
|
-
const maxDate = this.
|
|
402
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
393
403
|
if (!isDisabledDay && maxDate.isValid()) {
|
|
394
404
|
isDisabledDay = maxDate.isBefore(date, "day");
|
|
395
405
|
}
|
|
396
|
-
const isCurrentDay = this.
|
|
397
|
-
this.
|
|
406
|
+
const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
|
|
407
|
+
this.dayjsInstance().format(this.data.dpConfig.format);
|
|
398
408
|
let isSelectedDay = false;
|
|
409
|
+
console.log('abhay12', this.localSelectedDates);
|
|
399
410
|
for (const selectedDateConfig of this.localSelectedDates) {
|
|
400
411
|
if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
|
|
401
412
|
isSelectedDay = true;
|
|
@@ -412,8 +423,8 @@ class TzDrpContainerComponent {
|
|
|
412
423
|
const isSelectedStartDay = !isDisabledDay &&
|
|
413
424
|
(this.localSelectedDatesRange?.startDate ?? false) &&
|
|
414
425
|
date.format(this.data.dpConfig.format) === this.localSelectedDatesRange?.startDate;
|
|
415
|
-
const isAfterSelectedStartDate = this.
|
|
416
|
-
const isBeforeSelectedEndDate = this.
|
|
426
|
+
const isAfterSelectedStartDate = this.dayjsInstance(date).isAfter(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day");
|
|
427
|
+
const isBeforeSelectedEndDate = this.dayjsInstance(date).isBefore(dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format), "day");
|
|
417
428
|
const inRangeDay = (this.localSelectedDatesRange?.startDate ?? false) &&
|
|
418
429
|
(this.localSelectedDatesRange?.endDate ?? false) &&
|
|
419
430
|
isAfterSelectedStartDate &&
|
|
@@ -446,13 +457,13 @@ class TzDrpContainerComponent {
|
|
|
446
457
|
if (!this.data.isSPickerSelected) {
|
|
447
458
|
if (!day.isDisabledDay) {
|
|
448
459
|
if (this.selectionStarted) {
|
|
449
|
-
const
|
|
460
|
+
const dayjsDay = dayjs()
|
|
450
461
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
451
462
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
452
463
|
.date(day.date);
|
|
453
|
-
if (
|
|
464
|
+
if (dayjsDay.isBefore(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day")) {
|
|
454
465
|
this.localSelectedDatesRange = {
|
|
455
|
-
startDate:
|
|
466
|
+
startDate: dayjsDay.format(this.data.dpConfig.format),
|
|
456
467
|
endDate: null
|
|
457
468
|
};
|
|
458
469
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -462,13 +473,13 @@ class TzDrpContainerComponent {
|
|
|
462
473
|
this.selectionStarted = false;
|
|
463
474
|
this.localSelectedDatesRange = {
|
|
464
475
|
...this.localSelectedDatesRange,
|
|
465
|
-
endDate:
|
|
476
|
+
endDate: dayjsDay.format(this.data.dpConfig.format)
|
|
466
477
|
};
|
|
467
478
|
}
|
|
468
479
|
else {
|
|
469
480
|
this.selectionStarted = true;
|
|
470
481
|
this.localSelectedDatesRange = {
|
|
471
|
-
startDate:
|
|
482
|
+
startDate: dayjs()
|
|
472
483
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
473
484
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
474
485
|
.date(day.date)
|
|
@@ -486,7 +497,7 @@ class TzDrpContainerComponent {
|
|
|
486
497
|
this.calculateDateRangeLength();
|
|
487
498
|
}
|
|
488
499
|
else {
|
|
489
|
-
const currentSelection =
|
|
500
|
+
const currentSelection = dayjs()
|
|
490
501
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
491
502
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
492
503
|
.date(day.date).format(this.data.dpConfig.format);
|
|
@@ -539,6 +550,9 @@ class TzDrpContainerComponent {
|
|
|
539
550
|
changePicker(event) {
|
|
540
551
|
this.formControl.setValue(event);
|
|
541
552
|
this.singleDatePickerSelected = false;
|
|
553
|
+
this.data.isSPickerSelected = false;
|
|
554
|
+
this.data.isSPickerSelected = false;
|
|
555
|
+
this.openElement = false;
|
|
542
556
|
if (event === "Date Range") {
|
|
543
557
|
this.openElement = false;
|
|
544
558
|
this.data.isSPickerSelected = false;
|
|
@@ -558,10 +572,10 @@ class TzDrpContainerComponent {
|
|
|
558
572
|
}
|
|
559
573
|
calculateDateRangeLength() {
|
|
560
574
|
if (this.localSelectedDatesRange) {
|
|
561
|
-
const startDate = this.
|
|
562
|
-
const endDate = this.
|
|
575
|
+
const startDate = !!this.localSelectedDatesRange.startDate ? this.dayjsInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
576
|
+
const endDate = !!this.localSelectedDatesRange.endDate ? this.dayjsInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
563
577
|
if (startDate && endDate) {
|
|
564
|
-
this.dateRangeLength =
|
|
578
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
565
579
|
}
|
|
566
580
|
}
|
|
567
581
|
}
|
|
@@ -678,7 +692,7 @@ class TzDrpContainerComponent {
|
|
|
678
692
|
}
|
|
679
693
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
680
694
|
type: Component,
|
|
681
|
-
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n <div></div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\" >\n <span >{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" [ngStyle]=\"{ display: 'inline-block', 'margin-left': '10px' }\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n <div class=\"footer_action_btn\">\n <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n </div>\n </div>\n </div>\n <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n <input\n misTzDp\n misInput\n type=\"text\"\n readonly\n class=\"date-input\"\n [dpConfig]=\"data.dpConfig\"\n placeholder=\"Select\"\n (dateChange)=\"onSingleDateChange($event)\"\n [selectedDate]=\"singleDateSelectedValue\"\n positionX=\"center\"\n positionY=\"top\"\n offsetX = 71\n offsetY = -1\n [value]=\"singleDateSelectedValue\"\n [disableBoxShadow]=\"true\"\n [disableOverLay]=\"true\"\n [openElement]=\"openElement\"\n #singleDatePickerElement\n />\n </div>\n\n</div>\n", styles: [".daterangepicker-container{background:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.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"] }]
|
|
695
|
+
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n <div></div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\" >\n <span >{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" [ngStyle]=\"{ display: 'inline-block', 'margin-left': '10px' }\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{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:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
|
|
682
696
|
}], () => [{ type: undefined, decorators: [{
|
|
683
697
|
type: Inject,
|
|
684
698
|
args: [CONTAINER_DATA]
|