mis-crystal-design-system 17.0.0 → 17.0.1

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.
Files changed (164) hide show
  1. package/analytics/analytics.service.d.ts +5 -1
  2. package/assets/images/close.svg +5 -0
  3. package/async-search-dropdown/async-dropdown.component.d.ts +9 -1
  4. package/async-search-dropdown/async-dropdown.module.d.ts +2 -1
  5. package/datepicker_v2/datepicker.module.d.ts +2 -1
  6. package/datepicker_v2/tz-datepicker.directive.d.ts +2 -0
  7. package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +18 -1
  8. package/daterangepicker_v2/daterangepicker.module.d.ts +2 -1
  9. package/daterangepicker_v2/models/drp-config.model.d.ts +6 -0
  10. package/daterangepicker_v2/tz-daterangepicker.directive.d.ts +2 -0
  11. package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +5 -1
  12. package/dropdown/calculate-container-height.directive.d.ts +1 -1
  13. package/dropdown/dropdown.component.d.ts +4 -1
  14. package/dropdown/dropdown.module.d.ts +2 -1
  15. package/dynamic-form/dynamic-form.component.d.ts +14 -3
  16. package/dynamic-form/dynamic-form.namespace.d.ts +1 -0
  17. package/esm2022/action-list/action-list.component.mjs +1 -1
  18. package/esm2022/analytics/analytics.service.mjs +7 -6
  19. package/esm2022/async-search-dropdown/async-dropdown.component.mjs +97 -46
  20. package/esm2022/async-search-dropdown/async-dropdown.module.mjs +5 -4
  21. package/esm2022/button/button.directive.mjs +1 -1
  22. package/esm2022/checkbox/checkbox.component.mjs +4 -4
  23. package/esm2022/chip/chip.component.mjs +13 -13
  24. package/esm2022/datepicker_v2/datepicker.module.mjs +5 -4
  25. package/esm2022/datepicker_v2/public_api.mjs +1 -1
  26. package/esm2022/datepicker_v2/tz-datepicker.directive.mjs +21 -2
  27. package/esm2022/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +259 -73
  28. package/esm2022/datepicker_v2/utils/index.mjs +1 -1
  29. package/esm2022/daterangepicker_v2/daterangepicker.module.mjs +5 -4
  30. package/esm2022/daterangepicker_v2/models/drp-config.model.mjs +1 -1
  31. package/esm2022/daterangepicker_v2/public_api.mjs +1 -1
  32. package/esm2022/daterangepicker_v2/tz-daterangepicker.directive.mjs +24 -3
  33. package/esm2022/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +179 -78
  34. package/esm2022/daterangepicker_v2/utils/index.mjs +1 -1
  35. package/esm2022/dropdown/calculate-container-height.directive.mjs +5 -5
  36. package/esm2022/dropdown/dropdown.component.mjs +156 -96
  37. package/esm2022/dropdown/dropdown.module.mjs +5 -4
  38. package/esm2022/dynamic-form/dynamic-form.component.mjs +599 -216
  39. package/esm2022/dynamic-form/dynamic-form.namespace.mjs +1 -1
  40. package/esm2022/fab/fab.component.mjs +1 -1
  41. package/esm2022/filter/animations/slideFromRight.mjs +12 -0
  42. package/esm2022/filter/filter-panel/filter-panel.component.mjs +396 -0
  43. package/esm2022/filter/filters.module.mjs +66 -0
  44. package/esm2022/filter/has-value.pipe.mjs +31 -0
  45. package/esm2022/filter/index.mjs +2 -0
  46. package/esm2022/filter/mis-crystal-design-system-filter.mjs +5 -0
  47. package/esm2022/filter/public_api.mjs +4 -0
  48. package/esm2022/input/mis-input.component.mjs +1 -1
  49. package/esm2022/input-stepper/input-stepper/input-stepper.component.mjs +4 -4
  50. package/esm2022/mobile-filter/mobile-filter.component.mjs +9 -7
  51. package/esm2022/modal/modal.service.mjs +1 -1
  52. package/esm2022/multi-select-dropdown/multi-select-dropdown.component.mjs +26 -14
  53. package/esm2022/nested-multi-select-dropdown/nested-multi-select-dropdown.component.mjs +14 -7
  54. package/esm2022/phone-input/phone-input.component.mjs +6 -50
  55. package/esm2022/radio-button/radio-button.component.mjs +4 -4
  56. package/esm2022/ske-loader/ske-loader.component.mjs +4 -4
  57. package/esm2022/snackbar/snackbar.service.mjs +1 -1
  58. package/esm2022/specificdatepicker/public_api.mjs +3 -3
  59. package/esm2022/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +39 -26
  60. package/esm2022/specificdatepicker/tz-specificdatepicker.directive.mjs +1 -1
  61. package/esm2022/specificdatepicker/utils/index.mjs +1 -1
  62. package/esm2022/star-rating/star-rating.component.mjs +1 -1
  63. package/esm2022/table/custom-table-cell.directive.mjs +1 -1
  64. package/esm2022/table/filter/filter.component.mjs +12 -4
  65. package/esm2022/table/public_api.mjs +2 -3
  66. package/esm2022/table/sub-table/sub-table.component.mjs +1 -1
  67. package/esm2022/table/table.component.mjs +27 -11
  68. package/esm2022/timepicker/timepicker.component.mjs +16 -12
  69. package/esm2022/timerangepicker/public_api.mjs +1 -1
  70. package/esm2022/timerangepicker/timerangepicker.component.mjs +13 -7
  71. package/esm2022/toast/toast.service.mjs +1 -1
  72. package/esm2022/tooltip/tooltip-container/tooltip.component.mjs +10 -9
  73. package/esm2022/tooltip/tooltip.directive.mjs +9 -3
  74. package/esm2022/virtual-scroll/virtual-scroll.component.mjs +1 -1
  75. package/esm2022/widgets/classes/async-widget.mjs +1 -1
  76. package/esm2022/widgets/classes/base-widget.mjs +1 -1
  77. package/esm2022/widgets/classes/sync-widget.mjs +1 -1
  78. package/fesm2022/mis-crystal-design-system-action-list.mjs +1 -1
  79. package/fesm2022/mis-crystal-design-system-action-list.mjs.map +1 -1
  80. package/fesm2022/mis-crystal-design-system-analytics.mjs +6 -5
  81. package/fesm2022/mis-crystal-design-system-analytics.mjs.map +1 -1
  82. package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs +100 -48
  83. package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
  84. package/fesm2022/mis-crystal-design-system-button.mjs +1 -1
  85. package/fesm2022/mis-crystal-design-system-button.mjs.map +1 -1
  86. package/fesm2022/mis-crystal-design-system-checkbox.mjs +4 -4
  87. package/fesm2022/mis-crystal-design-system-checkbox.mjs.map +1 -1
  88. package/fesm2022/mis-crystal-design-system-chip.mjs +13 -13
  89. package/fesm2022/mis-crystal-design-system-chip.mjs.map +1 -1
  90. package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs +282 -76
  91. package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
  92. package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs +205 -83
  93. package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
  94. package/fesm2022/mis-crystal-design-system-drawer.mjs.map +1 -1
  95. package/fesm2022/mis-crystal-design-system-dropdown.mjs +163 -102
  96. package/fesm2022/mis-crystal-design-system-dropdown.mjs.map +1 -1
  97. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs +598 -216
  98. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  99. package/fesm2022/mis-crystal-design-system-fab.mjs +1 -1
  100. package/fesm2022/mis-crystal-design-system-fab.mjs.map +1 -1
  101. package/fesm2022/mis-crystal-design-system-filter.mjs +503 -0
  102. package/fesm2022/mis-crystal-design-system-filter.mjs.map +1 -0
  103. package/fesm2022/mis-crystal-design-system-input-stepper.mjs +4 -4
  104. package/fesm2022/mis-crystal-design-system-input-stepper.mjs.map +1 -1
  105. package/fesm2022/mis-crystal-design-system-input.mjs +1 -1
  106. package/fesm2022/mis-crystal-design-system-input.mjs.map +1 -1
  107. package/fesm2022/mis-crystal-design-system-loader.mjs.map +1 -1
  108. package/fesm2022/mis-crystal-design-system-menu.mjs +1 -1
  109. package/fesm2022/mis-crystal-design-system-menu.mjs.map +1 -1
  110. package/fesm2022/mis-crystal-design-system-mobile-filter.mjs +9 -7
  111. package/fesm2022/mis-crystal-design-system-mobile-filter.mjs.map +1 -1
  112. package/fesm2022/mis-crystal-design-system-modal.mjs.map +1 -1
  113. package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs +26 -14
  114. package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs.map +1 -1
  115. package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs +14 -7
  116. package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs.map +1 -1
  117. package/fesm2022/mis-crystal-design-system-phone-input.mjs +5 -49
  118. package/fesm2022/mis-crystal-design-system-phone-input.mjs.map +1 -1
  119. package/fesm2022/mis-crystal-design-system-radio-button.mjs +4 -4
  120. package/fesm2022/mis-crystal-design-system-radio-button.mjs.map +1 -1
  121. package/fesm2022/mis-crystal-design-system-ske-loader.mjs +3 -3
  122. package/fesm2022/mis-crystal-design-system-ske-loader.mjs.map +1 -1
  123. package/fesm2022/mis-crystal-design-system-slider.mjs +1 -1
  124. package/fesm2022/mis-crystal-design-system-slider.mjs.map +1 -1
  125. package/fesm2022/mis-crystal-design-system-snackbar.mjs +1 -1
  126. package/fesm2022/mis-crystal-design-system-snackbar.mjs.map +1 -1
  127. package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs +39 -26
  128. package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
  129. package/fesm2022/mis-crystal-design-system-star-rating.mjs +1 -1
  130. package/fesm2022/mis-crystal-design-system-star-rating.mjs.map +1 -1
  131. package/fesm2022/mis-crystal-design-system-switch.mjs +1 -1
  132. package/fesm2022/mis-crystal-design-system-switch.mjs.map +1 -1
  133. package/fesm2022/mis-crystal-design-system-table.mjs +41 -17
  134. package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
  135. package/fesm2022/mis-crystal-design-system-timepicker.mjs +16 -12
  136. package/fesm2022/mis-crystal-design-system-timepicker.mjs.map +1 -1
  137. package/fesm2022/mis-crystal-design-system-timerangepicker.mjs +13 -7
  138. package/fesm2022/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
  139. package/fesm2022/mis-crystal-design-system-toast.mjs.map +1 -1
  140. package/fesm2022/mis-crystal-design-system-tooltip.mjs +18 -11
  141. package/fesm2022/mis-crystal-design-system-tooltip.mjs.map +1 -1
  142. package/fesm2022/mis-crystal-design-system-utils.mjs.map +1 -1
  143. package/fesm2022/mis-crystal-design-system-virtual-scroll.mjs +1 -1
  144. package/fesm2022/mis-crystal-design-system-virtual-scroll.mjs.map +1 -1
  145. package/fesm2022/mis-crystal-design-system-widgets.mjs.map +1 -1
  146. package/filter/animations/slideFromRight.d.ts +1 -0
  147. package/filter/filter-panel/filter-panel.component.d.ts +51 -0
  148. package/filter/filters.module.d.ts +18 -0
  149. package/filter/has-value.pipe.d.ts +12 -0
  150. package/filter/index.d.ts +1 -0
  151. package/filter/public_api.d.ts +4 -0
  152. package/multi-select-dropdown/multi-select-dropdown.component.d.ts +3 -1
  153. package/package.json +24 -18
  154. package/phone-input/phone-input.component.d.ts +6 -15
  155. package/specificdatepicker/public_api.d.ts +2 -3
  156. package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +1 -0
  157. package/styles/mis-mixins.scss +46 -0
  158. package/styles/mis-old-icon-styles.scss +498 -0
  159. package/table/public_api.d.ts +1 -2
  160. package/timepicker/timepicker.component.d.ts +3 -2
  161. package/timerangepicker/public_api.d.ts +1 -0
  162. package/timerangepicker/timerangepicker.component.d.ts +3 -1
  163. package/tooltip/tooltip-container/tooltip.component.d.ts +2 -1
  164. package/tooltip/tooltip.directive.d.ts +3 -1
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
2
+ import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, HostListener, Output, Input, NgModule } from '@angular/core';
3
3
  import { parseZone } from 'moment-timezone';
