mis-crystal-design-system 18.0.22-test-dynamic-theme → 18.0.22-test-dynamic-theme-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/button/button.directive.scss +13 -13
  2. package/drawer/drawer.scss +1 -1
  3. package/esm2022/action-list/action-list.component.mjs +2 -2
  4. package/esm2022/async-search-dropdown/async-dropdown.component.mjs +2 -2
  5. package/esm2022/button/button.component.mjs +2 -2
  6. package/esm2022/checkbox/checkbox.component.mjs +2 -2
  7. package/esm2022/chip/chip.component.mjs +2 -2
  8. package/esm2022/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +2 -2
  9. package/esm2022/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +2 -2
  10. package/esm2022/dropdown/dropdown.component.mjs +2 -2
  11. package/esm2022/dynamic-form/dynamic-form.component.mjs +2 -2
  12. package/esm2022/fab/fab.component.mjs +3 -3
  13. package/esm2022/filter/filter-panel/filter-panel.component.mjs +3 -3
  14. package/esm2022/input/mis-input.component.mjs +2 -2
  15. package/esm2022/input-stepper/input-stepper/input-stepper.component.mjs +2 -2
  16. package/esm2022/loader/loader.component.mjs +2 -2
  17. package/esm2022/mobile-filter/mobile-filter.component.mjs +2 -2
  18. package/esm2022/multi-select-dropdown/multi-select-dropdown.component.mjs +2 -2
  19. package/esm2022/nested-multi-select-dropdown/nested-multi-select-dropdown.component.mjs +2 -2
  20. package/esm2022/phone-input/phone-input.component.mjs +2 -2
  21. package/esm2022/radio-button/radio-button.component.mjs +2 -2
  22. package/esm2022/ske-loader/ske-loader.component.mjs +2 -2
  23. package/esm2022/slider/slider.component.mjs +2 -2
  24. package/esm2022/snackbar/snackbar/snackbar.component.mjs +2 -2
  25. package/esm2022/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +2 -2
  26. package/esm2022/star-rating/star-rating.component.mjs +2 -2
  27. package/esm2022/switch/switch.component.mjs +2 -2
  28. package/esm2022/table/actions-cell/actions-cell.component.mjs +2 -2
  29. package/esm2022/table/filter/filter.component.mjs +2 -2
  30. package/esm2022/table/sub-table/sub-table.component.mjs +2 -2
  31. package/esm2022/table/table.component.mjs +2 -2
  32. package/esm2022/timepicker/timepicker.component.mjs +2 -2
  33. package/esm2022/toast/toast.component.mjs +3 -3
  34. package/esm2022/tooltip/tooltip-container/tooltip.component.mjs +2 -2
  35. package/fesm2022/mis-crystal-design-system-action-list.mjs +2 -2
  36. package/fesm2022/mis-crystal-design-system-action-list.mjs.map +1 -1
  37. package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs +2 -2
  38. package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
  39. package/fesm2022/mis-crystal-design-system-button.mjs +2 -2
  40. package/fesm2022/mis-crystal-design-system-button.mjs.map +1 -1
  41. package/fesm2022/mis-crystal-design-system-checkbox.mjs +2 -2
  42. package/fesm2022/mis-crystal-design-system-checkbox.mjs.map +1 -1
  43. package/fesm2022/mis-crystal-design-system-chip.mjs +2 -2
  44. package/fesm2022/mis-crystal-design-system-chip.mjs.map +1 -1
  45. package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs +2 -2
  46. package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
  47. package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs +2 -2
  48. package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
  49. package/fesm2022/mis-crystal-design-system-dropdown.mjs +2 -2
  50. package/fesm2022/mis-crystal-design-system-dropdown.mjs.map +1 -1
  51. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs +2 -2
  52. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  53. package/fesm2022/mis-crystal-design-system-fab.mjs +2 -2
  54. package/fesm2022/mis-crystal-design-system-fab.mjs.map +1 -1
  55. package/fesm2022/mis-crystal-design-system-filter.mjs +2 -2
  56. package/fesm2022/mis-crystal-design-system-filter.mjs.map +1 -1
  57. package/fesm2022/mis-crystal-design-system-input-stepper.mjs +2 -2
  58. package/fesm2022/mis-crystal-design-system-input-stepper.mjs.map +1 -1
  59. package/fesm2022/mis-crystal-design-system-input.mjs +2 -2
  60. package/fesm2022/mis-crystal-design-system-input.mjs.map +1 -1
  61. package/fesm2022/mis-crystal-design-system-loader.mjs +2 -2
  62. package/fesm2022/mis-crystal-design-system-loader.mjs.map +1 -1
  63. package/fesm2022/mis-crystal-design-system-mobile-filter.mjs +2 -2
  64. package/fesm2022/mis-crystal-design-system-mobile-filter.mjs.map +1 -1
  65. package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs +2 -2
  66. package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs.map +1 -1
  67. package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs +2 -2
  68. package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs.map +1 -1
  69. package/fesm2022/mis-crystal-design-system-phone-input.mjs +2 -2
  70. package/fesm2022/mis-crystal-design-system-phone-input.mjs.map +1 -1
  71. package/fesm2022/mis-crystal-design-system-radio-button.mjs +2 -2
  72. package/fesm2022/mis-crystal-design-system-radio-button.mjs.map +1 -1
  73. package/fesm2022/mis-crystal-design-system-ske-loader.mjs +2 -2
  74. package/fesm2022/mis-crystal-design-system-ske-loader.mjs.map +1 -1
  75. package/fesm2022/mis-crystal-design-system-slider.mjs +2 -2
  76. package/fesm2022/mis-crystal-design-system-slider.mjs.map +1 -1
  77. package/fesm2022/mis-crystal-design-system-snackbar.mjs +2 -2
  78. package/fesm2022/mis-crystal-design-system-snackbar.mjs.map +1 -1
  79. package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs +2 -2
  80. package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
  81. package/fesm2022/mis-crystal-design-system-star-rating.mjs +2 -2
  82. package/fesm2022/mis-crystal-design-system-star-rating.mjs.map +1 -1
  83. package/fesm2022/mis-crystal-design-system-switch.mjs +2 -2
  84. package/fesm2022/mis-crystal-design-system-switch.mjs.map +1 -1
  85. package/fesm2022/mis-crystal-design-system-table.mjs +8 -8
  86. package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
  87. package/fesm2022/mis-crystal-design-system-timepicker.mjs +2 -2
  88. package/fesm2022/mis-crystal-design-system-timepicker.mjs.map +1 -1
  89. package/fesm2022/mis-crystal-design-system-toast.mjs +2 -2
  90. package/fesm2022/mis-crystal-design-system-toast.mjs.map +1 -1
  91. package/fesm2022/mis-crystal-design-system-tooltip.mjs +2 -2
  92. package/fesm2022/mis-crystal-design-system-tooltip.mjs.map +1 -1
  93. package/input/mis-input.component.scss +17 -17
  94. package/modal/modal.scss +1 -1
  95. package/package.json +7 -7
  96. package/styles/mis-color-constants.scss +204 -0
  97. package/styles/mis-icons.scss +56 -56
  98. package/styles/mis-old-icon-styles.scss +21 -21
  99. package/styles/mis-dynamic-theme-color-var.scss +0 -324
