globuswebcomponents 2.6.14 → 2.6.15

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 (182) hide show
  1. package/dist/cjs/gb-action-panel_72.cjs.entry.js +41 -28
  2. package/dist/cjs/gb-metric-card.cjs.entry.js +1 -1
  3. package/dist/cjs/gb-metric-card.entry.cjs.js.map +1 -1
  4. package/dist/cjs/gb-token-field-compact.cjs.entry.js +1 -1
  5. package/dist/cjs/gb-token-field-compressed.cjs.entry.js +2 -2
  6. package/dist/cjs/gb-wysiwyg-editor-icon.cjs.entry.js +1 -1
  7. package/dist/cjs/gb-wysiwyg-tooltip.cjs.entry.js +1 -1
  8. package/dist/cjs/test-input-tag.cjs.entry.js +2 -2
  9. package/dist/collection/components/gb-date-picker/gb-date-picker.css +5 -6
  10. package/dist/collection/components/gb-date-picker/gb-date-picker.js +22 -9
  11. package/dist/collection/components/gb-date-picker/gb-date-picker.js.map +1 -1
  12. package/dist/collection/components/gb-metric-card/gb-metric-card.css +1 -3
  13. package/dist/collection/components/gb-table-header/gb-table-header.css +0 -11
  14. package/dist/collection/components/gb-table-header/gb-table-header.js +3 -3
  15. package/dist/collection/components/gb-table-header/gb-table-header.js.map +1 -1
  16. package/dist/collection/components/gb-tag/gb-tag.js +1 -1
  17. package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js +1 -1
  18. package/dist/collection/components/gb-tag-close/gb-tag-close.js +1 -1
  19. package/dist/collection/components/gb-tag-count/gb-tag-count.js +1 -1
  20. package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js +3 -3
  21. package/dist/collection/components/gb-theme-tab/gb-theme-tab.js +1 -1
  22. package/dist/collection/components/gb-toast/gb-toast.js +1 -1
  23. package/dist/collection/components/gb-toast-button/gb-toast-button.js +1 -1
  24. package/dist/collection/components/gb-toggle/gb-toggle.js +1 -1
  25. package/dist/collection/components/gb-toggle-base/gb-toggle-base.js +2 -2
  26. package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js +1 -1
  27. package/dist/collection/components/gb-token-field-compressed/gb-token-field-compressed.js +2 -2
  28. package/dist/collection/components/gb-tooltip/gb-tooltip.js +1 -1
  29. package/dist/collection/components/gb-vertical-tabs/gb-vertical-tabs.js +1 -1
  30. package/dist/collection/components/gb-wysiwyg-editor-icon/gb-wysiwyg-editor-icon.js +1 -1
  31. package/dist/collection/components/gb-wysiwyg-tooltip/gb-wysiwyg-tooltip.js +1 -1
  32. package/dist/collection/components/test-input-tag/test-input-tag.js +2 -2
  33. package/dist/components/gb-action-panel.js +2 -2
  34. package/dist/components/gb-approval-modal.js +8 -8
  35. package/dist/components/gb-avatar-add-button.js +1 -1
  36. package/dist/components/gb-avatar-dropdown.js +1 -1
  37. package/dist/components/gb-avatar-group.js +2 -2
  38. package/dist/components/gb-button.js +1 -1
  39. package/dist/components/gb-checkbox-group-item.js +1 -1
  40. package/dist/components/gb-checkbox-group.js +3 -3
  41. package/dist/components/gb-collapse-button.js +1 -1
  42. package/dist/components/gb-comment.js +2 -2
  43. package/dist/components/gb-complex-primary-side-bar-item.js +1 -1
  44. package/dist/components/gb-complex-secondary-side-bar-item.js +1 -1
  45. package/dist/components/gb-date-picker.js +1 -1
  46. package/dist/components/gb-detail-cell.js +2 -2
  47. package/dist/components/gb-empty-state.js +2 -2
  48. package/dist/components/gb-file-upload-item-base.js +1 -1
  49. package/dist/components/gb-file-upload.js +4 -4
  50. package/dist/components/gb-filter-button.js +1 -1
  51. package/dist/components/gb-header.js +13 -13
  52. package/dist/components/gb-help-tooltip.js +1 -1
  53. package/dist/components/gb-icon-button-base.js +1 -1
  54. package/dist/components/gb-input-dropdown.js +1 -1
  55. package/dist/components/gb-input-field.js +1 -1
  56. package/dist/components/gb-metric-card.js +1 -1
  57. package/dist/components/gb-metric-card.js.map +1 -1
  58. package/dist/components/gb-modal-action.js +1 -1
  59. package/dist/components/gb-nav-bar-item.js +1 -1
  60. package/dist/components/gb-nav-bar-sidemenu.js +1 -1
  61. package/dist/components/gb-nav-bar.js +2 -2
  62. package/dist/components/gb-notification-pane.js +1 -1
  63. package/dist/components/gb-pagination.js +10 -10
  64. package/dist/components/gb-password-button.js +1 -1
  65. package/dist/components/gb-progress-bar.js +1 -1
  66. package/dist/components/gb-prompt-modal.js +2 -2
  67. package/dist/components/gb-sidebar.js +5 -5
  68. package/dist/components/gb-simple-side-bar-item.js +1 -1
  69. package/dist/components/gb-slider-control-handle.js +1 -1
  70. package/dist/components/gb-slider.js +2 -2
  71. package/dist/components/gb-table-header.js +15 -15
  72. package/dist/components/gb-table-header.js.map +1 -1
  73. package/dist/components/gb-tag-checkbox.js +1 -1
  74. package/dist/components/gb-tag-close.js +1 -1
  75. package/dist/components/gb-tag-count.js +1 -1
  76. package/dist/components/gb-tag.js +1 -1
  77. package/dist/components/gb-textarea-input-field.js +1 -1
  78. package/dist/components/gb-theme-tab.js +1 -1
  79. package/dist/components/gb-toast-button.js +1 -1
  80. package/dist/components/gb-toast.js +4 -4
  81. package/dist/components/gb-toggle-base.js +1 -1
  82. package/dist/components/gb-toggle.js +2 -2
  83. package/dist/components/gb-token-field-compact.js +1 -1
  84. package/dist/components/gb-token-field-compressed.js +2 -2
  85. package/dist/components/gb-tooltip.js +1 -1
  86. package/dist/components/gb-vertical-tabs.js +1 -1
  87. package/dist/components/gb-wysiwyg-editor-icon.js +1 -1
  88. package/dist/components/gb-wysiwyg-tooltip.js +2 -2
  89. package/dist/components/{p-CVyBDyQO.js → p--yTC9FTD.js} +3 -3
  90. package/dist/components/{p-CVyBDyQO.js.map → p--yTC9FTD.js.map} +1 -1
  91. package/dist/components/{p-H3MAmmV5.js → p-2dfyGxAA.js} +3 -3
  92. package/dist/components/{p-H3MAmmV5.js.map → p-2dfyGxAA.js.map} +1 -1
  93. package/dist/components/{p-CJEtoV9c.js → p-536_b1gw.js} +3 -3
  94. package/dist/components/{p-CJEtoV9c.js.map → p-536_b1gw.js.map} +1 -1
  95. package/dist/components/{p-hx9brOJg.js → p-B-cu_ylY.js} +5 -5
  96. package/dist/components/{p-hx9brOJg.js.map → p-B-cu_ylY.js.map} +1 -1
  97. package/dist/components/{p-Bv9TTVvQ.js → p-B5ZbIaPq.js} +4 -4
  98. package/dist/components/{p-Bv9TTVvQ.js.map → p-B5ZbIaPq.js.map} +1 -1
  99. package/dist/components/{p-CfIakSv4.js → p-BIZJMi3r.js} +3 -3
  100. package/dist/components/{p-CfIakSv4.js.map → p-BIZJMi3r.js.map} +1 -1
  101. package/dist/components/{p-C3fcWCCr.js → p-BhZ1P8SA.js} +5 -5
  102. package/dist/components/{p-C3fcWCCr.js.map → p-BhZ1P8SA.js.map} +1 -1
  103. package/dist/components/{p-C2ypQLpB.js → p-BhZ9gO-e.js} +9 -9
  104. package/dist/components/{p-C2ypQLpB.js.map → p-BhZ9gO-e.js.map} +1 -1
  105. package/dist/components/{p-CcS3iTaH.js → p-BvZIc1VI.js} +3 -3
  106. package/dist/components/{p-CcS3iTaH.js.map → p-BvZIc1VI.js.map} +1 -1
  107. package/dist/components/{p-BmnngydE.js → p-BxOhNcI-.js} +3 -3
  108. package/dist/components/{p-BmnngydE.js.map → p-BxOhNcI-.js.map} +1 -1
  109. package/dist/components/{p-DrumszxT.js → p-C4TLf1gY.js} +6 -6
  110. package/dist/components/{p-DrumszxT.js.map → p-C4TLf1gY.js.map} +1 -1
  111. package/dist/components/{p-CK63N1Ky.js → p-CG8DbGtu.js} +3 -3
  112. package/dist/components/{p-CK63N1Ky.js.map → p-CG8DbGtu.js.map} +1 -1
  113. package/dist/components/{p-D0DfK8zD.js → p-CO2j2qSM.js} +10 -10
  114. package/dist/components/{p-D0DfK8zD.js.map → p-CO2j2qSM.js.map} +1 -1
  115. package/dist/components/{p-wCvOcMz9.js → p-ClXamGR5.js} +3 -3
  116. package/dist/components/{p-wCvOcMz9.js.map → p-ClXamGR5.js.map} +1 -1
  117. package/dist/components/{p-Cxsp_HEj.js → p-CyxVWv20.js} +4 -4
  118. package/dist/components/{p-Cxsp_HEj.js.map → p-CyxVWv20.js.map} +1 -1
  119. package/dist/components/{p-C2miY_93.js → p-D2bypnF7.js} +3 -3
  120. package/dist/components/{p-C2miY_93.js.map → p-D2bypnF7.js.map} +1 -1
  121. package/dist/components/{p-BqPGMb4f.js → p-D79gnPMN.js} +3 -3
  122. package/dist/components/{p-BqPGMb4f.js.map → p-D79gnPMN.js.map} +1 -1
  123. package/dist/components/{p-BaryqpUh.js → p-DFl_Vm-4.js} +3 -3
  124. package/dist/components/{p-BaryqpUh.js.map → p-DFl_Vm-4.js.map} +1 -1
  125. package/dist/components/{p-Di6WXr9b.js → p-DG_7DZUp.js} +4 -4
  126. package/dist/components/{p-Di6WXr9b.js.map → p-DG_7DZUp.js.map} +1 -1
  127. package/dist/components/{p-B-DajUXT.js → p-DLUDYNHZ.js} +3 -3
  128. package/dist/components/{p-B-DajUXT.js.map → p-DLUDYNHZ.js.map} +1 -1
  129. package/dist/components/{p-ppmZLH-5.js → p-DMH5ExUe.js} +4 -4
  130. package/dist/components/{p-ppmZLH-5.js.map → p-DMH5ExUe.js.map} +1 -1
  131. package/dist/components/{p-Cpt2AFpk.js → p-DUdPuAnq.js} +4 -4
  132. package/dist/components/{p-Cpt2AFpk.js.map → p-DUdPuAnq.js.map} +1 -1
  133. package/dist/components/{p-BG_2Rbqm.js → p-DirO-V_R.js} +4 -4
  134. package/dist/components/{p-BG_2Rbqm.js.map → p-DirO-V_R.js.map} +1 -1
  135. package/dist/components/{p-ogNfy4PX.js → p-DwO4FaUO.js} +3 -3
  136. package/dist/components/{p-ogNfy4PX.js.map → p-DwO4FaUO.js.map} +1 -1
  137. package/dist/components/{p-BSnUdYEl.js → p-IiVhqd54.js} +3 -3
  138. package/dist/components/{p-BSnUdYEl.js.map → p-IiVhqd54.js.map} +1 -1
  139. package/dist/components/{p-BS3LHwPv.js → p-QApvE91-.js} +11 -11
  140. package/dist/components/{p-BS3LHwPv.js.map → p-QApvE91-.js.map} +1 -1
  141. package/dist/components/{p-CGicIYuu.js → p-QQMD9lyS.js} +3 -3
  142. package/dist/components/{p-CGicIYuu.js.map → p-QQMD9lyS.js.map} +1 -1
  143. package/dist/components/{p-BrTcVLrN.js → p-SDmcdXXy.js} +25 -12
  144. package/dist/components/p-SDmcdXXy.js.map +1 -0
  145. package/dist/components/{p-BLRv4Sur.js → p-j2jZ4_zH.js} +3 -3
  146. package/dist/components/{p-BLRv4Sur.js.map → p-j2jZ4_zH.js.map} +1 -1
  147. package/dist/components/{p-CQMa1vpX.js → p-ro10Qmtl.js} +5 -5
  148. package/dist/components/{p-CQMa1vpX.js.map → p-ro10Qmtl.js.map} +1 -1
  149. package/dist/components/{p-B0HaqwQR.js → p-ycvY3d5Z.js} +3 -3
  150. package/dist/components/{p-B0HaqwQR.js.map → p-ycvY3d5Z.js.map} +1 -1
  151. package/dist/components/{p-DV-6GNSR.js → p-zUbXw_d0.js} +3 -3
  152. package/dist/components/{p-DV-6GNSR.js.map → p-zUbXw_d0.js.map} +1 -1
  153. package/dist/components/test-input-tag.js +6 -6
  154. package/dist/docs.json +3 -3
  155. package/dist/esm/gb-action-panel_72.entry.js +41 -28
  156. package/dist/esm/gb-metric-card.entry.js +1 -1
  157. package/dist/esm/gb-metric-card.entry.js.map +1 -1
  158. package/dist/esm/gb-token-field-compact.entry.js +1 -1
  159. package/dist/esm/gb-token-field-compressed.entry.js +2 -2
  160. package/dist/esm/gb-wysiwyg-editor-icon.entry.js +1 -1
  161. package/dist/esm/gb-wysiwyg-tooltip.entry.js +1 -1
  162. package/dist/esm/test-input-tag.entry.js +2 -2
  163. package/dist/globuscomponents/gb-metric-card.entry.esm.js.map +1 -1
  164. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  165. package/dist/globuscomponents/{p-3837b368.entry.js → p-440d82f8.entry.js} +2 -2
  166. package/dist/globuscomponents/{p-89aa24b0.entry.js → p-872f1153.entry.js} +2 -2
  167. package/dist/globuscomponents/{p-3ca5e66c.entry.js → p-9ad95a7f.entry.js} +2 -2
  168. package/dist/globuscomponents/{p-a39cec91.entry.js → p-ad4a27e5.entry.js} +2 -2
  169. package/dist/globuscomponents/p-ad4a27e5.entry.js.map +1 -0
  170. package/dist/globuscomponents/{p-36ce6509.entry.js → p-bcb42b20.entry.js} +2 -2
  171. package/dist/globuscomponents/{p-36ce6509.entry.js.map → p-bcb42b20.entry.js.map} +1 -1
  172. package/dist/globuscomponents/{p-2059f746.entry.js → p-e7419d13.entry.js} +2 -2
  173. package/dist/globuscomponents/{p-72814e6e.entry.js → p-f7d91fec.entry.js} +2 -2
  174. package/dist/types/components.d.ts +2 -2
  175. package/package.json +1 -1
  176. package/dist/components/p-BrTcVLrN.js.map +0 -1
  177. package/dist/globuscomponents/p-a39cec91.entry.js.map +0 -1
  178. /package/dist/globuscomponents/{p-3837b368.entry.js.map → p-440d82f8.entry.js.map} +0 -0
  179. /package/dist/globuscomponents/{p-89aa24b0.entry.js.map → p-872f1153.entry.js.map} +0 -0
  180. /package/dist/globuscomponents/{p-3ca5e66c.entry.js.map → p-9ad95a7f.entry.js.map} +0 -0
  181. /package/dist/globuscomponents/{p-2059f746.entry.js.map → p-e7419d13.entry.js.map} +0 -0
  182. /package/dist/globuscomponents/{p-72814e6e.entry.js.map → p-f7d91fec.entry.js.map} +0 -0