4
4
  import * as i1$1 from '@angular/forms';
5
5
  import { UntypedFormControl } from '@angular/forms';
@@ -71,11 +71,12 @@ const getMonth = (index) => {
71
71
  const _c0 = ["singleDatePickerElement"];
72
72
  const _c1 = a0 => ({ "display": a0 });
73
73
  const _c2 = a0 => ({ "disabled-month": a0 });
74
- const _c3 = a0 => ({ "current-day": a0 });
75
- const _c4 = (a0, a1, a2, a3, a4, a5) => ({ "selected-day": a0, "disabled-day": a1, "selected-start-day": a2, "selected-end-day": a3, "in-range-day": a4, "is-valid-date": a5 });
76
- const _c5 = (a0, a1, a2, a3, a4) => ({ "margin-right": a0, "width": a1, "justify-content": a2, "padding-top": a3, "height": a4 });
77
- const _c6 = a0 => ({ "circular-dot": a0 });
78
- const _c7 = (a0, a1) => ({ "current-day": a0, "holiday-text": a1 });
74
+ const _c3 = () => ({ display: "inline-block", "margin-left": "10px" });
75
+ const _c4 = a0 => ({ "current-day": a0 });
76
+ const _c5 = (a0, a1, a2, a3, a4, a5) => ({ "selected-day": a0, "disabled-day": a1, "selected-start-day": a2, "selected-end-day": a3, "in-range-day": a4, "is-valid-date": a5 });
77
+ const _c6 = (a0, a1, a2, a3, a4) => ({ "margin-right": a0, "width": a1, "justify-content": a2, "padding-top": a3, "height": a4 });
78
+ const _c7 = a0 => ({ "circular-dot": a0 });
79
+ const _c8 = (a0, a1) => ({ "current-day": a0, "holiday-text": a1 });
79
80
  function TzDrpContainerComponent_div_2_Template(rf, ctx) { if (rf & 1) {
80
81
  const _r2 = i0.ɵɵgetCurrentView();
81
82
  i0.ɵɵelementStart(0, "div", 27)(1, "mis-radio", 28);
@@ -100,7 +101,7 @@ function TzDrpContainerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
100
101
  const weekDay_r5 = ctx.$implicit;
101
102
  const ctx_r2 = i0.ɵɵnextContext();
102
103
  i0.ɵɵadvance();
103
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c3, weekDay_r5.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber));
104
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4, weekDay_r5.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber));
104
105
  i0.ɵɵadvance();
