@ukic/web-components 3.13.0 → 3.15.0

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 (510) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/{helpers-478d1107.js → helpers-15fae358.js} +5 -1
  3. package/dist/cjs/helpers-15fae358.js.map +1 -0
  4. package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
  5. package/dist/cjs/ic-accordion.cjs.entry.js +1 -1
  6. package/dist/cjs/ic-action-chip.cjs.entry.js +1 -1
  7. package/dist/cjs/ic-alert.cjs.entry.js +4 -2
  8. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ic-back-to-top.cjs.entry.js +6 -5
  10. package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ic-badge.cjs.entry.js +3 -3
  12. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +3 -3
  13. package/dist/cjs/ic-breadcrumb.cjs.entry.js +5 -4
  14. package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ic-button_3.cjs.entry.js +43 -19
  16. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ic-card-vertical.cjs.entry.js +5 -5
  18. package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
  19. package/dist/cjs/ic-checkbox.cjs.entry.js +32 -9
  20. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ic-chip.cjs.entry.js +4 -4
  22. package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
  23. package/dist/cjs/ic-dialog.cjs.entry.js +5 -4
  24. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ic-divider.cjs.entry.js +3 -2
  26. package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
  27. package/dist/cjs/ic-empty-state.cjs.entry.js +3 -3
  28. package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
  29. package/dist/cjs/ic-footer-link.cjs.entry.js +3 -3
  30. package/dist/cjs/ic-footer.cjs.entry.js +1 -1
  31. package/dist/cjs/ic-hero.cjs.entry.js +13 -7
  32. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  33. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +6 -6
  34. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +9 -9
  35. package/dist/cjs/ic-input-label_2.cjs.entry.js +6 -6
  36. package/dist/cjs/ic-layout-grid-item.cjs.entry.js +2 -2
  37. package/dist/cjs/ic-layout-grid.cjs.entry.js +2 -2
  38. package/dist/cjs/ic-link.cjs.entry.js +2 -2
  39. package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
  40. package/dist/cjs/ic-menu-item.cjs.entry.js +3 -2
  41. package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
  42. package/dist/cjs/ic-navigation-button.cjs.entry.js +3 -3
  43. package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -2
  44. package/dist/cjs/ic-navigation-item.cjs.entry.js +3 -3
  45. package/dist/cjs/ic-navigation-menu.cjs.entry.js +5 -5
  46. package/dist/cjs/ic-page-header.cjs.entry.js +7 -7
  47. package/dist/cjs/ic-pagination-item.cjs.entry.js +2 -2
  48. package/dist/cjs/ic-pagination.cjs.entry.js +5 -5
  49. package/dist/cjs/ic-popover-menu.cjs.entry.js +5 -5
  50. package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
  51. package/dist/cjs/ic-radio-option.cjs.entry.js +1 -1
  52. package/dist/cjs/ic-search-bar.cjs.entry.js +1 -1
  53. package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
  54. package/dist/cjs/ic-select.cjs.entry.js +21 -13
  55. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  56. package/dist/cjs/ic-side-navigation.cjs.entry.js +6 -6
  57. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  58. package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
  59. package/dist/cjs/ic-skip-link.cjs.entry.js +2 -2
  60. package/dist/cjs/ic-status-tag.cjs.entry.js +3 -3
  61. package/dist/cjs/ic-step.cjs.entry.js +14 -14
  62. package/dist/cjs/ic-stepper.cjs.entry.js +3 -3
  63. package/dist/cjs/ic-switch.cjs.entry.js +5 -5
  64. package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
  65. package/dist/cjs/ic-tab-group.cjs.entry.js +3 -3
  66. package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
  67. package/dist/cjs/ic-tab.cjs.entry.js +3 -3
  68. package/dist/cjs/ic-text-field.cjs.entry.js +13 -8
  69. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  70. package/dist/cjs/ic-theme.cjs.entry.js +2 -2
  71. package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
  72. package/dist/cjs/ic-toast.cjs.entry.js +8 -5
  73. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  74. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +8 -4
  75. package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
  76. package/dist/cjs/ic-toggle-button.cjs.entry.js +58 -45
  77. package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
  78. package/dist/cjs/ic-top-navigation.cjs.entry.js +5 -5
  79. package/dist/cjs/ic-typography.cjs.entry.js +3 -3
  80. package/dist/cjs/loader.cjs.js +1 -1
  81. package/dist/collection/collection-manifest.json +1 -1
  82. package/dist/collection/components/ic-alert/ic-alert.css +6 -6
  83. package/dist/collection/components/ic-alert/ic-alert.js +2 -0
  84. package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
  85. package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +1 -1
  86. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +4 -3
  87. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
  88. package/dist/collection/components/ic-badge/ic-badge.js +2 -2
  89. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +5 -4
  90. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +3 -2
  91. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
  92. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +2 -2
  93. package/dist/collection/components/ic-button/ic-button.js +36 -11
  94. package/dist/collection/components/ic-button/ic-button.js.map +1 -1
  95. package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +4 -4
  96. package/dist/collection/components/ic-checkbox/ic-checkbox.css +9 -2
  97. package/dist/collection/components/ic-checkbox/ic-checkbox.js +31 -7
  98. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  99. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +52 -0
  100. package/dist/collection/components/ic-chip/ic-chip.js +3 -3
  101. package/dist/collection/components/ic-dialog/ic-dialog.css +1 -1
  102. package/dist/collection/components/ic-dialog/ic-dialog.js +3 -2
  103. package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
  104. package/dist/collection/components/ic-divider/ic-divider.css +89 -89
  105. package/dist/collection/components/ic-divider/ic-divider.js +2 -1
  106. package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
  107. package/dist/collection/components/ic-empty-state/ic-empty-state.js +2 -2
  108. package/dist/collection/components/ic-footer-link/ic-footer-link.js +2 -2
  109. package/dist/collection/components/ic-hero/ic-hero.css +25 -4
  110. package/dist/collection/components/ic-hero/ic-hero.js +37 -5
  111. package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
  112. package/dist/collection/components/ic-hero/ic-hero.stories.js +15 -0
  113. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +5 -5
  114. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +3 -3
  115. package/dist/collection/components/ic-input-container/ic-input-container.js +2 -2
  116. package/dist/collection/components/ic-input-label/ic-input-label.js +2 -2
  117. package/dist/collection/components/ic-input-validation/ic-input-validation.js +3 -3
  118. package/dist/collection/components/ic-layout-grid/ic-layout-grid.js +2 -2
  119. package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js +2 -2
  120. package/dist/collection/components/ic-link/ic-link.js +1 -1
  121. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +4 -4
  122. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +6 -5
  123. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
  124. package/dist/collection/components/ic-menu/ic-menu.js +3 -3
  125. package/dist/collection/components/ic-menu-group/ic-menu-group.js +1 -1
  126. package/dist/collection/components/ic-menu-item/ic-menu-item.css +6 -6
  127. package/dist/collection/components/ic-menu-item/ic-menu-item.js +1 -0
  128. package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
  129. package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +2 -2
  130. package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +1 -1
  131. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +2 -2
  132. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +4 -4
  133. package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
  134. package/dist/collection/components/ic-pagination/ic-pagination.js +4 -4
  135. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +1 -1
  136. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +4 -4
  137. package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
  138. package/dist/collection/components/ic-select/ic-select.css +1 -1
  139. package/dist/collection/components/ic-select/ic-select.js +20 -12
  140. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  141. package/dist/collection/components/ic-select/ic-select_(single).stories.js +21 -5
  142. package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +2 -0
  143. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +4 -4
  144. package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
  145. package/dist/collection/components/ic-skip-link/ic-skip-link.js +2 -2
  146. package/dist/collection/components/ic-status-tag/ic-status-tag.js +2 -2
  147. package/dist/collection/components/ic-step/ic-step.js +13 -13
  148. package/dist/collection/components/ic-stepper/ic-stepper.js +2 -2
  149. package/dist/collection/components/ic-stepper/ic-stepper.stories.js +16 -6
  150. package/dist/collection/components/ic-switch/ic-switch.js +4 -4
  151. package/dist/collection/components/ic-tab/ic-tab.js +2 -2
  152. package/dist/collection/components/ic-tab-context/ic-tab-context.js +1 -1
  153. package/dist/collection/components/ic-tab-group/ic-tab-group.js +2 -2
  154. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
  155. package/dist/collection/components/ic-text-field/ic-text-field.js +18 -12
  156. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  157. package/dist/collection/components/ic-text-field/ic-text-field.stories.js +36 -0
  158. package/dist/collection/components/ic-text-field/ic-text-field.types.js.map +1 -1
  159. package/dist/collection/components/ic-theme/ic-theme.js +1 -1
  160. package/dist/collection/components/ic-toast/ic-toast.css +6 -6
  161. package/dist/collection/components/ic-toast/ic-toast.js +6 -3
  162. package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
  163. package/dist/collection/components/ic-toast-region/ic-toast-region.js +1 -1
  164. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +57 -44
  165. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
  166. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +7 -3
  167. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
  168. package/dist/collection/components/ic-tooltip/ic-tooltip.js +3 -3
  169. package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
  170. package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +37 -109
  171. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +4 -4
  172. package/dist/collection/components/ic-typography/ic-typography.js +2 -2
  173. package/dist/collection/icds-table-style.css +66 -0
  174. package/dist/collection/utils/helpers.js +3 -0
  175. package/dist/collection/utils/helpers.js.map +1 -1
  176. package/dist/components/helpers.js +4 -1
  177. package/dist/components/helpers.js.map +1 -1
  178. package/dist/components/ic-action-chip.js +1 -1
  179. package/dist/components/ic-alert.js +4 -2
  180. package/dist/components/ic-alert.js.map +1 -1
  181. package/dist/components/ic-back-to-top.js +6 -5
  182. package/dist/components/ic-back-to-top.js.map +1 -1
  183. package/dist/components/ic-badge.js +3 -3
  184. package/dist/components/ic-breadcrumb-group.js +3 -3
  185. package/dist/components/ic-breadcrumb2.js +5 -4
  186. package/dist/components/ic-breadcrumb2.js.map +1 -1
  187. package/dist/components/ic-button2.js +35 -11
  188. package/dist/components/ic-button2.js.map +1 -1
  189. package/dist/components/ic-card-vertical.js +5 -5
  190. package/dist/components/ic-checkbox-group.js +1 -1
  191. package/dist/components/ic-checkbox.js +32 -9
  192. package/dist/components/ic-checkbox.js.map +1 -1
  193. package/dist/components/ic-chip.js +4 -4
  194. package/dist/components/ic-data-row.js +1 -1
  195. package/dist/components/ic-dialog.js +5 -4
  196. package/dist/components/ic-dialog.js.map +1 -1
  197. package/dist/components/ic-divider2.js +3 -2
  198. package/dist/components/ic-divider2.js.map +1 -1
  199. package/dist/components/ic-empty-state.js +3 -3
  200. package/dist/components/ic-footer-link-group.js +1 -1
  201. package/dist/components/ic-footer-link.js +3 -3
  202. package/dist/components/ic-footer.js +1 -1
  203. package/dist/components/ic-hero.js +14 -7
  204. package/dist/components/ic-hero.js.map +1 -1
  205. package/dist/components/ic-horizontal-scroll2.js +6 -6
  206. package/dist/components/ic-input-component-container2.js +4 -4
  207. package/dist/components/ic-input-container2.js +2 -2
  208. package/dist/components/ic-input-label2.js +3 -3
  209. package/dist/components/ic-input-validation2.js +4 -4
  210. package/dist/components/ic-layout-grid-item.js +2 -2
  211. package/dist/components/ic-layout-grid.js +2 -2
  212. package/dist/components/ic-link2.js +1 -1
  213. package/dist/components/ic-loading-indicator2.js +7 -6
  214. package/dist/components/ic-loading-indicator2.js.map +1 -1
  215. package/dist/components/ic-menu-group.js +2 -2
  216. package/dist/components/ic-menu-item2.js +3 -2
  217. package/dist/components/ic-menu-item2.js.map +1 -1
  218. package/dist/components/ic-menu2.js +4 -4
  219. package/dist/components/ic-navigation-button.js +3 -3
  220. package/dist/components/ic-navigation-group.js +2 -2
  221. package/dist/components/ic-navigation-item.js +3 -3
  222. package/dist/components/ic-navigation-menu2.js +5 -5
  223. package/dist/components/ic-page-header.js +7 -7
  224. package/dist/components/ic-pagination-item2.js +2 -2
  225. package/dist/components/ic-pagination.js +4 -4
  226. package/dist/components/ic-popover-menu.js +5 -5
  227. package/dist/components/ic-radio-group.js +1 -1
  228. package/dist/components/ic-radio-option.js +1 -1
  229. package/dist/components/ic-radio-option.js.map +1 -1
  230. package/dist/components/ic-search-bar.js +1 -1
  231. package/dist/components/ic-section-container2.js +2 -2
  232. package/dist/components/ic-select.js +21 -13
  233. package/dist/components/ic-select.js.map +1 -1
  234. package/dist/components/ic-side-navigation.js +6 -6
  235. package/dist/components/ic-side-navigation.js.map +1 -1
  236. package/dist/components/ic-skeleton.js +2 -2
  237. package/dist/components/ic-skeleton.js.map +1 -1
  238. package/dist/components/ic-skip-link.js +2 -2
  239. package/dist/components/ic-status-tag.js +2 -2
  240. package/dist/components/ic-step.js +14 -14
  241. package/dist/components/ic-stepper.js +2 -2
  242. package/dist/components/ic-switch.js +5 -5
  243. package/dist/components/ic-tab-context.js +1 -1
  244. package/dist/components/ic-tab-group.js +2 -2
  245. package/dist/components/ic-tab-panel.js +2 -2
  246. package/dist/components/ic-tab.js +2 -2
  247. package/dist/components/ic-text-field.js +13 -8
  248. package/dist/components/ic-text-field.js.map +1 -1
  249. package/dist/components/ic-theme.js +2 -2
  250. package/dist/components/ic-toast-region.js +1 -1
  251. package/dist/components/ic-toast.js +8 -5
  252. package/dist/components/ic-toast.js.map +1 -1
  253. package/dist/components/ic-toggle-button-group.js +7 -3
  254. package/dist/components/ic-toggle-button-group.js.map +1 -1
  255. package/dist/components/ic-toggle-button.js +58 -45
  256. package/dist/components/ic-toggle-button.js.map +1 -1
  257. package/dist/components/ic-tooltip2.js +3 -3
  258. package/dist/components/ic-tooltip2.js.map +1 -1
  259. package/dist/components/ic-top-navigation.js +5 -5
  260. package/dist/components/ic-typography2.js +2 -2
  261. package/dist/core/core.css +25 -10
  262. package/dist/core/core.esm.js +1 -1
  263. package/dist/core/core.esm.js.map +1 -1
  264. package/dist/core/icds-table-style.css +66 -0
  265. package/dist/core/{p-621b0770.entry.js → p-042cfc35.entry.js} +2 -2
  266. package/dist/core/{p-37d217b5.entry.js → p-04cb17d7.entry.js} +2 -2
  267. package/dist/core/p-06c950a3.entry.js +2 -0
  268. package/dist/core/p-06c950a3.entry.js.map +1 -0
  269. package/dist/core/{p-cc00cbce.entry.js → p-0c4ceed9.entry.js} +2 -2
  270. package/dist/core/{p-a97b8082.entry.js → p-11d8a504.entry.js} +3 -3
  271. package/dist/core/{p-813ad03c.entry.js → p-12c30491.entry.js} +2 -2
  272. package/dist/core/{p-33582352.entry.js → p-14d43f64.entry.js} +2 -2
  273. package/dist/core/{p-99793b64.entry.js → p-199c5ff6.entry.js} +2 -2
  274. package/dist/core/p-1ca4a5ed.entry.js +2 -0
  275. package/dist/core/p-1ca4a5ed.entry.js.map +1 -0
  276. package/dist/core/{p-71c86e71.entry.js → p-1f41818b.entry.js} +2 -2
  277. package/dist/core/{p-6f50d2e0.entry.js → p-2026f4fa.entry.js} +2 -2
  278. package/dist/core/p-30312243.entry.js +2 -0
  279. package/dist/core/p-30312243.entry.js.map +1 -0
  280. package/dist/core/{p-9cf6ccfd.entry.js → p-319e3d5b.entry.js} +2 -2
  281. package/dist/core/{p-675bb3e4.entry.js → p-33e35173.entry.js} +2 -2
  282. package/dist/core/p-34407b13.entry.js +2 -0
  283. package/dist/core/p-34407b13.entry.js.map +1 -0
  284. package/dist/core/p-355d0914.entry.js +2 -0
  285. package/dist/core/p-355d0914.entry.js.map +1 -0
  286. package/dist/core/{p-b0376079.entry.js → p-3680f22c.entry.js} +2 -2
  287. package/dist/core/{p-1423bd4a.entry.js → p-3785c740.entry.js} +2 -2
  288. package/dist/core/{p-8684efeb.entry.js → p-3a94849e.entry.js} +2 -2
  289. package/dist/core/p-3d23ce54.entry.js +2 -0
  290. package/dist/core/p-3d23ce54.entry.js.map +1 -0
  291. package/dist/core/{p-13e093d0.entry.js → p-411527a1.entry.js} +2 -2
  292. package/dist/core/{p-9f12b20c.entry.js → p-42d35fc4.entry.js} +2 -2
  293. package/dist/core/{p-e6dacbe2.entry.js → p-4bdeb62d.entry.js} +2 -2
  294. package/dist/core/{p-01e018cb.entry.js → p-4d3b219c.entry.js} +2 -2
  295. package/dist/core/{p-57721431.entry.js → p-5254a078.entry.js} +2 -2
  296. package/dist/core/{p-37daa8fe.entry.js → p-53740194.entry.js} +2 -2
  297. package/dist/core/p-601d4e3f.entry.js +2 -0
  298. package/dist/core/p-601d4e3f.entry.js.map +1 -0
  299. package/dist/core/p-62b9e7bf.entry.js +2 -0
  300. package/dist/core/p-62b9e7bf.entry.js.map +1 -0
  301. package/dist/core/p-6329ddcb.entry.js +2 -0
  302. package/dist/core/p-6329ddcb.entry.js.map +1 -0
  303. package/dist/core/{p-492fcb51.entry.js → p-67c3985d.entry.js} +2 -2
  304. package/dist/core/{p-19f9d292.entry.js → p-703f3de1.entry.js} +2 -2
  305. package/dist/core/{p-abd88929.entry.js → p-762ea31a.entry.js} +2 -2
  306. package/dist/core/p-762ea31a.entry.js.map +1 -0
  307. package/dist/core/p-77a6c3f7.entry.js +2 -0
  308. package/dist/core/p-77a6c3f7.entry.js.map +1 -0
  309. package/dist/core/{p-228bc12d.entry.js → p-7d0d85c4.entry.js} +2 -2
  310. package/dist/core/p-8abcc114.entry.js +2 -0
  311. package/dist/core/p-8abcc114.entry.js.map +1 -0
  312. package/dist/core/{p-6dbe70f1.entry.js → p-911b4aa4.entry.js} +2 -2
  313. package/dist/core/{p-9a8bcb78.entry.js → p-9674b63f.entry.js} +2 -2
  314. package/dist/core/{p-5fcfcfb6.entry.js → p-9ca147f3.entry.js} +2 -2
  315. package/dist/core/{p-8558b9b7.entry.js → p-a45de09d.entry.js} +2 -2
  316. package/dist/core/{p-c04e1fab.entry.js → p-a5415f6c.entry.js} +2 -2
  317. package/dist/core/{p-b57e59b7.js → p-a5658054.js} +2 -2
  318. package/dist/{cjs/helpers-478d1107.js.map → core/p-a5658054.js.map} +1 -1
  319. package/dist/core/{p-93479c36.entry.js → p-a7583faf.entry.js} +2 -2
  320. package/dist/core/{p-ea06792a.entry.js → p-a7f21494.entry.js} +2 -2
  321. package/dist/core/{p-05036675.entry.js → p-a8e4258f.entry.js} +2 -2
  322. package/dist/core/p-a8e4258f.entry.js.map +1 -0
  323. package/dist/core/{p-4747c39f.entry.js → p-adde6c66.entry.js} +2 -2
  324. package/dist/core/{p-96a6cff2.entry.js → p-ae11583f.entry.js} +2 -2
  325. package/dist/core/p-ae7dcbd5.entry.js +2 -0
  326. package/dist/core/p-ae7dcbd5.entry.js.map +1 -0
  327. package/dist/core/{p-514daffe.entry.js → p-b3cb1e35.entry.js} +2 -2
  328. package/dist/core/{p-27e67d45.entry.js → p-c397b33f.entry.js} +2 -2
  329. package/dist/core/{p-45097448.entry.js → p-c4ffcc64.entry.js} +2 -2
  330. package/dist/core/{p-511aa329.entry.js → p-cce398e1.entry.js} +2 -2
  331. package/dist/core/{p-54803e3b.entry.js → p-d3223b89.entry.js} +2 -2
  332. package/dist/core/{p-80317cd1.entry.js → p-e0423c7e.entry.js} +2 -2
  333. package/dist/core/{p-b9bdd9a9.entry.js → p-e7af1e2d.entry.js} +2 -2
  334. package/dist/core/{p-a06c1e4e.entry.js → p-eca43f7d.entry.js} +2 -2
  335. package/dist/core/{p-0ec76cff.entry.js → p-f247db14.entry.js} +2 -2
  336. package/dist/core/{p-de32a223.entry.js → p-f4e3bb5b.entry.js} +2 -2
  337. package/dist/core/{p-25bef09d.entry.js → p-f51c609d.entry.js} +2 -2
  338. package/dist/core/{p-c975cced.entry.js → p-f57729b8.entry.js} +2 -2
  339. package/dist/core/{p-95d3d1a7.entry.js → p-f6bb691a.entry.js} +2 -2
  340. package/dist/core/{p-2126d37b.entry.js → p-f7105cf9.entry.js} +2 -2
  341. package/dist/core/p-ffd0d9d1.entry.js +2 -0
  342. package/dist/core/p-ffd0d9d1.entry.js.map +1 -0
  343. package/dist/esm/core.js +1 -1
  344. package/dist/esm/{helpers-4ddac6ed.js → helpers-dcedb279.js} +5 -2
  345. package/dist/esm/helpers-dcedb279.js.map +1 -0
  346. package/dist/esm/ic-accordion-group.entry.js +1 -1
  347. package/dist/esm/ic-accordion.entry.js +1 -1
  348. package/dist/esm/ic-action-chip.entry.js +1 -1
  349. package/dist/esm/ic-alert.entry.js +4 -2
  350. package/dist/esm/ic-alert.entry.js.map +1 -1
  351. package/dist/esm/ic-back-to-top.entry.js +6 -5
  352. package/dist/esm/ic-back-to-top.entry.js.map +1 -1
  353. package/dist/esm/ic-badge.entry.js +3 -3
  354. package/dist/esm/ic-breadcrumb-group.entry.js +3 -3
  355. package/dist/esm/ic-breadcrumb.entry.js +5 -4
  356. package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
  357. package/dist/esm/ic-button_3.entry.js +43 -19
  358. package/dist/esm/ic-button_3.entry.js.map +1 -1
  359. package/dist/esm/ic-card-vertical.entry.js +5 -5
  360. package/dist/esm/ic-checkbox-group.entry.js +1 -1
  361. package/dist/esm/ic-checkbox.entry.js +32 -9
  362. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  363. package/dist/esm/ic-chip.entry.js +4 -4
  364. package/dist/esm/ic-data-row.entry.js +1 -1
  365. package/dist/esm/ic-dialog.entry.js +5 -4
  366. package/dist/esm/ic-dialog.entry.js.map +1 -1
  367. package/dist/esm/ic-divider.entry.js +3 -2
  368. package/dist/esm/ic-divider.entry.js.map +1 -1
  369. package/dist/esm/ic-empty-state.entry.js +3 -3
  370. package/dist/esm/ic-footer-link-group.entry.js +1 -1
  371. package/dist/esm/ic-footer-link.entry.js +3 -3
  372. package/dist/esm/ic-footer.entry.js +1 -1
  373. package/dist/esm/ic-hero.entry.js +13 -7
  374. package/dist/esm/ic-hero.entry.js.map +1 -1
  375. package/dist/esm/ic-horizontal-scroll.entry.js +6 -6
  376. package/dist/esm/ic-input-component-container_3.entry.js +9 -9
  377. package/dist/esm/ic-input-label_2.entry.js +6 -6
  378. package/dist/esm/ic-layout-grid-item.entry.js +2 -2
  379. package/dist/esm/ic-layout-grid.entry.js +2 -2
  380. package/dist/esm/ic-link.entry.js +2 -2
  381. package/dist/esm/ic-menu-group.entry.js +2 -2
  382. package/dist/esm/ic-menu-item.entry.js +3 -2
  383. package/dist/esm/ic-menu-item.entry.js.map +1 -1
  384. package/dist/esm/ic-navigation-button.entry.js +3 -3
  385. package/dist/esm/ic-navigation-group.entry.js +2 -2
  386. package/dist/esm/ic-navigation-item.entry.js +3 -3
  387. package/dist/esm/ic-navigation-menu.entry.js +5 -5
  388. package/dist/esm/ic-page-header.entry.js +7 -7
  389. package/dist/esm/ic-pagination-item.entry.js +2 -2
  390. package/dist/esm/ic-pagination.entry.js +5 -5
  391. package/dist/esm/ic-popover-menu.entry.js +5 -5
  392. package/dist/esm/ic-radio-group.entry.js +1 -1
  393. package/dist/esm/ic-radio-option.entry.js +1 -1
  394. package/dist/esm/ic-search-bar.entry.js +1 -1
  395. package/dist/esm/ic-section-container.entry.js +2 -2
  396. package/dist/esm/ic-select.entry.js +21 -13
  397. package/dist/esm/ic-select.entry.js.map +1 -1
  398. package/dist/esm/ic-side-navigation.entry.js +6 -6
  399. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  400. package/dist/esm/ic-skeleton.entry.js +2 -2
  401. package/dist/esm/ic-skip-link.entry.js +2 -2
  402. package/dist/esm/ic-status-tag.entry.js +3 -3
  403. package/dist/esm/ic-step.entry.js +14 -14
  404. package/dist/esm/ic-stepper.entry.js +3 -3
  405. package/dist/esm/ic-switch.entry.js +5 -5
  406. package/dist/esm/ic-tab-context.entry.js +1 -1
  407. package/dist/esm/ic-tab-group.entry.js +3 -3
  408. package/dist/esm/ic-tab-panel.entry.js +2 -2
  409. package/dist/esm/ic-tab.entry.js +3 -3
  410. package/dist/esm/ic-text-field.entry.js +13 -8
  411. package/dist/esm/ic-text-field.entry.js.map +1 -1
  412. package/dist/esm/ic-theme.entry.js +2 -2
  413. package/dist/esm/ic-toast-region.entry.js +1 -1
  414. package/dist/esm/ic-toast.entry.js +8 -5
  415. package/dist/esm/ic-toast.entry.js.map +1 -1
  416. package/dist/esm/ic-toggle-button-group.entry.js +8 -4
  417. package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
  418. package/dist/esm/ic-toggle-button.entry.js +58 -45
  419. package/dist/esm/ic-toggle-button.entry.js.map +1 -1
  420. package/dist/esm/ic-top-navigation.entry.js +5 -5
  421. package/dist/esm/ic-typography.entry.js +3 -3
  422. package/dist/esm/loader.js +1 -1
  423. package/dist/types/components/ic-button/ic-button.d.ts +8 -2
  424. package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +5 -0
  425. package/dist/types/components/ic-hero/ic-hero.d.ts +5 -1
  426. package/dist/types/components/ic-text-field/ic-text-field.d.ts +2 -4
  427. package/dist/types/components/ic-text-field/ic-text-field.types.d.ts +5 -0
  428. package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +1 -0
  429. package/dist/types/components.d.ts +12 -4
  430. package/dist/types/utils/helpers.d.ts +1 -0
  431. package/hydrate/index.js +324 -226
  432. package/hydrate/index.mjs +324 -226
  433. package/package.json +2 -2
  434. package/vscode-data.json +15 -0
  435. package/dist/core/p-0123dde7.entry.js +0 -2
  436. package/dist/core/p-0123dde7.entry.js.map +0 -1
  437. package/dist/core/p-02af2b59.entry.js +0 -2
  438. package/dist/core/p-02af2b59.entry.js.map +0 -1
  439. package/dist/core/p-05036675.entry.js.map +0 -1
  440. package/dist/core/p-0c36ce84.entry.js +0 -2
  441. package/dist/core/p-0c36ce84.entry.js.map +0 -1
  442. package/dist/core/p-2800fc30.entry.js +0 -2
  443. package/dist/core/p-2800fc30.entry.js.map +0 -1
  444. package/dist/core/p-45f743e4.entry.js +0 -2
  445. package/dist/core/p-45f743e4.entry.js.map +0 -1
  446. package/dist/core/p-6058d4c9.entry.js +0 -2
  447. package/dist/core/p-6058d4c9.entry.js.map +0 -1
  448. package/dist/core/p-6e139e6e.entry.js +0 -2
  449. package/dist/core/p-6e139e6e.entry.js.map +0 -1
  450. package/dist/core/p-8b99a806.entry.js +0 -2
  451. package/dist/core/p-8b99a806.entry.js.map +0 -1
  452. package/dist/core/p-a08c360b.entry.js +0 -2
  453. package/dist/core/p-a08c360b.entry.js.map +0 -1
  454. package/dist/core/p-a1857d24.entry.js +0 -2
  455. package/dist/core/p-a1857d24.entry.js.map +0 -1
  456. package/dist/core/p-abd88929.entry.js.map +0 -1
  457. package/dist/core/p-b57e59b7.js.map +0 -1
  458. package/dist/core/p-eb0e7153.entry.js +0 -2
  459. package/dist/core/p-eb0e7153.entry.js.map +0 -1
  460. package/dist/core/p-f609ca37.entry.js +0 -2
  461. package/dist/core/p-f609ca37.entry.js.map +0 -1
  462. package/dist/core/p-fb734a59.entry.js +0 -2
  463. package/dist/core/p-fb734a59.entry.js.map +0 -1
  464. package/dist/esm/helpers-4ddac6ed.js.map +0 -1
  465. /package/dist/core/{p-621b0770.entry.js.map → p-042cfc35.entry.js.map} +0 -0
  466. /package/dist/core/{p-37d217b5.entry.js.map → p-04cb17d7.entry.js.map} +0 -0
  467. /package/dist/core/{p-cc00cbce.entry.js.map → p-0c4ceed9.entry.js.map} +0 -0
  468. /package/dist/core/{p-a97b8082.entry.js.map → p-11d8a504.entry.js.map} +0 -0
  469. /package/dist/core/{p-813ad03c.entry.js.map → p-12c30491.entry.js.map} +0 -0
  470. /package/dist/core/{p-33582352.entry.js.map → p-14d43f64.entry.js.map} +0 -0
  471. /package/dist/core/{p-99793b64.entry.js.map → p-199c5ff6.entry.js.map} +0 -0
  472. /package/dist/core/{p-71c86e71.entry.js.map → p-1f41818b.entry.js.map} +0 -0
  473. /package/dist/core/{p-6f50d2e0.entry.js.map → p-2026f4fa.entry.js.map} +0 -0
  474. /package/dist/core/{p-9cf6ccfd.entry.js.map → p-319e3d5b.entry.js.map} +0 -0
  475. /package/dist/core/{p-675bb3e4.entry.js.map → p-33e35173.entry.js.map} +0 -0
  476. /package/dist/core/{p-b0376079.entry.js.map → p-3680f22c.entry.js.map} +0 -0
  477. /package/dist/core/{p-1423bd4a.entry.js.map → p-3785c740.entry.js.map} +0 -0
  478. /package/dist/core/{p-8684efeb.entry.js.map → p-3a94849e.entry.js.map} +0 -0
  479. /package/dist/core/{p-13e093d0.entry.js.map → p-411527a1.entry.js.map} +0 -0
  480. /package/dist/core/{p-9f12b20c.entry.js.map → p-42d35fc4.entry.js.map} +0 -0
  481. /package/dist/core/{p-e6dacbe2.entry.js.map → p-4bdeb62d.entry.js.map} +0 -0
  482. /package/dist/core/{p-01e018cb.entry.js.map → p-4d3b219c.entry.js.map} +0 -0
  483. /package/dist/core/{p-57721431.entry.js.map → p-5254a078.entry.js.map} +0 -0
  484. /package/dist/core/{p-37daa8fe.entry.js.map → p-53740194.entry.js.map} +0 -0
  485. /package/dist/core/{p-492fcb51.entry.js.map → p-67c3985d.entry.js.map} +0 -0
  486. /package/dist/core/{p-19f9d292.entry.js.map → p-703f3de1.entry.js.map} +0 -0
  487. /package/dist/core/{p-228bc12d.entry.js.map → p-7d0d85c4.entry.js.map} +0 -0
  488. /package/dist/core/{p-6dbe70f1.entry.js.map → p-911b4aa4.entry.js.map} +0 -0
  489. /package/dist/core/{p-9a8bcb78.entry.js.map → p-9674b63f.entry.js.map} +0 -0
  490. /package/dist/core/{p-5fcfcfb6.entry.js.map → p-9ca147f3.entry.js.map} +0 -0
  491. /package/dist/core/{p-8558b9b7.entry.js.map → p-a45de09d.entry.js.map} +0 -0
  492. /package/dist/core/{p-c04e1fab.entry.js.map → p-a5415f6c.entry.js.map} +0 -0
  493. /package/dist/core/{p-93479c36.entry.js.map → p-a7583faf.entry.js.map} +0 -0
  494. /package/dist/core/{p-ea06792a.entry.js.map → p-a7f21494.entry.js.map} +0 -0
  495. /package/dist/core/{p-4747c39f.entry.js.map → p-adde6c66.entry.js.map} +0 -0
  496. /package/dist/core/{p-96a6cff2.entry.js.map → p-ae11583f.entry.js.map} +0 -0
  497. /package/dist/core/{p-514daffe.entry.js.map → p-b3cb1e35.entry.js.map} +0 -0
  498. /package/dist/core/{p-27e67d45.entry.js.map → p-c397b33f.entry.js.map} +0 -0
  499. /package/dist/core/{p-45097448.entry.js.map → p-c4ffcc64.entry.js.map} +0 -0
  500. /package/dist/core/{p-511aa329.entry.js.map → p-cce398e1.entry.js.map} +0 -0
  501. /package/dist/core/{p-54803e3b.entry.js.map → p-d3223b89.entry.js.map} +0 -0
  502. /package/dist/core/{p-80317cd1.entry.js.map → p-e0423c7e.entry.js.map} +0 -0
  503. /package/dist/core/{p-b9bdd9a9.entry.js.map → p-e7af1e2d.entry.js.map} +0 -0
  504. /package/dist/core/{p-a06c1e4e.entry.js.map → p-eca43f7d.entry.js.map} +0 -0
  505. /package/dist/core/{p-0ec76cff.entry.js.map → p-f247db14.entry.js.map} +0 -0
  506. /package/dist/core/{p-de32a223.entry.js.map → p-f4e3bb5b.entry.js.map} +0 -0
  507. /package/dist/core/{p-25bef09d.entry.js.map → p-f51c609d.entry.js.map} +0 -0
  508. /package/dist/core/{p-c975cced.entry.js.map → p-f57729b8.entry.js.map} +0 -0
  509. /package/dist/core/{p-95d3d1a7.entry.js.map → p-f6bb691a.entry.js.map} +0 -0
  510. /package/dist/core/{p-2126d37b.entry.js.map → p-f7105cf9.entry.js.map} +0 -0