package/button/button.directive.scss CHANGED
@@ -31,39 +31,39 @@
31
31
  }
32
32
 
33
33
  background-color: transparent;
34
- color: var(--brand-primary);
34
+ color: var(--brand-primary, #0937B2);
35
35
  &:hover {
36
- background-color: var(--brand-primary-hover);
36
+ background-color: var(--brand-primary-hover, #F0F3FA);
37
37
  }
38
38
  &:focus {
39
- background-color: var(--brand-primary-active);
39
+ background-color: var(--brand-primary-active, #DAE1F3);
40
40
  }
41
41
  &:disabled {
42
- color: var(--text-tertiary);
42
+ color: var(--text-tertiary, #929DAB);
43
43
  pointer-events: none;
44
44
  }
45
45
 
46
46
  &.mis-outline {
47
- border: 1px solid var(--brand-primary);
47
+ border: 1px solid var(--brand-primary, #0937B2);
48
48
 
49
49
  &:disabled {
50
- color: var(--text-tertiary);
51
- border-color: var(--text-tertiary);
50
+ color: var(--text-tertiary, #929DAB);
51
+ border-color: var(--text-tertiary, #929DAB);
52
52
  }
53
53
  }
54
54
 
55
55
  &.mis-primary {
56
- background-color: var(--brand-primary);
57
- color: var(--bg-primary);
56
+ background-color: var(--brand-primary, #0937B2);
57
+ color: var(--bg-primary, #FFFFFF);
58
58
  &:hover {
59
- background-color: var(--brand-primary-dark);
59
+ background-color: var(--brand-primary-dark, #062A99);
60
60
  }
61
61
  &:focus {
62
- background-color: var(--brand-primary-darker);
62
+ background-color: var(--brand-primary-darker, #041F80);
63
63
  }
64
64
  &:disabled {
65
- background-color: var(--border-primary);
66
- color: var(--text-tertiary);
65
+ background-color: var(--border-primary, #E0E0E0);
66
+ color: var(--text-tertiary, #929DAB);
67
67
  }
68
68
  }
69
69
  }
package/drawer/drawer.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  transition: all 300ms ease-out;
4
4
  }
5
5
  .mis-drawer-overlay {
6
- background: var(--bg-overlay-light);
6
+ background: var(--bg-overlay-light, rgba(0, 0, 0, 0.12));
7
7
  }
8
8
  mis-datepicker-container {
9
9
  z-index: 2100;
package/esm2022/action-list/action-list.component.mjs CHANGED
@@ -324,11 +324,11 @@ export class ActionListComponent {
324
324
  i0.ɵɵproperty("ngIf", (ctx.selectedItems == null ? null : ctx.selectedItems.length) > 1);
325
325
  i0.ɵɵadvance();
326
326
  i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c5, ctx.isOpen ? "rotate(180deg)" : "rotate(0deg)"));
327
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.CheckboxComponent], styles: [".main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary);border-radius:6px;background-color:var(--bg-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:hover, .main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover);outline:none}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .text[_ngcontent-%COMP%]{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .count[_ngcontent-%COMP%]{width:24px;height:24px;background-color:var(--border-primary);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--bg-primary);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary)}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:10px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary)}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover);outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%] .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]{cursor:not-allowed}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:focus-visible{background-color:transparent;outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{color:var(--text-tertiary);-webkit-user-select:none;user-select:none}"] }); }
327
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.CheckboxComponent], styles: [".main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:hover, .main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .text[_ngcontent-%COMP%]{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .count[_ngcontent-%COMP%]{width:24px;height:24px;background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%] .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]{cursor:not-allowed}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:focus-visible{background-color:transparent;outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{color:var(--text-tertiary, #929DAB);-webkit-user-select:none;user-select:none}"] }); }
328
328
  }
329
329
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionListComponent, [{
330
330
  type: Component,
331
- args: [{ selector: "mis-action-list", template: "<div\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">\n {{ label }}\n </p>\n <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n #singleItem\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n (mouseenter)=\"onHover(item, true, singleItem)\"\n *ngFor=\"let item of data\"\n >\n <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n <span>{{ item?.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item?.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled }\"\n (click)=\"!item.disabled && selectItem(item)\"\n *ngFor=\"let item of subItems\"\n >\n <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n <span>{{ item.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #tickIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n fill=\"#181F33\"\n />\n </svg>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary);border-radius:6px;background-color:var(--bg-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:var(--brand-primary-hover);outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.main-container .dropdown .label .count{width:24px;height:24px;background-color:var(--border-primary);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary)}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--bg-primary);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary)}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary)}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:var(--brand-primary-hover);outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:var(--text-tertiary);-webkit-user-select:none;user-select:none}\n"] }]
331
+ args: [{ selector: "mis-action-list", template: "<div\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n >\n <div class=\"label\">\n <p class=\"text\">\n {{ label }}\n </p>\n <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</p>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n\n<ng-template #popupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n #singleItem\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n (mouseenter)=\"onHover(item, true, singleItem)\"\n *ngFor=\"let item of data\"\n >\n <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n <span>{{ item?.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item?.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n <div\n class=\"popup-container\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n >\n <div class=\"items\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled }\"\n (click)=\"!item.disabled && selectItem(item)\"\n *ngFor=\"let item of subItems\"\n >\n <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n </div>\n <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n <span>{{ item.label }}</span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"noData\" *ngIf=\"data.length === 0\">\n {{ noDataMessage || \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #tickIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n fill=\"#181F33\"\n />\n </svg>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid var(--border-primary, #E0E0E0);border-radius:6px;background-color:var(--bg-primary, #FFFFFF);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .label .count{width:24px;height:24px;background-color:var(--border-primary, #E0E0E0);border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid var(--border-primary, #E0E0E0);border-radius:8px;background-color:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:8px;outline:none;caret-color:var(--brand-primary, #0937B2);font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:var(--text-primary, #181F33)}.popup-container .items .item:hover,.popup-container .items .item:focus-visible{background-color:var(--brand-primary-hover, #F0F3FA);outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:var(--text-tertiary, #929DAB);-webkit-user-select:none;user-select:none}\n"] }]
332
332
  }], () => [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }], { data: [{
333
333
  type: Input
334
334
  }], height: [{
package/esm2022/async-search-dropdown/async-dropdown.component.mjs CHANGED
@@ -458,11 +458,11 @@ export class AsyncDropdownComponent {
458
458
  i0.ɵɵproperty("ngIf", ctx.disableCopyPaste)("ngIfElse", enableCopyPaste_r13);
459
459
  i0.ɵɵadvance(3);
460
460
  i0.ɵɵproperty("ngIf", ctx.searchInput == null ? null : ctx.searchInput.value == null ? null : ctx.searchInput.value.length);
461
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: [".dd-wrapper[_ngcontent-%COMP%]{background:var(--bg-primary);border:1px solid var(--border-primary);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:var(--bg-tertiary)}.dd-wrapper[_ngcontent-%COMP%] .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:var(--brand-primary);background:var(--bg-tertiary)}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary);border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%] span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%] .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%] .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:var(--bg-primary);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .disabled[_ngcontent-%COMP%]{color:var(--text-secondary)!important;pointer-events:none}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:hover:not(.disabled){background:var(--brand-primary-hover)}.dd-list[_ngcontent-%COMP%] .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:var(--border-primary);overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{color:var(--text-primary)}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{text-align:center} #spinner{position:relative!important}"] }); }
461
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4.LoaderComponent, i5.CdkTrapFocus], styles: [".dd-wrapper[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened[_ngcontent-%COMP%], .dd-wrapper[_ngcontent-%COMP%]:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper[_ngcontent-%COMP%] .selected-list[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper[_ngcontent-%COMP%]:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled[_ngcontent-%COMP%], .dd-wrapper.readonly[_ngcontent-%COMP%]{pointer-events:none}.search-input[_ngcontent-%COMP%]{position:relative;border-radius:8px}.search-input[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input[_ngcontent-%COMP%] span[_ngcontent-%COMP%], .search-input[_ngcontent-%COMP%] .custom-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input[_ngcontent-%COMP%] .croos-icon[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list[_ngcontent-%COMP%]{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]{padding:8px 16px;cursor:pointer}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .disabled[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .primary[_ngcontent-%COMP%], .dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .secondary[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .reason[_ngcontent-%COMP%]{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list[_ngcontent-%COMP%] .data-not-found[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd[_ngcontent-%COMP%]{padding:unset}.chip[_ngcontent-%COMP%]{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)}.chip-md[_ngcontent-%COMP%]{border-radius:16px;padding:4px 12px}.chip-sm[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md[_ngcontent-%COMP%]{padding-top:8px;padding-bottom:8px}.ip-sm[_ngcontent-%COMP%]{padding-top:3px;padding-bottom:3px}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{text-align:center} #spinner{position:relative!important}"] }); }
462
462
  }