105
106
  i0.ɵɵtextInterpolate(weekDay_r5.label);
106
107
  } }
@@ -110,7 +111,7 @@ function TzDrpContainerComponent_div_17_span_2_Template(rf, ctx) { if (rf & 1) {
110
111
  i0.ɵɵelementEnd();
111
112
  } if (rf & 2) {
112
113
  const day_r7 = i0.ɵɵnextContext().$implicit;
113
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c7, day_r7.isCurrentDay, day_r7.isHoliday || day_r7.isWeekOff));
114
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c8, day_r7.isCurrentDay, day_r7.isHoliday || day_r7.isWeekOff));
114
115
  i0.ɵɵadvance();
115
116
  i0.ɵɵtextInterpolate1(" ", day_r7.date, " ");
116
117
  } }
@@ -124,9 +125,9 @@ function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
124
125
  } if (rf & 2) {
125
126
  const day_r7 = ctx.$implicit;
126
127
  const ctx_r2 = i0.ɵɵnextContext();
127
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c4, day_r7.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r7.isDisabledDay, day_r7.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r7.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r7.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r7.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c5, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r7.isHoliday ? "flex-start" : "center", day_r7.isHoliday ? "2.8px" : "0px", day_r7.isHoliday ? "33px" : "36px"));
128
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c5, day_r7.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r7.isDisabledDay, day_r7.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r7.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r7.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r7.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c6, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r7.isHoliday ? "flex-start" : "center", day_r7.isHoliday ? "2.8px" : "0px", day_r7.isHoliday ? "33px" : "36px"));
128
129
  i0.ɵɵadvance();