package/dist/components/ic-toggle-button-group.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-hide-outline) {\n --ic-toggle-button-unselected-border: transparent;\n --ic-toggle-button-unselected-border-disabled: transparent;\n --ic-toggle-button-unselected-border-monochrome: transparent;\n --ic-toggle-button-unselected-border-disabled-monochrome: transparent;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `true`, the toggle button group will display with an outline.\n */\n @Prop() outline = true;\n @Watch(\"outline\")\n watchOutlineHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.outline = this.outline;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.loading || this.disabled) return;\n\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const {\n accessibleLabel,\n disabled,\n fullWidth,\n loading,\n monochrome,\n outline,\n theme,\n } = this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n \"ic-toggle-button-group-hide-outline\": !outline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-hide-outline) {\n --ic-toggle-button-unselected-border: transparent;\n --ic-toggle-button-unselected-border-disabled: transparent;\n --ic-toggle-button-unselected-border-monochrome: transparent;\n --ic-toggle-button-unselected-border-disabled-monochrome: transparent;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `true`, the toggle button group will display with an outline.\n */\n @Prop() outline = true;\n @Watch(\"outline\")\n watchOutlineHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.outline = this.outline;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.disabled) {\n (target as HTMLElement)?.blur();\n return;\n }\n if (this.loading) return;\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const {\n accessibleLabel,\n disabled,\n fullWidth,\n loading,\n monochrome,\n outline,\n theme,\n } = this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={disabled ? -1 : 0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n \"ic-toggle-button-group-hide-outline\": !outline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/ic-toggle-button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
- import { r as removeDisabledFalse, U as isSlottedInGroup, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
2
+ import { o as onComponentRequiredPropUndefined, V as isSlottedInGroup, r as removeDisabledFalse, i as isSlotUsed } from './helpers.js';
3
3
  import { d as defineCustomElement$5 } from './ic-button2.js';
4
4
  import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
5
5
  import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -81,50 +81,10 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
81
81
  };
82
82
  }
83
83
  watchDisabledHandler() {
84
- removeDisabledFalse(this.disabled, this.el);
84
+ this.syncPropsFromToggleButtonGroup();
85
85
  }
86
86
  componentWillLoad() {
87
- var _a;
88
- removeDisabledFalse(this.disabled, this.el);
89
- if (!isSlottedInGroup(this.el))
90
- return;
91
- const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
92
- if (!parentAttributes)
93
- return;
94
- for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {
95
- const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);
96
- if (!attribute)
97
- continue;
98
- switch (attribute.name) {
99
- case TRACKED_ATTRIBUTES[0]:
100
- this.loading = attribute.value !== "false";
101
- break;
102
- case TRACKED_ATTRIBUTES[1]:
103
- this.disabled = attribute.value !== "false";
104
- break;
105
- case TRACKED_ATTRIBUTES[2]:
106
- this.fullWidth = attribute.value !== "false";
107
- break;
108
- case TRACKED_ATTRIBUTES[3]:
109
- this.iconPlacement = attribute.value;
110
- break;
111
- case TRACKED_ATTRIBUTES[4]:
112
- this.variant = attribute.value;
113
- break;
114
- case TRACKED_ATTRIBUTES[5]:
115
- this.size = attribute.value;
116
- break;
117
- case TRACKED_ATTRIBUTES[6]:
118
- this.theme = attribute.value;
119
- break;
120
- case TRACKED_ATTRIBUTES[7]:
121
- this.monochrome = attribute.value !== "false";
122
- break;
123
- case TRACKED_ATTRIBUTES[8]:
124
- this.outline = attribute.value !== "false";
125
- break;
126
- }
127
- }
87
+ this.syncPropsFromToggleButtonGroup();
128
88
  }