463
463
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AsyncDropdownComponent, [{
464
464
  type: Component,
465
- args: [{ selector: "mis-async-search-dropdown", template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" [style.width]=\"width\" #ddBtn>\n <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" [ngStyle]=\"{ 'margin-right': '4px'}\">{{item[displayKey]}}</span>\n <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" tabindex=\"0\" (keyup.enter)=\"removeItem(item)\" [ngStyle]=\"{\n 'cursor': 'pointer',\n 'font-size': size === 'sm' ? '12px' : '14px'\n }\" class=\"icon-ic-navigation-cancel-24\"></span>\n </div>\n </div>\n <div class=\"search-input\">\n <div *ngIf=\"customPlaceholderIcon; else defaultSearchIcon\" class=\"custom-icon\">\n <img [src]=\"customPlaceholderIcon\" alt=\"customIcon\" />\n </div>\n <ng-template #defaultSearchIcon>\n <span class=\"icon-ic-action-search-24\"></span>\n </ng-template>\n <input *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\"/>\n <ng-template #enableCopyPaste>\n <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\" />\n </ng-template>\n <div class=\"icon-ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" tabindex=\"0\" (click)=\"removeInputValue()\" (keyup.enter)=\"removeInputValue()\"></div>\n </div>\n</div>\n\n<ng-template #dd>\n <div class=\"dd-list\" [ngStyle]=\"{'max-height':height, 'width': dropdownListWidth}\" [ngClass]=\"{'dd-list-pd':data.length === 0}\" tabindex=\"0\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"openPopUpOnTab\">\n <ng-container *ngIf=\"loading\">\n <ng-container\n *ngIf=\"customLoader; else defaultLoader\"\n [ngTemplateOutlet]=\"customLoader\"\n ></ng-container>\n <ng-template #defaultLoader>\n <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n <mis-loader [mobileView]=\"true\"></mis-loader>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"error\">\n <div class=\"status-container\">\n <p>Unknown error has occurred, <br> Please try again later.</p>\n </div>\n </ng-container>\n <div *ngIf=\"!loading && !error && data.length > 0\">\n <ng-container *ngFor=\"let item of data\">\n <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\"> \n <div tabindex=\"-1\" cdkFocusInitial></div> \n <div\n [tabindex]=\"openPopUpOnTab ? 0 : -1\"\n *ngIf=\"customItem; else standardItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </div>\n <ng-template #standardItem>\n <div tabindex=\"-1\" cdkFocusInitial></div> \n <div class=\"item\" (click)=\"selectData(item, false)\" [tabindex]=\"openPopUpOnTab ? 0 : -1\" (keyup.enter)=\"selectData(item, false)\">\n <div class=\"value\">\n <div class=\"primary\">\n {{ item[displayKey] }}\n </div>\n <div class=\"secondary\">\n {{ item[secondaryDisplayKey] }}\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n <div class=\"data-not-found\">No Data Available</div>\n </div>\n </div>\n</ng-template>\n", styles: [".dd-wrapper{background:var(--bg-primary);border:1px solid var(--border-primary);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:var(--bg-tertiary)}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:var(--brand-primary);background:var(--bg-tertiary)}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary);border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:var(--bg-primary);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:var(--text-secondary)!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary)}.dd-list .item:hover:not(.disabled){background:var(--brand-primary-hover)}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:var(--border-primary);overflow-wrap:anywhere;cursor:default}.chip span{color:var(--text-primary)}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
465
+ args: [{ selector: "mis-async-search-dropdown", template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" [style.width]=\"width\" #ddBtn>\n <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" [ngStyle]=\"{ 'margin-right': '4px'}\">{{item[displayKey]}}</span>\n <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" tabindex=\"0\" (keyup.enter)=\"removeItem(item)\" [ngStyle]=\"{\n 'cursor': 'pointer',\n 'font-size': size === 'sm' ? '12px' : '14px'\n }\" class=\"icon-ic-navigation-cancel-24\"></span>\n </div>\n </div>\n <div class=\"search-input\">\n <div *ngIf=\"customPlaceholderIcon; else defaultSearchIcon\" class=\"custom-icon\">\n <img [src]=\"customPlaceholderIcon\" alt=\"customIcon\" />\n </div>\n <ng-template #defaultSearchIcon>\n <span class=\"icon-ic-action-search-24\"></span>\n </ng-template>\n <input *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\"/>\n <ng-template #enableCopyPaste>\n <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" (keyup.enter)=\"enablePopUpOnTab()\" />\n </ng-template>\n <div class=\"icon-ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" tabindex=\"0\" (click)=\"removeInputValue()\" (keyup.enter)=\"removeInputValue()\"></div>\n </div>\n</div>\n\n<ng-template #dd>\n <div class=\"dd-list\" [ngStyle]=\"{'max-height':height, 'width': dropdownListWidth}\" [ngClass]=\"{'dd-list-pd':data.length === 0}\" tabindex=\"0\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"openPopUpOnTab\">\n <ng-container *ngIf=\"loading\">\n <ng-container\n *ngIf=\"customLoader; else defaultLoader\"\n [ngTemplateOutlet]=\"customLoader\"\n ></ng-container>\n <ng-template #defaultLoader>\n <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n <mis-loader [mobileView]=\"true\"></mis-loader>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"error\">\n <div class=\"status-container\">\n <p>Unknown error has occurred, <br> Please try again later.</p>\n </div>\n </ng-container>\n <div *ngIf=\"!loading && !error && data.length > 0\">\n <ng-container *ngFor=\"let item of data\">\n <div (click)=\"selectData(item, false)\" (keyup.enter)=\"selectData(item, false)\"> \n <div tabindex=\"-1\" cdkFocusInitial></div> \n <div\n [tabindex]=\"openPopUpOnTab ? 0 : -1\"\n *ngIf=\"customItem; else standardItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </div>\n <ng-template #standardItem>\n <div tabindex=\"-1\" cdkFocusInitial></div> \n <div class=\"item\" (click)=\"selectData(item, false)\" [tabindex]=\"openPopUpOnTab ? 0 : -1\" (keyup.enter)=\"selectData(item, false)\">\n <div class=\"value\">\n <div class=\"primary\">\n {{ item[displayKey] }}\n </div>\n <div class=\"secondary\">\n {{ item[secondaryDisplayKey] }}\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n <div class=\"data-not-found\">No Data Available</div>\n </div>\n </div>\n</ng-template>\n", styles: [".dd-wrapper{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:var(--brand-primary, #0937B2);background:var(--bg-tertiary, #F5F5F5)}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:var(--text-primary, #181F33);border-radius:inherit;border:1px solid transparent;width:100%}.search-input span,.search-input .custom-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:24px;height:24px;left:8px}.search-input .croos-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:var(--bg-primary, #FFFFFF);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:var(--bg-primary, #FFFFFF);border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary, #929DAB)}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:var(--text-secondary, #6A737D)!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D)}.dd-list .item:hover:not(.disabled){background:var(--brand-primary-hover, #F0F3FA)}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:var(--border-primary, #E0E0E0);overflow-wrap:anywhere;cursor:default}.chip span{color:var(--text-primary, #181F33)}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}\n"] }]
466
466
  }], () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }], { height: [{
467
467
  type: Input
468
468
  }], width: [{
package/esm2022/button/button.component.mjs CHANGED
@@ -68,11 +68,11 @@ export class ButtonComponent {
68
68
  i0.ɵɵtextInterpolate(ctx.name);
69
69
  i0.ɵɵadvance();
70
70
  i0.ɵɵproperty("ngIf", ctx.showIcon && ctx.iconPosition === "Right");
71
- } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle], styles: ["button[_ngcontent-%COMP%]{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);background-color:var(--bg-primary)}.solid[_ngcontent-%COMP%]{color:var(--bg-primary);background:var(--brand-primary)}.solid[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-dark)}.solid[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-darker)}.solid[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary);background:var(--bg-tertiary)}.outline[_ngcontent-%COMP%]{border:1px solid var(--brand-primary);color:var(--brand-primary);background:var(--bg-primary)}.outline[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover)}.outline[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active)}.outline[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary);border:1px solid var(--text-tertiary)}.text[_ngcontent-%COMP%]{color:var(--text-primary);background:var(--bg-primary)}.text[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover)}.text[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active)}.text[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary)}.large[_ngcontent-%COMP%]{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium[_ngcontent-%COMP%]{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small[_ngcontent-%COMP%]{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile[_ngcontent-%COMP%]{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}#left-icon[_ngcontent-%COMP%]{margin-right:8px}#right-icon[_ngcontent-%COMP%]{margin-left:8px}.loader[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.spinner[_ngcontent-%COMP%]{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary);border-top:2px solid currentColor;border-radius:50%;animation:_ngcontent-%COMP%_spin 1s linear infinite}button.loading[_ngcontent-%COMP%] .button-text[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%] #left-icon[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%] #right-icon[_ngcontent-%COMP%]{visibility:hidden}button.loading[_ngcontent-%COMP%] .loader[_ngcontent-%COMP%]{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading[_ngcontent-%COMP%]{position:relative}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
71
+ } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle], styles: ["button[_ngcontent-%COMP%]{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary, #181F33);background-color:var(--bg-primary, #FFFFFF)}.solid[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF);background:var(--brand-primary, #0937B2)}.solid[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-dark, #062A99)}.solid[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-darker, #041F80)}.solid[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB);background:var(--bg-tertiary, #F5F5F5)}.outline[_ngcontent-%COMP%]{border:1px solid var(--brand-primary, #0937B2);color:var(--brand-primary, #0937B2);background:var(--bg-primary, #FFFFFF)}.outline[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.outline[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.outline[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB);border:1px solid var(--text-tertiary, #929DAB)}.text[_ngcontent-%COMP%]{color:var(--text-primary, #181F33);background:var(--bg-primary, #FFFFFF)}.text[_ngcontent-%COMP%]:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.text[_ngcontent-%COMP%]:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.text[_ngcontent-%COMP%]:disabled{color:var(--text-tertiary, #929DAB)}.large[_ngcontent-%COMP%]{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium[_ngcontent-%COMP%]{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small[_ngcontent-%COMP%]{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile[_ngcontent-%COMP%]{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}#left-icon[_ngcontent-%COMP%]{margin-right:8px}#right-icon[_ngcontent-%COMP%]{margin-left:8px}.loader[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.spinner[_ngcontent-%COMP%]{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary, #0937B2);border-top:2px solid currentColor;border-radius:50%;animation:_ngcontent-%COMP%_spin 1s linear infinite}button.loading[_ngcontent-%COMP%] .button-text[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%] #left-icon[_ngcontent-%COMP%], button.loading[_ngcontent-%COMP%] #right-icon[_ngcontent-%COMP%]{visibility:hidden}button.loading[_ngcontent-%COMP%] .loader[_ngcontent-%COMP%]{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading[_ngcontent-%COMP%]{position:relative}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
72
72
  }
73
73
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
74
74
  type: Component,
75
- args: [{ selector: "mis-button", template: "<button\n (click)=\"onClick($event)\"\n [disabled]=\"disabled || showLoader\"\n [ngClass]=\"{\n solid: type === 'Solid',\n outline: type === 'Outline',\n text: type === 'Text',\n large: size === 'Large',\n medium: size === 'Medium',\n small: size === 'Small',\n 'large-mobile': size === 'Large-M',\n 'small-mobile': size === 'Small-M',\n loading: showLoader\n }\"\n [ngStyle]=\"{\n 'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n 'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n width: width\n }\"\n>\n <div class=\"loader\" *ngIf=\"showLoader\">\n <div class=\"spinner\"></div>\n </div>\n <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n <span class=\"button-text\">{{ name }}</span>\n <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n</button>\n", styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);background-color:var(--bg-primary)}.solid{color:var(--bg-primary);background:var(--brand-primary)}.solid:hover:enabled{background:var(--brand-primary-dark)}.solid:active:enabled{background:var(--brand-primary-darker)}.solid:disabled{color:var(--text-tertiary);background:var(--bg-tertiary)}.outline{border:1px solid var(--brand-primary);color:var(--brand-primary);background:var(--bg-primary)}.outline:hover:enabled{background:var(--brand-primary-hover)}.outline:active:enabled{background:var(--brand-primary-active)}.outline:disabled{color:var(--text-tertiary);border:1px solid var(--text-tertiary)}.text{color:var(--text-primary);background:var(--bg-primary)}.text:hover:enabled{background:var(--brand-primary-hover)}.text:active:enabled{background:var(--brand-primary-active)}.text:disabled{color:var(--text-tertiary)}.large{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}.loader{display:flex;justify-content:center;align-items:center}.spinner{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary);border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}button.loading .button-text,button.loading #left-icon,button.loading #right-icon{visibility:hidden}button.loading .loader{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading{position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
75
+ args: [{ selector: "mis-button", template: "<button\n (click)=\"onClick($event)\"\n [disabled]=\"disabled || showLoader\"\n [ngClass]=\"{\n solid: type === 'Solid',\n outline: type === 'Outline',\n text: type === 'Text',\n large: size === 'Large',\n medium: size === 'Medium',\n small: size === 'Small',\n 'large-mobile': size === 'Large-M',\n 'small-mobile': size === 'Small-M',\n loading: showLoader\n }\"\n [ngStyle]=\"{\n 'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n 'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n width: width\n }\"\n>\n <div class=\"loader\" *ngIf=\"showLoader\">\n <div class=\"spinner\"></div>\n </div>\n <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n <span class=\"button-text\">{{ name }}</span>\n <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n</button>\n", styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary, #181F33);background-color:var(--bg-primary, #FFFFFF)}.solid{color:var(--bg-primary, #FFFFFF);background:var(--brand-primary, #0937B2)}.solid:hover:enabled{background:var(--brand-primary-dark, #062A99)}.solid:active:enabled{background:var(--brand-primary-darker, #041F80)}.solid:disabled{color:var(--text-tertiary, #929DAB);background:var(--bg-tertiary, #F5F5F5)}.outline{border:1px solid var(--brand-primary, #0937B2);color:var(--brand-primary, #0937B2);background:var(--bg-primary, #FFFFFF)}.outline:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.outline:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.outline:disabled{color:var(--text-tertiary, #929DAB);border:1px solid var(--text-tertiary, #929DAB)}.text{color:var(--text-primary, #181F33);background:var(--bg-primary, #FFFFFF)}.text:hover:enabled{background:var(--brand-primary-hover, #F0F3FA)}.text:active:enabled{background:var(--brand-primary-active, #DAE1F3)}.text:disabled{color:var(--text-tertiary, #929DAB)}.large{height:56px;padding:16px;border-radius:10px;font-style:normal;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.5px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.large-mobile{height:44px;padding:12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;border-radius:8px;font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.1px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}.loader{display:flex;justify-content:center;align-items:center}.spinner{width:16px;height:16px;border:2px solid transparent;color:var(--brand-primary, #0937B2);border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}button.loading .button-text,button.loading #left-icon,button.loading #right-icon{visibility:hidden}button.loading .loader{visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}button.loading{position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
76
76
  }], () => [], { name: [{
77
77
  type: Input
78
78
  }], type: [{
package/esm2022/checkbox/checkbox.component.mjs CHANGED
@@ -97,11 +97,11 @@ export class CheckboxComponent {
97
97
  i0.ɵɵproperty("ngIf", !ctx.isIndeterminate);
98
98
  i0.ɵɵadvance();
99
99
  i0.ɵɵproperty("ngIf", ctx.isIndeterminate);
100
- } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective], styles: [".checkbox-container[_ngcontent-%COMP%]{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark[_ngcontent-%COMP%]{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary);border:solid 2px var(--text-secondary);box-sizing:border-box}.checkmark[_ngcontent-%COMP%]:hover{border-color:var(--text-tertiary)}.checkmark[_ngcontent-%COMP%]:focus-within, .checkmark[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .09em var(--bg-primary),0 0 .01em .2em var(--brand-primary);outline:none}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]{background-color:var(--brand-primary);border-color:var(--brand-primary)}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark.disabled-checkbox[_ngcontent-%COMP%]{background-color:var(--text-disabled);border-color:var(--text-disabled)}.checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.checkbox-container[_ngcontent-%COMP%] .checkmark[_ngcontent-%COMP%]:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%] .checkmark.indeterminate[_ngcontent-%COMP%]:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox[_ngcontent-%COMP%]{pointer-events:none;border-color:var(--text-disabled)}.error[_ngcontent-%COMP%]{border-color:var(--brand-error)}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .error.checkmark[_ngcontent-%COMP%]{border:var(--brand-error)!important;background:var(--brand-error)!important}.checkbox-container[_ngcontent-%COMP%] .error.checkmark[_ngcontent-%COMP%]:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%] .error.checkmark.indeterminate[_ngcontent-%COMP%]:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error[_ngcontent-%COMP%]:focus-within, .error[_ngcontent-%COMP%]:focus{box-shadow:none!important;outline:none}"] }); }
100
+ } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective], styles: [".checkbox-container[_ngcontent-%COMP%]{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark[_ngcontent-%COMP%]{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary, #FFFFFF);border:solid 2px var(--text-secondary, #6A737D);box-sizing:border-box}.checkmark[_ngcontent-%COMP%]:hover{border-color:var(--text-tertiary, #929DAB)}.checkmark[_ngcontent-%COMP%]:focus-within, .checkmark[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .09em var(--bg-primary, #FFFFFF),0 0 .01em .2em var(--brand-primary, #0937B2);outline:none}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-color:var(--brand-primary, #0937B2)}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark.disabled-checkbox[_ngcontent-%COMP%]{background-color:var(--text-disabled, #C8CDD3);border-color:var(--text-disabled, #C8CDD3)}.checkmark[_ngcontent-%COMP%]:after{content:\"\";position:absolute;display:none}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .checkmark[_ngcontent-%COMP%]:after{display:block}.checkbox-container[_ngcontent-%COMP%] .checkmark[_ngcontent-%COMP%]:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%] .checkmark.indeterminate[_ngcontent-%COMP%]:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox[_ngcontent-%COMP%]{pointer-events:none;border-color:var(--text-disabled, #C8CDD3)}.error[_ngcontent-%COMP%]{border-color:var(--brand-error, #B00020)}.checkbox-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked ~ .error.checkmark[_ngcontent-%COMP%]{border:var(--brand-error, #B00020)!important;background:var(--brand-error, #B00020)!important}.checkbox-container[_ngcontent-%COMP%] .error.checkmark[_ngcontent-%COMP%]:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container[_ngcontent-%COMP%] .error.checkmark.indeterminate[_ngcontent-%COMP%]:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error[_ngcontent-%COMP%]:focus-within, .error[_ngcontent-%COMP%]:focus{box-shadow:none!important;outline:none}"] }); }
101
101
  }