129
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c6, day_r7.isHoliday));
130
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c7, day_r7.isHoliday));
130
131
  i0.ɵɵadvance();
131
132
  i0.ɵɵproperty("ngIf", day_r7.date > 0);
132
133
  } }
@@ -146,7 +147,7 @@ function TzDrpContainerComponent_div_30_span_2_Template(rf, ctx) { if (rf & 1) {
146
147
  } if (rf & 2) {
147
148
  const day_r10 = i0.ɵɵnextContext().$implicit;
148
149
  const ctx_r2 = i0.ɵɵnextContext();
149
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c7, day_r10.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber, day_r10.isHoliday || day_r10.isWeekOff));
150
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c8, day_r10.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber, day_r10.isHoliday || day_r10.isWeekOff));
150
151
  i0.ɵɵadvance();
151
152
  i0.ɵɵtextInterpolate1(" ", day_r10.date, " ");
152
153
  } }
@@ -160,9 +161,9 @@ function TzDrpContainerComponent_div_30_Template(rf, ctx) { if (rf & 1) {
160
161
  } if (rf & 2) {
161
162
  const day_r10 = ctx.$implicit;
162
163
  const ctx_r2 = i0.ɵɵnextContext();
163
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c4, day_r10.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r10.isDisabledDay, day_r10.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r10.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r10.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r10.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c5, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r10.isHoliday ? "flex-start" : "center", day_r10.isHoliday ? "3px" : "0px", day_r10.isHoliday ? "33px" : "36px"));
164
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c5, day_r10.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r10.isDisabledDay, day_r10.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r10.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r10.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r10.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c6, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r10.isHoliday ? "flex-start" : "center", day_r10.isHoliday ? "3px" : "0px", day_r10.isHoliday ? "33px" : "36px"));
164
165
  i0.ɵɵadvance();
