@ukic/web-components 3.14.0 → 3.16.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 (414) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/ic-button_3.cjs.entry.js +5 -5
  3. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ic-checkbox-group.cjs.entry.js +2 -2
  5. package/dist/cjs/ic-checkbox.cjs.entry.js +31 -8
  6. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ic-data-list.cjs.entry.js +2 -2
  8. package/dist/cjs/ic-data-list.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ic-data-row.cjs.entry.js +2 -2
  10. package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
  12. package/dist/cjs/ic-empty-state.cjs.entry.js +2 -2
  13. package/dist/cjs/ic-footer-link.cjs.entry.js +2 -2
  14. package/dist/cjs/ic-footer.cjs.entry.js +9 -5
  15. package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-hero.cjs.entry.js +11 -6
  17. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  18. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +5 -5
  19. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +10 -10
  20. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ic-input-label_2.cjs.entry.js +6 -6
  22. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ic-layout-grid-item.cjs.entry.js +2 -2
  24. package/dist/cjs/ic-layout-grid.cjs.entry.js +2 -2
  25. package/dist/cjs/ic-link.cjs.entry.js +1 -1
  26. package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
  27. package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -2
  28. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
  30. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ic-navigation-menu.cjs.entry.js +4 -4
  32. package/dist/cjs/ic-page-header.cjs.entry.js +6 -6
  33. package/dist/cjs/ic-pagination-item.cjs.entry.js +1 -1
  34. package/dist/cjs/ic-pagination.cjs.entry.js +4 -4
  35. package/dist/cjs/ic-popover-menu.cjs.entry.js +4 -4
  36. package/dist/cjs/ic-radio-group.cjs.entry.js +5 -5
  37. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  38. package/dist/cjs/ic-radio-option.cjs.entry.js +9 -6
  39. package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
  40. package/dist/cjs/ic-search-bar.cjs.entry.js +10 -10
  41. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  42. package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
  43. package/dist/cjs/ic-select.cjs.entry.js +7 -7
  44. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ic-side-navigation.cjs.entry.js +4 -4
  46. package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
  47. package/dist/cjs/ic-skip-link.cjs.entry.js +2 -2
  48. package/dist/cjs/ic-status-tag.cjs.entry.js +2 -2
  49. package/dist/cjs/ic-step.cjs.entry.js +13 -13
  50. package/dist/cjs/ic-stepper.cjs.entry.js +2 -2
  51. package/dist/cjs/ic-switch.cjs.entry.js +4 -4
  52. package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
  53. package/dist/cjs/ic-tab-group.cjs.entry.js +2 -2
  54. package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
  55. package/dist/cjs/ic-text-field.cjs.entry.js +6 -6
  56. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  57. package/dist/cjs/ic-theme.cjs.entry.js +1 -1
  58. package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
  59. package/dist/cjs/ic-toast.cjs.entry.js +14 -6
  60. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  61. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +2 -2
  62. package/dist/cjs/ic-toggle-button.cjs.entry.js +2 -2
  63. package/dist/cjs/loader.cjs.js +1 -1
  64. package/dist/collection/components/ic-button/ic-button.stories.js +3 -3
  65. package/dist/collection/components/ic-checkbox/ic-checkbox.css +11 -2
  66. package/dist/collection/components/ic-checkbox/ic-checkbox.js +31 -7
  67. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  68. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +2 -2
  69. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +68 -16
  70. package/dist/collection/components/ic-data-list/ic-data-list.css +1 -0
  71. package/dist/collection/components/ic-data-list/ic-data-list.js +2 -2
  72. package/dist/collection/components/ic-data-row/ic-data-row.css +2 -0
  73. package/dist/collection/components/ic-data-row/ic-data-row.js +2 -2
  74. package/dist/collection/components/ic-dialog/ic-dialog.js +1 -1
  75. package/dist/collection/components/ic-empty-state/ic-empty-state.js +2 -2
  76. package/dist/collection/components/ic-footer/ic-footer.js +29 -5
  77. package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
  78. package/dist/collection/components/ic-footer/ic-footer.stories.js +31 -0
  79. package/dist/collection/components/ic-footer-link/ic-footer-link.js +2 -2
  80. package/dist/collection/components/ic-hero/ic-hero.css +19 -0
  81. package/dist/collection/components/ic-hero/ic-hero.js +36 -5
  82. package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
  83. package/dist/collection/components/ic-hero/ic-hero.stories.js +15 -0
  84. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +5 -5
  85. package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +9 -0
  86. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +3 -3
  87. package/dist/collection/components/ic-input-container/ic-input-container.js +2 -2
  88. package/dist/collection/components/ic-input-label/ic-input-label.js +2 -2
  89. package/dist/collection/components/ic-input-validation/ic-input-validation.css +2 -1
  90. package/dist/collection/components/ic-input-validation/ic-input-validation.js +3 -3
  91. package/dist/collection/components/ic-layout-grid/ic-layout-grid.js +2 -2
  92. package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js +2 -2
  93. package/dist/collection/components/ic-link/ic-link.js +1 -1
  94. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +5 -5
  95. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js +17 -18
  96. package/dist/collection/components/ic-menu/ic-menu.css +8 -0
  97. package/dist/collection/components/ic-menu/ic-menu.js +3 -3
  98. package/dist/collection/components/ic-menu-group/ic-menu-group.js +1 -1
  99. package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +12 -0
  100. package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +1 -1
  101. package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +2 -7
  102. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +4 -4
  103. package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
  104. package/dist/collection/components/ic-pagination/ic-pagination.js +4 -4
  105. package/dist/collection/components/ic-pagination/ic-pagination.stories.js +3 -3
  106. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +1 -1
  107. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +4 -4
  108. package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js +7 -7
  109. package/dist/collection/components/ic-radio-group/ic-radio-group.css +6 -6
  110. package/dist/collection/components/ic-radio-group/ic-radio-group.js +4 -4
  111. package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js +12 -12
  112. package/dist/collection/components/ic-radio-option/ic-radio-option.css +60 -54
  113. package/dist/collection/components/ic-radio-option/ic-radio-option.js +9 -5
  114. package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
  115. package/dist/collection/components/ic-search-bar/ic-search-bar.css +8 -0
  116. package/dist/collection/components/ic-search-bar/ic-search-bar.js +9 -9
  117. package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js +19 -19
  118. package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
  119. package/dist/collection/components/ic-select/ic-select.css +1 -1
  120. package/dist/collection/components/ic-select/ic-select.js +6 -6
  121. package/dist/collection/components/ic-select/ic-select_(multi).stories.js +20 -20
  122. package/dist/collection/components/ic-select/ic-select_(searchable).stories.js +21 -21
  123. package/dist/collection/components/ic-select/ic-select_(single).stories.js +21 -5
  124. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +4 -4
  125. package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
  126. package/dist/collection/components/ic-skip-link/ic-skip-link.js +2 -2
  127. package/dist/collection/components/ic-status-tag/ic-status-tag.js +2 -2
  128. package/dist/collection/components/ic-step/ic-step.js +13 -13
  129. package/dist/collection/components/ic-stepper/ic-stepper.js +2 -2
  130. package/dist/collection/components/ic-stepper/ic-stepper.stories.js +16 -6
  131. package/dist/collection/components/ic-switch/ic-switch.js +4 -4
  132. package/dist/collection/components/ic-tab-context/ic-tab-context.js +1 -1
  133. package/dist/collection/components/ic-tab-context/ic-tabs.stories.js +1 -1
  134. package/dist/collection/components/ic-tab-group/ic-tab-group.js +2 -2
  135. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
  136. package/dist/collection/components/ic-text-field/ic-text-field.js +6 -6
  137. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  138. package/dist/collection/components/ic-text-field/ic-text-field.stories.js +32 -18
  139. package/dist/collection/components/ic-theme/ic-theme.js +1 -1
  140. package/dist/collection/components/ic-toast/ic-toast.css +26 -1
  141. package/dist/collection/components/ic-toast/ic-toast.js +39 -5
  142. package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
  143. package/dist/collection/components/ic-toast/ic-toast.stories.js +21 -9
  144. package/dist/collection/components/ic-toast-region/ic-toast-region.js +1 -1
  145. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +2 -2
  146. package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js +14 -14
  147. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +2 -2
  148. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.stories.js +7 -7
  149. package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +11 -11
  150. package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js +15 -15
  151. package/dist/collection/components/ic-typography/ic-typography.stories.js +1 -1
  152. package/dist/collection/patterns/top-nav-content-footer.stories.js +1 -1
  153. package/dist/components/ic-badge.js.map +1 -1
  154. package/dist/components/ic-checkbox-group.js +2 -2
  155. package/dist/components/ic-checkbox.js +31 -8
  156. package/dist/components/ic-checkbox.js.map +1 -1
  157. package/dist/components/ic-chip.js.map +1 -1
  158. package/dist/components/ic-classification-banner.js.map +1 -1
  159. package/dist/components/ic-data-list.js +2 -2
  160. package/dist/components/ic-data-list.js.map +1 -1
  161. package/dist/components/ic-data-row.js +2 -2
  162. package/dist/components/ic-data-row.js.map +1 -1
  163. package/dist/components/ic-dialog.js +1 -1
  164. package/dist/components/ic-empty-state.js +2 -2
  165. package/dist/components/ic-footer-link.js +2 -2
  166. package/dist/components/ic-footer.js +10 -5
  167. package/dist/components/ic-footer.js.map +1 -1
  168. package/dist/components/ic-hero.js +12 -6
  169. package/dist/components/ic-hero.js.map +1 -1
  170. package/dist/components/ic-horizontal-scroll2.js +5 -5
  171. package/dist/components/ic-input-component-container2.js +4 -4
  172. package/dist/components/ic-input-component-container2.js.map +1 -1
  173. package/dist/components/ic-input-container2.js +2 -2
  174. package/dist/components/ic-input-label2.js +2 -2
  175. package/dist/components/ic-input-validation2.js +4 -4
  176. package/dist/components/ic-input-validation2.js.map +1 -1
  177. package/dist/components/ic-layout-grid-item.js +2 -2
  178. package/dist/components/ic-layout-grid.js +2 -2
  179. package/dist/components/ic-link2.js +1 -1
  180. package/dist/components/ic-loading-indicator2.js +5 -5
  181. package/dist/components/ic-menu-group.js +1 -1
  182. package/dist/components/ic-menu2.js +4 -4
  183. package/dist/components/ic-menu2.js.map +1 -1
  184. package/dist/components/ic-navigation-group.js +2 -2
  185. package/dist/components/ic-navigation-group.js.map +1 -1
  186. package/dist/components/ic-navigation-item.js +1 -1
  187. package/dist/components/ic-navigation-item.js.map +1 -1
  188. package/dist/components/ic-navigation-menu2.js +4 -4
  189. package/dist/components/ic-page-header.js +6 -6
  190. package/dist/components/ic-pagination-item2.js +1 -1
  191. package/dist/components/ic-pagination.js +4 -4
  192. package/dist/components/ic-popover-menu.js +4 -4
  193. package/dist/components/ic-popover-menu.js.map +1 -1
  194. package/dist/components/ic-radio-group.js +5 -5
  195. package/dist/components/ic-radio-group.js.map +1 -1
  196. package/dist/components/ic-radio-option.js +10 -7
  197. package/dist/components/ic-radio-option.js.map +1 -1
  198. package/dist/components/ic-search-bar.js +10 -10
  199. package/dist/components/ic-search-bar.js.map +1 -1
  200. package/dist/components/ic-section-container2.js +2 -2
  201. package/dist/components/ic-select.js +7 -7
  202. package/dist/components/ic-select.js.map +1 -1
  203. package/dist/components/ic-side-navigation.js +4 -4
  204. package/dist/components/ic-side-navigation.js.map +1 -1
  205. package/dist/components/ic-skeleton.js +2 -2
  206. package/dist/components/ic-skip-link.js +2 -2
  207. package/dist/components/ic-status-tag.js +2 -2
  208. package/dist/components/ic-step.js +13 -13
  209. package/dist/components/ic-step.js.map +1 -1
  210. package/dist/components/ic-stepper.js +2 -2
  211. package/dist/components/ic-switch.js +4 -4
  212. package/dist/components/ic-tab-context.js +1 -1
  213. package/dist/components/ic-tab-group.js +2 -2
  214. package/dist/components/ic-tab-panel.js +2 -2
  215. package/dist/components/ic-text-field.js +6 -6
  216. package/dist/components/ic-text-field.js.map +1 -1
  217. package/dist/components/ic-theme.js +1 -1
  218. package/dist/components/ic-toast-region.js +1 -1
  219. package/dist/components/ic-toast.js +15 -6
  220. package/dist/components/ic-toast.js.map +1 -1
  221. package/dist/components/ic-toggle-button-group.js +2 -2
  222. package/dist/components/ic-toggle-button.js +2 -2
  223. package/dist/core/core.css +21 -9
  224. package/dist/core/core.esm.js +1 -1
  225. package/dist/core/core.esm.js.map +1 -1
  226. package/dist/core/{p-889bb8db.entry.js → p-04cb17d7.entry.js} +2 -2
  227. package/dist/core/p-082e0068.entry.js +2 -0
  228. package/dist/core/p-082e0068.entry.js.map +1 -0
  229. package/dist/core/{p-f4e2e41f.entry.js → p-12c30491.entry.js} +2 -2
  230. package/dist/core/{p-109e7fce.entry.js → p-14d43f64.entry.js} +2 -2
  231. package/dist/core/p-1ca4a5ed.entry.js +2 -0
  232. package/dist/core/p-1ca4a5ed.entry.js.map +1 -0
  233. package/dist/core/{p-efc97f21.entry.js → p-1f41818b.entry.js} +2 -2
  234. package/dist/core/{p-5cf704e3.entry.js → p-319e3d5b.entry.js} +2 -2
  235. package/dist/core/p-3238389a.entry.js +2 -0
  236. package/dist/core/p-3238389a.entry.js.map +1 -0
  237. package/dist/core/{p-d1cce122.entry.js → p-33e35173.entry.js} +2 -2
  238. package/dist/core/p-33e35173.entry.js.map +1 -0
  239. package/dist/core/{p-eb1823b3.entry.js → p-34407b13.entry.js} +2 -2
  240. package/dist/core/p-34407b13.entry.js.map +1 -0
  241. package/dist/core/{p-ab26beed.entry.js → p-3d23ce54.entry.js} +2 -2
  242. package/dist/core/{p-ef397b6f.entry.js → p-42d35fc4.entry.js} +2 -2
  243. package/dist/core/{p-0b1ea961.entry.js → p-4d3b219c.entry.js} +2 -2
  244. package/dist/core/{p-93e1ba0a.entry.js → p-5254a078.entry.js} +2 -2
  245. package/dist/core/p-52c66bfe.entry.js +2 -0
  246. package/dist/core/p-52c66bfe.entry.js.map +1 -0
  247. package/dist/core/{p-9c2e9189.entry.js → p-53740194.entry.js} +2 -2
  248. package/dist/core/{p-614953c5.entry.js → p-601d4e3f.entry.js} +2 -2
  249. package/dist/core/{p-0257d59e.entry.js → p-6329ddcb.entry.js} +2 -2
  250. package/dist/core/{p-d8200098.entry.js → p-67c3985d.entry.js} +2 -2
  251. package/dist/core/p-6ed48c46.entry.js +2 -0
  252. package/dist/core/p-6ed48c46.entry.js.map +1 -0
  253. package/dist/core/{p-a8dc3162.entry.js → p-703f3de1.entry.js} +2 -2
  254. package/dist/core/{p-f7706ff7.entry.js → p-762ea31a.entry.js} +2 -2
  255. package/dist/core/{p-2969b5c9.entry.js → p-7d0d85c4.entry.js} +2 -2
  256. package/dist/core/p-8abcc114.entry.js +2 -0
  257. package/dist/core/p-8abcc114.entry.js.map +1 -0
  258. package/dist/core/{p-b00efb15.entry.js → p-9674b63f.entry.js} +2 -2
  259. package/dist/core/p-9c52ee48.entry.js +2 -0
  260. package/dist/core/p-9c52ee48.entry.js.map +1 -0
  261. package/dist/core/{p-fb43abd6.entry.js → p-9ca147f3.entry.js} +2 -2
  262. package/dist/core/{p-4637c326.entry.js → p-a7583faf.entry.js} +2 -2
  263. package/dist/core/{p-6996e94f.entry.js → p-a8e4258f.entry.js} +2 -2
  264. package/dist/core/{p-6996e94f.entry.js.map → p-a8e4258f.entry.js.map} +1 -1
  265. package/dist/core/{p-09c31ac6.entry.js → p-adde6c66.entry.js} +2 -2
  266. package/dist/core/{p-6fb29846.entry.js → p-ae11583f.entry.js} +2 -2
  267. package/dist/core/p-afbba548.entry.js +2 -0
  268. package/dist/core/p-afbba548.entry.js.map +1 -0
  269. package/dist/core/{p-f098e531.entry.js → p-b4a2f6fa.entry.js} +2 -2
  270. package/dist/core/p-b4a2f6fa.entry.js.map +1 -0
  271. package/dist/core/p-b59504f1.entry.js +2 -0
  272. package/dist/core/p-b59504f1.entry.js.map +1 -0
  273. package/dist/core/p-b83a736d.entry.js +3 -0
  274. package/dist/core/p-b83a736d.entry.js.map +1 -0
  275. package/dist/core/{p-4bdeb62d.entry.js → p-bdda404b.entry.js} +2 -2
  276. package/dist/core/p-bdda404b.entry.js.map +1 -0
  277. package/dist/core/{p-0cbd0967.entry.js → p-cce398e1.entry.js} +2 -2
  278. package/dist/core/{p-06b3ae40.entry.js → p-d3223b89.entry.js} +2 -2
  279. package/dist/core/{p-3b13d191.entry.js → p-eca43f7d.entry.js} +2 -2
  280. package/dist/core/{p-44fbe8c2.entry.js → p-f4e3bb5b.entry.js} +2 -2
  281. package/dist/core/p-f51c609d.entry.js +2 -0
  282. package/dist/core/{p-296a41ce.entry.js → p-f57729b8.entry.js} +2 -2
  283. package/dist/core/{p-091a7fbf.entry.js → p-f6bb691a.entry.js} +2 -2
  284. package/dist/core/{p-ad6632a9.entry.js → p-f7105cf9.entry.js} +2 -2
  285. package/dist/core/p-ffd0d9d1.entry.js +2 -0
  286. package/dist/core/p-ffd0d9d1.entry.js.map +1 -0
  287. package/dist/esm/core.js +1 -1
  288. package/dist/esm/ic-button_3.entry.js +5 -5
  289. package/dist/esm/ic-button_3.entry.js.map +1 -1
  290. package/dist/esm/ic-checkbox-group.entry.js +2 -2
  291. package/dist/esm/ic-checkbox.entry.js +31 -8
  292. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  293. package/dist/esm/ic-data-list.entry.js +2 -2
  294. package/dist/esm/ic-data-list.entry.js.map +1 -1
  295. package/dist/esm/ic-data-row.entry.js +2 -2
  296. package/dist/esm/ic-data-row.entry.js.map +1 -1
  297. package/dist/esm/ic-dialog.entry.js +1 -1
  298. package/dist/esm/ic-empty-state.entry.js +2 -2
  299. package/dist/esm/ic-footer-link.entry.js +2 -2
  300. package/dist/esm/ic-footer.entry.js +9 -5
  301. package/dist/esm/ic-footer.entry.js.map +1 -1
  302. package/dist/esm/ic-hero.entry.js +11 -6
  303. package/dist/esm/ic-hero.entry.js.map +1 -1
  304. package/dist/esm/ic-horizontal-scroll.entry.js +5 -5
  305. package/dist/esm/ic-input-component-container_3.entry.js +10 -10
  306. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  307. package/dist/esm/ic-input-label_2.entry.js +6 -6
  308. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  309. package/dist/esm/ic-layout-grid-item.entry.js +2 -2
  310. package/dist/esm/ic-layout-grid.entry.js +2 -2
  311. package/dist/esm/ic-link.entry.js +1 -1
  312. package/dist/esm/ic-menu-group.entry.js +1 -1
  313. package/dist/esm/ic-navigation-group.entry.js +2 -2
  314. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  315. package/dist/esm/ic-navigation-item.entry.js +1 -1
  316. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  317. package/dist/esm/ic-navigation-menu.entry.js +4 -4
  318. package/dist/esm/ic-page-header.entry.js +6 -6
  319. package/dist/esm/ic-pagination-item.entry.js +1 -1
  320. package/dist/esm/ic-pagination.entry.js +4 -4
  321. package/dist/esm/ic-popover-menu.entry.js +4 -4
  322. package/dist/esm/ic-radio-group.entry.js +5 -5
  323. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  324. package/dist/esm/ic-radio-option.entry.js +9 -6
  325. package/dist/esm/ic-radio-option.entry.js.map +1 -1
  326. package/dist/esm/ic-search-bar.entry.js +10 -10
  327. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  328. package/dist/esm/ic-section-container.entry.js +2 -2
  329. package/dist/esm/ic-select.entry.js +7 -7
  330. package/dist/esm/ic-select.entry.js.map +1 -1
  331. package/dist/esm/ic-side-navigation.entry.js +4 -4
  332. package/dist/esm/ic-skeleton.entry.js +2 -2
  333. package/dist/esm/ic-skip-link.entry.js +2 -2
  334. package/dist/esm/ic-status-tag.entry.js +2 -2
  335. package/dist/esm/ic-step.entry.js +13 -13
  336. package/dist/esm/ic-stepper.entry.js +2 -2
  337. package/dist/esm/ic-switch.entry.js +4 -4
  338. package/dist/esm/ic-tab-context.entry.js +1 -1
  339. package/dist/esm/ic-tab-group.entry.js +2 -2
  340. package/dist/esm/ic-tab-panel.entry.js +2 -2
  341. package/dist/esm/ic-text-field.entry.js +6 -6
  342. package/dist/esm/ic-text-field.entry.js.map +1 -1
  343. package/dist/esm/ic-theme.entry.js +1 -1
  344. package/dist/esm/ic-toast-region.entry.js +1 -1
  345. package/dist/esm/ic-toast.entry.js +14 -6
  346. package/dist/esm/ic-toast.entry.js.map +1 -1
  347. package/dist/esm/ic-toggle-button-group.entry.js +2 -2
  348. package/dist/esm/ic-toggle-button.entry.js +2 -2
  349. package/dist/esm/loader.js +1 -1
  350. package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +5 -0
  351. package/dist/types/components/ic-footer/ic-footer.d.ts +4 -0
  352. package/dist/types/components/ic-hero/ic-hero.d.ts +5 -1
  353. package/dist/types/components/ic-toast/ic-toast.d.ts +5 -1
  354. package/dist/types/components.d.ts +24 -0
  355. package/hydrate/index.js +214 -167
  356. package/hydrate/index.mjs +214 -167
  357. package/package.json +4 -4
  358. package/vscode-data.json +34 -0
  359. package/dist/core/p-042cfc35.entry.js +0 -2
  360. package/dist/core/p-042cfc35.entry.js.map +0 -1
  361. package/dist/core/p-053ed367.entry.js +0 -2
  362. package/dist/core/p-053ed367.entry.js.map +0 -1
  363. package/dist/core/p-24d46cab.entry.js +0 -2
  364. package/dist/core/p-24d46cab.entry.js.map +0 -1
  365. package/dist/core/p-48eb7299.entry.js +0 -2
  366. package/dist/core/p-48eb7299.entry.js.map +0 -1
  367. package/dist/core/p-4a358f09.entry.js +0 -2
  368. package/dist/core/p-4a358f09.entry.js.map +0 -1
  369. package/dist/core/p-4bdeb62d.entry.js.map +0 -1
  370. package/dist/core/p-6e61c48a.entry.js +0 -2
  371. package/dist/core/p-6e61c48a.entry.js.map +0 -1
  372. package/dist/core/p-6f60262e.entry.js +0 -3
  373. package/dist/core/p-6f60262e.entry.js.map +0 -1
  374. package/dist/core/p-7970cbed.entry.js +0 -2
  375. package/dist/core/p-7970cbed.entry.js.map +0 -1
  376. package/dist/core/p-8c7d6a85.entry.js +0 -2
  377. package/dist/core/p-8c7d6a85.entry.js.map +0 -1
  378. package/dist/core/p-b29e325f.entry.js +0 -2
  379. package/dist/core/p-bba25812.entry.js +0 -2
  380. package/dist/core/p-bba25812.entry.js.map +0 -1
  381. package/dist/core/p-d1cce122.entry.js.map +0 -1
  382. package/dist/core/p-d20a61a7.entry.js +0 -2
  383. package/dist/core/p-d20a61a7.entry.js.map +0 -1
  384. package/dist/core/p-eb1823b3.entry.js.map +0 -1
  385. package/dist/core/p-f098e531.entry.js.map +0 -1
  386. /package/dist/core/{p-889bb8db.entry.js.map → p-04cb17d7.entry.js.map} +0 -0
  387. /package/dist/core/{p-f4e2e41f.entry.js.map → p-12c30491.entry.js.map} +0 -0
  388. /package/dist/core/{p-109e7fce.entry.js.map → p-14d43f64.entry.js.map} +0 -0
  389. /package/dist/core/{p-efc97f21.entry.js.map → p-1f41818b.entry.js.map} +0 -0
  390. /package/dist/core/{p-5cf704e3.entry.js.map → p-319e3d5b.entry.js.map} +0 -0
  391. /package/dist/core/{p-ab26beed.entry.js.map → p-3d23ce54.entry.js.map} +0 -0
  392. /package/dist/core/{p-ef397b6f.entry.js.map → p-42d35fc4.entry.js.map} +0 -0
  393. /package/dist/core/{p-0b1ea961.entry.js.map → p-4d3b219c.entry.js.map} +0 -0
  394. /package/dist/core/{p-93e1ba0a.entry.js.map → p-5254a078.entry.js.map} +0 -0
  395. /package/dist/core/{p-9c2e9189.entry.js.map → p-53740194.entry.js.map} +0 -0
  396. /package/dist/core/{p-614953c5.entry.js.map → p-601d4e3f.entry.js.map} +0 -0
  397. /package/dist/core/{p-0257d59e.entry.js.map → p-6329ddcb.entry.js.map} +0 -0
  398. /package/dist/core/{p-d8200098.entry.js.map → p-67c3985d.entry.js.map} +0 -0
  399. /package/dist/core/{p-a8dc3162.entry.js.map → p-703f3de1.entry.js.map} +0 -0
  400. /package/dist/core/{p-f7706ff7.entry.js.map → p-762ea31a.entry.js.map} +0 -0
  401. /package/dist/core/{p-2969b5c9.entry.js.map → p-7d0d85c4.entry.js.map} +0 -0
  402. /package/dist/core/{p-b00efb15.entry.js.map → p-9674b63f.entry.js.map} +0 -0
  403. /package/dist/core/{p-fb43abd6.entry.js.map → p-9ca147f3.entry.js.map} +0 -0
  404. /package/dist/core/{p-4637c326.entry.js.map → p-a7583faf.entry.js.map} +0 -0
  405. /package/dist/core/{p-09c31ac6.entry.js.map → p-adde6c66.entry.js.map} +0 -0
  406. /package/dist/core/{p-6fb29846.entry.js.map → p-ae11583f.entry.js.map} +0 -0
  407. /package/dist/core/{p-0cbd0967.entry.js.map → p-cce398e1.entry.js.map} +0 -0
  408. /package/dist/core/{p-06b3ae40.entry.js.map → p-d3223b89.entry.js.map} +0 -0
  409. /package/dist/core/{p-3b13d191.entry.js.map → p-eca43f7d.entry.js.map} +0 -0
  410. /package/dist/core/{p-44fbe8c2.entry.js.map → p-f4e3bb5b.entry.js.map} +0 -0
  411. /package/dist/core/{p-b29e325f.entry.js.map → p-f51c609d.entry.js.map} +0 -0
  412. /package/dist/core/{p-296a41ce.entry.js.map → p-f57729b8.entry.js.map} +0 -0
  413. /package/dist/core/{p-091a7fbf.entry.js.map → p-f6bb691a.entry.js.map} +0 -0
  414. /package/dist/core/{p-ad6632a9.entry.js.map → p-f7105cf9.entry.js.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ukic/web-components",
3
- "version": "3.14.0",
3
+ "version": "3.16.0",
4
4
  "description": "A web component UI library compiled with StencilJS",
5
5
  "author": "mi6",
6
6
  "bugs": {
@@ -40,8 +40,8 @@
40
40
  "build-storybook": "rimraf /storybook-static && storybook build",
41
41
  "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
42
42
  "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write",
43
- "lint": "remark src && echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src",
44
- "lint:fix": "echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css --fix && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src --fix",
43
+ "lint": "remark src && echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/components/**/*.css && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src",
44
+ "lint:fix": "echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/components/**/*.css --fix && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src --fix",
45
45
  "start": "npx http-server storybook-static -s",
46
46
  "kill": "kill-port 8080 --graceful",
47
47
  "audit": "echo 'Audit for: @ukic/web-components' & audit-ci -m --config ../../audit-ci.json"
@@ -96,5 +96,5 @@
96
96
  },
97
97
  "license": "MIT",
98
98
  "packageManager": "^npm@10.9.2",
99
- "gitHead": "493547c4e200a7a41416a6dea9f60ff1ef72073f"
99
+ "gitHead": "e79d55a34a906d095f8674636410d47bdb6d3e03"
100
100
  }