102
102
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
103
103
  type: Component,
104
- args: [{ selector: "mis-checkbox", template: "<div\n class=\"checkbox-container\"\n [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n (click)=\"!formControl.disabled && toggleState()\"\n (keyup.enter)=\"!formControl.disabled && toggleState()\"\n>\n <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n <span\n class=\"checkmark\"\n *ngIf=\"!isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n <span\n class=\"checkmark indeterminate\"\n tabindex=\"0\"\n *ngIf=\"isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n</div>\n", styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary);border:solid 2px var(--text-secondary);box-sizing:border-box}.checkmark:hover{border-color:var(--text-tertiary)}.checkmark:focus-within,.checkmark:focus{box-shadow:0 0 0 .09em var(--bg-primary),0 0 .01em .2em var(--brand-primary);outline:none}.checkbox-container input:checked~.checkmark{background-color:var(--brand-primary);border-color:var(--brand-primary)}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:var(--text-disabled);border-color:var(--text-disabled)}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:var(--text-disabled)}.error{border-color:var(--brand-error)}.checkbox-container input:checked~.error.checkmark{border:var(--brand-error)!important;background:var(--brand-error)!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus-within,.error:focus{box-shadow:none!important;outline:none}\n"] }]
104
+ args: [{ selector: "mis-checkbox", template: "<div\n class=\"checkbox-container\"\n [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n (click)=\"!formControl.disabled && toggleState()\"\n (keyup.enter)=\"!formControl.disabled && toggleState()\"\n>\n <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n <span\n class=\"checkmark\"\n *ngIf=\"!isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n <span\n class=\"checkmark indeterminate\"\n tabindex=\"0\"\n *ngIf=\"isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n</div>\n", styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:20px;width:20px}.checkmark{position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;height:20px;width:20px;border-radius:4px;background-color:var(--bg-primary, #FFFFFF);border:solid 2px var(--text-secondary, #6A737D);box-sizing:border-box}.checkmark:hover{border-color:var(--text-tertiary, #929DAB)}.checkmark:focus-within,.checkmark:focus{box-shadow:0 0 0 .09em var(--bg-primary, #FFFFFF),0 0 .01em .2em var(--brand-primary, #0937B2);outline:none}.checkbox-container input:checked~.checkmark{background-color:var(--brand-primary, #0937B2);border-color:var(--brand-primary, #0937B2)}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:var(--text-disabled, #C8CDD3);border-color:var(--text-disabled, #C8CDD3)}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:var(--text-disabled, #C8CDD3)}.error{border-color:var(--brand-error, #B00020)}.checkbox-container input:checked~.error.checkmark{border:var(--brand-error, #B00020)!important;background:var(--brand-error, #B00020)!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid var(--bg-primary, #FFFFFF);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0px;border:solid var(--bg-primary, #FFFFFF);border-width:0 0px 12px 0;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus-within,.error:focus{box-shadow:none!important;outline:none}\n"] }]
105
105
  }], () => [], { inputBox: [{
106
106
  type: ViewChild,
107
107
  args: ["input"]
package/esm2022/chip/chip.component.mjs CHANGED
@@ -58,11 +58,11 @@ export class ChipComponent {
58
58
  i0.ɵɵproperty("ngIf", ctx.count != null || ctx.count != undefined);
59
59
  i0.ɵɵadvance();
60
60
  i0.ɵɵproperty("ngIf", ctx.dismissible);
61
- } }, dependencies: [i1.NgClass, i1.NgIf], styles: ["#chip-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary);box-sizing:border-box;cursor:default}#chip-container[_ngcontent-%COMP%]:hover{background:var(--border-secondary)}img[_ngcontent-%COMP%]{margin-right:4px}#close-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container[_ngcontent-%COMP%]{display:flex;height:100%;justify-content:center;align-items:center}#separator[_ngcontent-%COMP%]{height:100%;width:1px;background-color:var(--text-disabled);margin:0 8px}#count-text[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.small[_ngcontent-%COMP%]{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary)}.medium[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.small-m[_ngcontent-%COMP%]{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary)}.medium-m[_ngcontent-%COMP%]{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary)}"] }); }
61
+ } }, dependencies: [i1.NgClass, i1.NgIf], styles: ["#chip-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary, #E0E0E0);box-sizing:border-box;cursor:default}#chip-container[_ngcontent-%COMP%]:hover{background:var(--border-secondary, #D6DCE2)}img[_ngcontent-%COMP%]{margin-right:4px}#close-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container[_ngcontent-%COMP%]{display:flex;height:100%;justify-content:center;align-items:center}#separator[_ngcontent-%COMP%]{height:100%;width:1px;background-color:var(--text-disabled, #C8CDD3);margin:0 8px}#count-text[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.small[_ngcontent-%COMP%]{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary, #181F33)}.medium[_ngcontent-%COMP%]{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.small-m[_ngcontent-%COMP%]{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary, #181F33)}.medium-m[_ngcontent-%COMP%]{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary, #181F33)}"] }); }
62
62
  }