165
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c6, day_r10.isHoliday));
166
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c7, day_r10.isHoliday));
166
167
  i0.ɵɵadvance();
167
168
  i0.ɵɵproperty("ngIf", day_r10.date > 0);
168
169
  } }
@@ -261,8 +262,9 @@ class TzDrpContainerComponent {
261
262
  if (!this.data.isSPickerSelected) {
262
263
  this.formControl.setValue("Date Range");
263
264
  this.isDatesValid = false;
264
- if (this.localSelectedDatesRange.startDate && this.localSelectedDatesRange.endDate) {
265
+ if (this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) {
265
266
  this.isDatesValid = true;
267
+ this.calculateDateRangeLength();
266
268
  }
267
269
  }
268
270
  else {
@@ -481,11 +483,7 @@ class TzDrpContainerComponent {
481
483
  this.isDatesValid = true;
482
484
  }
483
485
  }
484
- const startDate = new Date(this.localSelectedDatesRange?.startDate);
485
- const endDate = new Date(this.localSelectedDatesRange?.endDate);
486
- if (startDate && endDate) {
487
- this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
488
- }
486
+ this.calculateDateRangeLength();
489
487
  }
490
488
  else {
491
489
  const currentSelection = parseZone()
@@ -544,6 +542,10 @@ class TzDrpContainerComponent {
544
542
  if (event === "Date Range") {
545
543
  this.openElement = false;
546
544
  this.data.isSPickerSelected = false;
545
+ if (this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) {
546
+ this.isDatesValid = true;
547
+ this.calculateDateRangeLength();
548
+ }
547
549
  }
548
550
  else if (event === "Single Date") {
549
551
  this.singleDatePickerSelected = true;
@@ -554,6 +556,15 @@ class TzDrpContainerComponent {
554
556
  this.data.isSPickerSelected = true;
555
557
  }
556
558
  }
559
+ calculateDateRangeLength() {
560
+ if (this.localSelectedDatesRange) {
561
+ const startDate = this.parseZoneInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format).toDate();
562
+ const endDate = this.parseZoneInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format).toDate();
563
+ if (startDate && endDate) {
564
+ this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
565
+ }
566
+ }
567
+ }
557
568
  ngOnDestroy() {
558
569
  if (this.singleDatePickerElement) {
559
570
  this.singleDatePickerElement.close();
@@ -565,7 +576,7 @@ class TzDrpContainerComponent {
565
576
  } if (rf & 2) {
566
577
  let _t;
567
578
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.singleDatePickerElement = _t.first);
568
- } }, decls: 49, vars: 33, consts: [["singleDatePickerElement", ""], [1, "daterangepicker-container", 3, "ngClass"], [1, "radio-container"], ["class", "label", 4, "ngFor", "ngForOf"], [1, "specific-datepicker-container", 3, "ngStyle"], [1, "daterangepicker-container__view"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], [1, "daterangepicker-container__arrow__icon", 3, "click", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], [1, "weekOffs_holidays_container"], [4, "ngFor", "ngForOf"], [1, "circular-dot", 2, "display", "inline-block", "margin-left", "10px"], [1, "daterangepicker__footer"], [4, "ngIf"], [1, "footer_action_btn"], ["mis-button", "", "size", "md", "type", "none", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click", 4, "ngIf"], [1, "single-datepicker-container", 3, "ngStyle"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", "placeholder", "Select", "positionX", "center", "positionY", "top", "offsetX", "71", "offsetY", "-1", 1, "date-input", 3, "dateChange", "dpConfig", "selectedDate", "value", "disableBoxShadow", "disableOverLay", "openElement"], [1, "label"], ["ngDefaultControl", "", 1, "input", 3, "valueChange", "name", "value", "formControl"], [1, "daterangepicker-container__weekday"], [3, "ngClass"], [1, "daterangepicker-container__day", 3, "click", "ngClass", "ngStyle"], [3, "ngClass", 4, "ngIf"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
579
+ } }, decls: 49, vars: 35, consts: [["singleDatePickerElement", ""], [1, "daterangepicker-container", 3, "ngClass"], [1, "radio-container"], ["class", "label", 4, "ngFor", "ngForOf"], [1, "specific-datepicker-container", 3, "ngStyle"], [1, "daterangepicker-container__view"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], [1, "daterangepicker-container__arrow__icon", 3, "click", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], [1, "weekOffs_holidays_container"], [4, "ngFor", "ngForOf"], [1, "circular-dot", 3, "ngStyle"], [1, "daterangepicker__footer"], [4, "ngIf"], [1, "footer_action_btn"], ["mis-button", "", "size", "md", "type", "none", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click", 4, "ngIf"], [1, "single-datepicker-container", 3, "ngStyle"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", "placeholder", "Select", "positionX", "center", "positionY", "top", "offsetX", "71", "offsetY", "-1", 1, "date-input", 3, "dateChange", "dpConfig", "selectedDate", "value", "disableBoxShadow", "disableOverLay", "openElement"], [1, "label"], ["ngDefaultControl", "", 1, "input", 3, "valueChange", "name", "value", "formControl"], [1, "daterangepicker-container__weekday"], [3, "ngClass"], [1, "daterangepicker-container__day", 3, "click", "ngClass", "ngStyle"], [3, "ngClass", 4, "ngIf"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
569
580
  const _r1 = i0.ɵɵgetCurrentView();
570
581
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
571
582
  i0.ɵɵtemplate(2, TzDrpContainerComponent_div_2_Template, 4, 4, "div", 3);
@@ -630,9 +641,9 @@ class TzDrpContainerComponent {
630
641
  i0.ɵɵadvance(2);
631
642
  i0.ɵɵproperty("ngForOf", ctx.datePickerValue);
632
643
  i0.ɵɵadvance();
633
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(25, _c1, ctx.singleDatePickerSelected ? "none" : ""));
644
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(26, _c1, ctx.singleDatePickerSelected ? "none" : ""));
634
645
  i0.ɵɵadvance(4);
635
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c2, ctx.isPreviousMonthDisabled));
646
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(28, _c2, ctx.isPreviousMonthDisabled));
636
647
  i0.ɵɵadvance(4);