package/vscode-data.json CHANGED
@@ -1594,6 +1594,10 @@
1594
1594
  "name": "copyright",
1595
1595
  "description": "If `true`, the footer will display the crown copyright at the bottom."
1596
1596
  },
1597
+ {
1598
+ "name": "copyright-text",
1599
+ "description": "The text displayed for the copyright notice if `copyright` is `true`."
1600
+ },
1597
1601
  {
1598
1602
  "name": "description",
1599
1603
  "description": "The description displayed at the top of the footer."
@@ -1745,6 +1749,21 @@
1745
1749
  {
1746
1750
  "name": "subheading",
1747
1751
  "description": "The description for the hero."
1752
+ },
1753
+ {
1754
+ "name": "theme",
1755
+ "description": "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.",
1756
+ "values": [
1757
+ {
1758
+ "name": "dark"
1759
+ },
1760
+ {
1761
+ "name": "inherit"
1762
+ },
1763
+ {
1764
+ "name": "light"
1765
+ }
1766
+ ]
1748
1767
  }
1749
1768
  ]
1750
1769
  },
@@ -4377,6 +4396,21 @@
4377
4396
  "name": "neutral-icon-aria-label",
4378
4397
  "description": "Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon"
4379
4398
  },
4399
+ {
4400
+ "name": "theme",
4401
+ "description": "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.",
4402
+ "values": [
4403
+ {
4404
+ "name": "dark"
4405
+ },
4406
+ {
4407
+ "name": "inherit"
4408
+ },
4409
+ {
4410
+ "name": "light"
4411
+ }
4412
+ ]
4413
+ },
4380
4414
  {
4381
4415
  "name": "variant",
4382
4416
  "description": "The variant of the toast being rendered",
@@ -1,2 +0,0 @@
1
- import{r as i,c as t,h as a,f as e,H as o,g as n}from"./p-8e4e97b4.js";import{z as s,D as r,g as l,f as d,y as c}from"./p-a5658054.js";import{C as v}from"./p-3b185c32.js";import{O as h}from"./p-426ec638.js";import"./p-bddf799a.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--navigation-link-colour:var(--ic-brand-text-color)}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-brand-text-color)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--navigation-link-colour);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap;--ic-typography-color:var(--navigation-link-colour)}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-top-navigation-theme)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu,.navigation-item-top-nav-child)) ::slotted(a:hover:not(:focus)),:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);outline-offset:calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2))}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);outline-offset:calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2))}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-brand-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(svg),:host(.navigation-item-side-menu) ::slotted(svg),:host(.navigation-item-page-header) ::slotted(svg){fill:var(--ic-color-text-primary)}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){color:var(--ic-color-text-primary);--ic-typography-color:var(--ic-color-text-primary)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-top-navigation-nav-item-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:calc(100% - var(--ic-space-xl));min-width:9.063rem;color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)){outline:var(--ic-hc-focus-outline);background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)){background-color:var(--ic-top-navigation-nav-item-pressed) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-top-navigation-nav-item-banner);transition:left 0s}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:var(--ic-space-xxs)}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-brand-text-color);height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:1.5rem;width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important;margin-right:var(--ic-space-xs)}.inline-badge{margin-left:var(--ic-space-xs)}.badge{margin-left:0}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .icon>::slotted(*){margin-right:0}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 4rem);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding:0 var(--ic-space-md);text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color);border-radius:0}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-text-primary) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-pressed) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-text-primary)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const m=g;const p=class{constructor(o){i(this,o);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.hostMutationObserver=null;this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.ARIA_LABEL_STRING="aria-label";this.isInSideNav=false;this.deviceSize=r.XL;this.focusStyle=l();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.sideNavExpanded=false;this.ariaLabel="";this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.selected=false;this.theme="inherit";this.displayDefaultNavigationItem=(i,t,e,o,n,s,r)=>{const l=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const d=this.expandable&&a("div",{class:{svg:true},innerHTML:v});const c=this.el.querySelector('[slot="badge"]');const g=c&&a("div",{class:"inline-badge"},a("slot",{name:"badge"}));const m=this.el.querySelector('[slot="icon"]')&&a("div",{class:"icon"},a("slot",{name:"icon"}),this.isInSideNav&&g);return i!==""?a("a",{href:i,target:o,rel:n,hreflang:e,referrerPolicy:s,download:r!==false?r:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-label":this.ariaLabel?this.ariaLabel:null},m,a("ic-typography",{variant:l},t),o==="_blank"&&a("span",{class:"open-in-new-icon",innerHTML:h}),g,a("div",{class:"chevron-container"},d)):a("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},m,a("ic-typography",{variant:l},t),d,g)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:a}=i;if(a!==this.deviceSize){this.deviceSize=a;this.inTopNavSideMenu=a<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||r.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:a}=i;this.sideNavExpanded=t;this.isSideNavMobile=a;this.sideNavToggleTooltip(!t&&!a)};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>this.navItemClicked.emit();this.hostMutationCallback=i=>{let t=false;i.forEach((({attributeName:i})=>{if(i){const a=this.el.getAttribute(i);if(a&&i===this.ARIA_LABEL_STRING){this.ariaLabel=a;t=true}}}));if(t){e(this)}};this.generateTooltipLabel=()=>{var i;if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent||""}return((i=this.el.children[0])===null||i===void 0?void 0:i.textContent)||""};this.renderNavigationItemContent=()=>{if(!this.label&&!this.navigationSlot)return a("slot",null);return this.label?this.displayDefaultNavigationItem(this.href,this.label,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download):a("slot",{name:"navigation-item"})};this.sideNavToggleTooltip=i=>{var t;const a=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("ic-tooltip");const e="tooltip-navigation-item-side-nav-collapsed";let o;if(!a)return;if(i){a.displayTooltip(false);o=setTimeout((()=>{a.classList.add(e)}),this.ANIMATION_DURATION)}else{clearTimeout(o);a.classList.remove(e)}}}navigationTypeChangeHandler(){this.isInSideNav=this.navigationType==="side"}disconnectedCallback(){var i,t,a;if(this.isInSideNav){(i=this.parentEl)===null||i===void 0?void 0:i.removeEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(t=this.parentEl)===null||t===void 0?void 0:t.removeEventListener("icTopNavResized",this.topNavResizedHandler)}(a=this.hostMutationObserver)===null||a===void 0?void 0:a.disconnect()}componentWillLoad(){var i,t,a,e,o,n;const{navType:s,parent:r}=c(this.el);this.navigationType=s;this.isInSideNav=this.navigationType==="side";this.parentEl=r;this.deviceSize=d();this.sideNavExpanded=((i=this.parentEl)===null||i===void 0?void 0:i.classList.contains("sm-expanded"))||((t=this.parentEl)===null||t===void 0?void 0:t.classList.contains("xs-menu-open"))||false;if(this.isInSideNav){(a=this.parentEl)===null||a===void 0?void 0:a.addEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(e=this.parentEl)===null||e===void 0?void 0:e.addEventListener("icTopNavResized",this.topNavResizedHandler);if(((o=this.el.parentElement)===null||o===void 0?void 0:o.tagName)==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=((n=this.navigationSlot.textContent)===null||n===void 0?void 0:n.trim())||null}if(this.el.hasAttribute(this.ARIA_LABEL_STRING)){this.ariaLabel=this.el.getAttribute(this.ARIA_LABEL_STRING)||""}}componentDidLoad(){this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentDidUpdate(){this.isInitialRender=false}brandChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;this.itemEl?this.itemEl.focus():(i=this.el.querySelector("a"))===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:e,navigationType:n,focusStyle:s,isInitialRender:r,sideNavExpanded:l,displayNavigationTooltip:d,collapsedIconLabel:c,isSideNavMobile:v,expandable:h,isInSideNav:g,theme:m}=this;const p=t&&!i;return a(o,{key:"8c8d6840c525322be195b26b40b81de5b76a3bb9",class:{"navigation-item":true,"navigation-item-selected":!t&&e,"navigation-item-top-nav":!i&&n==="top","navigation-item-top-nav-child":p,"navigation-item-top-nav-child-selected":p&&e,"navigation-item-side-menu":i,"navigation-item-side-menu-selected":i&&e,"navigation-item-page-header":n==="page-header","navigation-item-side-nav":g,"navigation-item-side-nav-collapsed":(!l||d)&&g,"navigation-item-side-nav-collapsed-with-label":!l&&g&&c&&!v,"with-transition":!r,expandable:h,[s]:t?g:!i,[`ic-theme-${m}`]:m!=="inherit"},onBlur:p?this.handleBlur:null,onClick:this.handleClick,"aria-current":e?"page":null,role:"listitem"},a("ic-tooltip",{key:"20f1518fa353f8ab041ce7a71d8cbe0277ee9e6a",label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{"tooltip-navigation-item":true,"tooltip-navigation-item-side-nav-collapsed":d&&g,"tooltip-long-label-navigation-item-side-nav-expanded":this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return n(this)}static get watchers(){return{navigationType:["navigationTypeChangeHandler"]}}};p.style=m;export{p as ic_navigation_item};
2
- //# sourceMappingURL=p-042cfc35.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icNavigationItemCss","IcNavigationItemStyle0","NavigationItem","constructor","hostRef","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","isInSideNav","deviceSize","DEVICE_SIZES","XL","focusStyle","getBrandForegroundAppearance","inTopNavSideMenu","isSideNavMobile","isTopNavChild","sideNavExpanded","ariaLabel","collapsedIconLabel","displayNavigationTooltip","download","expandable","href","selected","theme","displayDefaultNavigationItem","label","hreflang","target","rel","referrerpolicy","variant","ChevronIconComponent","h","class","svg","innerHTML","chevronIcon","slottedBadgeEl","el","querySelector","BadgeComponent","name","IconComponent","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","_a","parentEl","customMobileBreakpoint","L","sideNavExpandHandler","sideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","navigationTypeChangeHandler","navigationType","disconnectedCallback","removeEventListener","_b","_c","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","addEventListener","_d","_e","parentElement","_f","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","brandChangeHandler","mode","setFocus","focus","render","isTopNavChildDesktop","Host","key","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n\n --navigation-link-colour: var(--ic-brand-text-color);\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-brand-text-color);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--navigation-link-colour);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n\n --ic-typography-color: var(--navigation-link-colour);\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-top-navigation-theme);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu, .navigation-item-top-nav-child))\n ::slotted(a:hover:not(:focus)),\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-brand-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(svg),\n:host(.navigation-item-side-menu) ::slotted(svg),\n:host(.navigation-item-page-header) ::slotted(svg) {\n fill: var(--ic-color-text-primary);\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n color: var(--ic-color-text-primary);\n\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: calc(100% - var(--ic-space-xl));\n min-width: 9.063rem;\n color: var(--ic-top-navigation-nav-item);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),\n:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-top-navigation-nav-item-banner);\n transition: left 0s;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-brand-text-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: 1.5rem;\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n margin-right: var(--ic-space-xs);\n}\n\n.inline-badge {\n margin-left: var(--ic-space-xs);\n}\n\n.badge {\n margin-left: 0;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .icon > ::slotted(*) {\n margin-right: 0;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 4rem);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n border-radius: 0;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-text-primary) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-pressed) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement | null;\n private isInitialRender = true;\n private itemEl?: HTMLElement;\n private hostMutationObserver: MutationObserver | null = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n private isInSideNav = false;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() isSideNavMobile = false;\n @State() isTopNavChild = false;\n\n @State() navigationType: IcNavType | \"\";\n @Watch(\"navigationType\")\n navigationTypeChangeHandler(): void {\n this.isInSideNav = this.navigationType === \"side\";\n }\n\n @State() parentEl: HTMLElement | null;\n @State() sideNavExpanded = false;\n @State() ariaLabel = \"\";\n\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel = false;\n\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip = false;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download: string | boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable = false;\n\n /**\n * The destination of the navigation item.\n */\n @Prop() href = \"\";\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label of the navigation item.\n */\n @Prop() label?: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected = false;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\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\n /**\n * @internal - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.isInSideNav) {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.isInSideNav = this.navigationType === \"side\";\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") ||\n this.parentEl?.classList.contains(\"xs-menu-open\") ||\n false;\n\n if (this.isInSideNav) {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (this.el.parentElement?.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel =\n this.navigationSlot.textContent?.trim() || null;\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING) || \"\";\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.focusStyle = detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl ? this.itemEl.focus() : this.el.querySelector(\"a\")?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n label: string,\n hreflang?: string,\n target?: string,\n rel?: string,\n referrerpolicy?: ReferrerPolicy,\n download?: string | boolean\n ) => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const slottedBadgeEl = this.el.querySelector('[slot=\"badge\"]');\n const BadgeComponent = slottedBadgeEl && (\n <div class=\"inline-badge\">\n <slot name=\"badge\"></slot>\n </div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {this.isInSideNav && BadgeComponent}\n </div>\n );\n\n return href !== \"\" ? (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {BadgeComponent}\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n </a>\n ) : (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {BadgeComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>) => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint || DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>) => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!sideNavExpanded && !sideNavMobile);\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null ||\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => this.navItemClicked.emit();\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent || \"\";\n }\n\n return this.el.children[0]?.textContent || \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (!this.label && !this.navigationSlot) return <slot></slot>;\n\n return this.label ? (\n this.displayDefaultNavigationItem(\n this.href,\n this.label,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download\n )\n ) : (\n <slot name=\"navigation-item\"></slot>\n );\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (!tooltip) return;\n\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n };\n\n render() {\n const {\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationType,\n focusStyle,\n isInitialRender,\n sideNavExpanded,\n displayNavigationTooltip,\n collapsedIconLabel,\n isSideNavMobile,\n expandable,\n isInSideNav,\n theme,\n } = this;\n\n const isTopNavChildDesktop = isTopNavChild && !inTopNavSideMenu;\n\n return (\n <Host\n class={{\n \"navigation-item\": true,\n \"navigation-item-selected\": !isTopNavChild && selected,\n \"navigation-item-top-nav\":\n !inTopNavSideMenu && navigationType === \"top\",\n \"navigation-item-top-nav-child\": isTopNavChildDesktop,\n \"navigation-item-top-nav-child-selected\":\n isTopNavChildDesktop && selected,\n \"navigation-item-side-menu\": inTopNavSideMenu,\n \"navigation-item-side-menu-selected\": inTopNavSideMenu && selected,\n \"navigation-item-page-header\": navigationType === \"page-header\",\n \"navigation-item-side-nav\": isInSideNav,\n \"navigation-item-side-nav-collapsed\":\n (!sideNavExpanded || displayNavigationTooltip) && isInSideNav,\n \"navigation-item-side-nav-collapsed-with-label\":\n !sideNavExpanded &&\n isInSideNav &&\n collapsedIconLabel &&\n !isSideNavMobile,\n \"with-transition\": !isInitialRender,\n expandable,\n [focusStyle]: isTopNavChild ? isInSideNav : !inTopNavSideMenu,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onBlur={isTopNavChildDesktop ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n \"tooltip-navigation-item\": true,\n \"tooltip-navigation-item-side-nav-collapsed\":\n displayNavigationTooltip && isInSideNav,\n \"tooltip-long-label-navigation-item-side-nav-expanded\":\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as i,h as a,H as t,g as r}from"./p-8e4e97b4.js";import{r as o,l as c,i as n,k as d,o as s,t as l,e as b}from"./p-a5658054.js";import"./p-bddf799a.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper [slot="additional-field"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled,ic-radio-option.ic-radio-option-disabled .radio-label{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.container input:focus+span.checkmark,.container:hover input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.ic-radio-group-small .container{margin:0 0 0 var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.ic-radio-group-small .container input{height:var(--ic-space-md);width:var(--ic-space-md)}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.ic-radio-group-small .checkmark{height:var(--ic-space-md);width:var(--ic-space-md)}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.container:hover input:checked~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.container:hover:not(.disabled) input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-hover)}.container:active input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.container:active input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.ic-radio-group-small .container input:checked~.checkmark{border-width:var(--ic-space-1px)}.container:active input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-active)}.container input:checked:disabled~.checkmark{border:0.125rem solid var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark::after{background:var(--ic-radio-button-disabled)}.container:hover input:disabled~.checkmark{box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-radio-button-disabled)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.ic-radio-group-small .container .checkmark::after{top:50%;left:50%;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--ic-radio-button-default-active);transform:translate(-50%, -50%)}.radio-label{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.ic-radio-group-small .radio-label{margin-left:var(--ic-space-xs)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.ic-radio-group-small .dynamic-container{margin-left:12px}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}input[type="radio"]:dir(rtl){right:0}.radio-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}';const p=h;const u="additional-field";const m=class{constructor(a){e(this,a);this.icCheck=i(this,"icCheck",7);this.icSelectedChange=i(this,"icSelectedChange",7);this.defaultRadioValue="";this.hasAdditionalField=false;this.skipFocus=false;this.additionalFieldDisplay="static";this.disabled=false;this.dynamicText="This selection requires additional answers";this.theme="inherit";this.selected=false;this.initiallySelected=this.selected;this.handleClick=e=>{var i,a;const t=e.target.matches(".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)");if(!this.disabled&&(!t||e.target===this.radioElement)){e.stopPropagation();if(this.skipFocus===false){(i=this.radioElement)===null||i===void 0?void 0:i.focus()}this.skipFocus=false;if(this.hasAdditionalField){this.value=((a=this.getAdditionalField())===null||a===void 0?void 0:a.value)||this.defaultRadioValue}this.icCheck.emit({value:this.value})}};this.handleKeyDown=e=>{const i=["IC-DATE-INPUT","IC-DATE-PICKER"];if(this.getAdditionalField()==document.activeElement&&i.includes(this.getAdditionalField().nodeName)){e.stopPropagation()}};this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected}}watchDisabledHandler(){o(this.disabled,this.el)}watchSelectedHandler(){this.icSelectedChange.emit()}handleCheck(e){if(this.additionalFieldDisplay==="static"&&Array.from(this.el.querySelectorAll("ic-radio-option")).includes(e.target))this.icCheck.emit({value:this.value})}disconnectedCallback(){c(this.el,this.handleFormReset)}componentWillLoad(){if(n(this.el,u)){this.hasAdditionalField=true;this.getAdditionalField()}this.defaultRadioValue=this.value;d(this.el,this.handleFormReset);o(this.disabled,this.el)}componentDidLoad(){s([{prop:this.value,propName:"value"}],"Radio Option")}componentWillRender(){const e=l(this.el,u);if(e&&!this.hasAdditionalField){this.hasAdditionalField=true;this.getAdditionalField()}else if(!e&&this.hasAdditionalField){this.hasAdditionalField=false}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.getAdditionalField();if(!this.selected||this.disabled){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}}additionalFieldValueHandler(e){if(this.selected){this.value=e.detail.value||this.defaultRadioValue;this.icCheck.emit({value:this.value})}e.stopImmediatePropagation()}async setFocus(){var e;(e=this.radioElement)===null||e===void 0?void 0:e.focus()}async setTabIndex(e){var i;(i=this.radioElement)===null||i===void 0?void 0:i.setAttribute("tabIndex",e.toString())}getAdditionalField(){const e=this.el.querySelector('ic-text-field[slot="additional-field"]');if(e)e.hiddenInput=false;return e}render(){const{additionalFieldDisplay:e,disabled:i,dynamicText:r,form:o,groupLabel:c,handleClick:n,handleKeyDown:d,hasAdditionalField:s,label:l,name:h,selected:p,value:m,theme:f}=this;const v=`ic-radio-option-${b(l)||m}-${c}`;return a(t,{key:"d4254c0a08bd7fe373f7beeb849d732d437c6f5b",onClick:n,onKeyDown:d,class:{["ic-radio-option-disabled"]:!!i,[`ic-theme-${f}`]:f!=="inherit"}},a("div",{key:"1b3c7c383278c1d8714f5a7a3a00c8fb780a2931",class:{container:true,disabled:!!i}},a("div",{key:"ba90a2ce5912981a50d43ebd33086eb227947e5f"},a("input",{key:"8eb145667ce5b7777ced51480ceebab3f43a7910",tabindex:p?"0":"-1",type:"radio",name:h,id:v,value:m,disabled:i,checked:p,ref:e=>this.radioElement=e,form:o}),a("span",{key:"3683fd5eda19dd39f4647a5763705eef4becacb3",class:"checkmark"})),a("ic-typography",{key:"d662a4e7a5b0ac173a7ea2881d2dac84e94eedc7",class:"radio-label",variant:"body"},a("label",{key:"a76e5907c98f2ff18d734167ff69bbe0a1c7ddc4",htmlFor:v},l))),s&&a("div",{key:"36b6226b2cc21d25037eb9a39c2f1d7f4f2dbcbf",class:{"dynamic-container":true,hidden:e==="dynamic"&&!p}},e==="dynamic"&&a("div",{key:"c7182dd5dfa6e378cb009e98d0408e40f06ae2e5",class:"branch-corner"}),a("div",{key:"59286b0ca3110c6ba745a8149b0a9c4707e9a7a8"},e==="dynamic"&&a("ic-typography",{key:"16491146b394af8f08ebde6a8452ca159c9ad665",variant:"caption",role:"alert"},a("p",{key:"bcc87f891dc1598a7f2756d740fa2271730d1429",class:"dynamic-text"},r)),a("div",{key:"ceda461f6d7dd511f7e72245fb331e551126e823",class:{"additional-field-wrapper":e==="static"}},a("slot",{key:"3458dd8cf7904abb86e65cff449774459e389f09",name:u})))))}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"],selected:["watchSelectedHandler"]}}};m.style=p;export{m as ic_radio_option};
2
- //# sourceMappingURL=p-053ed367.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icRadioOptionCss","IcRadioOptionStyle0","ADDITIONAL_FIELD","RadioOption","constructor","hostRef","this","defaultRadioValue","hasAdditionalField","skipFocus","additionalFieldDisplay","disabled","dynamicText","theme","selected","initiallySelected","handleClick","event","clickedAdditionalField","target","matches","radioElement","stopPropagation","_a","focus","value","_b","getAdditionalField","icCheck","emit","handleKeyDown","preventPropagationElements","document","activeElement","includes","nodeName","handleFormReset","watchDisabledHandler","removeDisabledFalse","el","watchSelectedHandler","icSelectedChange","handleCheck","ev","Array","from","querySelectorAll","disconnectedCallback","removeFormResetListener","componentWillLoad","isSlotUsed","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","hasSlot","slotHasContent","componentDidRender","additionalField","setAttribute","removeAttribute","additionalFieldValueHandler","detail","stopImmediatePropagation","setFocus","setTabIndex","toString","querySelector","hiddenInput","render","form","groupLabel","label","name","id","isPropDefined","h","Host","key","onClick","onKeyDown","class","container","tabindex","type","checked","ref","variant","htmlFor","hidden","role"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n.additional-field-wrapper [slot=\"additional-field\"] {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled */\nic-radio-option.ic-radio-option-disabled,\nic-radio-option.ic-radio-option-disabled .radio-label {\n --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n.container:hover input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.ic-radio-group-small .container {\n margin: 0 0 0 var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n.ic-radio-group-small .container input {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n/* Create a custom radio button */\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-radio-button-background-default);\n border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n.ic-radio-group-small .checkmark {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover input:checked ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover:not(.disabled) input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-pressed);\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n.ic-radio-group-small .container input:checked ~ .checkmark {\n border-width: var(--ic-space-1px);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-pressed);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n}\n\n.ic-radio-group-small .container .checkmark::after {\n top: 50%;\n left: 50%;\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n transform: translate(-50%, -50%);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n\n --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n.ic-radio-group-small .radio-label {\n margin-left: var(--ic-space-xs);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n color: var(--ic-radio-button-required-bar);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.ic-radio-group-small .dynamic-container {\n margin-left: 12px;\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-radio-button-required-text);\n\n --ic-typography-color: var(--ic-radio-button-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ic-text-field {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n\n/* Right to left */\ninput[type=\"radio\"]:dir(rtl) {\n right: 0;\n}\n\n.radio-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement?: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The text to be displayed when dynamic.\n */\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the radio with.\n */\n @Prop() form?: string;\n\n /**\n * The group label for the radio option.\n */\n @Prop() groupLabel?: string;\n\n /**\n * The label for the radio option.\n */\n @Prop() label?: string;\n\n /**\n * The name for the radio option.\n */\n @Prop() name?: string;\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\n /**\n * The value for the radio option.\n */\n @Prop({ mutable: true }) value!: string;\n\n /**\n * If `true`, the radio option will be displayed in a selected state.\n */\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /**\n * Emitted when the radio option is selected.\n */\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n @Listen(\"icCheck\")\n handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n if (\n this.additionalFieldDisplay === \"static\" &&\n Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n ev.target as HTMLIcRadioOptionElement\n )\n )\n this.icCheck.emit({ value: this.value });\n }\n\n /**\n * Emitted when the radio option is selected or deselected.\n */\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const additionalField = this.getAdditionalField();\n if (!this.selected || this.disabled) {\n additionalField?.setAttribute(\"disabled\", \"\");\n } else {\n additionalField?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value || this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /**\n * Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /**\n * @internal Sets the tabIndex of the radio option.\n */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n }\n\n private getAdditionalField(): HTMLIcTextFieldElement {\n const additionalField = this.el.querySelector(\n 'ic-text-field[slot=\"additional-field\"]'\n ) as HTMLIcTextFieldElement;\n if (additionalField) additionalField.hiddenInput = false;\n return additionalField;\n }\n\n private handleClick = (event: MouseEvent) => {\n const clickedAdditionalField = (event.target as Element).matches(\n \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)\"\n );\n\n if (\n !this.disabled &&\n (!clickedAdditionalField || event.target === this.radioElement)\n ) {\n event.stopPropagation();\n if (this.skipFocus === false) {\n this.radioElement?.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value = this.getAdditionalField()?.value || this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n if (\n this.getAdditionalField() == document.activeElement &&\n preventPropagationElements.includes(this.getAdditionalField().nodeName)\n ) {\n event.stopPropagation();\n }\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n handleKeyDown,\n hasAdditionalField,\n label,\n name,\n selected,\n value,\n theme,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n class={{\n [\"ic-radio-option-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class={{ container: true, disabled: !!disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n {hasAdditionalField && (\n <div\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\" role=\"alert\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"sKAAA,MAAMA,EAAmB,sxPACzB,MAAAC,EAAeD,EC2Bf,MAAME,EAAmB,mB,MASZC,EAAW,MAJxB,WAAAC,CAAAC,G,8FAKUC,KAAAC,kBAA4B,GAC5BD,KAAAE,mBAA8B,MAE9BF,KAAAG,UAAY,MAOKH,KAAAI,uBACvB,SAKMJ,KAAAK,SAAqB,MASrBL,KAAAM,YAAuB,6CAyBvBN,KAAAO,MAAsB,UAUUP,KAAAQ,SAAqB,MACpDR,KAAAS,kBAAoBT,KAAKQ,SA4G1BR,KAAAU,YAAeC,I,QACrB,MAAMC,EAA0BD,EAAME,OAAmBC,QACvD,8GAGF,IACGd,KAAKK,YACJO,GAA0BD,EAAME,SAAWb,KAAKe,cAClD,CACAJ,EAAMK,kBACN,GAAIhB,KAAKG,YAAc,MAAO,EAC5Bc,EAAAjB,KAAKe,gBAAY,MAAAE,SAAA,SAAAA,EAAEC,O,CAErBlB,KAAKG,UAAY,MAEjB,GAAIH,KAAKE,mBAAoB,CAC3BF,KAAKmB,QAAQC,EAAApB,KAAKqB,wBAAoB,MAAAD,SAAA,SAAAA,EAAED,QAASnB,KAAKC,iB,CAGxDD,KAAKsB,QAAQC,KAAK,CAChBJ,MAAOnB,KAAKmB,O,GAKVnB,KAAAwB,cAAiBb,IACvB,MAAMc,EAA6B,CAAC,gBAAiB,kBAErD,GACEzB,KAAKqB,sBAAwBK,SAASC,eACtCF,EAA2BG,SAAS5B,KAAKqB,qBAAqBQ,UAC9D,CACAlB,EAAMK,iB,GAIFhB,KAAA8B,gBAAkB,KACxB9B,KAAKG,UAAY,KACjBH,KAAKQ,SAAWR,KAAKS,iBAAiB,C,CA7LxC,oBAAAsB,GACEC,EAAoBhC,KAAKK,SAAUL,KAAKiC,G,CA6C1C,oBAAAC,GACElC,KAAKmC,iBAAiBZ,M,CAQxB,WAAAa,CAAYC,GACV,GACErC,KAAKI,yBAA2B,UAChCkC,MAAMC,KAAKvC,KAAKiC,GAAGO,iBAAiB,oBAAoBZ,SACtDS,EAAGxB,QAGLb,KAAKsB,QAAQC,KAAK,CAAEJ,MAAOnB,KAAKmB,O,CAQpC,oBAAAsB,GACEC,EAAwB1C,KAAKiC,GAAIjC,KAAK8B,gB,CAGxC,iBAAAa,GACE,GAAIC,EAAW5C,KAAKiC,GAAIrC,GAAmB,CACzCI,KAAKE,mBAAqB,KAC1BF,KAAKqB,oB,CAGPrB,KAAKC,kBAAoBD,KAAKmB,MAE9B0B,EAAqB7C,KAAKiC,GAAIjC,KAAK8B,iBAEnCE,EAAoBhC,KAAKK,SAAUL,KAAKiC,G,CAG1C,gBAAAa,GACEC,EACE,CAAC,CAAEC,KAAMhD,KAAKmB,MAAO8B,SAAU,UAC/B,e,CAIJ,mBAAAC,GACE,MAAMC,EAAUC,EAAepD,KAAKiC,GAAIrC,GACxC,GAAIuD,IAAYnD,KAAKE,mBAAoB,CACvCF,KAAKE,mBAAqB,KAC1BF,KAAKqB,oB,MACA,IAAK8B,GAAWnD,KAAKE,mBAAoB,CAC9CF,KAAKE,mBAAqB,K,EAI9B,kBAAAmD,GACE,GAAIrD,KAAKI,yBAA2B,SAAU,CAC5C,MAAMkD,EAAkBtD,KAAKqB,qBAC7B,IAAKrB,KAAKQ,UAAYR,KAAKK,SAAU,CACnCiD,IAAe,MAAfA,SAAe,SAAfA,EAAiBC,aAAa,WAAY,G,KACrC,CACLD,IAAe,MAAfA,SAAe,SAAfA,EAAiBE,gBAAgB,W,GAMvC,2BAAAC,CAA4B9C,GAC1B,GAAIX,KAAKQ,SAAU,CACjBR,KAAKmB,MAAQR,EAAM+C,OAAOvC,OAASnB,KAAKC,kBACxCD,KAAKsB,QAAQC,KAAK,CAChBJ,MAAOnB,KAAKmB,O,CAIhBR,EAAMgD,0B,CAOR,cAAMC,G,OACJ3C,EAAAjB,KAAKe,gBAAY,MAAAE,SAAA,SAAAA,EAAEC,O,CAOrB,iBAAM2C,CAAY1C,G,OAChBF,EAAAjB,KAAKe,gBAAY,MAAAE,SAAA,SAAAA,EAAEsC,aAAa,WAAYpC,EAAM2C,W,CAG5C,kBAAAzC,GACN,MAAMiC,EAAkBtD,KAAKiC,GAAG8B,cAC9B,0CAEF,GAAIT,EAAiBA,EAAgBU,YAAc,MACnD,OAAOV,C,CA4CT,MAAAW,GACE,MAAM7D,uBACJA,EAAsBC,SACtBA,EAAQC,YACRA,EAAW4D,KACXA,EAAIC,WACJA,EAAUzD,YACVA,EAAWc,cACXA,EAAatB,mBACbA,EAAkBkE,MAClBA,EAAKC,KACLA,EAAI7D,SACJA,EAAQW,MACRA,EAAKZ,MACLA,GACEP,KAEJ,MAAMsE,EAAK,mBAAmBC,EAAcH,IAAUjD,KAASgD,IAE/D,OACEK,EAACC,EAAI,CAAAC,IAAA,2CACHC,QAASjE,EACTkE,UAAWpD,EACXqD,MAAO,CACL,CAAC,8BAA+BxE,EAChC,CAAC,YAAYE,KAAUA,IAAU,YAGnCiE,EAAA,OAAAE,IAAA,2CAAKG,MAAO,CAAEC,UAAW,KAAMzE,WAAYA,IACzCmE,EAAA,OAAAE,IAAA,4CACEF,EAAA,SAAAE,IAAA,2CACEK,SAAUvE,EAAW,IAAM,KAC3BwE,KAAK,QACLX,KAAMA,EACNC,GAAIA,EACJnD,MAAOA,EACPd,SAAUA,EACV4E,QAASzE,EACT0E,IAAMjD,GAAQjC,KAAKe,aAAekB,EAClCiC,KAAMA,IAERM,EAAA,QAAAE,IAAA,2CAAMG,MAAM,eAEdL,EAAA,iBAAAE,IAAA,2CAAeG,MAAM,cAAcM,QAAQ,QACzCX,EAAA,SAAAE,IAAA,2CAAOU,QAASd,GAAKF,KAGxBlE,GACCsE,EAAA,OAAAE,IAAA,2CACEG,MAAO,CACL,oBAAqB,KACrBQ,OAAQjF,IAA2B,YAAcI,IAGlDJ,IAA2B,WAC1BoE,EAAA,OAAAE,IAAA,2CAAKG,MAAM,kBAEbL,EAAA,OAAAE,IAAA,4CACGtE,IAA2B,WAC1BoE,EAAA,iBAAAE,IAAA,2CAAeS,QAAQ,UAAUG,KAAK,SACpCd,EAAA,KAAAE,IAAA,2CAAGG,MAAM,gBAAgBvE,IAG7BkE,EAAA,OAAAE,IAAA,2CACEG,MAAO,CACL,2BACEzE,IAA2B,WAG/BoE,EAAA,QAAAE,IAAA,2CAAML,KAAMzE,O","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,h as t,H as i,g as n}from"./p-8e4e97b4.js";import{g as o,t as a,i as r,o as c,a as s,e as d,I as h}from"./p-a5658054.js";import"./p-bddf799a.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-hero-background);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-brand-color-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light);--hero-keyline:var(--ic-brand-text-color)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading);display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--hero-keyline)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host(.ic-hero-content-aligned-left) .left-container,:host(.ic-hero-content-aligned-left) .interaction-container{justify-content:flex-start;text-align:left}:host(.ic-hero-content-aligned-center) .left-container,:host(.ic-hero-content-aligned-center) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host(.has-right-content) .section-container{flex-wrap:wrap}:host(.has-right-content) .left-container{flex-basis:100%}:host(.has-right-content) .right-container{flex-basis:100%;margin-bottom:2.5rem}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const m=l;const g=class{constructor(t){e(this,t);this.hostMutationObserver=null;this.foregroundColor=o();this.rightContent=false;this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.scrollFactor="right -100px";this.aligned="left";this.contentAligned="left";this.disableBackgroundParallax=false;this.size="medium"}disconnectedCallback(){var e;(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.rightContent=a(this.el,"secondary")}componentDidLoad(){!r(this.el,"heading")&&c([{prop:this.heading,propName:"heading"}],"Hero");this.hostMutationObserver=new MutationObserver((e=>s(e,"secondary",this)));this.hostMutationObserver.observe(this.el,{childList:true})}componentWillRender(){this.rightContent=a(this.el,"secondary")}brandChangeHandler(e){this.foregroundColor=e.detail.mode}doScroll(){var e;if(this.disableBackgroundParallax){return}const t=(e=document.scrollingElement)===null||e===void 0?void 0:e.scrollTop;if(t){const e=.4;const i=-100+t*e;this.scrollFactor="right "+i+"px"}}render(){const{aligned:e,size:n,heading:o,subheading:a,secondaryHeading:r,secondarySubheading:c,foregroundColor:s,backgroundImage:l,scrollFactor:m,contentAligned:g}=this;let b={};if(d(l)){b={"background-image":"url("+l+")","background-position":m}}return t(i,{key:"ae89dfc9697492e640cef1740da5b1552a6b31ca",class:{[`ic-hero-${h.Dark}`]:s===h.Dark,["has-background-image"]:l!==undefined,["has-right-content"]:this.rightContent,["ic-hero-small"]:n==="small",["secondary-heading"]:!!r,[`ic-hero-content-aligned-${g}`]:g!==undefined},style:b},t("ic-section-container",{key:"e70e1a6e85eddbdbc68b9a7754d760e898e27981",aligned:e,fullHeight:true,class:"section-container"},t("div",{key:"f1b85e347aa5f1b6f961aa2c7943a1e651dc22c3",class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{key:"2100740ba4e22f0f229c145327b572ffa78521c6",class:"heading"},t("slot",{key:"30cd98888662c64e944660a68410cf51d0146460",name:"heading"},t("ic-typography",{key:"dc2a602974c66325be5082c517f28eae72f5780b",variant:n==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:n!=="small"}},t("h2",{key:"5f26d23f4bcf35ee1273741ef767c93ea3a8f90d"},o)))),t("div",{key:"4187d2e39e8adb1174e9408ab269f343c876e711",class:"subheading"},t("slot",{key:"90835b42345fbebb0f98501cf46e9185f746868d",name:"subheading"},t("ic-typography",{key:"85b6f8619599bd518fa1b4351ec5dcb0d0059684",variant:"body"},a))),t("div",{key:"2f79214e6fb235164825f6c77d31d16cf3e1bda8",class:"interaction-container"},t("slot",{key:"008f3ad58fdc0d12a1fa3dfe8e400a5cbe05b13f",name:"interaction"}))),(d(r)||this.rightContent)&&t("div",{key:"6ae2e569b0a50c021f9b7aa0399c48c79a6a2151",class:"right-container"},t("slot",{key:"03ebade13d8f03e4d0fe310d2a3038c3c2bdcada",name:"secondary"},r&&t("div",{key:"87be1f434f9f7d37783a79de3d38a9ffd3ae6633",class:"secondary-container"},t("div",{key:"87f64a2443ccfa0e6fa790b13302f28269a7aeb2",class:"secondary-heading"},t("ic-typography",{key:"c8fefec7ecd3a3757b565933238bddbcb2206389",variant:"h4"},t("h3",{key:"0afe6e4b3b4594ce85599155f65c89b27a8ffc97"},r))),t("div",{key:"84412145d7f3785e60d67ceaa879066e9623784f",class:"secondary-subheading"},t("ic-typography",{key:"0e89a8ef45a387d6f09a25ce88e1947bdf24c47a",variant:"subtitle-small"},c)))))))}get el(){return n(this)}};g.style=m;export{g as ic_hero};
2
- //# sourceMappingURL=p-24d46cab.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icHeroCss","IcHeroStyle0","Hero","constructor","hostRef","this","hostMutationObserver","foregroundColor","getBrandForegroundAppearance","rightContent","leftContentFullWidth","secondaryHeading","undefined","scrollFactor","aligned","contentAligned","disableBackgroundParallax","size","disconnectedCallback","_a","disconnect","componentWillLoad","slotHasContent","el","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","componentWillRender","brandChangeHandler","ev","detail","mode","doScroll","scrolltotop","document","scrollingElement","scrollTop","factor","y","render","subheading","secondarySubheading","backgroundImage","style","isPropDefined","h","Host","key","class","IcBrandForegroundEnum","Dark","fullHeight","name","variant"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-hero-background);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.ic-hero-content-aligned-left) .left-container,\n:host(.ic-hero-content-aligned-left) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host(.ic-hero-content-aligned-center) .left-container,\n:host(.ic-hero-content-aligned-center) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host(.has-right-content) .section-container {\n flex-wrap: wrap;\n }\n\n :host(.has-right-content) .left-container {\n flex-basis: 100%;\n }\n\n :host(.has-right-content) .right-container {\n flex-basis: 100%;\n margin-bottom: 2.5rem;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver | null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /**\n * The alignment of the hero.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * The optional background image.\n */\n @Prop() backgroundImage?: string;\n\n /**\n * The alignment of the hero content.\n */\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /**\n * If `true`, the background image (if set) will not scroll using a parallax effect.\n */\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /**\n * The heading of the hero. An <h2> level heading.\n */\n @Prop() heading?: string;\n\n /**\n * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n */\n @Prop() secondaryHeading?: string;\n\n /**\n * The optional secondary subheading, replaced by slotted right content.\n */\n @Prop() secondarySubheading?: string;\n\n /**\n * The size of the hero component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The description for the hero.\n */\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop * factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n contentAligned,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"has-right-content\"]: this.rightContent,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n [`ic-hero-content-aligned-${contentAligned}`]:\n contentAligned !== undefined,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as i,h as c,H as a,g as t}from"./p-8e4e97b4.js";import{r,k as o,o as n,l as d,m as s,n as l,i as b}from"./p-a5658054.js";import"./p-bddf799a.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-data-table-checkbox) .container{padding:0;margin-bottom:0}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{color:var(--ic-checkbox-text);--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm);display:inline-block}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}.dynamic-field-container{flex:100%}.sr-only{position:absolute;left:-9999px}@media (max-width: 576px){::slotted(*){--input-width:100%}.dynamic-field-container{flex:initial}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}';const m=h;const p=class{constructor(c){e(this,c);this.icCheck=i(this,"icCheck",7);this.additionalFieldDisplay="static";this.checked=false;this.initiallyChecked=this.checked;this.disabled=false;this.dynamicText="This selection requires additional answers";this.hideLabel=false;this.indeterminate=false;this.displayIndeterminate=this.indeterminate;this.nativeIndeterminateBehaviour=false;this.theme="inherit";this.value="";this.handleClick=()=>{this.checked=!this.checked;this.displayIndeterminate=!this.nativeIndeterminateBehaviour&&this.indeterminate&&this.checked;this.icCheck.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked}}watchDisabledHandler(){r(this.disabled,this.el)}watchIndeterminateHandler(){this.displayIndeterminate=this.indeterminate&&(this.nativeIndeterminateBehaviour||this.checked)}componentWillLoad(){r(this.disabled,this.el);o(this.el,this.handleFormReset);const{parentElement:e}=this.el;if((e===null||e===void 0?void 0:e.tagName)==="IC-CHECKBOX-GROUP"){const{name:i,label:c,size:a}=e;if(!this.name)this.name=i;if(!this.size)this.size=a;this.groupLabel=c}}componentDidLoad(){n([{prop:this.label,propName:"label"}],"Checkbox")}componentDidRender(){if(this.additionalFieldDisplay==="static"){this.el.querySelectorAll("ic-text-field").forEach((e=>e.setAttribute("disabled",`${!this.checked}`)))}else if(this.additionalFieldContainer){this.additionalFieldContainer.style.display=!this.checked?"none":"flex"}}disconnectedCallback(){d(this.el,this.handleFormReset)}async setFocus(){var e;(e=this.checkboxEl)===null||e===void 0?void 0:e.focus()}render(){const{additionalFieldDisplay:e,checked:i,disabled:t,displayIndeterminate:r,dynamicText:o,el:n,form:d,groupLabel:h,handleClick:m,hideLabel:p,label:k,name:x,size:v,theme:g,value:f}=this;const u=`ic-checkbox-${k}-${h}`.replace(/ /g,"-");const y=e==="dynamic";i?s(n,f,x,t):l(n);return c(a,{key:"085faed0fb3d46c8903cc09959a1a04f36ac2eeb",class:{"ic-checkbox-disabled":t,[`ic-checkbox-${v}`]:!!v,[`ic-theme-${g}`]:g!=="inherit"}},c("div",{key:"20c07a9059a4fd3b1b59587771190dfd7ebf70fe",class:"container"},r?c("div",{class:"indeterminate-symbol"}):i&&c("svg",{class:"checkmark",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},c("title",null,"checkmark icon"),c("path",{d:"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"})),c("input",{key:"94f8a343a8d80a8ceb68f2cddc300c7c500deae7",role:"checkbox",class:{checkbox:true,checked:i,indeterminate:r},ref:e=>this.checkboxEl=e,type:"checkbox",name:x,id:u,value:f,disabled:t,checked:i,indeterminate:r,onClick:m,form:d,"aria-label":p?k:undefined}),!p&&c("ic-typography",{key:"b8b137c6cd0b1ee18ca44f8aa55c976b735b7af8",class:"checkbox-label",variant:"body"},c("label",{key:"44976b751599275d613ff52a816133a896791912",htmlFor:u},k))),c("span",{key:"e1e39b78d26a6d057c722794784b69b422197ff3",id:`${u}-additional-field-description`,role:"alert",class:"sr-only"},y&&i?o:""),b(n,"additional-field")&&c("div",{key:"62457da0c99d40b8bbfb97d3b41f400ef1a22dd0",class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},y&&c("div",{key:"65a6a9deddeb2c2b11fe56273c2d3bc5391f696e",class:"branch-corner"}),c("div",{key:"3e920fd15f6cf506e793bc6386db140332ed390a",class:"dynamic-field-container"},y&&c("ic-typography",{key:"0257c5f48fe33b49742d0a5bd50dac4c000a1f04",variant:"caption"},c("p",{key:"24d8ebe43598283a5e5af287379f3b0f54e17d85",class:"dynamic-text"},y&&i?o:"")),c("div",{key:"38bcc265ce747daad6577a244d2db6c7fbd6d22b",class:{"additional-field-wrapper":!y}},c("slot",{key:"117707c0f26bb70c0c7d13e3d1a01c2120f0f948",name:"additional-field"})))))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{disabled:["watchDisabledHandler"],indeterminate:["watchIndeterminateHandler"]}}};p.style=m;export{p as ic_checkbox};
2
- //# sourceMappingURL=p-48eb7299.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icCheckboxCss","IcCheckboxStyle0","Checkbox","constructor","hostRef","this","additionalFieldDisplay","checked","initiallyChecked","disabled","dynamicText","hideLabel","indeterminate","displayIndeterminate","nativeIndeterminateBehaviour","theme","value","handleClick","icCheck","emit","handleFormReset","watchDisabledHandler","removeDisabledFalse","el","watchIndeterminateHandler","componentWillLoad","addFormResetListener","parentElement","tagName","name","label","size","groupLabel","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","querySelectorAll","forEach","textfield","setAttribute","additionalFieldContainer","style","display","disconnectedCallback","removeFormResetListener","setFocus","_a","checkboxEl","focus","render","form","id","replace","isDynamicAdditionalField","renderHiddenInput","removeHiddenInput","h","Host","key","class","viewBox","xmlns","d","role","checkbox","ref","type","onClick","undefined","variant","htmlFor","isSlotUsed"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.ic-data-table-checkbox) .container {\n padding: 0;\n margin-bottom: 0;\n}\n\n:host(.ic-checkbox-small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-checkbox-background-unselected);\n border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-checkbox-background-selected);\n border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-checkbox-background-selected-disabled);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-checkbox-background-indeterminate);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n background-color: var(--ic-checkbox-background-indeterminate-disabled);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-checkbox-background-indeterminate-hover);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-checkbox-background-indeterminate-pressed);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n color: var(--ic-checkbox-text);\n\n --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n padding-left: var(--ic-space-sm);\n display: inline-block;\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n color: var(--ic-checkbox-text-disabled);\n\n --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: var(--ic-checkbox-icon-pressed);\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-checkbox-icon-indeterminate);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);\n border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-checkbox-required-text);\n\n --ic-typography-color: var(--ic-checkbox-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n.dynamic-field-container {\n flex: 100%;\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n@media (max-width: 576px) {\n ::slotted(*) {\n --input-width: 100%;\n }\n\n .dynamic-field-container {\n flex: initial;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n\n/* Right to left */\n.checkmark:dir(rtl) {\n right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer?: HTMLDivElement;\n private checkboxEl?: HTMLInputElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n */\n @Prop({ reflect: true, mutable: true }) checked = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop({ mutable: true }) groupLabel?: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel = false;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate = false;\n @State() displayIndeterminate = this.indeterminate;\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate =\n this.indeterminate && (this.nativeIndeterminateBehaviour || this.checked);\n }\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop({ mutable: true }) name?: string;\n\n /**\n * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n */\n @Prop() nativeIndeterminateBehaviour = false;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop({ mutable: true }) size?: IcSizes;\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\n /**\n * The value for the checkbox.\n */\n @Prop() value = \"\";\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const { parentElement } = this.el;\n if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n if (!this.name) this.name = name;\n if (!this.size) this.size = size;\n this.groupLabel = label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n this.el\n .querySelectorAll(\"ic-text-field\")\n .forEach((textfield) =>\n textfield.setAttribute(\"disabled\", `${!this.checked}`)\n );\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.checkboxEl?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate =\n !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n displayIndeterminate,\n dynamicText,\n el,\n form,\n groupLabel,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size}`]: !!size,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate ? (\n <div class=\"indeterminate-symbol\" />\n ) : (\n checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n ref={(el) => (this.checkboxEl = el)}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel ? label : undefined}\n ></input>\n {!hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n <span\n id={`${id}-additional-field-description`}\n role=\"alert\"\n class=\"sr-only\"\n >\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </span>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n <div class=\"dynamic-field-container\">\n {isDynamicAdditionalField && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\": !isDynamicAdditionalField,\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as i,c as t,h as e,H as o,g as n}from"./p-8e4e97b4.js";import{D as a,g as s,f as r,y as d}from"./p-a5658054.js";import{C as h}from"./p-3b185c32.js";import"./p-bddf799a.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-typography-color:currentcolor}:host(.in-side-menu){border-bottom:var(--ic-border-width) solid\n var(--ic-divider-background-monochrome);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-brand-text-color);display:flex;gap:var(--ic-space-xxs);align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none;text-align:left;box-sizing:border-box}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-text-primary-light);outline:none;cursor:pointer}:host(.in-side-menu) .navigation-group{min-height:2.5rem;width:100%;gap:1.25rem}:host(.in-side-menu) .navigation-group .ic-typography-label{width:100%}:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group,:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-top-navigation-nav-group-link);justify-content:flex-start;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;min-height:0.45em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;min-width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:var(--ic-z-index-navigation-item);transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-top-navigation-nav-group-hover);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-top-navigation-nav-group-pressed)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);background:none}:host .navigation-group-dropdown{background-color:var(--ic-top-navigation-menu-background);border-bottom:var(--ic-space-1px) solid var(--ic-top-navigation-menu-border);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);z-index:calc(var(--ic-z-index-navigation-item) - 1)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:16.5rem}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg);height:var(--ic-space-lg);width:var(--ic-space-lg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.ic-navigation-group-expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto) !important;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.ic-navigation-group-side-nav) .link,:host(.ic-navigation-group-side-nav) ::slotted(a){height:var(--navigation-child-items-height, auto)}:host(.ic-navigation-group-collapsed) .grouped-links-wrapper{height:0;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.ic-navigation-group-side-nav) .navigation-group{min-height:var(--navigation-group-height);height:-moz-fit-content;height:fit-content;min-width:100%;width:var(--navigation-group-width, auto);justify-content:var(--navigation-group-justify-content);padding:var(--ic-space-md) var(--navigation-group-expand-toggle-padding)\n var(--ic-space-xs) var(--ic-space-md)}:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group{padding-right:var(--ic-space-md)}:host(.ic-navigation-group-side-nav) .navigation-group:hover,:host(.ic-navigation-group-side-nav) .navigation-group:active,:host(.ic-navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group:hover,:host(.ic-navigation-group-side-nav:not(.ic-navigation-group-expandable)) .navigation-group:active,:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group:hover,:host(.in-side-menu:not(.ic-navigation-group-expandable)) .navigation-group:active{background:none;cursor:auto}:host(.ic-navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.ic-navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left)}';const p=c;const u="ic-navigation-item";const l=100;const g="IC-NAVIGATION-GROUP";const v=class{constructor(o){i(this,o);this.navigationGroupOpened=t(this,"navigationGroupOpened",7);this.navigationGroupExpanded=t(this,"navigationGroupExpanded",7);this.allGroupedNavigationItemHeights="";this.collapsedNavItemsHeight=null;this.expandedNavItemsHeight=null;this.mouseGate=false;this.deviceSize=a.XL;this.dropdownOpen=false;this.focusStyle=s();this.inTopNavSideMenu=false;this.isSideNavExpanded=false;this.expandable=false;this.expanded=true;this.theme="inherit";this.sideNavExpandHandler=i=>{this.isSideNavExpanded=i.detail.sideNavExpanded;if(!this.linkWrapper||!this.expanded)return;const t=this.isSideNavExpanded?this.expandedNavItemsHeight:this.collapsedNavItemsHeight;if(t){this.setGroupedLinksElementHeight(t)}else{setTimeout((()=>{if(this.isSideNavExpanded){this.expandedNavItemsHeight=this.allGroupedNavigationItemHeights}else{this.collapsedNavItemsHeight=this.allGroupedNavigationItemHeights}this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights)}),l)}};this.topNavResizedHandler=({detail:{size:i}})=>{var t;if(i===this.deviceSize)return;this.deviceSize=i;this.inTopNavSideMenu=i<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||a.L)};this.toggleExpanded=()=>{this.expanded=!this.expanded;if(!this.linkWrapper)return;this.setGroupedLinksElementHeight(!this.expanded?"0":this.isSideNavExpanded?this.expandedNavItemsHeight:this.collapsedNavItemsHeight);this.el.querySelectorAll(u).forEach((i=>{var t;const e=((t=i.shadowRoot)===null||t===void 0?void 0:t.querySelector("a"))||i.querySelector("a");e===null||e===void 0?void 0:e.setAttribute("tabindex",this.expanded?"0":"-1")}))};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{if(!this.el.contains(i.relatedTarget)){this.hideDropdown()}};this.handleKeydown=i=>{const{key:t}=i;if(t!=="Enter"&&t!==" "&&t!=="Escape")return;switch(this.navigationType){case"top":if(t===" "||t==="Enter"){this.toggleDropdown()}else if(!this.inTopNavSideMenu){this.hideDropdown()}break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}};this.handleMouseLeave=i=>{const t=i.relatedTarget;this.mouseGate=false;if(this.el.contains(t)||t===this.dropdown||this.el.contains(document.activeElement))return;if(document.activeElement!==this.el&&(t===null||t===void 0?void 0:t.nodeName)===g&&this.dropdownOpen){this.mouseGate=true;this.hideDropdown()}else{this.mouseGate=false;setTimeout((()=>{this.dropdownOpen?this.hideDropdown():null}),500)}};this.handleMouseEnter=i=>{const t=i.relatedTarget;document.addEventListener("keydown",this.handleKeydown);if((t===null||t===void 0?void 0:t.nodeName)===g&&this.mouseGate){this.showDropdown()}else if(!this.dropdownOpen&&!this.mouseGate){this.mouseGate=true;setTimeout((()=>{if(this.mouseGate)this.showDropdown()}),500)}};this.renderGroupTitleText=()=>e("ic-typography",{id:"nav-group-title",variant:this.navigationType==="side"?"caption":"label"},this.label);this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return e("div",{class:{[this.inTopNavSideMenu?"navigation-group-dropdown-side-menu":"navigation-group-dropdown"]:true,selected:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:undefined,ref:i=>this.dropdown=i},e("nav",{class:{"navigation-group-dropdown-items":!this.inTopNavSideMenu},"aria-labelledby":"nav-group-title"},e("ul",null,e("slot",null))))}if(this.navigationType!=="top"){return e("ul",{ref:i=>this.linkWrapper=i,class:"grouped-links-wrapper"},e("slot",null))}return null};this.setGroupedLinksElementHeight=i=>{var t;(t=this.linkWrapper)===null||t===void 0?void 0:t.style.setProperty("--navigation-child-items-height",i)}}disconnectedCallback(){var i,t;if(this.navigationType==="side"){(i=this.parentEl)===null||i===void 0?void 0:i.removeEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(t=this.parentEl)===null||t===void 0?void 0:t.removeEventListener("icTopNavResized",this.topNavResizedHandler)}}componentWillLoad(){var i,t;this.deviceSize=r();const{navType:e,parent:o}=d(this.el);this.navigationType=e;this.parentEl=o;if(this.navigationType==="side"){(i=this.parentEl)===null||i===void 0?void 0:i.addEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(t=this.parentEl)===null||t===void 0?void 0:t.addEventListener("icTopNavResized",this.topNavResizedHandler);if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}}componentDidLoad(){this.allGroupedNavigationItemHeights=`${Array.from(this.el.querySelectorAll(u)).reduce(((i,{offsetHeight:t})=>i+t),0)}px`;setTimeout((()=>{if(!this.linkWrapper||!this.expanded)return;if(!this.isSideNavExpanded)this.collapsedNavItemsHeight=this.allGroupedNavigationItemHeights;else this.expandedNavItemsHeight=this.allGroupedNavigationItemHeights;this.setGroupedLinksElementHeight(this.allGroupedNavigationItemHeights)}),l)}childBlurHandler(){this.hideDropdown()}handleNavigationGroupOpened(i){if(i.detail.source!==this.el){this.hideDropdown()}}navItemClickHandler(){this.hideDropdown()}brandChangeHandler(i){this.focusStyle=i.detail.mode}async setFocus(){var i;(i=this.groupEl)===null||i===void 0?void 0:i.focus()}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;if(this.inTopNavSideMenu){this.navigationGroupExpanded.emit({expanded:this.dropdownOpen})}}showDropdown(){if(!this.dropdownOpen){this.navigationGroupOpened.emit({source:this.el});this.toggleDropdown()}}hideDropdown(){document.removeEventListener("keydown",this.handleKeydown);if(this.dropdownOpen){this.toggleDropdown()}}render(){const{dropdownOpen:i,expanded:t,inTopNavSideMenu:n,expandable:a,theme:s,isSideNavExpanded:r,focusStyle:d}=this;const c=i=>i?"expanded":"collapsed";const p={"navigation-group":true,[d]:!n,[`navigation-group-side-menu-${c(i)}`]:n&&a,selected:i&&!n};const u=this.navigationType==="side";const l=this.navigationType==="top";const g=!n&&l;const v=u&&t||l&&i;return e(o,{key:"15cdbd2b2ce19129b1ff6a845922036813e7ae99",class:{"in-side-menu":n,"ic-navigation-group-expandable":a,"ic-navigation-group-side-nav":u,[`ic-navigation-group-${c(t)}`]:true,[`ic-theme-${s}`]:s!=="inherit"},role:"listitem"},a||g?e("button",{onMouseEnter:g?this.handleMouseEnter:undefined,onMouseLeave:l?this.handleMouseLeave:undefined,onBlur:this.handleBlur,onClick:this.handleClick,onKeyDown:this.handleKeydown,class:p,ref:i=>this.groupEl=i,"aria-expanded":`${v}`,"aria-haspopup":`${g}`},this.renderGroupTitleText(),u&&a&&e("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":!!t},innerHTML:h})):(!u||r)&&e("div",{class:p},this.renderGroupTitleText()),this.renderNavigationItems())}static get delegatesFocus(){return true}get el(){return n(this)}};v.style=p;export{v as ic_navigation_group};
2
- //# sourceMappingURL=p-4a358f09.entry.js.map