63
63
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipComponent, [{
64
64
  type: Component,
65
- args: [{ selector: "mis-chip", template: "<div\n id=\"chip-container\"\n tabindex=\"0\"\n [ngClass]=\"{\n small: size === 'Small',\n medium: size === 'Medium',\n 'small-m': size === 'Small-M',\n 'medium-m': size === 'Medium-M'\n }\"\n>\n <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"chip icon\" />\n <span tabindex=\"0\">{{ label }}</span>\n <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n <div id=\"separator\"></div>\n <span id=\"count-text\">{{ count }}</span>\n </div>\n <span *ngIf=\"dismissible\" tabindex=\"0\" id=\"close-icon\" aria-label=\"remove chip\" (keyup.enter)=\"cancel.emit(value)\" (click)=\"cancel.emit(value)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n fill=\"#181F33\"\n />\n </svg>\n </span>\n</div>\n", styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary);box-sizing:border-box;cursor:default}#chip-container:hover{background:var(--border-secondary)}img{margin-right:4px}#close-icon{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container{display:flex;height:100%;justify-content:center;align-items:center}#separator{height:100%;width:1px;background-color:var(--text-disabled);margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary)}.medium{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary)}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary)}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary)}\n"] }]
65
+ args: [{ selector: "mis-chip", template: "<div\n id=\"chip-container\"\n tabindex=\"0\"\n [ngClass]=\"{\n small: size === 'Small',\n medium: size === 'Medium',\n 'small-m': size === 'Small-M',\n 'medium-m': size === 'Medium-M'\n }\"\n>\n <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"chip icon\" />\n <span tabindex=\"0\">{{ label }}</span>\n <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n <div id=\"separator\"></div>\n <span id=\"count-text\">{{ count }}</span>\n </div>\n <span *ngIf=\"dismissible\" tabindex=\"0\" id=\"close-icon\" aria-label=\"remove chip\" (keyup.enter)=\"cancel.emit(value)\" (click)=\"cancel.emit(value)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n fill=\"#181F33\"\n />\n </svg>\n </span>\n</div>\n", styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:var(--border-primary, #E0E0E0);box-sizing:border-box;cursor:default}#chip-container:hover{background:var(--border-secondary, #D6DCE2)}img{margin-right:4px}#close-icon{display:flex;justify-content:center;align-items:center;margin-left:4px;cursor:pointer}#count-container{display:flex;height:100%;justify-content:center;align-items:center}#separator{height:100%;width:1px;background-color:var(--text-disabled, #C8CDD3);margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px;color:var(--text-primary, #181F33)}.medium{height:32px;padding:6px 12px;border-radius:16px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-primary, #181F33)}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-style:normal;font-weight:400;font-size:11px;line-height:12px;letter-spacing:.1px;color:var(--text-primary, #181F33)}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-style:normal;font-weight:400;font-size:12px;line-height:16px;letter-spacing:.25px;color:var(--text-primary, #181F33)}\n"] }]
66
66
  }], () => [], { label: [{
67
67
  type: Input
68
68
  }], value: [{
package/esm2022/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs CHANGED
@@ -426,11 +426,11 @@ export class TzDpContainerComponent {
426
426
  i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
427
427
  i0.ɵɵadvance();
428
428
  i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton);
429
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_ngcontent-%COMP%]:root{--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #C8CDD3;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.brand-primary-bg[_ngcontent-%COMP%]{background-color:var(--brand-primary)}.brand-secondary-bg[_ngcontent-%COMP%]{background-color:var(--brand-secondary)}.brand-accent-bg[_ngcontent-%COMP%]{background-color:var(--brand-accent)}.brand-success-bg[_ngcontent-%COMP%]{background-color:var(--brand-success)}.brand-error-bg[_ngcontent-%COMP%]{background-color:var(--brand-error)}.brand-warning-bg[_ngcontent-%COMP%]{background-color:var(--brand-warning)}.brand-info-bg[_ngcontent-%COMP%]{background-color:var(--brand-info)}.brand-primary-text[_ngcontent-%COMP%]{color:var(--brand-primary)}.brand-secondary-text[_ngcontent-%COMP%]{color:var(--brand-secondary)}.brand-accent-text[_ngcontent-%COMP%]{color:var(--brand-accent)}.brand-success-text[_ngcontent-%COMP%]{color:var(--brand-success)}.brand-error-text[_ngcontent-%COMP%]{color:var(--brand-error)}.brand-warning-text[_ngcontent-%COMP%]{color:var(--brand-warning)}.brand-info-text[_ngcontent-%COMP%]{color:var(--brand-info)}.brand-primary-border[_ngcontent-%COMP%]{border-color:var(--brand-primary)}.brand-secondary-border[_ngcontent-%COMP%]{border-color:var(--brand-secondary)}.brand-accent-border[_ngcontent-%COMP%]{border-color:var(--brand-accent)}.brand-success-border[_ngcontent-%COMP%]{border-color:var(--brand-success)}.brand-error-border[_ngcontent-%COMP%]{border-color:var(--brand-error)}.brand-warning-border[_ngcontent-%COMP%]{border-color:var(--brand-warning)}.brand-info-border[_ngcontent-%COMP%]{border-color:var(--brand-info)}[data-theme=dark][_ngcontent-%COMP%]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--text-primary: #ffffff;--text-secondary: #cccccc;--border-primary: #404040}[data-theme=high-contrast][_ngcontent-%COMP%]{--brand-primary: #000000;--brand-secondary: #ffffff;--text-primary: #000000;--text-secondary: #ffffff;--bg-primary: #ffffff;--bg-secondary: #000000}.datepicker-container[_ngcontent-%COMP%]{background:var(--bg-primary);border:1px solid var(--border-primary);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-active)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-lightest)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]{cursor:default;color:var(--text-disabled)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]{background-color:var(--brand-primary);color:var(--bg-primary)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-lightest)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-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:var(--text-disabled)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:var(--text-primary)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:var(--brand-primary);cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest);cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover span.selected-day[_ngcontent-%COMP%]{color:var(--text-primary)!important}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-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:var(--text-primary)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:var(--bg-primary)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:var(--text-disabled)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary)}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] }); }
429
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.datepicker-container[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-active, #DAE1F3)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__header[_ngcontent-%COMP%] .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .year[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]{cursor:default;color:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .select-year[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-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:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__weekdays[_ngcontent-%COMP%] .datepicker-container__weekday[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover span.selected-day[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)!important}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-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:var(--text-primary, #181F33)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.selected-day[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__body[_ngcontent-%COMP%] .datepicker-container__days[_ngcontent-%COMP%] .datepicker-container__day[_ngcontent-%COMP%] span.disabled-day[_ngcontent-%COMP%]{color:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%] .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary, #E0E0E0)}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] }); }
430
430
  }
431
431
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDpContainerComponent, [{
432
432
  type: Component,
433
- args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div class=\"datepicker-container__header\">\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"navigateView('PREVIOUS')\"\n tabindex=\"0\"\n aria-label=\"Previous Month\"\n (keyup.enter)=\"navigateView('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled || isSelectingMonth\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\n <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n </div>\n <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n {{ isSelectingYear ? yearRange : currentYearNumber }}\n </div>\n\n\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"navigateView('NEXT')\"\n tabindex=\"0\"\n aria-label=\"Next Month\"\n (keyup.enter)=\"navigateView('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled || isSelectingMonth\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=\"datepicker-container__body\">\n\n <div *ngIf=\"isSelectingMonth && !isSelectingYear\" class=\"month-selector\">\n <div class=\"row\">\n <div *ngFor=\"let month of availableMonths; let i = index\" \n class=\"month\" \n (click)=\"!disabledMonths[i] && selectMonth(month)\" \n [ngClass]=\"{\n 'disable-month': disabledMonths[i],\n 'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n }\">\n {{ month }}\n </div>\n </div>\n </div>\n \n <div *ngIf=\"isSelectingYear && !isSelectingMonth\" class=\"year-selector\">\n <div class=\"row\">\n <div *ngFor=\"let year of availableYears; let i = index\" \n class=\"year\" \n (click)=\"!disabledYears[i] && selectYear(year)\" \n [ngClass]=\"{\n 'disable-year': disabledYears[i],\n 'select-year': year === currentYearNumber\n }\">\n {{ year }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n <div\n class=\"datepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay,\n 'is-valid-date': day.date > 0 && !day.isSelectedDay\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay(day)\"\n (keyup.enter)=\"selectDay(day)\"\n >\n <span\n *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay\n }\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}:root{--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #C8CDD3;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.brand-primary-bg{background-color:var(--brand-primary)}.brand-secondary-bg{background-color:var(--brand-secondary)}.brand-accent-bg{background-color:var(--brand-accent)}.brand-success-bg{background-color:var(--brand-success)}.brand-error-bg{background-color:var(--brand-error)}.brand-warning-bg{background-color:var(--brand-warning)}.brand-info-bg{background-color:var(--brand-info)}.brand-primary-text{color:var(--brand-primary)}.brand-secondary-text{color:var(--brand-secondary)}.brand-accent-text{color:var(--brand-accent)}.brand-success-text{color:var(--brand-success)}.brand-error-text{color:var(--brand-error)}.brand-warning-text{color:var(--brand-warning)}.brand-info-text{color:var(--brand-info)}.brand-primary-border{border-color:var(--brand-primary)}.brand-secondary-border{border-color:var(--brand-secondary)}.brand-accent-border{border-color:var(--brand-accent)}.brand-success-border{border-color:var(--brand-success)}.brand-error-border{border-color:var(--brand-error)}.brand-warning-border{border-color:var(--brand-warning)}.brand-info-border{border-color:var(--brand-info)}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--text-primary: #ffffff;--text-secondary: #cccccc;--border-primary: #404040}[data-theme=high-contrast]{--brand-primary: #000000;--brand-secondary: #ffffff;--text-primary: #000000;--text-secondary: #ffffff;--bg-primary: #ffffff;--bg-secondary: #000000}.datepicker-container{background:var(--bg-primary);border:1px solid var(--border-primary);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:var(--brand-primary-active)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary)}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:var(--brand-primary-lightest)}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:var(--text-disabled)}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:var(--brand-primary);color:var(--bg-primary)}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:pointer;background-color:var(--brand-primary-lightest)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-disabled)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:var(--text-primary)}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:var(--brand-primary);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:var(--text-primary)!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:var(--bg-primary)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:var(--text-disabled)}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary)}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
433
+ args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div class=\"datepicker-container__header\">\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"navigateView('PREVIOUS')\"\n tabindex=\"0\"\n aria-label=\"Previous Month\"\n (keyup.enter)=\"navigateView('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled || isSelectingMonth\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\n <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n </div>\n <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n {{ isSelectingYear ? yearRange : currentYearNumber }}\n </div>\n\n\n <div\n class=\"datepicker-container__arrow__icon\"\n (click)=\"navigateView('NEXT')\"\n tabindex=\"0\"\n aria-label=\"Next Month\"\n (keyup.enter)=\"navigateView('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled || isSelectingMonth\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=\"datepicker-container__body\">\n\n <div *ngIf=\"isSelectingMonth && !isSelectingYear\" class=\"month-selector\">\n <div class=\"row\">\n <div *ngFor=\"let month of availableMonths; let i = index\" \n class=\"month\" \n (click)=\"!disabledMonths[i] && selectMonth(month)\" \n [ngClass]=\"{\n 'disable-month': disabledMonths[i],\n 'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n }\">\n {{ month }}\n </div>\n </div>\n </div>\n \n <div *ngIf=\"isSelectingYear && !isSelectingMonth\" class=\"year-selector\">\n <div class=\"row\">\n <div *ngFor=\"let year of availableYears; let i = index\" \n class=\"year\" \n (click)=\"!disabledYears[i] && selectYear(year)\" \n [ngClass]=\"{\n 'disable-year': disabledYears[i],\n 'select-year': year === currentYearNumber\n }\">\n {{ year }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n <div\n class=\"datepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay,\n 'is-valid-date': day.date > 0 && !day.isSelectedDay\n }\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay(day)\"\n (keyup.enter)=\"selectDay(day)\"\n >\n <span\n *ngIf=\"day.date > 0\"\n [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n 'disabled-day': day.isDisabledDay\n }\"\n [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.datepicker-container{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:var(--brand-primary-active, #DAE1F3)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:var(--brand-primary, #0937B2);color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:var(--brand-primary, #0937B2);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:var(--text-primary, #181F33)!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary, #181F33)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary, #E0E0E0)}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
434
434
  }], () => [{ type: undefined, decorators: [{
435
435
  type: Inject,
436
436
  args: [CONTAINER_DATA]