@@ -5,7 +5,7 @@
5
5
  border: 1px solid var(--border-color, #d1d5db);
6
6
  border-radius: var(--radius-md, 0.5rem);
7
7
  padding: 0.5rem 0.75rem;
8
- background-color: var(--surface-color, #fff);
8
+ background-color: var(--color-background-card, #ffffff);
9
9
  transition: border-color 0.2s ease;
10
10
  gap: var(--spacing-2);
11
11
  }
@@ -33,7 +33,7 @@
33
33
  text-overflow: ellipsis;
34
34
  }
35
35
 
36
- .inner_container{
36
+ .inner_container {
37
37
  width: 100%;
38
38
  display: flex;
39
39
  align-items: center;
@@ -56,11 +56,10 @@
56
56
  right: 0;
57
57
  }
58
58
 
59
-
60
59
  /* Flatpickr Overrides */
61
60
  :host ::part(flatpickr-calendar) {
62
- background-color: var(--surface-popover, #fff);
63
- border: 1px solid var(--border-color, #e5e7eb);
61
+ background: var(--color-background-card, #fff);
62
+ border: 1px solid var(--color-border-subtle, #cdd5df);
64
63
  }
65
64
 
66
65
  .flatpickr-calendar *,
@@ -70,7 +69,7 @@ input {
70
69
 
71
70
  .flatpickr-calendar {
72
71
  background: var(--color-background-card, #fff);
73
- border: 1px solid var(--border-color, #e5e7eb);
72
+ border: 1px solid var(--color-border-subtle, #cdd5df);
74
73
  box-shadow: var(--shadow-md);
75
74
  border-radius: var(--radius-md, 0.5rem);
76
75
  z-index: 1000;
@@ -56,16 +56,32 @@ export class GbDatePicker {
56
56
  `,
57
57
  onChange: (selectedDates) => {
58
58
  if (this.mode === 'range') {
59
- const formattedRange = selectedDates.map(d => this.picker.formatDate(d, this.format));
60
- this.value = formattedRange;
61
- this.dateChange.emit(formattedRange);
59
+ if (selectedDates.length === 2) {
60
+ const [start, end] = selectedDates;
61
+ const sameYear = start.getFullYear() === end.getFullYear();
62
+ // If same year → hide year in display format
63
+ if (sameYear) {
64
+ this.format = 'M j'; // e.g. "Nov 4"
65
+ }
66
+ else {
67
+ this.format = 'M j, Y'; // e.g. "Dec 28, 2025"
68
+ }
69
+ this.picker.set('altFormat', this.format);
70
+ this.picker.set('dateFormat', this.format);
71
+ this.picker.altInput.value = `${this.picker.formatDate(start, this.format)} - ${this.picker.formatDate(end, this.format)}`;
72
+ const formattedRange = selectedDates.map(d => this.picker.formatDate(d, this.format));
73
+ this.value = formattedRange;
74
+ this.dateChange.emit(formattedRange);
75
+ this.picker.close();
76
+ }
62
77
  }
63
78
  else if (selectedDates.length) {
64
79
  const formattedDate = this.picker.formatDate(selectedDates[0], this.format);
65
80
  this.value = formattedDate;
66
81
  this.dateChange.emit(formattedDate);
82
+ this.picker.close();
67
83
  }
68
- this.picker.open();
84
+ // this.picker.open();
69
85
  },
70
86
  onOpen: () => {
71
87
  this.isCalendarShown = true;
@@ -81,9 +97,6 @@ export class GbDatePicker {
81
97
  this.value = this.picker.formatDate(parsedDate, this.format);
82
98
  this.dateChange.emit(this.value);
83
99
  }
84
- if (!this.isCalendarShown) {
85
- this.picker.open();
86
- }
87
100
  });
88
101
  }
89
102
  toggleCalendar(event) {
@@ -106,9 +119,9 @@ export class GbDatePicker {
106
119
  }
107
120
  }
108
121
  render() {
109
- return (h("div", { key: '6eee6a8ecdea811383dcf4ae8990df0534193c37', class: "date-picker-wrapper" }, h("div", { key: '4b6c93936ee462d5c2e269ca4ab08a51b207fe4d', class: "inner_container", onClick: () => {
122
+ return (h("div", { key: '0125b658a01524298e4a43eda074c7cbbc5cdd16', class: "date-picker-wrapper" }, h("div", { key: '35fe6ff24db6cc65b9d091105f950a16c1838a63', class: "inner_container", onClick: () => {
110
123
  this.toggleCalendar();
111
- } }, this.iconPosition === 'left' && (h("svg", { key: '805ab812d32b7454d826a11649bd80da18acd274', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '582672e2f593a432b11c6857457ce5e75f99d2b4', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" }))), h("input", { key: 'ade8b8bf83123c07cafb42267ae7cf334607bc3b', type: "text", ref: el => (this.inputEl = el), placeholder: this.placeholder, disabled: this.disabled, value: this.value }), this.iconPosition === 'right' && (h("svg", { key: 'c01130cbb49116e474f7f8a8374976bd3762dfc3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '23ede51ecd32da17ef7263bb3e3a0e08adcc1ec4', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" })))), h("div", { key: '785faf4080a462465aec520af77d8d340cccaf13', class: `calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}` })));
124
+ } }, this.iconPosition === 'left' && (h("svg", { key: 'f8fc9a15d106163ac02baef6d3cd8dd26e94921e', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'd7d9bda024e3815e78f44ca0a500705b3dac13de', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" }))), h("input", { key: '080b1acb975031ee79760771fd9b436b96a629fe', type: "text", ref: el => (this.inputEl = el), placeholder: this.placeholder, disabled: this.disabled, value: this.value }), this.iconPosition === 'right' && (h("svg", { key: '57c0987447ff988b0a45b7448815d8884aabafdd', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '775d9060faba3ad8f419bf917f1df32a6edca132', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" })))), h("div", { key: '74bea32080a374fb771a5e8e566ffcc0f99eeeff', class: `calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}` })));
112
125
  }
113
126
  static get is() { return "gb-date-picker"; }
114
127
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- {"version":3,"file":"gb-date-picker.js","sourceRoot":"","sources":["../../../src/components/gb-date-picker/gb-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\r\nimport flatpickr from 'flatpickr';\r\nimport 'flatpickr/dist/flatpickr.min.css';\r\nimport { CustomLocale } from 'flatpickr/dist/types/locale';\r\nimport { CloseButtonPositions } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-date-picker',\r\n styleUrl: 'gb-date-picker.css',\r\n shadow: true,\r\n})\r\nexport class GbDatePicker {\r\n @Element() el: HTMLElement;\r\n @Prop() placeholder: string = 'Start date - end date';\r\n @Prop({ mutable: true }) value?: string | string[];\r\n @Prop() format: string = 'M j, Y';\r\n @Prop() mode: 'single' | 'range' = 'single';\r\n @Prop() disabled: boolean = false;\r\n @Prop() iconPosition: CloseButtonPositions = 'left';\r\n @Prop() dropdownAlignment: CloseButtonPositions = 'left';\r\n\r\n @State() isCalendarShown: boolean = false;\r\n\r\n @Event() dateChange: EventEmitter<string | string[]>;\r\n\r\n private inputEl!: HTMLInputElement;\r\n private picker: flatpickr.Instance;\r\n\r\n componentDidLoad() {\r\n this.initializePicker();\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.picker) this.picker.destroy();\r\n }\r\n\r\n private initializePicker() {\r\n const calendarContainer = this.el.shadowRoot.querySelector('.calendar-container') as HTMLElement;\r\n const input = this.inputEl;\r\n\r\n const customLocale: Partial<CustomLocale> = {\r\n weekdays: {\r\n shorthand: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],\r\n longhand: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\r\n },\r\n rangeSeparator: ' - ',\r\n };\r\n\r\n if (!calendarContainer || !input) {\r\n console.warn('Calendar container or input not found.');\r\n return;\r\n }\r\n\r\n this.picker = flatpickr(input, {\r\n dateFormat: this.format,\r\n mode: this.mode,\r\n defaultDate: this.value,\r\n appendTo: calendarContainer, // keep inside shadow root\r\n clickOpens: false,\r\n allowInput: true,\r\n altInput: true,\r\n altFormat: this.format,\r\n closeOnSelect: false,\r\n locale: customLocale,\r\n disableMobile: true,\r\n prevArrow: `\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"calendar_arrow\">\r\n <path d=\"M12.5 4.99988C12.5 4.99988 7.50001 8.68232 7.5 9.99992C7.49999 11.3175 12.5 14.9999 12.5 14.9999\" stroke=\"var(--color-icon, #4B5565)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n `,\r\n nextArrow: ` \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"calendar_arrow\">\r\n <path d=\"M7.50004 5C7.50004 5 12.5 8.68244 12.5 10C12.5 11.3176 7.5 15 7.5 15\" stroke=\"var(--color-icon, #4B5565)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n `,\r\n onChange: (selectedDates: Date[]) => {\r\n if (this.mode === 'range') {\r\n const formattedRange = selectedDates.map(d => this.picker.formatDate(d, this.format));\r\n this.value = formattedRange;\r\n this.dateChange.emit(formattedRange);\r\n } else if (selectedDates.length) {\r\n const formattedDate = this.picker.formatDate(selectedDates[0], this.format);\r\n this.value = formattedDate;\r\n this.dateChange.emit(formattedDate);\r\n }\r\n\r\n this.picker.open();\r\n },\r\n onOpen: () => {\r\n this.isCalendarShown = true;\r\n },\r\n onClose: () => {\r\n this.isCalendarShown = false;\r\n },\r\n });\r\n\r\n input.addEventListener('input', () => {\r\n const dateStr = input.value;\r\n const parsedDate = this.picker.parseDate(dateStr, this.format);\r\n\r\n if (parsedDate) {\r\n this.value = this.picker.formatDate(parsedDate, this.format);\r\n this.dateChange.emit(this.value);\r\n }\r\n\r\n if (!this.isCalendarShown) {\r\n this.picker.open();\r\n }\r\n });\r\n }\r\n\r\n private toggleCalendar(event?: Event) {\r\n if (event) {\r\n const target = event.target as HTMLElement;\r\n if (this.el.shadowRoot && this.el.shadowRoot.contains(target)) {\r\n const calendarEl = this.el.shadowRoot.querySelector('.calendar-container');\r\n if (calendarEl && calendarEl.contains(target)) {\r\n return; // Ignore clicks inside the calendar\r\n }\r\n }\r\n }\r\n\r\n if (!this.picker) return;\r\n\r\n if (this.isCalendarShown) {\r\n this.picker.close();\r\n } else {\r\n this.picker.open();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"date-picker-wrapper\">\r\n <div\r\n class=\"inner_container\"\r\n onClick={() => {\r\n this.toggleCalendar();\r\n }}\r\n >\r\n {this.iconPosition === 'left' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z\"\r\n fill=\"var(--color-icon, #4B5565)\"\r\n />\r\n </svg>\r\n )}\r\n <input type=\"text\" ref={el => (this.inputEl = el as HTMLInputElement)} placeholder={this.placeholder} disabled={this.disabled} value={this.value as string} />\r\n {this.iconPosition === 'right' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z\"\r\n fill=\"var(--color-icon, #4B5565)\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n\r\n {/* Always in DOM, just hidden by CSS */}\r\n <div class={`calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}`}></div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"gb-date-picker.js","sourceRoot":"","sources":["../../../src/components/gb-date-picker/gb-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\r\nimport flatpickr from 'flatpickr';\r\nimport 'flatpickr/dist/flatpickr.min.css';\r\nimport { CustomLocale } from 'flatpickr/dist/types/locale';\r\nimport { CloseButtonPositions } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-date-picker',\r\n styleUrl: 'gb-date-picker.css',\r\n shadow: true,\r\n})\r\nexport class GbDatePicker {\r\n @Element() el: HTMLElement;\r\n @Prop() placeholder: string = 'Start date - end date';\r\n @Prop({ mutable: true }) value?: string | string[];\r\n @Prop() format: string = 'M j, Y';\r\n @Prop() mode: 'single' | 'range' = 'single';\r\n @Prop() disabled: boolean = false;\r\n @Prop() iconPosition: CloseButtonPositions = 'left';\r\n @Prop() dropdownAlignment: CloseButtonPositions = 'left';\r\n\r\n @State() isCalendarShown: boolean = false;\r\n\r\n @Event() dateChange: EventEmitter<string | string[]>;\r\n\r\n private inputEl!: HTMLInputElement;\r\n private picker: flatpickr.Instance;\r\n\r\n componentDidLoad() {\r\n this.initializePicker();\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.picker) this.picker.destroy();\r\n }\r\n\r\n private initializePicker() {\r\n const calendarContainer = this.el.shadowRoot.querySelector('.calendar-container') as HTMLElement;\r\n const input = this.inputEl;\r\n\r\n const customLocale: Partial<CustomLocale> = {\r\n weekdays: {\r\n shorthand: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],\r\n longhand: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\r\n },\r\n rangeSeparator: ' - ',\r\n };\r\n\r\n if (!calendarContainer || !input) {\r\n console.warn('Calendar container or input not found.');\r\n return;\r\n }\r\n\r\n this.picker = flatpickr(input, {\r\n dateFormat: this.format,\r\n mode: this.mode,\r\n defaultDate: this.value,\r\n appendTo: calendarContainer, // keep inside shadow root\r\n clickOpens: false,\r\n allowInput: true,\r\n altInput: true,\r\n altFormat: this.format,\r\n closeOnSelect: false,\r\n locale: customLocale,\r\n disableMobile: true,\r\n prevArrow: `\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"calendar_arrow\">\r\n <path d=\"M12.5 4.99988C12.5 4.99988 7.50001 8.68232 7.5 9.99992C7.49999 11.3175 12.5 14.9999 12.5 14.9999\" stroke=\"var(--color-icon, #4B5565)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n `,\r\n nextArrow: ` \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"calendar_arrow\">\r\n <path d=\"M7.50004 5C7.50004 5 12.5 8.68244 12.5 10C12.5 11.3176 7.5 15 7.5 15\" stroke=\"var(--color-icon, #4B5565)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n `,\r\n onChange: (selectedDates: Date[]) => {\r\n if (this.mode === 'range') {\r\n if (selectedDates.length === 2) {\r\n const [start, end] = selectedDates;\r\n\r\n const sameYear = start.getFullYear() === end.getFullYear();\r\n\r\n // If same year → hide year in display format\r\n if (sameYear) {\r\n this.format = 'M j'; // e.g. \"Nov 4\"\r\n } else {\r\n this.format = 'M j, Y'; // e.g. \"Dec 28, 2025\"\r\n }\r\n\r\n this.picker.set('altFormat', this.format);\r\n this.picker.set('dateFormat', this.format);\r\n\r\n this.picker.altInput.value = `${this.picker.formatDate(start, this.format)} - ${this.picker.formatDate(end, this.format)}`;\r\n\r\n const formattedRange = selectedDates.map(d => this.picker.formatDate(d, this.format));\r\n\r\n this.value = formattedRange;\r\n this.dateChange.emit(formattedRange);\r\n\r\n this.picker.close();\r\n }\r\n } else if (selectedDates.length) {\r\n const formattedDate = this.picker.formatDate(selectedDates[0], this.format);\r\n this.value = formattedDate;\r\n this.dateChange.emit(formattedDate);\r\n this.picker.close();\r\n }\r\n\r\n // this.picker.open();\r\n },\r\n onOpen: () => {\r\n this.isCalendarShown = true;\r\n },\r\n onClose: () => {\r\n this.isCalendarShown = false;\r\n },\r\n });\r\n\r\n input.addEventListener('input', () => {\r\n const dateStr = input.value;\r\n const parsedDate = this.picker.parseDate(dateStr, this.format);\r\n\r\n if (parsedDate) {\r\n this.value = this.picker.formatDate(parsedDate, this.format);\r\n this.dateChange.emit(this.value);\r\n }\r\n });\r\n }\r\n\r\n private toggleCalendar(event?: Event) {\r\n if (event) {\r\n const target = event.target as HTMLElement;\r\n if (this.el.shadowRoot && this.el.shadowRoot.contains(target)) {\r\n const calendarEl = this.el.shadowRoot.querySelector('.calendar-container');\r\n if (calendarEl && calendarEl.contains(target)) {\r\n return; // Ignore clicks inside the calendar\r\n }\r\n }\r\n }\r\n\r\n if (!this.picker) return;\r\n\r\n if (this.isCalendarShown) {\r\n this.picker.close();\r\n } else {\r\n this.picker.open();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"date-picker-wrapper\">\r\n <div\r\n class=\"inner_container\"\r\n onClick={() => {\r\n this.toggleCalendar();\r\n }}\r\n >\r\n {this.iconPosition === 'left' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z\"\r\n fill=\"var(--color-icon, #4B5565)\"\r\n />\r\n </svg>\r\n )}\r\n <input type=\"text\" ref={el => (this.inputEl = el as HTMLInputElement)} placeholder={this.placeholder} disabled={this.disabled} value={this.value as string} />\r\n {this.iconPosition === 'right' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z\"\r\n fill=\"var(--color-icon, #4B5565)\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n\r\n {/* Always in DOM, just hidden by CSS */}\r\n <div class={`calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}`}></div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
@@ -2784,6 +2784,7 @@
2784
2784
  } */
2785
2785
 
2786
2786
  .metric_card_wrapper {
2787
+ width: 100%;
2787
2788
  display: flex;
2788
2789
  flex-direction: column;
2789
2790
  align-items: flex-start;
@@ -2792,14 +2793,11 @@
2792
2793
  }
2793
2794
 
2794
2795
  .metric_card_wrapper.sm {
2795
- width: 13.0625rem;
2796
2796
  gap: var(--spacing-4);
2797
2797
  padding: var(--spacing-4);
2798
2798
  }
2799
2799
 
2800
2800
  .metric_card_wrapper.md {
2801
- width: 18.75rem;
2802
- min-width: 18.75rem;
2803
2801
  gap: var(--spacing-7);
2804
2802
  box-shadow: var(--shadow-xs);
2805
2803
  padding: var(--spacing-6);
@@ -2784,17 +2784,6 @@
2784
2784
  } */
2785
2785
 
2786
2786
  .table_header_div {
2787
- display: flex;
2788
- width: 100%;
2789
- height: fit-content;
2790
- flex-direction: column;
2791
- align-items: flex-start;
2792
- gap: 1.25rem;
2793
- flex-shrink: 0;
2794
- background: var(--color-background-card, #ffffff);
2795
- }
2796
-
2797
- .table_header_content {
2798
2787
  display: flex;
2799
2788
  padding: var(--spacing-5) var(--spacing-6);
2800
2789
  justify-content: space-between;
@@ -32,7 +32,7 @@ export class GbTableHeader {
32
32
  // 25,
33
33
  // 90,
34
34
  // 92,
35
- // 53,
35
+ // 53,
36
36
  // 'Activated',
37
37
  // 'Deactivated',
38
38
  // 'John Doe',
@@ -100,7 +100,7 @@ export class GbTableHeader {
100
100
  document.removeEventListener('click', this.handleClickOutside);
101
101
  }
102
102
  render() {
103
- return (h("div", { key: 'd77eb43bf92dd020af2eec953b1e2d69d45e860f', class: "table_header_div" }, h("div", { key: '34e57562f12c7caec819d7a6a634ab85a7c66e8a', class: "table_header_content" }, this.tableHeading && h("p", { key: '8a3e0365722cb66e424a0dbed555836579a587a1', class: "table_heading text-lg-semi-bold" }, this.tableHeadingLabel), this.showDateFilter && (h("div", { key: 'f487b1bbd061816bcb771b83b1d8f37907ed2785', class: "date_filters" }, h("div", { key: 'd9fb0012e354ebeedd6467a072b97a11ce949067', class: "date_dropdown" }, h("gb-input-dropdown", { key: '3a35e82d329e86ef9b916d0b63ab973378811889', "show-placeholder": "true", placeholder: "Select a period", size: "sm", state: "default", type: "icon_leading", color: "blue", "show-leading-icon": "true", "leading-icon": "assets/calendar-02.svg", "menu-position": "bottom", icon: "false", items: this.dateItems, onDropdownItemSelected: this.extractDropdownItemSelected.bind(this) }, h("h1", { key: '416f1d1ec05ffebfa5082d1209964da4b963f554', slot: "initials" }, "EK"), h("p", { key: 'ff6658c0e2b494305629c277fb885c4b87dee9ee', slot: "tooltip_label" }, "This is a label"), h("p", { key: 'bf1002e8a62b46a9b1a281fc26389a68626e1b8b', slot: "tooltip_supporting_text" }, "This is a supporting text for the tooltip"))), this.isDatePickerShown && (h("div", { key: '31a475c80dccb0784ee348a476f00d17aa17687e', class: "date_input" }, h("gb-date-picker", { key: '2ba3d50d05529825c9e3f7d88afd06d1d793c1c4', mode: this.mode, placeholder: this.datePickerPlaceholder, onDateChange: this.emitDateSelected.bind(this) }))))), h("div", { key: 'f045c629575550e6dc3b832b7ddf5ad1a5f8e33d', class: `actions ${!this.showDateFilter && !this.tableHeading ? 'full_width' : ''}` }, this.showSearch && (h("div", { key: 'ad476a8fc1c63863fec7937db5c11e3687a65b05', class: "input_field" }, h("gb-input-field", { key: 'af3ff4d10b3b5793b739fb3465561ce2d466a629', size: "sm", type: "icon_leading", "icon-swap": "assets/search-01.svg", placeholder: "Search", "enable-cancel-button-function": true, onInputValueChanged: this.emitValue.bind(this) }))), h("div", { key: '5ce60c4ecb8840c07e104a1608309699733b4864', class: "action" }, this.showLayoutToggle && h("gb-button-group", { key: 'f7513a1c2e2d46bdda4516abb7ad1161e38c15ef', items: this.items, icon: "only", onOptionChange: this.onLayoutButtonClicked.bind(this) }), this.showColumnOptions && (h("gb-button", { key: 'c66c8932ddcc978da7b57f81de30dd329bc02984', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/column-insert.svg" }, h("p", { key: 'c25cb84e03108ed8203a6f5163e7b876c1a00fcc' }, "Columns"))), this.showFilter && (h("gb-filter-button", { key: 'aa3cbd9dab3dabdbdbd49dba2e413757045a817a', state: this.filterState, "icon-only": this.width <= 1007 ? true : false, onClick: () => this.onFilterButtonClicked() }, h("p", { key: '2e70128de0446eb54ea5d1a053d7d792491e33ef', slot: "filter_count" }, this.filterCount))), this.showExport && (h("div", { key: 'e510aae8d1fe44d697bceb085ce939436889e240', class: "export" }, h("gb-button", { key: '7f191302d713aeb404370b5784b04243b05029ff', size: "md", state: this.exportButtonState, hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/file-export.svg", "icon-trailing": this.width <= 1007 ? false : true, "icon-trailing-swap": "assets/arrow-down-01.svg", onClick: () => this.toggleDropdown() }, h("p", { key: '4bbce422feb099ef8de80d72d6fb6be5093fd918' }, "Export")), this.showExportDropdown && (h("gb-export-dropdown", { key: '6d2d15c34a2a4cb443d630d0f340018f5d492a3a', ref: el => (this.exportDropdown = el), "show-entire-data": this.showEntireData, "pdf-state": this.pdfState, "csv-state": this.csvState, onExportClicked: () => this.emitSelection.bind(this), class: `dropdown ${this.exportDropdownPosition}` })))), this.showRefreshButton && (h("div", { key: '545642c91ea607c4459660e30da071aa92aa370d', class: "refresh_button" }, h("gb-button", { key: '568528a8cf97174522d40225140bb86d2ba9e9dd', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/refresh.svg", onClick: () => this.onRefreshButtonClicked() }))))))));
103
+ return (h("div", { key: 'fbf6004cd9fa0fb990b03ed01c026c865389fc34', class: "table_header_div" }, this.tableHeading && h("p", { key: 'd8c46ece174dc0e48b3dc62eba42d57a54c280e3', class: "table_heading text-lg-semi-bold" }, this.tableHeadingLabel), this.showDateFilter && (h("div", { key: '034dde884ce6777e263f427da2968ed2a0bd4ff0', class: "date_filters" }, h("div", { key: '8be4b6705a70f367c3c69be2fa6c21b9a6f76629', class: "date_dropdown" }, h("gb-input-dropdown", { key: '9ac1f6adb4429b4806f25a2004db923ff0252e8c', "show-placeholder": "true", placeholder: "Select a period", size: "sm", state: "default", type: "icon_leading", color: "blue", "show-leading-icon": "true", "leading-icon": "assets/calendar-02.svg", "menu-position": "bottom", icon: "false", items: this.dateItems, onDropdownItemSelected: this.extractDropdownItemSelected.bind(this) }, h("h1", { key: '1d7daf69ca969f9cd43a79fbb4f2e0441ed4fdb9', slot: "initials" }, "EK"), h("p", { key: 'dc9a8a3acf0555c2e0ed962e5b77135c3e9042b8', slot: "tooltip_label" }, "This is a label"), h("p", { key: '5fe7288f2ab75356c091d3b404d1d03d7ed2dadc', slot: "tooltip_supporting_text" }, "This is a supporting text for the tooltip"))), this.isDatePickerShown && (h("div", { key: '727dceb83f2f64cd4cdc40a293b57b1f45370628', class: "date_input" }, h("gb-date-picker", { key: 'b7a7e0a6325bc4c0152258db313b8efccc6a427c', mode: this.mode, placeholder: this.datePickerPlaceholder, onDateChange: this.emitDateSelected.bind(this) }))))), h("div", { key: 'c0c859ae7b062ef3c7d3cb66ca75d10fdfa90f71', class: `actions ${!this.showDateFilter && !this.tableHeading ? 'full_width' : ''}` }, this.showSearch && (h("div", { key: '72ea3454cd6afeb121c96fc082386c9fbc227cce', class: "input_field" }, h("gb-input-field", { key: '9b9e71df6b6dd238969b4e590453ed40dd1b9721', size: "sm", type: "icon_leading", "icon-swap": "assets/search-01.svg", placeholder: "Search", "enable-cancel-button-function": true, onInputValueChanged: this.emitValue.bind(this) }))), h("div", { key: 'abbdab8ee44e1175f8272a4bc9220ca2f0744edb', class: "action" }, this.showLayoutToggle && h("gb-button-group", { key: '9fa8188cd30dc244e689aef022625a6118e19b5c', items: this.items, icon: "only", onOptionChange: this.onLayoutButtonClicked.bind(this) }), this.showColumnOptions && (h("gb-button", { key: 'bdefb0cf7ac887c46e78e019d3a13c8e71050f2f', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/column-insert.svg" }, h("p", { key: '5766af6677d59b61488da86c0ca3c5f83aa92c43' }, "Columns"))), this.showFilter && (h("gb-filter-button", { key: '613dbcec30dd8f54865144d80064dcd374fc0cdc', state: this.filterState, "icon-only": this.width <= 1007 ? true : false, onClick: () => this.onFilterButtonClicked() }, h("p", { key: 'f3bd224ce1370beb3b7754b0c67440f13ff1b923', slot: "filter_count" }, this.filterCount))), this.showExport && (h("div", { key: 'a3944712d25166c43d5b6de5214182e117e93e92', class: "export" }, h("gb-button", { key: '0202af0c212fec9e6f44c7d69d53cdbfffb0c6ad', size: "md", state: this.exportButtonState, hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/file-export.svg", "icon-trailing": this.width <= 1007 ? false : true, "icon-trailing-swap": "assets/arrow-down-01.svg", onClick: () => this.toggleDropdown() }, h("p", { key: 'f3ad8197bda0539033259c73b51f99d9d53e054b' }, "Export")), this.showExportDropdown && (h("gb-export-dropdown", { key: '77acceaf45116382bfe516b9a22a724d6576c5b3', ref: el => (this.exportDropdown = el), "show-entire-data": this.showEntireData, "pdf-state": this.pdfState, "csv-state": this.csvState, onExportClicked: () => this.emitSelection.bind(this), class: `dropdown ${this.exportDropdownPosition}` })))), this.showRefreshButton && (h("div", { key: 'b01d556e99ea292ef38269ad60d33779df27774a', class: "refresh_button" }, h("gb-button", { key: '60a615490a420a9c193ba6a59848d63b1b30d8d9', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/refresh.svg", onClick: () => this.onRefreshButtonClicked() })))))));
104
104
  }
105
105
  static get is() { return "gb-table-header"; }
106
106
  static get encapsulation() { return "shadow"; }
@@ -455,7 +455,7 @@ export class GbTableHeader {
455
455
  },
456
456
  "getter": false,
457
457
  "setter": false,
458
- "defaultValue": "[\r\n // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n // { name: 'Mock Item B', username: 3 },\r\n // { name: 'Mock Item C', username: 3 },\r\n // { name: 'Mock Item D', username: 3 },\r\n // { name: 'Mock Item E', username: 3 },\r\n // 45,\r\n // 50,\r\n // 20,\r\n // 25,\r\n // 90,\r\n // 92,\r\n // 53, \r\n // 'Activated',\r\n // 'Deactivated',\r\n // 'John Doe',\r\n // 'John smith',\r\n // 'Jane leo'\r\n ]"
458
+ "defaultValue": "[\r\n // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n // { name: 'Mock Item B', username: 3 },\r\n // { name: 'Mock Item C', username: 3 },\r\n // { name: 'Mock Item D', username: 3 },\r\n // { name: 'Mock Item E', username: 3 },\r\n // 45,\r\n // 50,\r\n // 20,\r\n // 25,\r\n // 90,\r\n // 92,\r\n // 53,\r\n // 'Activated',\r\n // 'Deactivated',\r\n // 'John Doe',\r\n // 'John smith',\r\n // 'Jane leo'\r\n ]"
459
459
  },
460
460
  "mode": {
461
461
  "type": "string",
@@ -1 +1 @@
1
- {"version":3,"file":"gb-table-header.js","sourceRoot":"","sources":["../../../src/components/gb-table-header/gb-table-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core';\r\nimport { CloseButtonPositions, StateEnum, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-table-header',\r\n styleUrl: 'gb-table-header.css',\r\n shadow: true,\r\n})\r\nexport class GbTableHeader {\r\n @Prop() showFilter: boolean = false;\r\n @Prop() showColumnOptions: boolean = false;\r\n @Prop() tableHeading: boolean = true;\r\n @Prop() showSearch: boolean = false;\r\n @Prop() showExport: boolean = false;\r\n @Prop() showRefreshButton: boolean = false;\r\n @Prop() tableHeadingLabel: string = '';\r\n @Prop() showLayoutToggle: boolean = false;\r\n @Prop() filterState: StateType;\r\n @Prop() filterCount: number = 0;\r\n @Prop() showEntireData: boolean = false;\r\n @Prop() exportButtonState: StateType = 'default';\r\n @Prop() pdfState: StateEnum = StateEnum.Default;\r\n @Prop() csvState: StateEnum = StateEnum.Default;\r\n @Prop() showDateFilter: boolean = false;\r\n @State() items = [\r\n { label: 'grid', current: false, icon: 'assets/grid-view.svg' },\r\n { label: 'list', current: true, icon: 'assets/left-to-right-list-dash.svg' },\r\n ];\r\n @Prop() dateItems: any[] = [\r\n // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n // { name: 'Mock Item B', username: 3 },\r\n // { name: 'Mock Item C', username: 3 },\r\n // { name: 'Mock Item D', username: 3 },\r\n // { name: 'Mock Item E', username: 3 },\r\n // 45,\r\n // 50,\r\n // 20,\r\n // 25,\r\n // 90,\r\n // 92,\r\n // 53, \r\n // 'Activated',\r\n // 'Deactivated',\r\n // 'John Doe',\r\n // 'John smith',\r\n // 'Jane leo'\r\n ];\r\n @Prop() mode: 'single' | 'range' = 'single';\r\n @Prop() datePickerPlaceholder: string = 'Start date - end date';\r\n @Prop() exportDropdownPosition: CloseButtonPositions = 'right';\r\n @State() width: number = window.innerWidth;\r\n @State() buttonIcon: 'default' | 'only';\r\n @State() showExportDropdown: boolean = false;\r\n @State() isDatePickerShown: boolean = false;\r\n @Event() inputValueChanged: EventEmitter<void>;\r\n @Event() filterButtonClicked: EventEmitter<void>;\r\n @Event() exportClicked: EventEmitter<void>;\r\n @Event() refreshButtonClicked: EventEmitter<void>;\r\n @Event() layoutButtonClicked: EventEmitter<string>;\r\n @Event() dateChange: EventEmitter<string | string[]>;\r\n @Element() el: HTMLElement;\r\n\r\n exportDropdown!: HTMLElement;\r\n\r\n componentDidLoad() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n componentWillLoad() {\r\n this.updateButtonIcon(); // Set initial variant\r\n window.addEventListener('resize', this.handleResize);\r\n this.dateItems.unshift('Custom');\r\n }\r\n\r\n extractDropdownItemSelected(item) {\r\n if (item.detail === 'Custom') {\r\n this.isDatePickerShown = true;\r\n } else {\r\n this.isDatePickerShown = false;\r\n }\r\n }\r\n\r\n emitDateSelected(date) {\r\n this.dateChange.emit(date.detail);\r\n }\r\n\r\n toggleDropdown() {\r\n this.showExportDropdown = !this.showExportDropdown;\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updateButtonIcon();\r\n };\r\n\r\n private updateButtonIcon() {\r\n this.buttonIcon = this.width < 1007 ? 'only' : 'default';\r\n }\r\n\r\n emitValue(inputValue) {\r\n this.inputValueChanged.emit(inputValue);\r\n }\r\n\r\n onFilterButtonClicked() {\r\n this.filterButtonClicked.emit();\r\n }\r\n\r\n emitSelection(selection) {\r\n this.exportClicked.emit(selection);\r\n }\r\n\r\n onRefreshButtonClicked() {\r\n this.refreshButtonClicked.emit();\r\n }\r\n\r\n onLayoutButtonClicked(layout) {\r\n // console.log(layout.detail)\r\n this.layoutButtonClicked.emit(layout.detail);\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.showExportDropdown && !this.el.contains(event.target as Node)) {\r\n this.showExportDropdown = false;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"table_header_div\">\r\n <div class=\"table_header_content\">\r\n {this.tableHeading && <p class=\"table_heading text-lg-semi-bold\">{this.tableHeadingLabel}</p>}\r\n {this.showDateFilter && (\r\n <div class=\"date_filters\">\r\n <div class=\"date_dropdown\">\r\n <gb-input-dropdown\r\n show-placeholder=\"true\"\r\n placeholder=\"Select a period\"\r\n size=\"sm\"\r\n state=\"default\"\r\n type=\"icon_leading\"\r\n color=\"blue\"\r\n show-leading-icon=\"true\"\r\n leading-icon=\"assets/calendar-02.svg\"\r\n menu-position=\"bottom\"\r\n icon=\"false\"\r\n items={this.dateItems}\r\n onDropdownItemSelected={this.extractDropdownItemSelected.bind(this)}\r\n >\r\n <h1 slot=\"initials\">EK</h1>\r\n <p slot=\"tooltip_label\">This is a label</p>\r\n <p slot=\"tooltip_supporting_text\">This is a supporting text for the tooltip</p>\r\n </gb-input-dropdown>\r\n </div>\r\n {this.isDatePickerShown && (\r\n <div class=\"date_input\">\r\n <gb-date-picker mode={this.mode} placeholder={this.datePickerPlaceholder} onDateChange={this.emitDateSelected.bind(this)}></gb-date-picker>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div class={`actions ${!this.showDateFilter && !this.tableHeading ? 'full_width' : ''}`}>\r\n {this.showSearch && (\r\n <div class=\"input_field\">\r\n <gb-input-field\r\n size=\"sm\"\r\n type=\"icon_leading\"\r\n icon-swap=\"assets/search-01.svg\"\r\n placeholder=\"Search\"\r\n enable-cancel-button-function={true}\r\n onInputValueChanged={this.emitValue.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n <div class=\"action\">\r\n {this.showLayoutToggle && <gb-button-group items={this.items} icon=\"only\" onOptionChange={this.onLayoutButtonClicked.bind(this)}></gb-button-group>}\r\n {this.showColumnOptions && (\r\n <gb-button size=\"md\" hierarchy=\"secondary_gray\" icon={this.width <= 1007 ? 'only' : 'default'} icon-leading={true} icon-leading-swap=\"assets/column-insert.svg\">\r\n <p>Columns</p>\r\n </gb-button>\r\n )}\r\n {this.showFilter && (\r\n <gb-filter-button state={this.filterState} icon-only={this.width <= 1007 ? true : false} onClick={() => this.onFilterButtonClicked()}>\r\n <p slot=\"filter_count\">{this.filterCount}</p>\r\n </gb-filter-button>\r\n )}\r\n {this.showExport && (\r\n <div class=\"export\">\r\n <gb-button\r\n size=\"md\"\r\n state={this.exportButtonState}\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/file-export.svg\"\r\n icon-trailing={this.width <= 1007 ? false : true}\r\n icon-trailing-swap=\"assets/arrow-down-01.svg\"\r\n onClick={() => this.toggleDropdown()}\r\n >\r\n <p>Export</p>\r\n </gb-button>\r\n {this.showExportDropdown && (\r\n <gb-export-dropdown\r\n ref={el => (this.exportDropdown = el)}\r\n show-entire-data={this.showEntireData}\r\n pdf-state={this.pdfState}\r\n csv-state={this.csvState}\r\n onExportClicked={() => this.emitSelection.bind(this)}\r\n class={`dropdown ${this.exportDropdownPosition}`}\r\n ></gb-export-dropdown>\r\n )}\r\n </div>\r\n )}\r\n {this.showRefreshButton && (\r\n <div class=\"refresh_button\">\r\n <gb-button\r\n size=\"md\"\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/refresh.svg\"\r\n onClick={() => this.onRefreshButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"gb-table-header.js","sourceRoot":"","sources":["../../../src/components/gb-table-header/gb-table-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,EAAwB,SAAS,EAAa,MAAM,6BAA6B,CAAC;AAOzF,MAAM,OAAO,aAAa;IAL1B;QAMU,eAAU,GAAY,KAAK,CAAC;QAC5B,sBAAiB,GAAY,KAAK,CAAC;QACnC,iBAAY,GAAY,IAAI,CAAC;QAC7B,eAAU,GAAY,KAAK,CAAC;QAC5B,eAAU,GAAY,KAAK,CAAC;QAC5B,sBAAiB,GAAY,KAAK,CAAC;QACnC,sBAAiB,GAAW,EAAE,CAAC;QAC/B,qBAAgB,GAAY,KAAK,CAAC;QAElC,gBAAW,GAAW,CAAC,CAAC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAChC,sBAAiB,GAAc,SAAS,CAAC;QACzC,aAAQ,GAAc,SAAS,CAAC,OAAO,CAAC;QACxC,aAAQ,GAAc,SAAS,CAAC,OAAO,CAAC;QACxC,mBAAc,GAAY,KAAK,CAAC;QAC/B,UAAK,GAAG;YACf,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,sBAAsB,EAAE;YAC/D,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,oCAAoC,EAAE;SAC7E,CAAC;QACM,cAAS,GAAU;QACzB,4EAA4E;QAC5E,wCAAwC;QACxC,wCAAwC;QACxC,wCAAwC;QACxC,wCAAwC;QACxC,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,eAAe;QACf,iBAAiB;QACjB,cAAc;QACd,gBAAgB;QAChB,aAAa;SACd,CAAC;QACM,SAAI,GAAuB,QAAQ,CAAC;QACpC,0BAAqB,GAAW,uBAAuB,CAAC;QACxD,2BAAsB,GAAyB,OAAO,CAAC;QACtD,UAAK,GAAW,MAAM,CAAC,UAAU,CAAC;QAElC,uBAAkB,GAAY,KAAK,CAAC;QACpC,sBAAiB,GAAY,KAAK,CAAC;QAqCpC,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;YAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;KA4IH;IAzKC,gBAAgB;QACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,sBAAsB;QAC/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,2BAA2B,CAAC,IAAI;QAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;IACrD,CAAC;IAOO,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC;IAED,qBAAqB;QACnB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;IAED,aAAa,CAAC,SAAS;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,qBAAqB,CAAC,MAAM;QAC1B,6BAA6B;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAGD,kBAAkB,CAAC,KAAiB;QAClC,IAAI,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACvE,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC1B,IAAI,CAAC,YAAY,IAAI,0DAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,iBAAiB,CAAK;YAC5F,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAC,eAAe;oBACxB,8FACmB,MAAM,EACvB,WAAW,EAAC,iBAAiB,EAC7B,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,MAAM,uBACM,MAAM,kBACX,wBAAwB,mBACvB,QAAQ,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,sBAAsB,EAAE,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC;wBAEnE,2DAAI,IAAI,EAAC,UAAU,SAAQ;wBAC3B,0DAAG,IAAI,EAAC,eAAe,sBAAoB;wBAC3C,0DAAG,IAAI,EAAC,yBAAyB,gDAA8C,CAC7D,CAChB;gBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,YAAY;oBACrB,uEAAgB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAmB,CACvI,CACP,CACG,CACP;YACD,4DAAK,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;gBACpF,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,aAAa;oBACtB,uEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,cAAc,eACT,sBAAsB,EAChC,WAAW,EAAC,QAAQ,mCACW,IAAI,EACnC,mBAAmB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B,CACd,CACP;gBACD,4DAAK,KAAK,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB,IAAI,wEAAiB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,cAAc,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAoB;oBAClJ,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBAAgB,IAAI,uBAAoB,0BAA0B;wBAC7J,sEAAc,CACJ,CACb;oBACA,IAAI,CAAC,UAAU,IAAI,CAClB,yEAAkB,KAAK,EAAE,IAAI,CAAC,WAAW,eAAa,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;wBAClI,0DAAG,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAK,CAC5B,CACpB;oBACA,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,QAAQ;wBACjB,kEACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBAC/B,IAAI,uBACA,wBAAwB,mBAC3B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,wBAC7B,0BAA0B,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;4BAEpC,qEAAa,CACH;wBACX,IAAI,CAAC,kBAAkB,IAAI,CAC1B,2EACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,sBACnB,IAAI,CAAC,cAAc,eAC1B,IAAI,CAAC,QAAQ,eACb,IAAI,CAAC,QAAQ,EACxB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,KAAK,EAAE,YAAY,IAAI,CAAC,sBAAsB,EAAE,GAC5B,CACvB,CACG,CACP;oBACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,gBAAgB;wBACzB,kEACE,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBAC/B,IAAI,uBACA,oBAAoB,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GACjC,CACT,CACP,CACG,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core';\r\nimport { CloseButtonPositions, StateEnum, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-table-header',\r\n styleUrl: 'gb-table-header.css',\r\n shadow: true,\r\n})\r\nexport class GbTableHeader {\r\n @Prop() showFilter: boolean = false;\r\n @Prop() showColumnOptions: boolean = false;\r\n @Prop() tableHeading: boolean = true;\r\n @Prop() showSearch: boolean = false;\r\n @Prop() showExport: boolean = false;\r\n @Prop() showRefreshButton: boolean = false;\r\n @Prop() tableHeadingLabel: string = '';\r\n @Prop() showLayoutToggle: boolean = false;\r\n @Prop() filterState: StateType;\r\n @Prop() filterCount: number = 0;\r\n @Prop() showEntireData: boolean = false;\r\n @Prop() exportButtonState: StateType = 'default';\r\n @Prop() pdfState: StateEnum = StateEnum.Default;\r\n @Prop() csvState: StateEnum = StateEnum.Default;\r\n @Prop() showDateFilter: boolean = false;\r\n @State() items = [\r\n { label: 'grid', current: false, icon: 'assets/grid-view.svg' },\r\n { label: 'list', current: true, icon: 'assets/left-to-right-list-dash.svg' },\r\n ];\r\n @Prop() dateItems: any[] = [\r\n // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },\r\n // { name: 'Mock Item B', username: 3 },\r\n // { name: 'Mock Item C', username: 3 },\r\n // { name: 'Mock Item D', username: 3 },\r\n // { name: 'Mock Item E', username: 3 },\r\n // 45,\r\n // 50,\r\n // 20,\r\n // 25,\r\n // 90,\r\n // 92,\r\n // 53,\r\n // 'Activated',\r\n // 'Deactivated',\r\n // 'John Doe',\r\n // 'John smith',\r\n // 'Jane leo'\r\n ];\r\n @Prop() mode: 'single' | 'range' = 'single';\r\n @Prop() datePickerPlaceholder: string = 'Start date - end date';\r\n @Prop() exportDropdownPosition: CloseButtonPositions = 'right';\r\n @State() width: number = window.innerWidth;\r\n @State() buttonIcon: 'default' | 'only';\r\n @State() showExportDropdown: boolean = false;\r\n @State() isDatePickerShown: boolean = false;\r\n @Event() inputValueChanged: EventEmitter<void>;\r\n @Event() filterButtonClicked: EventEmitter<void>;\r\n @Event() exportClicked: EventEmitter<void>;\r\n @Event() refreshButtonClicked: EventEmitter<void>;\r\n @Event() layoutButtonClicked: EventEmitter<string>;\r\n @Event() dateChange: EventEmitter<string | string[]>;\r\n @Element() el: HTMLElement;\r\n\r\n exportDropdown!: HTMLElement;\r\n\r\n componentDidLoad() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n componentWillLoad() {\r\n this.updateButtonIcon(); // Set initial variant\r\n window.addEventListener('resize', this.handleResize);\r\n this.dateItems.unshift('Custom');\r\n }\r\n\r\n extractDropdownItemSelected(item) {\r\n if (item.detail === 'Custom') {\r\n this.isDatePickerShown = true;\r\n } else {\r\n this.isDatePickerShown = false;\r\n }\r\n }\r\n\r\n emitDateSelected(date) {\r\n this.dateChange.emit(date.detail);\r\n }\r\n\r\n toggleDropdown() {\r\n this.showExportDropdown = !this.showExportDropdown;\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updateButtonIcon();\r\n };\r\n\r\n private updateButtonIcon() {\r\n this.buttonIcon = this.width < 1007 ? 'only' : 'default';\r\n }\r\n\r\n emitValue(inputValue) {\r\n this.inputValueChanged.emit(inputValue);\r\n }\r\n\r\n onFilterButtonClicked() {\r\n this.filterButtonClicked.emit();\r\n }\r\n\r\n emitSelection(selection) {\r\n this.exportClicked.emit(selection);\r\n }\r\n\r\n onRefreshButtonClicked() {\r\n this.refreshButtonClicked.emit();\r\n }\r\n\r\n onLayoutButtonClicked(layout) {\r\n // console.log(layout.detail)\r\n this.layoutButtonClicked.emit(layout.detail);\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.showExportDropdown && !this.el.contains(event.target as Node)) {\r\n this.showExportDropdown = false;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"table_header_div\">\r\n {this.tableHeading && <p class=\"table_heading text-lg-semi-bold\">{this.tableHeadingLabel}</p>}\r\n {this.showDateFilter && (\r\n <div class=\"date_filters\">\r\n <div class=\"date_dropdown\">\r\n <gb-input-dropdown\r\n show-placeholder=\"true\"\r\n placeholder=\"Select a period\"\r\n size=\"sm\"\r\n state=\"default\"\r\n type=\"icon_leading\"\r\n color=\"blue\"\r\n show-leading-icon=\"true\"\r\n leading-icon=\"assets/calendar-02.svg\"\r\n menu-position=\"bottom\"\r\n icon=\"false\"\r\n items={this.dateItems}\r\n onDropdownItemSelected={this.extractDropdownItemSelected.bind(this)}\r\n >\r\n <h1 slot=\"initials\">EK</h1>\r\n <p slot=\"tooltip_label\">This is a label</p>\r\n <p slot=\"tooltip_supporting_text\">This is a supporting text for the tooltip</p>\r\n </gb-input-dropdown>\r\n </div>\r\n {this.isDatePickerShown && (\r\n <div class=\"date_input\">\r\n <gb-date-picker mode={this.mode} placeholder={this.datePickerPlaceholder} onDateChange={this.emitDateSelected.bind(this)}></gb-date-picker>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div class={`actions ${!this.showDateFilter && !this.tableHeading ? 'full_width' : ''}`}>\r\n {this.showSearch && (\r\n <div class=\"input_field\">\r\n <gb-input-field\r\n size=\"sm\"\r\n type=\"icon_leading\"\r\n icon-swap=\"assets/search-01.svg\"\r\n placeholder=\"Search\"\r\n enable-cancel-button-function={true}\r\n onInputValueChanged={this.emitValue.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n <div class=\"action\">\r\n {this.showLayoutToggle && <gb-button-group items={this.items} icon=\"only\" onOptionChange={this.onLayoutButtonClicked.bind(this)}></gb-button-group>}\r\n {this.showColumnOptions && (\r\n <gb-button size=\"md\" hierarchy=\"secondary_gray\" icon={this.width <= 1007 ? 'only' : 'default'} icon-leading={true} icon-leading-swap=\"assets/column-insert.svg\">\r\n <p>Columns</p>\r\n </gb-button>\r\n )}\r\n {this.showFilter && (\r\n <gb-filter-button state={this.filterState} icon-only={this.width <= 1007 ? true : false} onClick={() => this.onFilterButtonClicked()}>\r\n <p slot=\"filter_count\">{this.filterCount}</p>\r\n </gb-filter-button>\r\n )}\r\n {this.showExport && (\r\n <div class=\"export\">\r\n <gb-button\r\n size=\"md\"\r\n state={this.exportButtonState}\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/file-export.svg\"\r\n icon-trailing={this.width <= 1007 ? false : true}\r\n icon-trailing-swap=\"assets/arrow-down-01.svg\"\r\n onClick={() => this.toggleDropdown()}\r\n >\r\n <p>Export</p>\r\n </gb-button>\r\n {this.showExportDropdown && (\r\n <gb-export-dropdown\r\n ref={el => (this.exportDropdown = el)}\r\n show-entire-data={this.showEntireData}\r\n pdf-state={this.pdfState}\r\n csv-state={this.csvState}\r\n onExportClicked={() => this.emitSelection.bind(this)}\r\n class={`dropdown ${this.exportDropdownPosition}`}\r\n ></gb-export-dropdown>\r\n )}\r\n </div>\r\n )}\r\n {this.showRefreshButton && (\r\n <div class=\"refresh_button\">\r\n <gb-button\r\n size=\"md\"\r\n hierarchy=\"secondary_gray\"\r\n icon={this.width <= 1007 ? 'only' : 'default'}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/refresh.svg\"\r\n onClick={() => this.onRefreshButtonClicked()}\r\n ></gb-button>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
@@ -22,7 +22,7 @@ export class GbTag {
22
22
  }
23
23
  render() {
24
24
  const flagSwap = getAssetPath(`${this.flagSwap}`);
25
- return (h("div", { key: '7436816ca9978ed04578453d73f8982fcfe92cf5', class: `container ${this.size} ${this.action}` }, h("div", { key: 'bead0f01f0b34cfb756b0813d3562c8f4aced50c', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: 'a68123c032a51189b2c91f587543e68723cfddfa', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: 'a87e5403536adfc4e23858a2b30fdcd5770d41ce', class: "icon left-icon" }, h("img", { key: '9e10dc1175ba69b535fadddb47c00635c607f57d', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '62046235e36968c460c1565023e12381f4c6076a', class: "avatar-icon", size: "xxs", "status-icon": "false", text: false, color: "gray" }, h("slot", { key: '0133802ee07e2a5ee3526ed565b7f515458a09fe', name: "image", slot: "image" }))), this.icon === 'dot' && (h("svg", { key: 'fbcb6dd637ac3b27e5a7c6879a4383ed1d5db77d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '98e52b655802e2e4a57848409d4aabaf700fd268', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: 'c2a5d9b740764f42aeb5969a4dfeba6061b66be1', class: "label" }, h("slot", { key: 'b451ee4ac7b316aaab24c0042f33e852e238a83b' })), this.action === 'count' && (h("gb-tag-count", { key: 'b555b60d11cb2ea61c4bed8867b4c67931f0dbd4', size: this.size }, h("slot", { key: '2eec7533bf9e6e000ba2d68c088f07802991b57e', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'c18ecec553d242edf72f1558857ec87373c072dc', size: this.size, onClick: () => this.onTagClose() })));
25
+ return (h("div", { key: '7f19ec955197b582892116988e0ee3189b2e13bb', class: `container ${this.size} ${this.action}` }, h("div", { key: '1453ead248396719eed69c12dffa6203f6f9b4cd', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '60a1d28d8aff864710ffa15ffdbcc277a152845e', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '109a29cd267d3b83893027b23b473af15d9e259b', class: "icon left-icon" }, h("img", { key: '1526c2ad49ce30010717eff0bca41611e9ea39bb', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '5dcdd4bef1b7a04ce5ec58be4eb3d64eaa826bd5', class: "avatar-icon", size: "xxs", "status-icon": "false", text: false, color: "gray" }, h("slot", { key: 'cf49692f75e3aaaf04f7e876ddc4cb722d6accb0', name: "image", slot: "image" }))), this.icon === 'dot' && (h("svg", { key: '6df13f97dd506e8117795547a4ffb337989e9809', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '8e704f1503bcfaaa652eede89d206c58eac55573', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: '2f6461dfbe8e8019e3ff7daacb5a3bf40b830a73', class: "label" }, h("slot", { key: 'd10b0f98f945ee66851561f93f1d621b6296c6dc' })), this.action === 'count' && (h("gb-tag-count", { key: '3a8f381ab942e2be03c4b81feb005b74fdef0f2b', size: this.size }, h("slot", { key: 'b465f224df20142432b795fa7cd1f6591d5dc8c5', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'd4c9116b5b9b3a09fb40511d2e0f6c2b537a738a', size: this.size, onClick: () => this.onTagClose() })));
26
26
  }
27
27
  static get is() { return "gb-tag"; }
28
28
  static get encapsulation() { return "shadow"; }
@@ -6,7 +6,7 @@ export class GbTagCheckbox {
6
6
  this.disabled = false;
7
7
  }
8
8
  render() {
9
- return (h("label", { key: 'e19edb335a72e65af890df1d8a79cc5b78df45ff', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'abf6dd945f270766e651982e7e658ba2a1479bc4', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: '07a99a8bfbd545d0ce8e133af7a0356eebfee0b1', class: `custom-checkbox ${this.size}` }, h("svg", { key: '275e5de6ccab16383a76f46d9666151222b5cfb0', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'f163d0cab67d554f0a08745a946ed78f5a16178c', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
9
+ return (h("label", { key: '8f66b90bc922149ff072c5908ea3b006447d0cda', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '55b83fc0acb70c356ee1dcff76c801d68aada0c9', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: 'cdefadf6bb6c47c4aed408561d56205d37e97946', class: `custom-checkbox ${this.size}` }, h("svg", { key: 'f9caf75655978cb681f3e6b0b92b092cd618b17f', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '55c2fcd46ff634c8e953992632ad3dca78933639', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
10
10
  }
11
11
  static get is() { return "gb-tag-checkbox"; }
12
12
  static get encapsulation() { return "shadow"; }
@@ -1,7 +1,7 @@
1
1
  import { h } from "@stencil/core";
2
2
  export class GbTagClose {
3
3
  render() {
4
- return (h("div", { key: 'c55e084a6a6d8ec527de54fc771bc9c51bd499a3', class: this.size }, h("svg", { key: '9347dd6d0efa3a458fa136e5c82820d877b0f105', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: 'f08bbeb0b3b6f18634651d0002519dbe57237d07', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
4
+ return (h("div", { key: '250592620c0e21ff4fd7179774112f1314a566d2', class: this.size }, h("svg", { key: '9970e2dcf6bdb5553b9c047c3ce5d765beea37ce', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '4729b3ea19676042c0557bc8830006044b152bfe', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
5
5
  }
6
6
  static get is() { return "gb-tag-close"; }
7
7
  static get encapsulation() { return "shadow"; }
@@ -1,7 +1,7 @@
1
1
  import { h } from "@stencil/core";
2
2
  export class GbTagCount {
3
3
  render() {
4
- return (h("div", { key: 'a83ad0f808e6453336fe2fc44a2572d9ebfa0366', class: this.size }, h("slot", { key: '1a5d95092c3cf47174797f93b9c5232c81565cf7', name: "count" })));
4
+ return (h("div", { key: '831bff46dc4dfcaaa128d8a646f316e7917431c0', class: this.size }, h("slot", { key: '2bb9433e5377903949872356c3ccf2d176982b21', name: "count" })));
5
5
  }
6
6
  static get is() { return "gb-tag-count"; }
7
7
  static get encapsulation() { return "shadow"; }
@@ -203,12 +203,12 @@ export class GbTextareaInputField {
203
203
  }
204
204
  }
205
205
  render() {
206
- return (h("div", { key: '481a7a899fffa41aa8c4c3e028e7dc67b46981e4', class: "textarea_container" }, h("div", { key: '21693910f24063ca8373fc617a87270310ceb04f', class: "input_with_label" }, this.showLabel && h("p", { key: 'afc906c46cfe7a51ffcb582f0c3ae1237dc9fa1b', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '27f1fddc812dcb473dd6ad3660288e2b079f7fab', ref: el => (this.textarea = el), onInput: () => this.handleInput(), onFocus: () => this.handleInputFocus(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '389cd03ff4745a04f4183a89f8bf3f2dd360181d', class: "textarea_tags" }, h("div", { key: '7ec01b86e3b381d8d1e02c65785e84f80eef235b', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '9fb3422e50e89e0d7fe844ec1ebdc0eb50fda22c', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
206
+ return (h("div", { key: '160c369daf0d98ac5230bcea54ec97ac41817d16', class: "textarea_container" }, h("div", { key: 'f214d68dd8080e6f1e94871b98e1e5547a65a202', class: "input_with_label" }, this.showLabel && h("p", { key: '7378e12b9b54826e5d4590f724ba55456db1bfff', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: 'c6347561a838e0712444858575428072aa025a9b', ref: el => (this.textarea = el), onInput: () => this.handleInput(), onFocus: () => this.handleInputFocus(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '61cc4a82593e5498d7e27c1f3f2765ea0b4e2836', class: "textarea_tags" }, h("div", { key: 'bdc37022c2a64a301a66d20575b6d221f2186376', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: 'f74761c804a693f6020bd4c9129a80859c68f71d', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
207
207
  .split(' ')
208
208
  .map(part => part.charAt(0).toUpperCase())
209
- .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'af69a550cbcd114b8e5f3be1b62c9b7bd519a468', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || ' '), h("div", { key: '58bff1545d9502938154ba2a8f17e083f6fb494a', class: "input_field" }, h("input", { key: 'ddb70d054975b8e1b735b20232043b4c9488ff7b', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
209
+ .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'ed0ba6c9fdcb1244971ef943cbce2515d5eb443d', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || ' '), h("div", { key: '6bf5b03f44495ea3fbb63d7ec967da9f5d9667aa', class: "input_field" }, h("input", { key: '556dde8d2c64da4468df3b326b286e845298e014', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
210
210
  // placeholder={this.placeholderText}
211
- value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '60a00ad50d8ed961dd6315310748d0041203aadd', class: "help_icon" }, h("svg", { key: 'a055f3be4aac1e6fb31a5157ae50fc2a69accd63', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'a172ac7012e2b1832ee1fa35f2f70351f6ff1a8e', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: 'f8a81969a304626d0820f03a36f741f17fa0bfc7', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
211
+ value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '066349aab6719f033b9c622634884a1f96790699', class: "help_icon" }, h("svg", { key: '6af5dcbd374d87362865ff3cf9d8a3b8140cc85d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '76a10536afc418e4911650c83e04441144f46c8b', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: '9ddf99907a99a3f249ec608f3cb836bc66804524', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
212
212
  ? [h("p", { slot: "name" }, item.objectName), h("p", { slot: "supporting_text" }, item.objectValue)]
213
213
  : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h(Fragment, null, !this.destructive ? h("p", { class: "hint_text text-sm-regular" }, this.hintText) : h("p", { class: "error_text text-sm-regular" }, this.errorText))));
214
214
  }
@@ -18,7 +18,7 @@ export class GbThemeTab {
18
18
  const systemIconSrc = getAssetPath(`assets/laptop.svg`);
19
19
  const sunSrc = getAssetPath(`assets/sun-02.svg`);
20
20
  const moonSrc = getAssetPath(`assets/moon-02.svg`);
21
- return (h("div", { key: '7cdfd8b9481d3ac8610679192fdaf1537a4b989c', class: `theme_tab_div` }, h("div", { key: 'e70fb9ee1e7dfd7fcd976392bc44ca50f296e5e8', class: "tab" }, h("gb-icon-button-base", { key: '3ab6073acc23f20393244b2d1165fd4cf3081495', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: 'be9c192ad5cf39b8d09d579c0e9b2f91404098cc', class: "tab" }, h("gb-icon-button-base", { key: 'd080c23302073500bb316a6892c699c423b3b49d', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'b3d2ee8c76b86cd3bfbe25c579a21f5bc81e1f11', class: "tab" }, h("gb-icon-button-base", { key: '056f6274ad0c5054b0252cb88194371be044d4e9', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
21
+ return (h("div", { key: '06b53ee6501f727f00204c8c4cc4565bf9d1ebe0', class: `theme_tab_div` }, h("div", { key: '1d104d0671f3436f760d6a7d27c053fe47866710', class: "tab" }, h("gb-icon-button-base", { key: 'a582293cfd26f68c2664c7b9d9708b435ee5e766', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '84fbb1aee86570177964c25b30f4059bad1c7468', class: "tab" }, h("gb-icon-button-base", { key: 'aa05df163799c6a1866379384e08ae8f9c096ed8', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '24548927653ec0541610b314f7e48fdca1c9ef0c', class: "tab" }, h("gb-icon-button-base", { key: 'b146dcfa97184702713828f1efdb38f0151a8b16', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
22
22
  }
23
23
  static get is() { return "gb-theme-tab"; }
24
24
  static get encapsulation() { return "shadow"; }