637
648
  i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
638
649
  i0.ɵɵadvance(4);
@@ -642,14 +653,16 @@ class TzDrpContainerComponent {
642
653
  i0.ɵɵadvance(5);
643
654
  i0.ɵɵtextInterpolate2(" ", ctx.nextMonth, " ", ctx.nextYearNumber, " ");
644
655
  i0.ɵɵadvance();
645
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c2, ctx.isNextMonthDisabled));
656
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(30, _c2, ctx.isNextMonthDisabled));
646
657
  i0.ɵɵadvance(5);
647
658
  i0.ɵɵproperty("ngForOf", ctx.weekDays);
648
659
  i0.ɵɵadvance(2);
649
660
  i0.ɵɵproperty("ngForOf", ctx.nextMonthDates);
650
661
  i0.ɵɵadvance(4);
651
662
  i0.ɵɵproperty("ngForOf", ctx.data.weekOffs);
652
- i0.ɵɵadvance(5);
663
+ i0.ɵɵadvance(3);
664
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(32, _c3));
665
+ i0.ɵɵadvance(2);
653
666
  i0.ɵɵproperty("ngIf", ctx.data.isSPickerSelected);
654
667
  i0.ɵɵadvance();
655
668
  i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
@@ -658,14 +671,14 @@ class TzDrpContainerComponent {
658
671
  i0.ɵɵadvance();
659
672
  i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
660
673
  i0.ɵɵadvance();
661
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(31, _c1, !ctx.singleDatePickerSelected ? "none" : "block"));
674
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(33, _c1, !ctx.singleDatePickerSelected ? "none" : "block"));
662
675
  i0.ɵɵadvance();
