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