129
89
  componentDidLoad() {
130
90
  onComponentRequiredPropUndefined([
@@ -142,10 +102,63 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
142
102
  this.checked = !this.checked;
143
103
  }
144
104
  }
105
+ syncPropsFromToggleButtonGroup() {
106
+ var _a;
107
+ let groupDisabled = false;
108
+ if (isSlottedInGroup(this.el)) {
109
+ const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
110
+ if (parentAttributes) {
111
+ const groupDisabledAttr = parentAttributes.getNamedItem("disabled");
112
+ if (groupDisabledAttr && groupDisabledAttr.value !== "false") {
113
+ groupDisabled = true;
114
+ }
115
+ for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {
116
+ const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);
117
+ if (!attribute)
118
+ continue;
119
+ switch (attribute.name) {
120
+ case TRACKED_ATTRIBUTES[0]:
121
+ this.loading = attribute.value !== "false";
122
+ break;
123
+ case TRACKED_ATTRIBUTES[1]:
124
+ this.disabled = groupDisabled
125
+ ? true
126
+ : attribute.value !== "false";
127
+ break;
128
+ case TRACKED_ATTRIBUTES[2]:
129
+ this.fullWidth = attribute.value !== "false";
130
+ break;
131
+ case TRACKED_ATTRIBUTES[3]:
132
+ this.iconPlacement = attribute.value;
133
+ break;
134
+ case TRACKED_ATTRIBUTES[4]:
135
+ this.variant = attribute.value;
136
+ break;
137
+ case TRACKED_ATTRIBUTES[5]:
138
+ this.size = attribute.value;
139
+ break;
140
+ case TRACKED_ATTRIBUTES[6]:
141
+ this.theme = attribute.value;
142
+ break;
143
+ case TRACKED_ATTRIBUTES[7]:
144
+ this.monochrome = attribute.value !== "false";
145
+ break;
146
+ case TRACKED_ATTRIBUTES[8]:
147
+ this.outline = attribute.value !== "false";
148
+ break;
149
+ }
150
+ }
151
+ if (groupDisabled) {
152
+ this.disabled = true;
153
+ }
154
+ }
155
+ }
156
+ removeDisabledFalse(this.disabled, this.el);
157
+ }
145
158
  render() {
146
159
  const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
147
160
  const iconVariant = variant === "icon";
148
- return (h(Host, { key: '996e234f8829d4506354673ec53eb5a88b243caf', class: {
161
+ return (h(Host, { key: '74d882ab9a0ea86b7f1b1eaa74a40ee32fd44800', class: {
149
162
  "ic-toggle-button-checked": checked,
150
163
  "ic-toggle-button-disabled": disabled,
151
164
  "ic-toggle-button-icon": iconVariant,
@@ -155,7 +168,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
155
168
  "ic-toggle-button-hide-outline": !outline,
156
169
  [`ic-toggle-button-${size}`]: true,
157
170
  [`ic-theme-${theme}`]: theme !== "inherit",
158
- }, onFocus: this.handleFocus }, h("ic-button", { key: '6f1304c7a67b25ab45fcc83e485589db447e8ae8', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'dde5e4570100dd127b39742e14ef6f68b8295b63' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '672197af20d7fa1d2f871f6175d2e01e97855a43', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '52e533530bb554faa55b950b992c4459d8f553e7', name: "badge", slot: "badge" })))));
171
+ }, onFocus: this.handleFocus }, h("ic-button", { key: '067df9f2c2b9a6f6a21d1a70ddac41b7ae1c9f13', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'e6b0d906bda4695ab9e64da852a99da851001974' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '70b5c83cca0a126ab9eafa9d84327c83e6936ce8', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c43ead3695a0f7a019b3eb0aa4b396f85c0e96eb', name: "badge", slot: "badge" })))));
159
172
  }
160
173
  static get delegatesFocus() { return true; }
161
174
  get el() { return this; }
package/dist/components/ic-toggle-button.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n --toggle-button-border: var(--ic-toggle-button-unselected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-hover\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-pressed\n );\n}\n\n:host(:not(.expand-toggle-group-child)) {\n display: inline-block;\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)) {\n width: 100%;\n}\n\n:host(.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed\n );\n --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-hover: var(\n --ic-toggle-button-unselected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n --toggle-button-border-hover: var(\n --ic-toggle-button-selected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-selected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-selected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-unselected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-disabled-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-selected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-selected-text-disabled-monochrome\n );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n}\n\n:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))\n ::part(button) {\n min-height: inherit;\n height: auto;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: none;\n color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n color: var(--toggle-button-text-colour-hover);\n background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n color: var(--toggle-button-text-colour-active);\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host ::part(button):focus {\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host ::part(button):hover:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host ::part(button):active:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n color: var(--toggle-button-text-colour);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:hover) {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:active) {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled) {\n border: var(--ic-border-width) dashed var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-border-focus),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n background-color: var(\n --ic-toggle-button-unselected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):hover {\n background-color: var(\n --ic-toggle-button-selected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active {\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button) {\n background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-hide-outline) {\n --toggle-button-border: transparent !important;\n --toggle-button-border-hover: transparent !important;\n --toggle-button-border-active: transparent !important;\n}\n\n:host(.ic-toggle-button-hide-outline) ::part(button):focus {\n border: none;\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline)\n ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n :host(.ic-toggle-button-checked) ::part(button),\n :host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n background-color: GrayText;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(button):hover {\n --loading-button-background: Highlight;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n IcSizes,\n IcThemeMode,\n IcIconPlacementOptions,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\nconst TRACKED_ATTRIBUTES = [\n \"loading\",\n \"disabled\",\n \"full-width\",\n \"icon-placement\",\n \"variant\",\n \"size\",\n \"theme\",\n \"monochrome\",\n \"outline\",\n];\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n @Element() el: HTMLIcToggleButtonElement;\n\n /**\n * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * If `true`, the toggle button will be in a checked state.\n */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /**\n * If `true`, the toggle button will be in disabled state.\n */\n @Prop({ mutable: true }) disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button will fill the width of the container.\n */\n @Prop({ mutable: true }) fullWidth = false;\n\n /**\n * The placement of the icon in relation to the toggle button label.\n */\n @Prop() iconPlacement: IcIconPlacementOptions = \"left\";\n\n /**\n * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the toggle button will be in loading state.\n */\n @Prop({ mutable: true }) loading = false;\n\n /**\n * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n */\n @Prop({ mutable: true }) monochrome = false;\n\n /**\n * If `true`, the toggle button will display with an outline.\n */\n @Prop({ mutable: true }) outline = true;\n\n /**\n * The size of the toggle button to be displayed.\n */\n @Prop({ mutable: true }) size: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n /**\n * The position of the tooltip in relation to the toggle button.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true, mutable: true }) variant: \"default\" | \"icon\" =\n \"default\";\n\n /**\n * Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (!isSlottedInGroup(this.el)) return;\n\n const parentAttributes = this.el.parentElement?.attributes;\n if (!parentAttributes) return;\n\n for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {\n const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);\n if (!attribute) continue;\n\n switch (attribute.name) {\n case TRACKED_ATTRIBUTES[0]:\n this.loading = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[1]:\n this.disabled = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[2]:\n this.fullWidth = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[3]:\n this.iconPlacement = attribute.value as IcIconPlacementOptions;\n break;\n case TRACKED_ATTRIBUTES[4]:\n this.variant = attribute.value as \"default\" | \"icon\";\n break;\n case TRACKED_ATTRIBUTES[5]:\n this.size = attribute.value as IcSizes;\n break;\n case TRACKED_ATTRIBUTES[6]:\n this.theme = attribute.value as IcThemeMode;\n break;\n case TRACKED_ATTRIBUTES[7]:\n this.monochrome = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[8]:\n this.outline = attribute.value !== \"false\";\n break;\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.checked = !this.checked;\n }\n }\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = () => {\n if (!this.loading && !this.disabled) {\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n };\n\n render() {\n const {\n accessibleLabel,\n checked,\n disabled,\n fullWidth,\n iconPlacement,\n monochrome,\n label,\n loading,\n outline,\n size,\n theme,\n tooltipPlacement,\n variant,\n } = this;\n\n const iconVariant = variant === \"icon\";\n\n return (\n <Host\n class={{\n \"ic-toggle-button-checked\": checked,\n \"ic-toggle-button-disabled\": disabled,\n \"ic-toggle-button-icon\": iconVariant,\n \"ic-toggle-button-loading\": loading,\n \"ic-toggle-button-monochrome\": monochrome,\n \"ic-toggle-button-full-width\": fullWidth,\n \"ic-toggle-button-hide-outline\": !outline,\n [`ic-toggle-button-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={`${checked}`}\n variant={iconVariant ? \"icon-tertiary\" : \"secondary\"}\n onClick={this.handleClick}\n title={accessibleLabel}\n aria-label={`${accessibleLabel ? accessibleLabel : label}, ${\n checked ? \"ticked\" : \"unticked\"\n }`}\n disabled={disabled}\n size={size}\n fullWidth={fullWidth}\n loading={loading}\n tooltipPlacement={tooltipPlacement}\n >\n {!iconVariant && label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot name=\"icon\" slot={`${iconPlacement}-icon`}></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n --toggle-button-border: var(--ic-toggle-button-unselected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-hover\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-pressed\n );\n}\n\n:host(:not(.expand-toggle-group-child)) {\n display: inline-block;\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)) {\n width: 100%;\n}\n\n:host(.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed\n );\n --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-hover: var(\n --ic-toggle-button-unselected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n --toggle-button-border-hover: var(\n --ic-toggle-button-selected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-selected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-selected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-unselected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-disabled-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-selected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-selected-text-disabled-monochrome\n );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n}\n\n:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))\n ::part(button) {\n min-height: inherit;\n height: auto;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: none;\n color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n color: var(--toggle-button-text-colour-hover);\n background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n color: var(--toggle-button-text-colour-active);\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host ::part(button):focus {\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host ::part(button):hover:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host ::part(button):active:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n color: var(--toggle-button-text-colour);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:hover) {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:active) {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled) {\n border: var(--ic-border-width) dashed var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-border-focus),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n background-color: var(\n --ic-toggle-button-unselected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):hover {\n background-color: var(\n --ic-toggle-button-selected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active {\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button) {\n background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-hide-outline) {\n --toggle-button-border: transparent !important;\n --toggle-button-border-hover: transparent !important;\n --toggle-button-border-active: transparent !important;\n}\n\n:host(.ic-toggle-button-hide-outline) ::part(button):focus {\n border: none;\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline)\n ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n :host(.ic-toggle-button-checked) ::part(button),\n :host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n background-color: GrayText;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(button):hover {\n --loading-button-background: Highlight;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n IcSizes,\n IcThemeMode,\n IcIconPlacementOptions,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\nconst TRACKED_ATTRIBUTES = [\n \"loading\",\n \"disabled\",\n \"full-width\",\n \"icon-placement\",\n \"variant\",\n \"size\",\n \"theme\",\n \"monochrome\",\n \"outline\",\n];\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n @Element() el: HTMLIcToggleButtonElement;\n\n /**\n * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * If `true`, the toggle button will be in a checked state.\n */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /**\n * If `true`, the toggle button will be in disabled state.\n */\n @Prop({ mutable: true }) disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.syncPropsFromToggleButtonGroup();\n }\n\n /**\n * If `true`, the toggle button will fill the width of the container.\n */\n @Prop({ mutable: true }) fullWidth = false;\n\n /**\n * The placement of the icon in relation to the toggle button label.\n */\n @Prop() iconPlacement: IcIconPlacementOptions = \"left\";\n\n /**\n * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the toggle button will be in loading state.\n */\n @Prop({ mutable: true }) loading = false;\n\n /**\n * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n */\n @Prop({ mutable: true }) monochrome = false;\n\n /**\n * If `true`, the toggle button will display with an outline.\n */\n @Prop({ mutable: true }) outline = true;\n\n /**\n * The size of the toggle button to be displayed.\n */\n @Prop({ mutable: true }) size: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n /**\n * The position of the tooltip in relation to the toggle button.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true, mutable: true }) variant: \"default\" | \"icon\" =\n \"default\";\n\n /**\n * Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n this.syncPropsFromToggleButtonGroup();\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.checked = !this.checked;\n }\n }\n\n private syncPropsFromToggleButtonGroup(): void {\n let groupDisabled = false;\n if (isSlottedInGroup(this.el)) {\n const parentAttributes = this.el.parentElement?.attributes;\n if (parentAttributes) {\n const groupDisabledAttr = parentAttributes.getNamedItem(\"disabled\");\n if (groupDisabledAttr && groupDisabledAttr.value !== \"false\") {\n groupDisabled = true;\n }\n for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {\n const attribute = parentAttributes.getNamedItem(\n TRACKED_ATTRIBUTES[i]\n );\n if (!attribute) continue;\n switch (attribute.name) {\n case TRACKED_ATTRIBUTES[0]:\n this.loading = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[1]:\n this.disabled = groupDisabled\n ? true\n : attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[2]:\n this.fullWidth = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[3]:\n this.iconPlacement = attribute.value as IcIconPlacementOptions;\n break;\n case TRACKED_ATTRIBUTES[4]:\n this.variant = attribute.value as \"default\" | \"icon\";\n break;\n case TRACKED_ATTRIBUTES[5]:\n this.size = attribute.value as IcSizes;\n break;\n case TRACKED_ATTRIBUTES[6]:\n this.theme = attribute.value as IcThemeMode;\n break;\n case TRACKED_ATTRIBUTES[7]:\n this.monochrome = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[8]:\n this.outline = attribute.value !== \"false\";\n break;\n }\n }\n if (groupDisabled) {\n this.disabled = true;\n }\n }\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = () => {\n if (!this.loading && !this.disabled) {\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n };\n\n render() {\n const {\n accessibleLabel,\n checked,\n disabled,\n fullWidth,\n iconPlacement,\n monochrome,\n label,\n loading,\n outline,\n size,\n theme,\n tooltipPlacement,\n variant,\n } = this;\n\n const iconVariant = variant === \"icon\";\n\n return (\n <Host\n class={{\n \"ic-toggle-button-checked\": checked,\n \"ic-toggle-button-disabled\": disabled,\n \"ic-toggle-button-icon\": iconVariant,\n \"ic-toggle-button-loading\": loading,\n \"ic-toggle-button-monochrome\": monochrome,\n \"ic-toggle-button-full-width\": fullWidth,\n \"ic-toggle-button-hide-outline\": !outline,\n [`ic-toggle-button-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={`${checked}`}\n variant={iconVariant ? \"icon-tertiary\" : \"secondary\"}\n onClick={this.handleClick}\n title={accessibleLabel}\n aria-label={`${accessibleLabel ? accessibleLabel : label}, ${\n checked ? \"ticked\" : \"unticked\"\n }`}\n disabled={disabled}\n size={size}\n fullWidth={fullWidth}\n loading={loading}\n tooltipPlacement={tooltipPlacement}\n >\n {!iconVariant && label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot name=\"icon\" slot={`${iconPlacement}-icon`}></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/ic-tooltip2.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
2
- import { o as onComponentRequiredPropUndefined } from './helpers.js';
2
+ import { o as onComponentRequiredPropUndefined, e as isSafari } from './helpers.js';
3
3
  import { d as defineCustomElement$1 } from './ic-typography2.js';
4
4
 
5
5
  var top = 'top';
@@ -2011,10 +2011,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
2011
2011
  }
2012
2012
  render() {
2013
2013
  const { label, maxLines, silent, theme } = this;
2014
- return (h(Host, { key: '9e66710981ac51e4fae8ff9e6b8d30eb44870c3b', class: {
2014
+ return (h(Host, { key: 'c016954601c1f2ee45f8b64f396c405676fffadd', class: {
2015
2015
  "ic-tooltip": true,
2016
2016
  [`ic-theme-${theme}`]: theme !== "inherit",
2017
- } }, h("div", { key: 'f0b962933c6c88872a4cd8661348de663a40ecc4', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '8935a9eaa6be2f05cf71a95b53d9b06e1cf2b080', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'b433ac73eab9462e32a14710d7f29ee78d515f15', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: 'e9d8e149871c83c45c87d6418b86e7a901e10ae1' })));
2017
+ }, "aria-label": isSafari && label }, h("div", { key: 'e18915501176e9a36ab957a20968cc82f9c95403', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '50f11ad42d55d9c7598176d6169a3c82b5939b71', maxLines: maxLines, variant: "caption" }, label), h("div", { key: '47a01a05045f34a62e2c1724b60ce7f26ab7a086', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '0b850d553a3b7fd97776c419d76517a33e442d97' })));
2018
2018
  }
2019
2019
  get el() { return this; }
2020
2020
  static get watchers() { return {