663
676
  i0.ɵɵproperty("dpConfig", ctx.data.dpConfig)("selectedDate", ctx.singleDateSelectedValue)("value", ctx.singleDateSelectedValue)("disableBoxShadow", true)("disableOverLay", true)("openElement", ctx.openElement);
664
677
  } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.ButtonDirective, i4.RadioButtonComponent, i5.TzDatepickerDirective], styles: [".daterangepicker-container[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{flex-direction:row}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%]{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{display:flex;align-items:center}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .input[_ngcontent-%COMP%]{margin-right:8px;width:20px;height:20px}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%] .radio-container[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]:nth-child(2){padding-left:0}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__header__prabu[_ngcontent-%COMP%] .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-container__weekday[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__weekdays[_ngcontent-%COMP%] .daterangepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%]{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .daterangepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-start-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-end-day.selected-start-day[_ngcontent-%COMP%]{border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker-container__view[_ngcontent-%COMP%] .daterangepicker-container__body[_ngcontent-%COMP%] .daterangepicker-container__days[_ngcontent-%COMP%] .selected-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%]{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{margin-right:16px}.daterangepicker-container[_ngcontent-%COMP%] .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] span[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-weight:700}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] .footer_action_btn[_ngcontent-%COMP%]{display:flex}.daterangepicker-container[_ngcontent-%COMP%] .daterangepicker__footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot[_ngcontent-%COMP%]{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text[_ngcontent-%COMP%]{color:#6a737d!important}.display-none[_ngcontent-%COMP%]{display:none!important}.single-datepicker-container[_ngcontent-%COMP%]{width:291px}"] }); }
665
678
  }
666
679
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
667
680
  type: Component,
668
- 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:#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"] }]
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"] }]
669
682
  }], () => [{ type: undefined, decorators: [{
670
683
  type: Inject,
671
684
  args: [CONTAINER_DATA]