@ukic/web-components 2.0.0-alpha.125 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (595) hide show
  1. package/README.md +173 -0
  2. package/dist/cjs/core.cjs.js +1 -1
  3. package/dist/cjs/{helpers-ea79c7b0.js → helpers-d0eeccf0.js} +26 -20
  4. package/dist/cjs/helpers-d0eeccf0.js.map +1 -0
  5. package/dist/cjs/ic-alert.cjs.entry.js +5 -4
  6. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ic-back-to-top.cjs.entry.js +3 -2
  8. package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
  9. package/dist/cjs/{ic-breadcrumbs.cjs.entry.js → ic-breadcrumb-group.cjs.entry.js} +7 -6
  10. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -0
  11. package/dist/cjs/ic-breadcrumb.cjs.entry.js +3 -2
  12. package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ic-button_3.cjs.entry.js +26 -30
  14. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ic-card.cjs.entry.js +2 -1
  16. package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ic-checkbox-group.cjs.entry.js +3 -2
  18. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ic-checkbox.cjs.entry.js +13 -2
  20. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ic-data-entity.cjs.entry.js +6 -6
  22. package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ic-data-row.cjs.entry.js +6 -5
  24. package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ic-divider.cjs.entry.js +3 -2
  26. package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
  27. package/dist/cjs/ic-footer-link-group.cjs.entry.js +12 -11
  28. package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ic-footer-link.cjs.entry.js +8 -7
  30. package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ic-footer.cjs.entry.js +16 -15
  32. package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
  33. package/dist/cjs/ic-hero.cjs.entry.js +9 -8
  34. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  35. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +9 -8
  36. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  37. package/dist/cjs/ic-input-label_2.cjs.entry.js +5 -4
  38. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  39. package/dist/cjs/ic-link.cjs.entry.js +11 -10
  40. package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
  41. package/dist/cjs/ic-navigation-button.cjs.entry.js +8 -7
  42. package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
  43. package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -1
  44. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ic-navigation-item.cjs.entry.js +3 -2
  46. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  47. package/dist/cjs/ic-navigation-menu.cjs.entry.js +3 -2
  48. package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
  49. package/dist/cjs/ic-page-header.cjs.entry.js +6 -5
  50. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  51. package/dist/cjs/ic-radio-group.cjs.entry.js +3 -2
  52. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  53. package/dist/cjs/ic-radio-option.cjs.entry.js +17 -3
  54. package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
  55. package/dist/cjs/ic-search-bar.cjs.entry.js +15 -16
  56. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  57. package/dist/cjs/ic-select.cjs.entry.js +25 -13
  58. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ic-side-navigation.cjs.entry.js +4 -3
  60. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  61. package/dist/cjs/ic-skeleton.cjs.entry.js +10 -10
  62. package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
  63. package/dist/cjs/ic-status-tag.cjs.entry.js +9 -8
  64. package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
  65. package/dist/cjs/ic-step.cjs.entry.js +2 -1
  66. package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
  67. package/dist/cjs/ic-stepper.cjs.entry.js +2 -1
  68. package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
  69. package/dist/cjs/ic-switch.cjs.entry.js +21 -10
  70. package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
  71. package/dist/cjs/ic-tab-context.cjs.entry.js +13 -11
  72. package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
  73. package/dist/cjs/ic-tab-group.cjs.entry.js +146 -0
  74. package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -0
  75. package/dist/cjs/ic-tab-panel.cjs.entry.js +8 -4
  76. package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
  77. package/dist/cjs/ic-tab.cjs.entry.js +6 -5
  78. package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
  79. package/dist/cjs/ic-text-field.cjs.entry.js +18 -10
  80. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  81. package/dist/cjs/ic-theme.cjs.entry.js +2 -1
  82. package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
  83. package/dist/cjs/ic-top-navigation.cjs.entry.js +7 -6
  84. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  85. package/dist/cjs/ic-typography.cjs.entry.js +4 -4
  86. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  87. package/dist/cjs/index-3ef30d9d.js +4 -4
  88. package/dist/cjs/loader.cjs.js +1 -1
  89. package/dist/cjs/types-3eb02246.js +16 -0
  90. package/dist/cjs/types-3eb02246.js.map +1 -0
  91. package/dist/collection/collection-manifest.json +2 -2
  92. package/dist/collection/components/ic-alert/ic-alert.css +1 -6
  93. package/dist/collection/components/ic-alert/ic-alert.js +1 -1
  94. package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
  95. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +1 -1
  96. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
  97. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +1 -2
  98. package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs-test-examples.js → ic-breadcrumb-group/ic-breadcrumb-group-test-examples.js} +7 -7
  99. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group-test-examples.js.map +1 -0
  100. package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.css → ic-breadcrumb-group/ic-breadcrumb-group.css} +1 -0
  101. package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.js → ic-breadcrumb-group/ic-breadcrumb-group.js} +5 -5
  102. package/dist/{core/p-42876f02.entry.js.map → collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map} +1 -1
  103. package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.test.a11y.js → ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.js} +6 -6
  104. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.js.map +1 -0
  105. package/dist/collection/components/ic-button/ic-button.css +5 -5
  106. package/dist/collection/components/ic-button/ic-button.js +22 -52
  107. package/dist/collection/components/ic-button/ic-button.js.map +1 -1
  108. package/dist/collection/components/ic-button/ic-button.types.js.map +1 -1
  109. package/dist/collection/components/ic-checkbox/ic-checkbox.css +7 -1
  110. package/dist/collection/components/ic-checkbox/ic-checkbox.js +17 -2
  111. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  112. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +4 -4
  113. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
  114. package/dist/collection/components/ic-data-entity/ic-data-entity.css +2 -2
  115. package/dist/collection/components/ic-data-entity/ic-data-entity.js +8 -8
  116. package/dist/collection/components/ic-data-entity/ic-data-entity.js.map +1 -1
  117. package/dist/collection/components/ic-data-row/ic-data-row.css +9 -1
  118. package/dist/collection/components/ic-data-row/ic-data-row.js +6 -6
  119. package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
  120. package/dist/collection/components/ic-footer/ic-footer.css +2 -2
  121. package/dist/collection/components/ic-footer/ic-footer.js +14 -14
  122. package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
  123. package/dist/collection/components/ic-footer/ic-footer.types.js.map +1 -1
  124. package/dist/collection/components/ic-footer-link/ic-footer-link.css +3 -3
  125. package/dist/collection/components/ic-footer-link/ic-footer-link.js +5 -5
  126. package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
  127. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css +8 -8
  128. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +10 -10
  129. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
  130. package/dist/collection/components/ic-hero/ic-hero.css +29 -17
  131. package/dist/collection/components/ic-hero/ic-hero.js +9 -9
  132. package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
  133. package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +2 -2
  134. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +6 -6
  135. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
  136. package/dist/collection/components/ic-link/ic-link.css +1 -1
  137. package/dist/collection/components/ic-link/ic-link.js +12 -9
  138. package/dist/collection/components/ic-link/ic-link.js.map +1 -1
  139. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +2 -2
  140. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +26 -25
  141. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
  142. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.types.js.map +1 -1
  143. package/dist/collection/components/ic-menu/ic-menu.css +2 -2
  144. package/dist/collection/components/ic-menu/ic-menu.js +4 -4
  145. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  146. package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +7 -7
  147. package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
  148. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +1 -1
  149. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
  150. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +1 -1
  151. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
  152. package/dist/collection/components/ic-page-header/ic-page-header.css +10 -1
  153. package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
  154. package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
  155. package/dist/collection/components/ic-radio-group/ic-radio-group.js +4 -4
  156. package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
  157. package/dist/collection/components/ic-radio-option/ic-radio-option.css +8 -2
  158. package/dist/collection/components/ic-radio-option/ic-radio-option.js +22 -4
  159. package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
  160. package/dist/collection/components/ic-search-bar/ic-search-bar.css +1 -1
  161. package/dist/collection/components/ic-search-bar/ic-search-bar.js +11 -31
  162. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  163. package/dist/collection/components/ic-select/ic-select.css +2 -2
  164. package/dist/collection/components/ic-select/ic-select.js +24 -12
  165. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  166. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +1 -1
  167. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
  168. package/dist/collection/components/ic-skeleton/ic-skeleton.css +4 -4
  169. package/dist/collection/components/ic-skeleton/ic-skeleton.js +14 -14
  170. package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
  171. package/dist/collection/components/ic-skeleton/ic-skeleton.types.js.map +1 -1
  172. package/dist/collection/components/ic-status-tag/ic-status-tag.css +9 -9
  173. package/dist/collection/components/ic-status-tag/ic-status-tag.js +14 -14
  174. package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
  175. package/dist/collection/components/ic-status-tag/ic-status-tag.types.js.map +1 -1
  176. package/dist/collection/components/ic-switch/ic-switch.css +6 -6
  177. package/dist/collection/components/ic-switch/ic-switch.js +27 -16
  178. package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
  179. package/dist/collection/components/ic-tab/ic-tab.css +1 -1
  180. package/dist/collection/components/ic-tab/ic-tab.js +17 -11
  181. package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
  182. package/dist/collection/components/ic-tab-context/ic-tab-context.js +26 -19
  183. package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
  184. package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js +2 -2
  185. package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js.map +1 -1
  186. package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/left-arrow.svg +0 -0
  187. package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/right-arrow.svg +0 -0
  188. package/dist/collection/components/{ic-tab-list/ic-tab-list.css → ic-tab-group/ic-tab-group.css} +3 -3
  189. package/dist/collection/components/{ic-tab-list/ic-tab-list.js → ic-tab-group/ic-tab-group.js} +37 -31
  190. package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -0
  191. package/dist/collection/components/ic-tab-panel/ic-tab-panel.css +4 -0
  192. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +32 -2
  193. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
  194. package/dist/collection/components/ic-text-field/ic-text-field.js +17 -27
  195. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  196. package/dist/collection/components/ic-tooltip/ic-tooltip.css +4 -4
  197. package/dist/collection/components/ic-tooltip/ic-tooltip.js +6 -6
  198. package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
  199. package/dist/collection/components/ic-tooltip/ic-tooltip.test.a11y.js +1 -1
  200. package/dist/collection/components/ic-tooltip/ic-tooltip.test.a11y.js.map +1 -1
  201. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +4 -4
  202. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
  203. package/dist/collection/components/ic-typography/ic-typography.css +12 -12
  204. package/dist/collection/components/ic-typography/ic-typography.js +5 -5
  205. package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
  206. package/dist/collection/utils/helpers.js +15 -0
  207. package/dist/collection/utils/helpers.js.map +1 -1
  208. package/dist/collection/utils/types.js.map +1 -1
  209. package/dist/components/helpers.js +17 -13
  210. package/dist/components/helpers.js.map +1 -1
  211. package/dist/components/ic-alert.js +4 -3
  212. package/dist/components/ic-alert.js.map +1 -1
  213. package/dist/components/ic-back-to-top.js +1 -1
  214. package/dist/components/ic-back-to-top.js.map +1 -1
  215. package/dist/components/{ic-breadcrumbs.d.ts → ic-breadcrumb-group.d.ts} +4 -4
  216. package/dist/components/{ic-breadcrumbs.js → ic-breadcrumb-group.js} +10 -10
  217. package/dist/{cjs/ic-breadcrumbs.cjs.entry.js.map → components/ic-breadcrumb-group.js.map} +1 -1
  218. package/dist/components/ic-breadcrumb2.js +1 -1
  219. package/dist/components/ic-breadcrumb2.js.map +1 -1
  220. package/dist/components/ic-button2.js +19 -25
  221. package/dist/components/ic-button2.js.map +1 -1
  222. package/dist/components/ic-checkbox-group.js +3 -3
  223. package/dist/components/ic-checkbox-group.js.map +1 -1
  224. package/dist/components/ic-checkbox.js +15 -4
  225. package/dist/components/ic-checkbox.js.map +1 -1
  226. package/dist/components/ic-data-entity.js +7 -7
  227. package/dist/components/ic-data-entity.js.map +1 -1
  228. package/dist/components/ic-data-row.js +5 -5
  229. package/dist/components/ic-data-row.js.map +1 -1
  230. package/dist/components/ic-divider2.js +2 -1
  231. package/dist/components/ic-divider2.js.map +1 -1
  232. package/dist/components/ic-footer-link-group.js +12 -12
  233. package/dist/components/ic-footer-link-group.js.map +1 -1
  234. package/dist/components/ic-footer-link.js +7 -7
  235. package/dist/components/ic-footer-link.js.map +1 -1
  236. package/dist/components/ic-footer.js +14 -13
  237. package/dist/components/ic-footer.js.map +1 -1
  238. package/dist/components/ic-hero.js +9 -8
  239. package/dist/components/ic-hero.js.map +1 -1
  240. package/dist/components/ic-input-component-container2.js +7 -6
  241. package/dist/components/ic-input-component-container2.js.map +1 -1
  242. package/dist/components/ic-input-validation2.js +2 -1
  243. package/dist/components/ic-input-validation2.js.map +1 -1
  244. package/dist/components/ic-link2.js +10 -9
  245. package/dist/components/ic-link2.js.map +1 -1
  246. package/dist/components/ic-loading-indicator2.js +8 -7
  247. package/dist/components/ic-loading-indicator2.js.map +1 -1
  248. package/dist/components/ic-menu2.js +3 -3
  249. package/dist/components/ic-menu2.js.map +1 -1
  250. package/dist/components/ic-navigation-button.js +9 -8
  251. package/dist/components/ic-navigation-button.js.map +1 -1
  252. package/dist/components/ic-navigation-group.js +1 -1
  253. package/dist/components/ic-navigation-item.js +2 -2
  254. package/dist/components/ic-navigation-item.js.map +1 -1
  255. package/dist/components/ic-navigation-menu2.js +2 -2
  256. package/dist/components/ic-navigation-menu2.js.map +1 -1
  257. package/dist/components/ic-page-header.js +5 -5
  258. package/dist/components/ic-page-header.js.map +1 -1
  259. package/dist/components/ic-radio-group.js +3 -3
  260. package/dist/components/ic-radio-group.js.map +1 -1
  261. package/dist/components/ic-radio-option.js +20 -6
  262. package/dist/components/ic-radio-option.js.map +1 -1
  263. package/dist/components/ic-search-bar.js +12 -14
  264. package/dist/components/ic-search-bar.js.map +1 -1
  265. package/dist/components/ic-select.js +23 -10
  266. package/dist/components/ic-select.js.map +1 -1
  267. package/dist/components/ic-side-navigation.js +3 -2
  268. package/dist/components/ic-side-navigation.js.map +1 -1
  269. package/dist/components/ic-skeleton.js +11 -11
  270. package/dist/components/ic-skeleton.js.map +1 -1
  271. package/dist/components/ic-status-tag.js +9 -9
  272. package/dist/components/ic-status-tag.js.map +1 -1
  273. package/dist/components/ic-switch.js +23 -12
  274. package/dist/components/ic-switch.js.map +1 -1
  275. package/dist/components/ic-tab-context.js +14 -12
  276. package/dist/components/ic-tab-context.js.map +1 -1
  277. package/dist/components/{ic-tab-list.d.ts → ic-tab-group.d.ts} +4 -4
  278. package/dist/components/{ic-tab-list.js → ic-tab-group.js} +30 -29
  279. package/dist/components/ic-tab-group.js.map +1 -0
  280. package/dist/components/ic-tab-panel.js +9 -4
  281. package/dist/components/ic-tab-panel.js.map +1 -1
  282. package/dist/components/ic-tab.js +6 -5
  283. package/dist/components/ic-tab.js.map +1 -1
  284. package/dist/components/ic-text-field2.js +15 -7
  285. package/dist/components/ic-text-field2.js.map +1 -1
  286. package/dist/components/ic-theme.js +1 -1
  287. package/dist/components/ic-tooltip2.js +5 -5
  288. package/dist/components/ic-tooltip2.js.map +1 -1
  289. package/dist/components/ic-top-navigation.js +6 -5
  290. package/dist/components/ic-top-navigation.js.map +1 -1
  291. package/dist/components/ic-typography2.js +5 -5
  292. package/dist/components/ic-typography2.js.map +1 -1
  293. package/dist/components/index.d.ts +2 -2
  294. package/dist/components/index.js +2 -2
  295. package/dist/components/types.js +16 -0
  296. package/dist/components/types.js.map +1 -0
  297. package/dist/core/core.esm.js +1 -1
  298. package/dist/core/core.esm.js.map +1 -1
  299. package/dist/core/p-037273aa.entry.js +2 -0
  300. package/dist/core/{p-0cf51da5.entry.js.map → p-037273aa.entry.js.map} +1 -1
  301. package/dist/core/{p-b9253509.entry.js → p-0992a2ee.entry.js} +2 -2
  302. package/dist/core/p-0992a2ee.entry.js.map +1 -0
  303. package/dist/core/p-0d63bfe4.entry.js +2 -0
  304. package/dist/core/p-0d63bfe4.entry.js.map +1 -0
  305. package/dist/core/p-0e1ae2a3.entry.js +2 -0
  306. package/dist/core/p-0e1ae2a3.entry.js.map +1 -0
  307. package/dist/core/p-155114db.entry.js +2 -0
  308. package/dist/core/p-155114db.entry.js.map +1 -0
  309. package/dist/core/p-16ab85c2.entry.js +2 -0
  310. package/dist/core/p-16ab85c2.entry.js.map +1 -0
  311. package/dist/core/p-17d0d631.entry.js +2 -0
  312. package/dist/core/p-17d0d631.entry.js.map +1 -0
  313. package/dist/core/p-1b619302.entry.js +2 -0
  314. package/dist/core/p-1b619302.entry.js.map +1 -0
  315. package/dist/core/p-2f29e74d.entry.js +2 -0
  316. package/dist/core/p-2f29e74d.entry.js.map +1 -0
  317. package/dist/core/p-3c6defd7.entry.js +2 -0
  318. package/dist/core/p-3c6defd7.entry.js.map +1 -0
  319. package/dist/core/p-48029498.entry.js +2 -0
  320. package/dist/core/{p-36e9f6ff.entry.js.map → p-48029498.entry.js.map} +1 -1
  321. package/dist/core/p-4b6a55bb.entry.js +2 -0
  322. package/dist/core/{p-01450166.entry.js.map → p-4b6a55bb.entry.js.map} +1 -1
  323. package/dist/core/p-54b77947.entry.js +2 -0
  324. package/dist/core/{p-a334ed34.entry.js.map → p-54b77947.entry.js.map} +1 -1
  325. package/dist/core/p-59041cfc.entry.js +2 -0
  326. package/dist/core/{p-e2304886.entry.js.map → p-59041cfc.entry.js.map} +1 -1
  327. package/dist/core/p-6009c5bc.entry.js +2 -0
  328. package/dist/core/{p-3a7725ed.entry.js.map → p-6009c5bc.entry.js.map} +1 -1
  329. package/dist/core/p-6d0eaaeb.entry.js +2 -0
  330. package/dist/core/p-6d0eaaeb.entry.js.map +1 -0
  331. package/dist/core/p-6f57b13c.js +2 -0
  332. package/dist/core/p-6f57b13c.js.map +1 -0
  333. package/dist/core/p-7577c6a3.entry.js +2 -0
  334. package/dist/core/p-7577c6a3.entry.js.map +1 -0
  335. package/dist/core/p-7612cfb0.entry.js +2 -0
  336. package/dist/core/p-7612cfb0.entry.js.map +1 -0
  337. package/dist/core/p-7dbb637f.entry.js +2 -0
  338. package/dist/core/p-7dbb637f.entry.js.map +1 -0
  339. package/dist/core/p-89d46b9b.entry.js +2 -0
  340. package/dist/core/{p-bbff1667.entry.js.map → p-89d46b9b.entry.js.map} +1 -1
  341. package/dist/core/p-972f4e69.entry.js +2 -0
  342. package/dist/core/p-972f4e69.entry.js.map +1 -0
  343. package/dist/core/p-9a3d6bca.entry.js +2 -0
  344. package/dist/core/p-9a3d6bca.entry.js.map +1 -0
  345. package/dist/core/p-9db8edb7.entry.js +2 -0
  346. package/dist/core/{p-01a17304.entry.js.map → p-9db8edb7.entry.js.map} +1 -1
  347. package/dist/core/p-a183353c.entry.js +2 -0
  348. package/dist/core/{p-49831676.entry.js.map → p-a183353c.entry.js.map} +1 -1
  349. package/dist/core/p-a23e9d8a.entry.js +2 -0
  350. package/dist/core/{p-b70f2538.entry.js.map → p-a23e9d8a.entry.js.map} +1 -1
  351. package/dist/core/p-aad5da60.entry.js +2 -0
  352. package/dist/core/p-aad5da60.entry.js.map +1 -0
  353. package/dist/core/p-aad76be7.entry.js +2 -0
  354. package/dist/core/p-aad76be7.entry.js.map +1 -0
  355. package/dist/core/p-ac76594c.entry.js +2 -0
  356. package/dist/core/p-ac76594c.entry.js.map +1 -0
  357. package/dist/core/p-b596f73d.entry.js +2 -0
  358. package/dist/core/{p-5928296a.entry.js.map → p-b596f73d.entry.js.map} +1 -1
  359. package/dist/core/p-b875ec01.entry.js +2 -0
  360. package/dist/core/p-b875ec01.entry.js.map +1 -0
  361. package/dist/core/p-bf4ddf33.entry.js +2 -0
  362. package/dist/core/p-bf4ddf33.entry.js.map +1 -0
  363. package/dist/core/p-c023c49c.entry.js +2 -0
  364. package/dist/core/p-c023c49c.entry.js.map +1 -0
  365. package/dist/core/p-d4a1734e.entry.js +2 -0
  366. package/dist/core/p-d4a1734e.entry.js.map +1 -0
  367. package/dist/core/p-d61c2983.entry.js +2 -0
  368. package/dist/core/{p-3d95b097.entry.js.map → p-d61c2983.entry.js.map} +1 -1
  369. package/dist/core/p-dd36d23a.entry.js +2 -0
  370. package/dist/core/p-dd36d23a.entry.js.map +1 -0
  371. package/dist/core/p-eb0f09f4.entry.js +2 -0
  372. package/dist/core/{p-92cc098f.entry.js.map → p-eb0f09f4.entry.js.map} +1 -1
  373. package/dist/core/{p-5316e421.entry.js → p-eb33ece2.entry.js} +2 -2
  374. package/dist/core/{p-5316e421.entry.js.map → p-eb33ece2.entry.js.map} +1 -1
  375. package/dist/core/p-ee3a9fd0.entry.js +2 -0
  376. package/dist/core/p-ee3a9fd0.entry.js.map +1 -0
  377. package/dist/core/p-eeff0f89.entry.js +2 -0
  378. package/dist/core/{p-961c9038.entry.js.map → p-eeff0f89.entry.js.map} +1 -1
  379. package/dist/core/p-f228c232.js +2 -0
  380. package/dist/core/p-f228c232.js.map +1 -0
  381. package/dist/core/p-f7e7d4f5.entry.js +2 -0
  382. package/dist/core/p-f7e7d4f5.entry.js.map +1 -0
  383. package/dist/core/p-ffc4cae2.entry.js +2 -0
  384. package/dist/core/p-ffc4cae2.entry.js.map +1 -0
  385. package/dist/esm/core.js +1 -1
  386. package/dist/esm/{helpers-63cb8828.js → helpers-e090fe7e.js} +18 -14
  387. package/dist/esm/helpers-e090fe7e.js.map +1 -0
  388. package/dist/esm/ic-alert.entry.js +4 -3
  389. package/dist/esm/ic-alert.entry.js.map +1 -1
  390. package/dist/esm/ic-back-to-top.entry.js +3 -2
  391. package/dist/esm/ic-back-to-top.entry.js.map +1 -1
  392. package/dist/esm/{ic-breadcrumbs.entry.js → ic-breadcrumb-group.entry.js} +7 -6
  393. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -0
  394. package/dist/esm/ic-breadcrumb.entry.js +3 -2
  395. package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
  396. package/dist/esm/ic-button_3.entry.js +25 -29
  397. package/dist/esm/ic-button_3.entry.js.map +1 -1
  398. package/dist/esm/ic-card.entry.js +2 -1
  399. package/dist/esm/ic-card.entry.js.map +1 -1
  400. package/dist/esm/ic-checkbox-group.entry.js +3 -2
  401. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  402. package/dist/esm/ic-checkbox.entry.js +13 -2
  403. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  404. package/dist/esm/ic-data-entity.entry.js +6 -6
  405. package/dist/esm/ic-data-entity.entry.js.map +1 -1
  406. package/dist/esm/ic-data-row.entry.js +6 -5
  407. package/dist/esm/ic-data-row.entry.js.map +1 -1
  408. package/dist/esm/ic-divider.entry.js +2 -1
  409. package/dist/esm/ic-divider.entry.js.map +1 -1
  410. package/dist/esm/ic-footer-link-group.entry.js +12 -11
  411. package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
  412. package/dist/esm/ic-footer-link.entry.js +8 -7
  413. package/dist/esm/ic-footer-link.entry.js.map +1 -1
  414. package/dist/esm/ic-footer.entry.js +14 -13
  415. package/dist/esm/ic-footer.entry.js.map +1 -1
  416. package/dist/esm/ic-hero.entry.js +8 -7
  417. package/dist/esm/ic-hero.entry.js.map +1 -1
  418. package/dist/esm/ic-input-component-container_3.entry.js +8 -7
  419. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  420. package/dist/esm/ic-input-label_2.entry.js +2 -1
  421. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  422. package/dist/esm/ic-link.entry.js +9 -8
  423. package/dist/esm/ic-link.entry.js.map +1 -1
  424. package/dist/esm/ic-navigation-button.entry.js +8 -7
  425. package/dist/esm/ic-navigation-button.entry.js.map +1 -1
  426. package/dist/esm/ic-navigation-group.entry.js +2 -1
  427. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  428. package/dist/esm/ic-navigation-item.entry.js +3 -2
  429. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  430. package/dist/esm/ic-navigation-menu.entry.js +3 -2
  431. package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
  432. package/dist/esm/ic-page-header.entry.js +6 -5
  433. package/dist/esm/ic-page-header.entry.js.map +1 -1
  434. package/dist/esm/ic-radio-group.entry.js +3 -2
  435. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  436. package/dist/esm/ic-radio-option.entry.js +17 -3
  437. package/dist/esm/ic-radio-option.entry.js.map +1 -1
  438. package/dist/esm/ic-search-bar.entry.js +11 -12
  439. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  440. package/dist/esm/ic-select.entry.js +20 -8
  441. package/dist/esm/ic-select.entry.js.map +1 -1
  442. package/dist/esm/ic-side-navigation.entry.js +3 -2
  443. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  444. package/dist/esm/ic-skeleton.entry.js +10 -10
  445. package/dist/esm/ic-skeleton.entry.js.map +1 -1
  446. package/dist/esm/ic-status-tag.entry.js +9 -8
  447. package/dist/esm/ic-status-tag.entry.js.map +1 -1
  448. package/dist/esm/ic-step.entry.js +2 -1
  449. package/dist/esm/ic-step.entry.js.map +1 -1
  450. package/dist/esm/ic-stepper.entry.js +2 -1
  451. package/dist/esm/ic-stepper.entry.js.map +1 -1
  452. package/dist/esm/ic-switch.entry.js +21 -10
  453. package/dist/esm/ic-switch.entry.js.map +1 -1
  454. package/dist/esm/ic-tab-context.entry.js +13 -11
  455. package/dist/esm/ic-tab-context.entry.js.map +1 -1
  456. package/dist/esm/ic-tab-group.entry.js +142 -0
  457. package/dist/esm/ic-tab-group.entry.js.map +1 -0
  458. package/dist/esm/ic-tab-panel.entry.js +8 -4
  459. package/dist/esm/ic-tab-panel.entry.js.map +1 -1
  460. package/dist/esm/ic-tab.entry.js +6 -5
  461. package/dist/esm/ic-tab.entry.js.map +1 -1
  462. package/dist/esm/ic-text-field.entry.js +13 -5
  463. package/dist/esm/ic-text-field.entry.js.map +1 -1
  464. package/dist/esm/ic-theme.entry.js +2 -1
  465. package/dist/esm/ic-theme.entry.js.map +1 -1
  466. package/dist/esm/ic-top-navigation.entry.js +6 -5
  467. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  468. package/dist/esm/ic-typography.entry.js +4 -4
  469. package/dist/esm/ic-typography.entry.js.map +1 -1
  470. package/dist/esm/index-1500de1f.js +4 -4
  471. package/dist/esm/loader.js +1 -1
  472. package/dist/esm/types-dd515332.js +16 -0
  473. package/dist/esm/types-dd515332.js.map +1 -0
  474. package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group-test-examples.d.ts +2 -0
  475. package/dist/types/components/{ic-breadcrumbs/ic-breadcrumbs.d.ts → ic-breadcrumb-group/ic-breadcrumb-group.d.ts} +2 -2
  476. package/dist/types/components/{ic-breadcrumbs/ic-breadcrumbs.test.a11y.d.ts → ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.d.ts} +0 -0
  477. package/dist/types/components/ic-button/ic-button.d.ts +5 -11
  478. package/dist/types/components/ic-button/ic-button.types.d.ts +1 -2
  479. package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +4 -0
  480. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +2 -2
  481. package/dist/types/components/ic-data-entity/ic-data-entity.d.ts +2 -2
  482. package/dist/types/components/ic-data-row/ic-data-row.d.ts +2 -2
  483. package/dist/types/components/ic-footer/ic-footer.d.ts +2 -2
  484. package/dist/types/components/ic-footer/ic-footer.types.d.ts +1 -1
  485. package/dist/types/components/ic-footer-link/ic-footer-link.d.ts +1 -1
  486. package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +2 -2
  487. package/dist/types/components/ic-hero/ic-hero.d.ts +3 -3
  488. package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +2 -2
  489. package/dist/types/components/ic-link/ic-link.d.ts +5 -2
  490. package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +6 -5
  491. package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts +0 -1
  492. package/dist/types/components/ic-menu/ic-menu.d.ts +2 -2
  493. package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +1 -1
  494. package/dist/types/components/ic-page-header/ic-page-header.d.ts +2 -2
  495. package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +2 -2
  496. package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +4 -0
  497. package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +2 -6
  498. package/dist/types/components/ic-select/ic-select.d.ts +5 -2
  499. package/dist/types/components/ic-skeleton/ic-skeleton.d.ts +2 -2
  500. package/dist/types/components/ic-skeleton/ic-skeleton.types.d.ts +1 -1
  501. package/dist/types/components/ic-status-tag/ic-status-tag.d.ts +3 -3
  502. package/dist/types/components/ic-status-tag/ic-status-tag.types.d.ts +1 -1
  503. package/dist/types/components/ic-switch/ic-switch.d.ts +8 -4
  504. package/dist/types/components/ic-tab/ic-tab.d.ts +3 -2
  505. package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +4 -4
  506. package/dist/types/components/{ic-tab-list/ic-tab-list.d.ts → ic-tab-group/ic-tab-group.d.ts} +6 -5
  507. package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +3 -0
  508. package/dist/types/components/ic-text-field/ic-text-field.d.ts +5 -6
  509. package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +2 -2
  510. package/dist/types/components/ic-typography/ic-typography.d.ts +1 -1
  511. package/dist/types/components.d.ts +196 -219
  512. package/dist/types/utils/helpers.d.ts +3 -0
  513. package/dist/types/utils/types.d.ts +1 -0
  514. package/hydrate/index.js +320 -252
  515. package/package.json +5 -5
  516. package/dist/cjs/helpers-ea79c7b0.js.map +0 -1
  517. package/dist/cjs/ic-tab-list.cjs.entry.js +0 -145
  518. package/dist/cjs/ic-tab-list.cjs.entry.js.map +0 -1
  519. package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.js.map +0 -1
  520. package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.js.map +0 -1
  521. package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.test.a11y.js.map +0 -1
  522. package/dist/collection/components/ic-tab-list/ic-tab-list.js.map +0 -1
  523. package/dist/components/ic-breadcrumbs.js.map +0 -1
  524. package/dist/components/ic-tab-list.js.map +0 -1
  525. package/dist/core/p-01450166.entry.js +0 -2
  526. package/dist/core/p-01a17304.entry.js +0 -2
  527. package/dist/core/p-08239789.entry.js +0 -2
  528. package/dist/core/p-08239789.entry.js.map +0 -1
  529. package/dist/core/p-09c0cd28.entry.js +0 -2
  530. package/dist/core/p-09c0cd28.entry.js.map +0 -1
  531. package/dist/core/p-0cf51da5.entry.js +0 -2
  532. package/dist/core/p-10531d9a.entry.js +0 -2
  533. package/dist/core/p-10531d9a.entry.js.map +0 -1
  534. package/dist/core/p-14ba2f18.js +0 -2
  535. package/dist/core/p-14ba2f18.js.map +0 -1
  536. package/dist/core/p-211465cf.entry.js +0 -2
  537. package/dist/core/p-211465cf.entry.js.map +0 -1
  538. package/dist/core/p-2c687b76.entry.js +0 -2
  539. package/dist/core/p-2c687b76.entry.js.map +0 -1
  540. package/dist/core/p-2d5824f1.entry.js +0 -2
  541. package/dist/core/p-2d5824f1.entry.js.map +0 -1
  542. package/dist/core/p-34e5ee10.entry.js +0 -2
  543. package/dist/core/p-34e5ee10.entry.js.map +0 -1
  544. package/dist/core/p-35b91376.entry.js +0 -2
  545. package/dist/core/p-35b91376.entry.js.map +0 -1
  546. package/dist/core/p-36e9f6ff.entry.js +0 -2
  547. package/dist/core/p-3a7725ed.entry.js +0 -2
  548. package/dist/core/p-3d95b097.entry.js +0 -2
  549. package/dist/core/p-40a17d61.entry.js +0 -2
  550. package/dist/core/p-40a17d61.entry.js.map +0 -1
  551. package/dist/core/p-41dab885.entry.js +0 -2
  552. package/dist/core/p-41dab885.entry.js.map +0 -1
  553. package/dist/core/p-42876f02.entry.js +0 -2
  554. package/dist/core/p-483ba0f6.entry.js +0 -2
  555. package/dist/core/p-483ba0f6.entry.js.map +0 -1
  556. package/dist/core/p-49831676.entry.js +0 -2
  557. package/dist/core/p-55a8f5b6.entry.js +0 -2
  558. package/dist/core/p-55a8f5b6.entry.js.map +0 -1
  559. package/dist/core/p-5928296a.entry.js +0 -2
  560. package/dist/core/p-66800ec4.entry.js +0 -2
  561. package/dist/core/p-66800ec4.entry.js.map +0 -1
  562. package/dist/core/p-7c207056.entry.js +0 -2
  563. package/dist/core/p-7c207056.entry.js.map +0 -1
  564. package/dist/core/p-7f27efda.entry.js +0 -2
  565. package/dist/core/p-7f27efda.entry.js.map +0 -1
  566. package/dist/core/p-87fc80f1.entry.js +0 -2
  567. package/dist/core/p-87fc80f1.entry.js.map +0 -1
  568. package/dist/core/p-886e7a24.entry.js +0 -2
  569. package/dist/core/p-886e7a24.entry.js.map +0 -1
  570. package/dist/core/p-889744b7.entry.js +0 -2
  571. package/dist/core/p-889744b7.entry.js.map +0 -1
  572. package/dist/core/p-92cc098f.entry.js +0 -2
  573. package/dist/core/p-961c9038.entry.js +0 -2
  574. package/dist/core/p-9753e5f2.entry.js +0 -2
  575. package/dist/core/p-9753e5f2.entry.js.map +0 -1
  576. package/dist/core/p-a334ed34.entry.js +0 -2
  577. package/dist/core/p-b70f2538.entry.js +0 -2
  578. package/dist/core/p-b858dc5a.entry.js +0 -2
  579. package/dist/core/p-b858dc5a.entry.js.map +0 -1
  580. package/dist/core/p-b9253509.entry.js.map +0 -1
  581. package/dist/core/p-bbff1667.entry.js +0 -2
  582. package/dist/core/p-c0bfb272.entry.js +0 -2
  583. package/dist/core/p-c0bfb272.entry.js.map +0 -1
  584. package/dist/core/p-cd14a9dc.entry.js +0 -2
  585. package/dist/core/p-cd14a9dc.entry.js.map +0 -1
  586. package/dist/core/p-d7af7446.entry.js +0 -2
  587. package/dist/core/p-d7af7446.entry.js.map +0 -1
  588. package/dist/core/p-e2304886.entry.js +0 -2
  589. package/dist/core/p-f90ce9ca.entry.js +0 -2
  590. package/dist/core/p-f90ce9ca.entry.js.map +0 -1
  591. package/dist/esm/helpers-63cb8828.js.map +0 -1
  592. package/dist/esm/ic-breadcrumbs.entry.js.map +0 -1
  593. package/dist/esm/ic-tab-list.entry.js +0 -141
  594. package/dist/esm/ic-tab-list.entry.js.map +0 -1
  595. package/dist/types/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.d.ts +0 -2
@@ -0,0 +1,2 @@
1
+ import{r as e,h as t,H as i,g as s}from"./p-f9370be6.js";import{C as c}from"./p-1e7b4310.js";import{a as r}from"./p-f228c232.js";import"./p-6f57b13c.js";const a=":host{display:flex;flex:auto}:host(.last-step){flex-grow:initial}.step{display:flex;flex-direction:column;flex:1 1 0}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}.step-icon{display:flex;justify-content:center;align-items:center;border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}.current{color:var(--ic-theme-primary)}.step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs)}.step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}.completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}.current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.check-icon{padding-top:var(--ic-space-xxs)}.check-icon svg{width:16px;height:16px}.check-icon>svg>path{fill:white}";const n=class{constructor(t){e(this,t);this.stepType="active";this.stepTitle=undefined;this.stepSubtitle=undefined;this.stepNum=undefined;this.lastStep=undefined}componentDidLoad(){r([{prop:this.stepNum,propName:"step-num"},{prop:this.lastStep,propName:"last-step"}],"Step")}render(){let e;if(this.stepType!=="completed"){e=t("ic-typography",{variant:"subtitle-small"},t("span",{class:"step-icon-inner","aria-hidden":"true"},this.stepNum))}else{e=t("div",{class:"step-icon-inner","aria-hidden":"true"},t("span",{class:"check-icon",innerHTML:c}))}let s="";if(this.stepType==="completed"){s=". Completed step"}else if(this.stepType==="disabled"){s=". Disabled step"}const r=this.stepType==="current"&&t("div",{class:"step-connect-inner"});const a=!this.lastStep&&t("div",{class:{["step-connect"]:true,["aligned-full-width"]:this.el.parentElement.classList.contains("aligned-full-width")}},r);return t(i,{role:"listitem","aria-label":`Step ${this.stepNum}${s}`,"aria-current":this.stepType=="current"?"step":null,class:{["aligned-full-width"]:this.el.parentElement.classList.contains("aligned-full-width")}},t("div",{class:{["step"]:true,[`${this.stepType}`]:true}},t("div",{class:"step-top"},t("div",{class:"step-icon"},e),a),(this.stepTitle||this.stepSubtitle)&&t("div",{class:"step-title-area"},this.stepTitle&&t("ic-typography",{variant:"subtitle-large",class:"step-title"},this.stepTitle),this.stepSubtitle&&t("ic-typography",{variant:"caption",class:"step-subtitle"},this.stepSubtitle))))}get el(){return s(this)}};n.style=a;export{n as ic_step};
2
+ //# sourceMappingURL=p-89d46b9b.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"names":["icStepCss","Step","[object Object]","onComponentRequiredPropUndefined","prop","this","stepNum","propName","lastStep","icon","stepType","h","variant","class","aria-hidden","innerHTML","checkIcon","ariaLabel","partialBar","finalStep","el","parentElement","classList","contains","Host","role","aria-label","aria-current","stepTitle","stepSubtitle"],"mappings":"4HAAA,MAAMA,EAAY,sqECULC,EAAI,6CAKkB,6GAsBjCC,mBACEC,EACE,CACE,CAAEC,KAAMC,KAAKC,QAASC,SAAU,YAChC,CAAEH,KAAMC,KAAKG,SAAUD,SAAU,cAEnC,QAIJL,SACE,IAAIO,EACJ,GAAIJ,KAAKK,WAAa,YAAa,CACjCD,EACEE,EAAA,gBAAA,CAAeC,QAAQ,kBACrBD,EAAA,OAAA,CAAME,MAAM,kBAAiBC,cAAa,QACvCT,KAAKC,cAIP,CACLG,EACEE,EAAA,MAAA,CAAKE,MAAM,kBAAiBC,cAAa,QACvCH,EAAA,OAAA,CAAME,MAAM,aAAaE,UAAWC,KAK1C,IAAIC,EAAY,GAEhB,GAAIZ,KAAKK,WAAa,YAAa,CACjCO,EAAY,wBACP,GAAIZ,KAAKK,WAAa,WAAY,CACvCO,EAAY,kBAGd,MAAMC,EAAab,KAAKK,WAAa,WACnCC,EAAA,MAAA,CAAKE,MAAM,uBAEb,MAAMM,GAAad,KAAKG,UACtBG,EAAA,MAAA,CACEE,MAAO,CACLX,CAAC,gBAAiB,KAClBA,CAAC,sBACCG,KAAKe,GAAGC,cAAcC,UAAUC,SAAS,wBAG5CL,GAIL,OACEP,EAACa,EAAI,CACHC,KAAK,WAAUC,aACH,QAAQrB,KAAKC,UAAUW,IAAWU,eAChCtB,KAAKK,UAAY,UAAY,OAAS,KACpDG,MAAO,CACLX,CAAC,sBACCG,KAAKe,GAAGC,cAAcC,UAAUC,SAAS,wBAG7CZ,EAAA,MAAA,CACEE,MAAO,CACLX,CAAC,QAAS,KACVA,CAAC,GAAGG,KAAKK,YAAa,OAGxBC,EAAA,MAAA,CAAKE,MAAM,YACTF,EAAA,MAAA,CAAKE,MAAM,aAAaJ,GACvBU,IAEDd,KAAKuB,WAAavB,KAAKwB,eACvBlB,EAAA,MAAA,CAAKE,MAAM,mBACRR,KAAKuB,WACJjB,EAAA,gBAAA,CAAeC,QAAQ,iBAAiBC,MAAM,cAC3CR,KAAKuB,WAGTvB,KAAKwB,cACJlB,EAAA,gBAAA,CAAeC,QAAQ,UAAUC,MAAM,iBACpCR,KAAKwB","sourcesContent":[":host {\n display: flex;\n flex: auto;\n}\n\n:host(.last-step) {\n flex-grow: initial;\n}\n\n.step {\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 40px;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.current {\n color: var(--ic-theme-primary);\n}\n\n.step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n}\n\n.step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n.completed {\n color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-theme-primary);\n color: white;\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n border: 1px dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n.current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 100px;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 2px dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-theme-primary);\n}\n\n.check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.check-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.check-icon > svg > path {\n fill: white;\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /**\n * State of step\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /**\n * Name of step\n */\n @Prop() stepTitle?: string;\n\n /**\n * Additional information about step\n */\n @Prop() stepSubtitle?: string;\n\n /**\n * @internal The step number, managed by ic-stepper\n */\n @Prop() stepNum!: number;\n\n /**\n * @internal Final step in series flag, managed by ic-stepper\n */\n @Prop() lastStep!: boolean;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.stepNum, propName: \"step-num\" },\n { prop: this.lastStep, propName: \"last-step\" },\n ],\n \"Step\"\n );\n }\n\n render() {\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Disabled step\";\n }\n\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={this.stepType == \"current\" ? \"step\" : null}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle || this.stepSubtitle) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepSubtitle && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"names":["icStepCss","Step","[object Object]","onComponentRequiredPropUndefined","prop","this","stepNum","propName","lastStep","icon","stepType","h","variant","class","aria-hidden","innerHTML","checkIcon","ariaLabel","partialBar","finalStep","el","parentElement","classList","contains","Host","role","aria-label","aria-current","stepTitle","stepSubtitle"],"mappings":"yJAAA,MAAMA,EAAY,sqECULC,EAAI,6CAKkB,6GAsBjCC,mBACEC,EACE,CACE,CAAEC,KAAMC,KAAKC,QAASC,SAAU,YAChC,CAAEH,KAAMC,KAAKG,SAAUD,SAAU,cAEnC,QAIJL,SACE,IAAIO,EACJ,GAAIJ,KAAKK,WAAa,YAAa,CACjCD,EACEE,EAAA,gBAAA,CAAeC,QAAQ,kBACrBD,EAAA,OAAA,CAAME,MAAM,kBAAiBC,cAAa,QACvCT,KAAKC,cAIP,CACLG,EACEE,EAAA,MAAA,CAAKE,MAAM,kBAAiBC,cAAa,QACvCH,EAAA,OAAA,CAAME,MAAM,aAAaE,UAAWC,KAK1C,IAAIC,EAAY,GAEhB,GAAIZ,KAAKK,WAAa,YAAa,CACjCO,EAAY,wBACP,GAAIZ,KAAKK,WAAa,WAAY,CACvCO,EAAY,kBAGd,MAAMC,EAAab,KAAKK,WAAa,WACnCC,EAAA,MAAA,CAAKE,MAAM,uBAEb,MAAMM,GAAad,KAAKG,UACtBG,EAAA,MAAA,CACEE,MAAO,CACLX,CAAC,gBAAiB,KAClBA,CAAC,sBACCG,KAAKe,GAAGC,cAAcC,UAAUC,SAAS,wBAG5CL,GAIL,OACEP,EAACa,EAAI,CACHC,KAAK,WAAUC,aACH,QAAQrB,KAAKC,UAAUW,IAAWU,eAChCtB,KAAKK,UAAY,UAAY,OAAS,KACpDG,MAAO,CACLX,CAAC,sBACCG,KAAKe,GAAGC,cAAcC,UAAUC,SAAS,wBAG7CZ,EAAA,MAAA,CACEE,MAAO,CACLX,CAAC,QAAS,KACVA,CAAC,GAAGG,KAAKK,YAAa,OAGxBC,EAAA,MAAA,CAAKE,MAAM,YACTF,EAAA,MAAA,CAAKE,MAAM,aAAaJ,GACvBU,IAEDd,KAAKuB,WAAavB,KAAKwB,eACvBlB,EAAA,MAAA,CAAKE,MAAM,mBACRR,KAAKuB,WACJjB,EAAA,gBAAA,CAAeC,QAAQ,iBAAiBC,MAAM,cAC3CR,KAAKuB,WAGTvB,KAAKwB,cACJlB,EAAA,gBAAA,CAAeC,QAAQ,UAAUC,MAAM,iBACpCR,KAAKwB","sourcesContent":[":host {\n display: flex;\n flex: auto;\n}\n\n:host(.last-step) {\n flex-grow: initial;\n}\n\n.step {\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 40px;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.current {\n color: var(--ic-theme-primary);\n}\n\n.step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n}\n\n.step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n.completed {\n color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-theme-primary);\n color: white;\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n border: 1px dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n.current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 100px;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 2px dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-theme-primary);\n}\n\n.check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.check-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.check-icon > svg > path {\n fill: white;\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /**\n * State of step\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /**\n * Name of step\n */\n @Prop() stepTitle?: string;\n\n /**\n * Additional information about step\n */\n @Prop() stepSubtitle?: string;\n\n /**\n * @internal The step number, managed by ic-stepper\n */\n @Prop() stepNum!: number;\n\n /**\n * @internal Final step in series flag, managed by ic-stepper\n */\n @Prop() lastStep!: boolean;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.stepNum, propName: \"step-num\" },\n { prop: this.lastStep, propName: \"last-step\" },\n ],\n \"Step\"\n );\n }\n\n render() {\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Disabled step\";\n }\n\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={this.stepType == \"current\" ? \"step\" : null}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle || this.stepSubtitle) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepSubtitle && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as e,h as t,H as o}from"./p-f9370be6.js";import{a as r}from"./p-f228c232.js";import"./p-6f57b13c.js";const a='/*! 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}.tag{padding:var(--ic-space-xs) var(--ic-space-sm);font-size:14px;border-radius:80px;display:inline-block;min-width:40px;text-align:center}.small{padding:var(--ic-space-xxs) var(--ic-space-sm)}.filled-neutral{background-color:var(--ic-architectural-600);color:var(--ic-architectural-white)}.filled-success{background-color:var(--ic-status-success);color:var(--ic-architectural-white)}.filled-warning{background-color:var(--ic-status-warning);color:var(--ic-color-primary-text)}.filled-danger{background-color:var(--ic-status-error);color:var(--ic-architectural-white)}.outlined-neutral{background-color:var(--ic-architectural-200);color:var(--ic-color-secondary-text);border:1px solid var(--ic-architectural-400)}.outlined-success{background-color:var(--ic-status-success-background);color:var(--ic-status-success);border:1px solid var(--ic-status-success)}.outlined-warning{background-color:var(--ic-status-warning-background);color:var(--ic-status-warning-dark);border:1px solid var(--ic-status-warning-dark)}.outlined-danger{background-color:var(--ic-status-error-background);color:var(--ic-status-error);border:1px solid var(--ic-status-error)}';const i=class{constructor(t){e(this,t);this.label=undefined;this.status="neutral";this.appearance="filled";this.small=false}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Status Tag")}render(){const{label:e,status:r,appearance:a,small:i}=this;return t(o,{role:"status"},t("strong",{class:{["tag"]:true,[`${a}-${r}`]:true,["small"]:i}},t("ic-typography",{variant:"label-uppercase","apply-vertical-margins":false},t("span",null,e))))}};i.style=a;export{i as ic_status_tag};
2
+ //# sourceMappingURL=p-972f4e69.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"names":["icStatusTagCss","StatusTag","[object Object]","onComponentRequiredPropUndefined","prop","this","label","propName","status","appearance","small","h","Host","role","class","variant","apply-vertical-margins"],"mappings":"8GAAA,MAAMA,EAAiB,s+GCYVC,EAAS,gEAQmB,0BAIM,oBAInB,MAE1BC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,cAIJL,SACE,MAAMI,MAAEA,EAAKE,OAAEA,EAAMC,WAAEA,EAAUC,MAAEA,GAAUL,KAC7C,OACEM,EAACC,EAAI,CAACC,KAAK,UACTF,EAAA,SAAA,CACEG,MAAO,CACLZ,CAAC,OAAQ,KACTA,CAAC,GAAGO,KAAcD,KAAW,KAC7BN,CAAC,SAAUQ,IAGbC,EAAA,gBAAA,CACEI,QAAQ,kBAAiBC,yBACD,OAExBL,EAAA,OAAA,KAAOL","sourcesContent":["@import \"../../global/normalise.css\";\n\n.tag {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n font-size: 14px;\n border-radius: 80px;\n display: inline-block;\n min-width: 40px;\n text-align: center;\n}\n\n.small {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.filled-neutral {\n background-color: var(--ic-architectural-600);\n color: var(--ic-architectural-white);\n}\n\n.filled-success {\n background-color: var(--ic-status-success);\n color: var(--ic-architectural-white);\n}\n\n.filled-warning {\n background-color: var(--ic-status-warning);\n color: var(--ic-color-primary-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-error);\n color: var(--ic-architectural-white);\n}\n\n.outlined-neutral {\n background-color: var(--ic-architectural-200);\n color: var(--ic-color-secondary-text);\n border: 1px solid var(--ic-architectural-400);\n}\n\n.outlined-success {\n background-color: var(--ic-status-success-background);\n color: var(--ic-status-success);\n border: 1px solid var(--ic-status-success);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-warning-background);\n color: var(--ic-status-warning-dark);\n border: 1px solid var(--ic-status-warning-dark);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-error-background);\n color: var(--ic-status-error);\n border: 1px solid var(--ic-status-error);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /**\n * The content rendered within the status tag.\n */\n @Prop() label!: string;\n /**\n * The colour of the status tag.\n */\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n /**\n * The emphasis of the status tag.\n */\n @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n /**\n * The size of the status tag.\n */\n @Prop() small?: boolean = false;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, appearance, small } = this;\n return (\n <Host role=\"status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${appearance}-${status}`]: true,\n [\"small\"]: small,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as e,c as t,h as o,H as i,g as r}from"./p-f9370be6.js";import{g as n,I as a,j as s,c as l,k as c}from"./p-f228c232.js";import{I as d}from"./p-6f57b13c.js";const p='/*! 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}:host(.footer-sparse){--footer-links-padding:24px 0;--footer-compliance-padding:24px 0 8px 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-small){--footer-links-padding:0 0;--footer-compliance-padding:16px 0 8px;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-small.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:16px 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}';const m=class{constructor(o){e(this,o);this.icFooterResized=t(this,"icFooterResized",7);this.resizeObserverCallback=e=>{if(e!==this.deviceSize){this.deviceSize=e}this.icFooterResized.emit()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const e=n();this.resizeObserverCallback(e)}));this.resizeObserver.observe(this.footerEl)};this.description=undefined;this.aligned="left";this.breakpoint="medium";this.groupLinks=false;this.caption=undefined;this.copyright=true;this.deviceSize=a.XL;this.foregroundColor=s()}isSmall(){const e=this.breakpoint;return e==="extra small"?this.deviceSize<a.XS:e==="small"?this.deviceSize<a.S:e==="medium"?this.deviceSize<a.M:e==="large"?this.deviceSize<a.L:e==="extra large"?this.deviceSize<a.XL:false}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}componentWillLoad(){this.deviceSize=n()}componentDidLoad(){l(this.runResizeObserver)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const{aligned:e,caption:t,copyright:r,description:n,groupLinks:s,foregroundColor:l}=this;const p=this.isSmall();return o(i,{class:{footer:true,[`footer-${p?"small":"sparse"}`]:true,[`footer-${s?"grouped":"ungrouped"}`]:true,[`footer-${l}`]:true,[d.Dark]:l===d.Dark,[d.Light]:l===d.Light}},o("footer",{ref:e=>this.footerEl=e},o("div",{class:"footer-description"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-description-inner"},o("ic-typography",{variant:"body"},o("slot",{name:"description"},n))))),o("div",{class:"footer-links"},s&&p?o("div",{class:"footer-links-inner"},o("slot",{name:"link"})):o("ic-section-container",{fullHeight:true,aligned:e},o("div",{class:"footer-links-inner"},o("slot",{name:"link"})))),o("div",{class:"footer-compliance"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-compliance-inner"},o("div",{class:"footer-logo"},o("slot",{name:"logo"})),o("div",{class:"footer-caption"},o("ic-typography",{variant:this.deviceSize<=a.M?"caption":"body"},o("slot",{name:"caption"},t))),r&&o("div",{class:{["footer-copyright"]:true,["classification-spacing"]:c()}},o("ic-typography",{variant:this.deviceSize<=a.M?"caption-uppercase":"label-uppercase"},"© Crown Copyright")))))))}get el(){return r(this)}};m.style=p;export{m as ic_footer};
2
+ //# sourceMappingURL=p-9a3d6bca.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"names":["icFooterCss","Footer","this","resizeObserverCallback","currSize","deviceSize","icFooterResized","emit","runResizeObserver","resizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","[object Object]","bp","breakpoint","XS","S","M","L","ev","theme","detail","foregroundColor","mode","checkResizeObserver","disconnect","aligned","caption","copyright","description","groupLinks","small","isSmall","h","Host","class","footer","IcThemeForegroundEnum","Dark","Light","ref","fullHeight","variant","name","hasClassificationBanner"],"mappings":"oKAAA,MAAMA,EAAc,+9HCsCPC,EAAM,gFAmETC,KAAAC,uBAA0BC,IAChC,GAAIA,IAAaF,KAAKG,WAAY,CAChCH,KAAKG,WAAaD,EAEpBF,KAAKI,gBAAgBC,QAGfL,KAAAM,kBAAoB,KAC1BN,KAAKO,eAAiB,IAAIC,gBAAe,KACvC,MAAMN,EAAWO,IACjBT,KAAKC,uBAAuBC,MAG9BF,KAAKO,eAAeG,QAAQV,KAAKW,mDAhEH,uBAKW,yBAKZ,4CAUF,qBAECC,EAAgBC,wBAEAC,IAEtCC,UACN,MAAMC,EAAKhB,KAAKiB,WAEhB,OAAOD,IAAO,cACVhB,KAAKG,WAAaS,EAAgBM,GAClCF,IAAO,QACPhB,KAAKG,WAAaS,EAAgBO,EAClCH,IAAO,SACPhB,KAAKG,WAAaS,EAAgBQ,EAClCJ,IAAO,QACPhB,KAAKG,WAAaS,EAAgBS,EAClCL,IAAO,cACPhB,KAAKG,WAAaS,EAAgBC,GAClC,MAINE,mBAAmBO,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BxB,KAAKyB,gBAAkBF,EAAMG,KAsB/BX,oBACEf,KAAKG,WAAaM,IAGpBM,mBACEY,EAAoB3B,KAAKM,mBAG3BS,uBACEf,KAAKO,eAAeqB,aAGtBb,SACE,MAAMc,QACJA,EAAOC,QACPA,EAAOC,UACPA,EAASC,YACTA,EAAWC,WACXA,EAAUR,gBACVA,GACEzB,KACJ,MAAMkC,EAAQlC,KAAKmC,UAEnB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQ,KACRxB,CAAC,UAAUmB,EAAQ,QAAU,YAAa,KAC1CnB,CAAC,UAAUkB,EAAa,UAAY,eAAgB,KACpDlB,CAAC,UAAUU,KAAoB,KAE/BV,CAACyB,EAAsBC,MACrBhB,IAAoBe,EAAsBC,KAC5C1B,CAACyB,EAAsBE,OACrBjB,IAAoBe,EAAsBE,QAG9CN,EAAA,SAAA,CAAQO,IAAMhC,GAAcX,KAAKW,SAAWA,GAE1CyB,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,4BACTF,EAAA,gBAAA,CAAeS,QAAQ,QACrBT,EAAA,OAAA,CAAMU,KAAK,eAAed,OAOlCI,EAAA,MAAA,CAAKE,MAAM,gBACRL,GAAcC,EACbE,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,UAGbV,EAAA,uBAAA,CAAsBQ,WAAU,KAACf,QAASA,GACxCO,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,YAOnBV,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,MAAA,CAAKE,MAAM,eAETF,EAAA,OAAA,CAAMU,KAAK,UAEbV,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,gBAAA,CACES,QACE7C,KAAKG,YAAcS,EAAgBQ,EAAI,UAAY,QAGrDgB,EAAA,OAAA,CAAMU,KAAK,WAAWhB,KAGzBC,GACCK,EAAA,MAAA,CACEE,MAAO,CACLvB,CAAC,oBAAqB,KACtBA,CAAC,0BAA2BgC,MAG9BX,EAAA,gBAAA,CACES,QACE7C,KAAKG,YAAcS,EAAgBQ,EAC/B,oBACA,mBAAiB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.footer-sparse) {\n --footer-links-padding: 24px 0;\n --footer-compliance-padding: 24px 0 8px 0;\n --footer-logo-margin-bottom: var(--ic-space-lg);\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-small) {\n --footer-links-padding: 0 0;\n --footer-compliance-padding: 16px 0 8px;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.footer-light) {\n --footer-theme-secondary: var(--ic-theme-secondary);\n --footer-theme-tertiary: var(--ic-theme-tertiary);\n --footer-keyline: var(--ic-keyline-lighten);\n}\n\n:host(.footer-dark) {\n --footer-theme-secondary: var(--ic-theme-secondary-light);\n --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n --footer-keyline: var(--ic-keyline-darken);\n}\n\n:host(.footer-small.footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n background-color: var(--footer-theme-secondary);\n color: var(--ic-theme-text);\n border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n padding: 16px 0;\n}\n\n/* Links */\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--footer-theme-secondary);\n color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n background-color: var(--footer-theme-tertiary);\n color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Host,\n Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getThemeForegroundColor,\n checkResizeObserver,\n hasClassificationBanner,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer\n * @slot link - Content will be rendered between description and logos\n * @slot logo - Content will be rendered underneath footer links\n * @slot caption - Content will be rendered above Crown Copyright\n */\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n @Element() el: HTMLIcFooterElement;\n\n /**\n * Triggers on page resize and triggers style changes in footer links and link groups\n */\n @Event() icFooterResized: EventEmitter<void>;\n\n /**\n * The description displayed at the top of the footer\n */\n @Prop() description: string;\n\n /**\n * Sets the aligned parameter for the section containers used within the footer\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * Sets the screen size breakpoint at which to switch to the small layout\n */\n @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n /**\n * Sets the footer up to handle link groups instead of standalone links\n */\n @Prop() groupLinks?: boolean = false;\n\n /**\n * The caption displayed at the bottom of the footer\n */\n @Prop() caption: string;\n\n /**\n * Whether the footer displays the crown copyright at the bottom\n */\n @Prop() copyright: boolean = true;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n private isSmall() {\n const bp = this.breakpoint;\n\n return bp === \"extra small\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"small\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"medium\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"large\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"extra large\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private resizeObserver: ResizeObserver;\n private footerEl: HTMLElement;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.icFooterResized.emit();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.footerEl);\n };\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n description,\n groupLinks,\n foregroundColor,\n } = this;\n const small = this.isSmall();\n\n return (\n <Host\n class={{\n footer: true,\n [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`footer-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [IcThemeForegroundEnum.Light]:\n foregroundColor === IcThemeForegroundEnum.Light,\n }}\n >\n <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n {/* Description */}\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n\n {/* Links */}\n <div class=\"footer-links\">\n {groupLinks && small ? (\n <div class=\"footer-links-inner\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n\n {/* Compliance (logo, caption, copyright) */}\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n <div class=\"footer-logo\">\n {/* Logo */}\n <slot name=\"logo\" />\n </div>\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n this.deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n &copy; Crown Copyright\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as t,c as i,h as a,H as s,g as e}from"./p-f9370be6.js";import{q as o,C as n,i as r}from"./p-f228c232.js";import"./p-6f57b13c.js";const l=":host{display:block}.popout-modal{position:absolute;top:0;right:0;bottom:0;left:0}.popout-menu{position:fixed;top:0;right:0;width:256px;bottom:0;background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden;z-index:calc(var(--ic-z-index-overlay) / 2)}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:190px;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:1px solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:1px solid var(--ic-architectural-200)}.menu-status-version-container{display:inline-flex;margin:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.menu-status{background-color:var(--ic-architectural-500);color:var(--ic-color-white-text);border-radius:80px;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm);margin-right:var(--ic-space-xs)}.menu-version{border-radius:16px;background-color:var(--ic-architectural-100);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}";const c=class{constructor(a){t(this,a);this.icNavigationMenuClose=i(this,"icNavigationMenuClose",7);this.hasButtons=false;this.hasNavigation=false;this.navItemAboveButtons=false;this.navGroupFirst=false;this.lastTabStop=null;this.closeButton=null;this.closeMenu=()=>{this.icNavigationMenuClose.emit()};this.focusCloseButton=()=>{if(this.closeButton.setFocus){this.closeButton.setFocus()}};this.focusLastTabStop=()=>{let t;if(this.lastTabStop!==null){switch(this.lastTabStop.tagName){case"IC-NAVIGATION-BUTTON":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-ITEM":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-GROUP":t=this.lastTabStop;t.setFocus();break;case"A":this.lastTabStop.focus();break}}};this.version="";this.status=""}navItemClickHandler(){this.closeMenu()}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(document.activeElement===this.navBarEl){t.preventDefault();this.focusLastTabStop()}}else if(document.activeElement===this.lastTabStop||this.lastTabStop===null){t.preventDefault();this.focusCloseButton()}}else if(t.key==="Escape"){this.closeMenu()}}componentWillLoad(){this.navBarEl=document.querySelector("ic-top-navigation");const t=o(this.el,"navigation");if(t){this.hasNavigation=true;const i=t[t.length-1];if(i.tagName==="IC-NAVIGATION-ITEM"){this.navItemAboveButtons=true}const a=t[0];if(a.tagName==="IC-NAVIGATION-GROUP"){this.navGroupFirst=true}}const i=o(this.el,"buttons");if(i!==null){this.hasButtons=true;this.lastTabStop=i[i.length-1]}else{if(this.hasNavigation){const i=t[t.length-1];const a=n(i,"navigation-item");if(a!==null){this.lastTabStop=a}else{this.lastTabStop=i}}}}componentDidLoad(){this.focusCloseButton()}componentWillRender(){this.hasNavigation=r(this.el,"navigation");this.hasButtons=r(this.el,"buttons")}render(){return a(s,null,a("div",{class:"popout-modal",onClick:this.closeMenu}),a("div",{class:"popout-menu",role:"dialog","aria-modal":"true","aria-label":`${this.hasNavigation?"Navigation":"App"} menu`},a("span",{"aria-hidden":"true",id:"navigation-landmark-text",class:"navigation-landmark-text"},"Main navigation"),a("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":this.hasNavigation?"false":"true"},a("div",{class:{["menu-close-button-container"]:true,["nav-group-first"]:this.navGroupFirst}},a("ic-button",{ref:t=>this.closeButton=t,id:"menu-close-button",class:"menu-close-button",variant:"icon",size:"large","aria-label":`Close ${this.hasNavigation?"navigation":"app"} menu`,onClick:this.closeMenu},a("svg",{slot:"icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#1759BC"})))),this.hasNavigation&&a("slot",{name:"navigation"})),this.hasButtons&&a("div",{class:{["menu-buttons-container"]:true,["menu-buttons-container-nav-item-above"]:this.navItemAboveButtons}},a("slot",{name:"buttons"})),(this.status!==""||this.version!=="")&&a("div",{class:"menu-status-version-container"},this.status!==""&&a("div",{class:"menu-status"},a("ic-typography",{variant:"label-uppercase","aria-label":"app tag",class:"menu-status-text"},this.status)),this.version!==""&&a("div",{class:"menu-version"},a("ic-typography",{variant:"label",class:"menu-version-text","aria-label":"app version"},this.version)))))}get el(){return e(this)}};c.style=l;export{c as ic_navigation_menu};
2
+ //# sourceMappingURL=p-9db8edb7.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":["icNavigationMenuCss","NavigationMenu","this","hasButtons","hasNavigation","navItemAboveButtons","navGroupFirst","lastTabStop","closeButton","closeMenu","icNavigationMenuClose","emit","focusCloseButton","setFocus","focusLastTabStop","focusEl","tagName","focus","[object Object]","ev","key","shiftKey","document","activeElement","navBarEl","preventDefault","querySelector","navigationEls","getSlotContent","el","lastEl","length","firstEl","buttonContent","slotContent","getSlot","isSlotUsed","h","Host","class","onClick","role","aria-modal","aria-label","aria-hidden","id","aria-labelledby","ref","variant","size","slot","width","height","viewBox","fill","xmlns","d","name","status","version"],"mappings":"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","sourcesContent":[":host {\n display: block;\n}\n\n.popout-modal {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 256px;\n bottom: 0;\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-primary-text);\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 190px;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: inline-flex;\n margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n background-color: var(--ic-architectural-500);\n color: var(--ic-color-white-text);\n border-radius: 80px;\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n border-radius: 16px;\n background-color: var(--ic-architectural-100);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 90px;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /**\n * Version info to display\n */\n @Prop() version: string = \"\";\n\n /**\n * Status info to display\n */\n @Prop() status: string = \"\";\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop ||\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"emphasis\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" || this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":["icNavigationMenuCss","NavigationMenu","this","hasButtons","hasNavigation","navItemAboveButtons","navGroupFirst","lastTabStop","closeButton","closeMenu","icNavigationMenuClose","emit","focusCloseButton","setFocus","focusLastTabStop","focusEl","tagName","focus","[object Object]","ev","key","shiftKey","document","activeElement","navBarEl","preventDefault","querySelector","navigationEls","getSlotContent","el","lastEl","length","firstEl","buttonContent","slotContent","getSlot","isSlotUsed","h","Host","class","onClick","role","aria-modal","aria-label","aria-hidden","id","aria-labelledby","ref","variant","size","slot","width","height","viewBox","fill","xmlns","d","name","status","version"],"mappings":"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","sourcesContent":[":host {\n display: block;\n}\n\n.popout-modal {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 256px;\n bottom: 0;\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-primary-text);\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 190px;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: inline-flex;\n margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n background-color: var(--ic-architectural-500);\n color: var(--ic-color-white-text);\n border-radius: 80px;\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n border-radius: 16px;\n background-color: var(--ic-architectural-100);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 90px;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /**\n * Version info to display\n */\n @Prop() version: string = \"\";\n\n /**\n * Status info to display\n */\n @Prop() status: string = \"\";\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop ||\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" || this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as e,c as t,h as i,H as s,g as o}from"./p-f9370be6.js";import{a as n,f as r,h as a}from"./p-f228c232.js";import"./p-6f57b13c.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}ic-input-label.error{color:var(--ic-status-error)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}.list-items{list-style:none}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}';const d=class{constructor(i){e(this,i);this.icChange=t(this,"icChange",7);this.label=undefined;this.name=undefined;this.required=false;this.hideLabel=false;this.disabled=false;this.helperText="";this.small=false;this.validationStatus="";this.validationText="";this.checkedOptions=[]}selectHandler(){this.checkboxOptions=Array.from(this.host.querySelectorAll("ic-checkbox"));this.checkboxOptions.forEach((e=>{if(e.checked&&this.checkedOptions.indexOf(e.value)===-1){this.checkedOptions.push(e.value)}}));this.icChange.emit({value:this.checkedOptions})}componentDidLoad(){this.checkboxOptions=Array.from(this.host.querySelectorAll("ic-checkbox"));this.checkboxOptions.forEach((e=>{if(e.checked&&this.checkedOptions.indexOf(e.value)===-1){this.checkedOptions.push(e.value)}if(!e.name)e.name=this.name;e.groupLabel=this.label}));n([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Checkbox Group")}render(){const e=r(this.name,this.helperText!=="",this.validationStatus!=="");const t=a(this.validationStatus,this.disabled);return i(s,null,(this.validationStatus==="error"||this.required||this.hideLabel)&&i("span",{id:"screenReaderOnlyText",class:"screen-reader-only-text","aria-hidden":"true"},this.label," ",this.validationStatus==="error"?"invalid data ":null," ",this.required?"required":null),i("fieldset",{id:this.name,"aria-labelledby":`${this.validationStatus==="error"||this.required||this.hideLabel?"screenReaderOnlyText":""} ${e}`.trim(),disabled:this.disabled},!this.hideLabel&&i("legend",null,i("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled,for:this.name})),i("div",{class:"list-items"},i("slot",null))),t&&i("ic-input-validation",{for:this.name,ariaLiveMode:"polite",status:this.validationStatus,message:this.validationText}))}get host(){return o(this)}};d.style=l;export{d as ic_checkbox_group};
2
+ //# sourceMappingURL=p-a183353c.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":["icCheckboxGroupCss","CheckboxGroup","[object Object]","this","checkboxOptions","Array","from","host","querySelectorAll","forEach","checkbox","checked","checkedOptions","indexOf","value","push","icChange","emit","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","describedBy","getInputDescribedByText","helperText","validationStatus","hadValidationStatus","hasValidationStatus","disabled","h","Host","required","hideLabel","id","class","aria-hidden","aria-labelledby","trim","for","ariaLiveMode","status","message","validationText"],"mappings":"kHAAA,MAAMA,EAAqB,unFCwBdC,EAAa,yHAgBI,qBAKC,oBAKD,sBAKC,cAKJ,4BAI8B,uBAItB,uBASG,GAGpCC,gBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,WAGtCX,KAAKa,SAASC,KAAK,CAAEH,MAAOX,KAAKS,iBAGnCV,mBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,OAEpC,IAAKJ,EAASQ,KAAMR,EAASQ,KAAOf,KAAKe,KACzCR,EAASS,WAAahB,KAAKiB,SAG7BC,EACE,CACE,CAAEC,KAAMnB,KAAKiB,MAAOG,SAAU,SAC9B,CAAED,KAAMnB,KAAKe,KAAMK,SAAU,SAE/B,kBAIJrB,SACE,MAAMsB,EAAcC,EAClBtB,KAAKe,KACLf,KAAKuB,aAAe,GACpBvB,KAAKwB,mBAAqB,IAE5B,MAAMC,EAAsBC,EAC1B1B,KAAKwB,iBACLxB,KAAK2B,UAGP,OACEC,EAACC,EAAI,MACD7B,KAAKwB,mBAAqB,SAC1BxB,KAAK8B,UACL9B,KAAK+B,YACLH,EAAA,OAAA,CACEI,GAAG,uBACHC,MAAM,0BAAyBC,cACnB,QAEXlC,KAAKiB,MAAO,IACZjB,KAAKwB,mBAAqB,QAAU,gBAAkB,KAAM,IAC5DxB,KAAK8B,SAAW,WAAa,MAGlCF,EAAA,WAAA,CACEI,GAAIhC,KAAKe,KAAIoB,kBACI,GACfnC,KAAKwB,mBAAqB,SAAWxB,KAAK8B,UAAY9B,KAAK+B,UACvD,uBACA,MACFV,IAAce,OAClBT,SAAU3B,KAAK2B,WAEb3B,KAAK+B,WACLH,EAAA,SAAA,KACEA,EAAA,iBAAA,CACEK,MAAO,CAAElC,CAAC,GAAGC,KAAKwB,oBAAqB,MACvCP,MAAOjB,KAAKiB,MACZM,WAAYvB,KAAKuB,WACjBO,SAAU9B,KAAK8B,SACfH,SAAU3B,KAAK2B,SACfU,IAAKrC,KAAKe,QAIhBa,EAAA,MAAA,CAAKK,MAAM,cACTL,EAAA,OAAA,QAGHH,GACCG,EAAA,sBAAA,CACES,IAAKrC,KAAKe,KACVuB,aAAa,SACbC,OAAQvC,KAAKwB,iBACbgB,QAASxC,KAAKyC","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n.list-items {\n list-style: none;\n}\n\n.screen-reader-only-text {\n position: absolute;\n left: -9999px;\n background-color: #fff;\n color: #000;\n text-transform: none;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\nexport class CheckboxGroup {\n @Element() host: HTMLIcCheckboxGroupElement;\n\n /**\n * Provide a label for the input.\n */\n @Prop() label!: string;\n\n /**\n * Provide a name for the input.\n */\n @Prop() name!: string;\n\n /**\n * Specify if the input requires a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * Hides the label and applies the required label value as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * Specify whether the input is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Provide helper text to display additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * Specify whether dense styling to be applied to element.\n */\n @Prop() dense: boolean = false;\n /**\n * Provide validation status - 'error'\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * Provide validation text - 'error'\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n private checkboxOptions: HTMLIcCheckboxElement[];\n\n @State() checkedOptions: string[] = [];\n\n @Listen(\"checkboxChecked\")\n selectHandler(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n });\n this.icChange.emit({ value: this.checkedOptions });\n }\n\n componentDidLoad(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n });\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n this.name,\n this.helperText !== \"\",\n this.validationStatus !== \"\"\n );\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n return (\n <Host>\n {(this.validationStatus === \"error\" ||\n this.required ||\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" || this.required || this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"list-items\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":["icCheckboxGroupCss","CheckboxGroup","[object Object]","this","checkboxOptions","Array","from","host","querySelectorAll","forEach","checkbox","checked","checkedOptions","indexOf","value","push","icChange","emit","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","describedBy","getInputDescribedByText","helperText","validationStatus","hadValidationStatus","hasValidationStatus","disabled","h","Host","required","hideLabel","id","class","aria-hidden","aria-labelledby","trim","for","ariaLiveMode","status","message","validationText"],"mappings":"0IAAA,MAAMA,EAAqB,unFCwBdC,EAAa,yHAgBI,qBAKC,oBAKD,sBAKC,cAKJ,4BAI8B,uBAItB,uBASG,GAGpCC,gBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,WAGtCX,KAAKa,SAASC,KAAK,CAAEH,MAAOX,KAAKS,iBAGnCV,mBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,OAEpC,IAAKJ,EAASQ,KAAMR,EAASQ,KAAOf,KAAKe,KACzCR,EAASS,WAAahB,KAAKiB,SAG7BC,EACE,CACE,CAAEC,KAAMnB,KAAKiB,MAAOG,SAAU,SAC9B,CAAED,KAAMnB,KAAKe,KAAMK,SAAU,SAE/B,kBAIJrB,SACE,MAAMsB,EAAcC,EAClBtB,KAAKe,KACLf,KAAKuB,aAAe,GACpBvB,KAAKwB,mBAAqB,IAE5B,MAAMC,EAAsBC,EAC1B1B,KAAKwB,iBACLxB,KAAK2B,UAGP,OACEC,EAACC,EAAI,MACD7B,KAAKwB,mBAAqB,SAC1BxB,KAAK8B,UACL9B,KAAK+B,YACLH,EAAA,OAAA,CACEI,GAAG,uBACHC,MAAM,0BAAyBC,cACnB,QAEXlC,KAAKiB,MAAO,IACZjB,KAAKwB,mBAAqB,QAAU,gBAAkB,KAAM,IAC5DxB,KAAK8B,SAAW,WAAa,MAGlCF,EAAA,WAAA,CACEI,GAAIhC,KAAKe,KAAIoB,kBACI,GACfnC,KAAKwB,mBAAqB,SAAWxB,KAAK8B,UAAY9B,KAAK+B,UACvD,uBACA,MACFV,IAAce,OAClBT,SAAU3B,KAAK2B,WAEb3B,KAAK+B,WACLH,EAAA,SAAA,KACEA,EAAA,iBAAA,CACEK,MAAO,CAAElC,CAAC,GAAGC,KAAKwB,oBAAqB,MACvCP,MAAOjB,KAAKiB,MACZM,WAAYvB,KAAKuB,WACjBO,SAAU9B,KAAK8B,SACfH,SAAU3B,KAAK2B,SACfU,IAAKrC,KAAKe,QAIhBa,EAAA,MAAA,CAAKK,MAAM,cACTL,EAAA,OAAA,QAGHH,GACCG,EAAA,sBAAA,CACES,IAAKrC,KAAKe,KACVuB,aAAa,SACbC,OAAQvC,KAAKwB,iBACbgB,QAASxC,KAAKyC","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n.list-items {\n list-style: none;\n}\n\n.screen-reader-only-text {\n position: absolute;\n left: -9999px;\n background-color: #fff;\n color: #000;\n text-transform: none;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\nexport class CheckboxGroup {\n @Element() host: HTMLIcCheckboxGroupElement;\n\n /**\n * Provide a label for the input.\n */\n @Prop() label!: string;\n\n /**\n * Provide a name for the input.\n */\n @Prop() name!: string;\n\n /**\n * Specify if the input requires a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * Hides the label and applies the required label value as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * Specify whether the input is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Provide helper text to display additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * Specify whether small styling to be applied to element.\n */\n @Prop() small: boolean = false;\n /**\n * Provide validation status - 'error'\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * Provide validation text - 'error'\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n private checkboxOptions: HTMLIcCheckboxElement[];\n\n @State() checkedOptions: string[] = [];\n\n @Listen(\"checkboxChecked\")\n selectHandler(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n });\n this.icChange.emit({ value: this.checkedOptions });\n }\n\n componentDidLoad(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n });\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n this.name,\n this.helperText !== \"\",\n this.validationStatus !== \"\"\n );\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n return (\n <Host>\n {(this.validationStatus === \"error\" ||\n this.required ||\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" || this.required || this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"list-items\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as i,h as t,H as e,g as s,c as o}from"./p-f9370be6.js";import{a as n}from"./p-6f57b13c.js";import{s as a}from"./p-ae6aa67f.js";import{i as r,a as c}from"./p-f228c232.js";import{C as l}from"./p-1e7b4310.js";import{c as h}from"./p-ec26fc38.js";const d="ic-input-component-container{display:flex;border:1px solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:40px;width:var(--input-width, 320px);padding:1px;background-color:var(--ic-architectural-white);box-sizing:border-box;position:relative;fill:var(--ic-architectural-400)}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:1px dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:7px;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:6px;display:block}ic-input-component-container.readonly .icon-container{margin-left:-5px}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 6px;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success)}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover);--expand-icon-hover:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-2px;padding:2px;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}";const p=class{constructor(t){i(this,t);this.disabled=false;this.readonly=false;this.validationStatus="";this.small=false;this.multiLine=false;this.validationInline=false;this.dark=false;this.fullWidth=false}render(){const{small:i,validationStatus:s,disabled:o,readonly:c,multiLine:l,fullWidth:h,dark:d,validationInline:p}=this;const u=this.validationStatus!==""&&!this.disabled&&!this.readonly?true:false;return t(e,{class:{["small"]:i,[s]:u,["disabled"]:o,["readonly"]:c,["multiline"]:l,["fullwidth"]:h,["dark"]:d}},t("div",{class:{"focus-indicator":true,dark:d}},r(this.host,"left-icon")&&t("div",{class:{["icon-container"]:true}},t("slot",{name:"left-icon"})),t("slot",null),p&&s===n.Success&&t("span",{class:{["inline-success"]:true},innerHTML:a})))}get host(){return s(this)}};p.style=d;const u="ic-input-container .component-container{display:flex;flex-direction:column;position:relative}";const f=class{constructor(t){i(this,t);this.disabled=false;this.readonly=false}render(){return t(e,null,t("div",{class:{["component-container"]:true,["disabled"]:this.disabled,["readonly"]:this.readonly}},t("slot",null)))}};f.style=u;const b='/*! 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}@media (prefers-reduced-motion: no-preference){:host([open]) .menu{transition:max-height var(--ic-transition-duration-slow)}}:host{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 320px);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popup-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}:host(:not(.no-focus):focus-within){box-shadow:var(--ic-border-focus)}.menu{text-decoration:none;list-style-type:none;border:1px solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll{overflow-y:auto}.menu:focus-visible{outline:none}:host([open]){max-height:none;display:block}:host([open]) .menu{visibility:visible;max-height:322px}:host(.full-width){width:100%}.option{padding:8px 7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}:host([small]) .option{padding:4px 7px}.option:last-child{border-radius:0 0 1px 1px}.option:first-child{border-radius:1px 1px 0 0}.option:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option:focus-visible{outline:none}.option:not(.disabled-option) .option-description{color:var(--ic-color-secondary-text)}.option-text-container{pointer-events:none}.check-icon{height:24px;margin-left:8px;pointer-events:none}.focused-option .check-icon *{fill:white}.option-group-title{padding:24px 7px 8px;color:var(--ic-color-tertiary-text)}:host([small]) .option-group-title{padding:12px 7px 4px}.last-recommended-option{border-bottom:1px solid var(--ic-architectural-400)}.disabled-option{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option,.focused-option .option-description{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}:host(.no-results) li{cursor:no-drop}:host(.no-results) li:hover{background-color:transparent}';const m=class{constructor(e){i(this,e);this.optionSelect=o(this,"optionSelect",7);this.menuChange=o(this,"menuChange",7);this.menuOptionId=o(this,"menuOptionId",7);this.ungroupedOptions=[];this.preventClickOpen=false;this.handleMenuChange=(i,t)=>{if(!i)this.popperInstance.destroy();this.menuChange.emit({open:i,focusInput:t});if(!i&&t!==false){this.inputEl.focus();this.preventClickOpen=false}};this.setNextOptionValue=i=>{if(this.ungroupedOptions[i+1]){this.optionSelect.emit({value:this.ungroupedOptions[i+1].value,optionId:this.getOptionId(this.ungroupedOptions[i+1].value)})}else{this.optionSelect.emit({value:this.ungroupedOptions[0].value,optionId:this.getOptionId(this.ungroupedOptions[0].value)})}};this.setPreviousOptionValue=i=>{if(this.ungroupedOptions[i-1]){this.optionSelect.emit({value:this.ungroupedOptions[i-1].value,optionId:this.getOptionId(this.ungroupedOptions[i-1].value)})}else{this.optionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value,optionId:this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length-1].value)})}};this.arrowBehaviour=i=>{i.preventDefault();this.handleMenuChange(true)};this.setHighlightedOption=i=>{this.optionHighlighted=this.options[i].value||undefined};this.autoSetInputValueKeyboardOpen=i=>{var t;const e=this.ungroupedOptions.findIndex((i=>i.value===this.value));const s=((t=this.inputEl)===null||t===void 0?void 0:t.tagName)==="INPUT";switch(i.key){case"ArrowDown":this.keyboardNav=true;this.arrowBehaviour(i);this.setNextOptionValue(e);break;case"ArrowUp":this.keyboardNav=true;this.arrowBehaviour(i);this.setPreviousOptionValue(e);break;case" ":case"Enter":if(i.target.id!=="clear-button"){this.handleMenuChange(true)}break;case"Backspace":if(s){this.inputEl.focus()}break;default:if(s&&i.key!=="Tab"){this.inputEl.focus()}break}};this.manSetInputValueKeyboardOpen=i=>{const t=this.options.findIndex((i=>i.value===this.optionHighlighted));this.menuOptionId.emit({optionId:undefined});const e=i=>Array.from(this.host.shadowRoot.querySelectorAll("li"))[i].id;const s=this.parentEl.tagName==="IC-SEARCH-BAR";switch(i.key){case"ArrowDown":this.arrowBehaviour(i);if(t<this.options.length-1){this.setHighlightedOption(t+1);this.menuOptionId.emit({optionId:e(t+1)})}else{this.setHighlightedOption(0)}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"ArrowUp":this.arrowBehaviour(i);if(t<=0||t>this.options.length+1){this.setHighlightedOption(this.options.length-1);this.menuOptionId.emit({optionId:e(this.options.length-1)})}else{this.setHighlightedOption(t-1);this.menuOptionId.emit({optionId:e(t-1)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case" ":case"Enter":i.preventDefault();this.setInputValue(t);break;case"Escape":this.handleMenuChange(false);this.menuOptionId.emit({optionId:undefined});break;case"Shift":case"Tab":this.preventIncorrectTabOrder=true;break;case"Backspace":if(s){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break;default:if(s&&i.key!=="Tab"){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break}};this.setInputValue=i=>{var t;if(this.options[i]){this.optionSelect.emit({value:(t=this.options[i])===null||t===void 0?void 0:t.value});this.optionHighlighted=undefined;this.menuOptionId.emit({optionId:undefined})}this.handleMenuChange(false)};this.handleOptionClick=i=>{const{value:t,label:e}=i.target.dataset;this.optionSelect.emit({value:t,label:e});this.handleMenuChange(false)};this.handleBlur=i=>{if(i.relatedTarget!==this.inputEl){if(!this.menu.contains(i.relatedTarget)){this.handleMenuChange(false,false)}}else{this.handleMenuChange(false);this.preventClickOpen=true}};this.handleMenuKeyDown=i=>{if(this.activationType==="automatic"){this.autoSetValueOnMenuKeyDown(i)}};this.autoSetValueOnMenuKeyDown=i=>{i.cancelBubble=true;const t=this.ungroupedOptions.findIndex((i=>i.value===this.value));const e=this.inputEl.tagName==="INPUT";switch(i.key){case"ArrowUp":i.preventDefault();this.setPreviousOptionValue(t);this.keyboardNav=true;break;case"ArrowDown":i.preventDefault();this.setNextOptionValue(t);this.keyboardNav=true;break;case"Home":this.optionSelect.emit({value:this.ungroupedOptions[0].value});this.keyboardNav=true;break;case"End":this.optionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value});this.keyboardNav=true;break;case" ":case"Enter":case"Escape":this.handleMenuChange(false);break;case"Backspace":if(e){this.inputEl.focus()}break;case"Shift":break;default:if(e&&i.key!=="Tab"){this.inputEl.focus()}break}};this.handleMenuKeyUp=i=>{if(i.key==="Tab"&&i.shiftKey){this.preventClickOpen=false}};this.getOptionId=i=>`${this.menuId}-${i}`;this.getOptionAriaLabel=(i,t)=>{let e=i.label;if(i.description){e=`${e}, ${i.description}`}if(t){return`${e}, ${t.label} group`}else{return e}};this.getSortedOptions=i=>i.sort(((i,t)=>i.recommended&&!t.recommended?-1:0));this.isManualMode=this.activationType==="manual";this.scrollToSelected=i=>{const t=i.querySelector(".option[aria-selected]");if(t){const e=t.offsetTop+t.offsetHeight;if(e>i.scrollTop+i.offsetHeight||e<i.scrollTop+i.offsetHeight){i.scrollTop=t.offsetTop}t.focus()}};this.loadUngroupedOptions=()=>{if(this.options.length>0){this.options.map((i=>{if(i.children){i.children.map((i=>!i.disabled&&this.ungroupedOptions.push(i)))}else if(!i.disabled){this.ungroupedOptions.push(i)}}))}this.ungroupedOptions=this.getSortedOptions(this.ungroupedOptions)};this.displayOption=(i,e,s)=>{const{open:o,value:n}=this;return t("li",{id:this.getOptionId(i.value),class:{option:true,"focused-option":this.isManualMode?(this.keyboardNav||this.initialOptionsListRender)&&i.value===this.optionHighlighted:this.keyboardNav&&i.value===n,"last-recommended-option":i.recommended&&this.options[e+1]&&!this.options[e+1].recommended,"disabled-option":i.disabled},role:"option",tabindex:o&&(i.value===n||i.value===this.optionHighlighted)&&this.keyboardNav?"0":"-1","aria-label":this.getOptionAriaLabel(i,s),"aria-selected":i.value===n,"aria-disabled":i.disabled?"true":"false",onClick:this.handleOptionClick,onBlur:this.handleBlur,onMouseDown:i=>i.preventDefault(),"data-value":i.value,"data-label":i.label},t("div",{class:"option-text-container"},t("ic-typography",{variant:"body","aria-hidden":"true"},t("p",null,i.label)),i.description&&t("ic-typography",{id:`${this.getOptionId(i.value)}-description`,class:"option-description",variant:"caption","aria-hidden":"true"},t("p",null,i.description))),i.value===n&&this.parentEl.tagName!=="IC-SEARCH-BAR"&&t("span",{class:"check-icon",innerHTML:l}))};this.open=undefined;this.options=undefined;this.small=false;this.menuId=undefined;this.value=undefined;this.activationType="automatic";this.inputEl=undefined;this.parentEl=undefined;this.inputLabel=undefined;this.anchorEl=undefined;this.fullWidth=false;this.autoFocusOnSelected=true;this.keyboardNav=false;this.optionHighlighted=undefined;this.focusFromSearchKeypress=false;this.initialOptionsListRender=false;this.preventIncorrectTabOrder=false}watchOptionsHandler(){this.ungroupedOptions=[];this.loadUngroupedOptions()}handleClearListener(){this.optionHighlighted=""}handleSubmitSearch(){const i=this.options.findIndex((i=>i.value===this.optionHighlighted));this.setInputValue(i)}async handleClickOpen(){if(!this.preventClickOpen){this.menuChange.emit({open:!this.open});this.keyboardNav=false}this.preventClickOpen=false}async handleKeyboardOpen(i){this.keyboardNav=false;if(this.activationType==="automatic"){this.autoSetInputValueKeyboardOpen(i)}else{this.keyboardNav=true;this.manSetInputValueKeyboardOpen(i)}}async handleSetFirstOption(){this.setHighlightedOption(0)}connectedCallback(){var i;if(((i=this.parentEl)===null||i===void 0?void 0:i.tagName)==="IC-SEARCH-BAR"){this.setHighlightedOption(0);this.initialOptionsListRender=true}}componentWillLoad(){this.loadUngroupedOptions()}componentDidLoad(){let i=0;this.host.shadowRoot.querySelectorAll(".option").forEach((t=>i+=t.clientHeight));if(i>320){this.menu.classList.add("menu-scroll")}c([{prop:this.open,propName:"open"},{prop:this.options,propName:"options"},{prop:this.menuId,propName:"menu-id"},{prop:this.inputLabel,propName:"input-label"}],"Menu")}componentDidRender(){if(this.open){this.popperInstance=h(this.anchorEl,this.host,{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,7]}},{name:"flip",options:{fallbackPlacements:["top"],rootBoundary:"viewport"}}]})}}componentDidUpdate(){const i=this.options.some((i=>i.value===this.value));const t=this.optionHighlighted!==null&&this.optionHighlighted!==undefined&&this.optionHighlighted!=="";if(this.open&&this.options.length!==0){if(this.value&&this.keyboardNav&&i&&this.autoFocusOnSelected){this.scrollToSelected(this.menu)}else if(this.inputEl.tagName!=="IC-TEXT-FIELD"&&this.inputEl.tagName!=="INPUT"){this.menu.focus()}else if(t&&!this.focusFromSearchKeypress&&!this.preventIncorrectTabOrder){const i=this.host.shadowRoot.querySelector(`li[data-value="${this.optionHighlighted}"]`);if(i){i.focus()}}}}render(){var i,s;const{inputLabel:o,options:n,menuId:a,value:r,fullWidth:c}=this;return t(e,{class:{"full-width":c,"no-focus":((i=this.inputEl)===null||i===void 0?void 0:i.tagName)==="INPUT"}},n.length!==0&&t("ul",{id:a,class:"menu",role:"listbox","aria-label":o,"aria-activedescendant":r!=null&&r!==""?this.getOptionId(r):"",tabindex:open&&!this.keyboardNav&&((s=this.inputEl)===null||s===void 0?void 0:s.tagName)!=="INPUT"?"0":"-1",ref:i=>this.menu=i,onKeyDown:this.handleMenuKeyDown,onKeyUp:this.handleMenuKeyUp,onBlur:this.handleBlur},this.getSortedOptions(n).map(((i,e)=>{if(i.children){if(i.children.length>0){return t("div",null,t("ic-typography",{class:"option-group-title",role:"presentation",variant:"subtitle-small"},t("p",null,i.label)),i.children.map((t=>this.displayOption(t,e,i))))}else{return null}}else{return this.displayOption(i,e)}}))))}get host(){return s(this)}static get watchers(){return{options:["watchOptionsHandler"]}}};m.style=b;export{p as ic_input_component_container,f as ic_input_container,m as ic_menu};
2
+ //# sourceMappingURL=p-a23e9d8a.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","dense","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n /**\n * @prop --border-color: Border colour of the input component container\n */\n\n display: flex;\n border: 1px solid var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 40px;\n width: var(--input-width, 320px);\n padding: 1px;\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n position: relative;\n fill: var(--ic-architectural-400);\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-space-xxxs) solid var(--ic-status-error);\n padding: 0;\n}\n\nic-input-component-container.warning {\n border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n padding: 0;\n}\n\nic-input-component-container.success {\n border: var(--ic-space-xxxs) solid var(--ic-status-success);\n padding: 0;\n}\n\nic-input-component-container.dense {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 7px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.dense .icon-container {\n margin-top: 6px;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 6px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n border-color: var(--ic-action-dark-hover);\n color: var(--ic-action-dark-hover);\n\n --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -2px;\n padding: 2px;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n /**\n * disabled\n */\n @Prop() disabled: boolean = false;\n /**\n * readonly\n */\n @Prop() readonly: boolean = false;\n /**\n * validationStatus\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * dense\n */\n @Prop() dense: boolean = false;\n /**\n * multiLine\n */\n @Prop() multiLine: boolean = false;\n /**\n * validationInline\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n */\n @Prop() dark?: boolean = false;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n @Element() host: HTMLIcInputComponentContainerElement;\n\n render() {\n const {\n dense,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n [\"dense\"]: dense,\n [validationStatus]: hasValidationStatus,\n [\"disabled\"]: disabled,\n [\"readonly\"]: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark,\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark,\n }}\n >\n {isSlotUsed(this.host, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n","ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /**\n * disabled\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * readonly\n */\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: this.disabled,\n [\"readonly\"]: this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n :host([open]) .menu {\n transition: max-height var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n max-height: 0;\n width: var(--input-width, 320px);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popup-menu);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n text-decoration: none;\n list-style-type: none;\n border: 1px solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n max-height: 0;\n overflow-y: hidden;\n}\n\n.menu-scroll {\n overflow-y: auto;\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host([open]) {\n max-height: none;\n display: block;\n}\n\n:host([open]) .menu {\n visibility: visible;\n max-height: 322px;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\n.option {\n padding: 8px 7px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([dense]) .option {\n padding: 4px 7px;\n}\n\n.option:last-child {\n border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n outline: none;\n}\n\n.option:not(.disabled-option) .option-description {\n color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n pointer-events: none;\n}\n\n.check-icon {\n height: 24px;\n margin-left: 8px;\n pointer-events: none;\n}\n\n.focused-option .check-icon * {\n fill: white;\n}\n\n.option-group-title {\n padding: 24px 7px 8px;\n color: var(--ic-color-tertiary-text);\n}\n\n:host([dense]) .option-group-title {\n padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n color: var(--ic-architectural-200);\n cursor: default;\n pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n background-color: var(--ic-focus-blue) !important;\n color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n background-color: transparent;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Method,\n Listen,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcOptionSelectEventDetail,\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n tag: \"ic-menu\",\n styleUrl: \"ic-menu.css\",\n shadow: true,\n})\nexport class Menu {\n @Element() host: HTMLIcMenuElement;\n\n /**\n * Specify whether the menu is open.\n */\n @Prop({ reflect: true }) open!: boolean;\n\n /**\n * Provide the possible selection options.\n */\n @Prop() options!: IcMenuOption[];\n\n /**\n * Specify whether dense styling is to be applied to the element.\n */\n @Prop({ reflect: true }) dense?: boolean = false;\n\n /**\n * Id of the menu.\n */\n @Prop() menuId!: string;\n\n /**\n * The value of the currently selected option.\n */\n @Prop() value!: string;\n\n /**\n * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n */\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /**\n * Reference to the input element.\n */\n @Prop() inputEl!: HTMLElement;\n\n /**\n * @internal - set if ic-menu is nested inside another component\n */\n @Prop() parentEl?: HTMLElement;\n\n /**\n * Label for the input element.\n */\n @Prop() inputLabel!: string;\n\n /**\n * Reference to an anchor element the menu will position itself from when rendered.\n */\n @Prop() anchorEl!: HTMLElement;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * @internal If true, autofocus on selected item when menu is open\n */\n @Prop() autoFocusOnSelected: boolean = true;\n\n @State() keyboardNav: boolean = false;\n @State() optionHighlighted: string;\n @State() focusFromSearchKeypress: boolean = false;\n @State() initialOptionsListRender: boolean = false;\n @State() preventIncorrectTabOrder: boolean = false;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n this.ungroupedOptions = [];\n this.loadUngroupedOptions();\n }\n\n /**\n * Emitted when an option is selected.\n */\n @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when state of menu changes (i.e. open or close).\n */\n @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n /**\n * Emitted when an option has been highlighted\n */\n @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n @Listen(\"icClear\", { target: \"document\" })\n handleClearListener(): void {\n this.optionHighlighted = \"\";\n }\n\n @Listen(\"icSubmitSearch\", { target: \"document\" })\n handleSubmitSearch(): void {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.setInputValue(highlightedOptionIndex);\n }\n\n private menu: HTMLUListElement;\n private ungroupedOptions: IcMenuOption[] = [];\n private popperInstance: PopperInstance;\n\n // Prevents menu re-opening immediately after it is closed on blur when clicking input\n private preventClickOpen: boolean = false;\n\n private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n if (!open) this.popperInstance.destroy();\n this.menuChange.emit({ open, focusInput });\n\n if (!open && focusInput !== false) {\n this.inputEl.focus();\n this.preventClickOpen = false;\n }\n };\n\n private setNextOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex + 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n optionId: this.getOptionId(this.ungroupedOptions[0].value),\n });\n }\n };\n\n private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex - 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n ),\n });\n }\n };\n\n /**\n * If menu is opened with the mouse, emit menuChange custom event.\n */\n @Method()\n async handleClickOpen(): Promise<void> {\n if (!this.preventClickOpen) {\n this.menuChange.emit({ open: !this.open });\n this.keyboardNav = false;\n }\n this.preventClickOpen = false;\n }\n\n /**\n * Used alongside activationType\n * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n * @param {KeyboardEvent} event - keyboard event\n */\n @Method()\n async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n this.keyboardNav = false;\n\n if (this.activationType === \"automatic\") {\n this.autoSetInputValueKeyboardOpen(event);\n } else {\n this.keyboardNav = true;\n this.manSetInputValueKeyboardOpen(event);\n }\n }\n\n /**\n * @internal Used to highlight the first option in the menu.\n */\n @Method()\n async handleSetFirstOption(): Promise<void> {\n this.setHighlightedOption(0);\n }\n\n private arrowBehaviour = (event: KeyboardEvent): void => {\n event.preventDefault();\n this.handleMenuChange(true);\n };\n\n private setHighlightedOption = (highlightedIndex: number): void => {\n this.optionHighlighted = this.options[highlightedIndex].value || undefined;\n };\n\n private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setNextOptionValue(selectedOptionIndex);\n break;\n case \"ArrowUp\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setPreviousOptionValue(selectedOptionIndex);\n break;\n case \" \":\n case \"Enter\":\n if ((event.target as HTMLElement).id !== \"clear-button\") {\n this.handleMenuChange(true);\n }\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.menuOptionId.emit({ optionId: undefined });\n\n const getOptionId = (index: number): string =>\n Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.arrowBehaviour(event);\n if (highlightedOptionIndex < this.options.length - 1) {\n this.setHighlightedOption(highlightedOptionIndex + 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex + 1),\n });\n } else {\n this.setHighlightedOption(0);\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \"ArrowUp\":\n this.arrowBehaviour(event);\n if (\n highlightedOptionIndex <= 0 ||\n highlightedOptionIndex > this.options.length + 1\n ) {\n this.setHighlightedOption(this.options.length - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(this.options.length - 1),\n });\n } else {\n this.setHighlightedOption(highlightedOptionIndex - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex - 1),\n });\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \" \":\n case \"Enter\":\n event.preventDefault();\n this.setInputValue(highlightedOptionIndex);\n break;\n case \"Escape\":\n this.handleMenuChange(false);\n this.menuOptionId.emit({ optionId: undefined });\n break;\n case \"Shift\":\n case \"Tab\":\n this.preventIncorrectTabOrder = true;\n break;\n case \"Backspace\":\n if (isSearchBar) {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n default:\n if (isSearchBar && event.key !== \"Tab\") {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n }\n };\n\n private setInputValue = (highlightedOptionIndex: number) => {\n if (this.options[highlightedOptionIndex]) {\n this.optionSelect.emit({\n value: this.options[highlightedOptionIndex]?.value,\n });\n this.optionHighlighted = undefined;\n this.menuOptionId.emit({ optionId: undefined });\n }\n this.handleMenuChange(false);\n };\n\n private handleOptionClick = (event: Event): void => {\n const { value, label } = (event.target as HTMLLIElement).dataset;\n this.optionSelect.emit({ value, label });\n this.handleMenuChange(false);\n };\n\n private handleBlur = (event: FocusEvent): void => {\n if (event.relatedTarget !== this.inputEl) {\n if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n this.handleMenuChange(false, false);\n }\n } else {\n this.handleMenuChange(false);\n this.preventClickOpen = true;\n }\n };\n\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.autoSetValueOnMenuKeyDown(event);\n }\n };\n\n private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n this.setPreviousOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"ArrowDown\":\n event.preventDefault();\n this.setNextOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"Home\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n });\n this.keyboardNav = true;\n break;\n case \"End\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n });\n this.keyboardNav = true;\n break;\n case \" \":\n case \"Enter\":\n case \"Escape\":\n this.handleMenuChange(false);\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n case \"Shift\":\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private handleMenuKeyUp = (event: KeyboardEvent): void => {\n if (event.key === \"Tab\" && event.shiftKey) {\n this.preventClickOpen = false;\n }\n };\n\n private getOptionId = (value: string): string => {\n return `${this.menuId}-${value}`;\n };\n\n private getOptionAriaLabel = (\n option: IcMenuOption,\n parentOption: IcMenuOption\n ): string => {\n let ariaLabel = option.label;\n\n if (option.description) {\n ariaLabel = `${ariaLabel}, ${option.description}`;\n }\n\n if (parentOption) {\n return `${ariaLabel}, ${parentOption.label} group`;\n } else {\n return ariaLabel;\n }\n };\n\n private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n return options.sort((optionA, optionB) =>\n optionA.recommended && !optionB.recommended ? -1 : 0\n );\n };\n\n private isManualMode = this.activationType === \"manual\";\n\n private scrollToSelected = (menu: HTMLUListElement) => {\n const selectedOption = menu.querySelector(\n \".option[aria-selected]\"\n ) as HTMLElement;\n\n if (selectedOption) {\n const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n if (\n elTop > menu.scrollTop + menu.offsetHeight ||\n elTop < menu.scrollTop + menu.offsetHeight\n ) {\n menu.scrollTop = selectedOption.offsetTop;\n }\n selectedOption.focus();\n }\n };\n\n private loadUngroupedOptions = () => {\n if (this.options.length > 0) {\n this.options.map((option) => {\n if (option.children) {\n option.children.map(\n (option) => !option.disabled && this.ungroupedOptions.push(option)\n );\n } else if (!option.disabled) {\n this.ungroupedOptions.push(option);\n }\n });\n }\n this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n };\n\n connectedCallback(): void {\n if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n this.setHighlightedOption(0);\n this.initialOptionsListRender = true;\n }\n }\n\n componentWillLoad(): void {\n this.loadUngroupedOptions();\n }\n\n componentDidLoad(): void {\n let optionsHeight = 0;\n this.host.shadowRoot\n .querySelectorAll(\".option\")\n .forEach((option) => (optionsHeight += option.clientHeight));\n if (optionsHeight > 320) {\n this.menu.classList.add(\"menu-scroll\");\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.open, propName: \"open\" },\n { prop: this.options, propName: \"options\" },\n { prop: this.menuId, propName: \"menu-id\" },\n { prop: this.inputLabel, propName: \"input-label\" },\n //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n ],\n \"Menu\"\n );\n }\n\n componentDidRender(): void {\n if (this.open) {\n this.popperInstance = createPopper(this.anchorEl, this.host, {\n placement: \"bottom\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 7],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n }\n\n componentDidUpdate(): void {\n const inputValueInOptions: boolean = this.options.some(\n (option) => option.value === this.value\n );\n\n const optionHighlightedIsSet =\n this.optionHighlighted !== null &&\n this.optionHighlighted !== undefined &&\n this.optionHighlighted !== \"\";\n\n if (this.open && this.options.length !== 0) {\n if (\n this.value &&\n this.keyboardNav &&\n inputValueInOptions &&\n this.autoFocusOnSelected\n ) {\n this.scrollToSelected(this.menu);\n } else if (\n this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n this.inputEl.tagName !== \"INPUT\"\n ) {\n this.menu.focus();\n } else if (\n optionHighlightedIsSet &&\n !this.focusFromSearchKeypress &&\n !this.preventIncorrectTabOrder\n ) {\n const highlightedEl = this.host.shadowRoot.querySelector(\n `li[data-value=\"${this.optionHighlighted}\"]`\n ) as HTMLElement;\n\n if (highlightedEl) {\n highlightedEl.focus();\n }\n }\n }\n }\n\n private displayOption = (\n option: IcMenuOption,\n index?: number,\n parentOption?: IcMenuOption\n ): HTMLLIElement => {\n const { open, value } = this;\n\n return (\n <li\n id={this.getOptionId(option.value)}\n class={{\n option: true,\n \"focused-option\": this.isManualMode\n ? (this.keyboardNav || this.initialOptionsListRender) &&\n option.value === this.optionHighlighted\n : this.keyboardNav && option.value === value,\n \"last-recommended-option\":\n option.recommended &&\n this.options[index + 1] &&\n !this.options[index + 1].recommended,\n \"disabled-option\": option.disabled,\n }}\n role=\"option\"\n tabindex={\n open &&\n (option.value === value || option.value === this.optionHighlighted) &&\n this.keyboardNav\n ? \"0\"\n : \"-1\"\n }\n aria-label={this.getOptionAriaLabel(option, parentOption)}\n aria-selected={option.value === value}\n aria-disabled={option.disabled ? \"true\" : \"false\"}\n onClick={this.handleOptionClick}\n onBlur={this.handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n data-value={option.value}\n data-label={option.label}\n >\n <div class=\"option-text-container\">\n <ic-typography variant=\"body\" aria-hidden=\"true\">\n <p>{option.label}</p>\n </ic-typography>\n {option.description && (\n <ic-typography\n id={`${this.getOptionId(option.value)}-description`}\n class=\"option-description\"\n variant=\"caption\"\n aria-hidden=\"true\"\n >\n <p>{option.description}</p>\n </ic-typography>\n )}\n </div>\n {option.value === value &&\n this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n <span class=\"check-icon\" innerHTML={Check} />\n )}\n </li>\n );\n };\n\n render() {\n const { inputLabel, options, menuId, value, fullWidth } = this;\n\n return (\n <Host\n class={{\n \"full-width\": fullWidth,\n \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n }}\n >\n {options.length !== 0 && (\n <ul\n id={menuId}\n class=\"menu\"\n role=\"listbox\"\n aria-label={inputLabel}\n aria-activedescendant={\n value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n }\n tabindex={\n open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n ? \"0\"\n : \"-1\"\n }\n ref={(el) => (this.menu = el)}\n onKeyDown={this.handleMenuKeyDown}\n onKeyUp={this.handleMenuKeyUp}\n onBlur={this.handleBlur}\n >\n {this.getSortedOptions(options).map((option, index) => {\n if (option.children) {\n if (option.children.length > 0) {\n return (\n <div>\n <ic-typography\n class=\"option-group-title\"\n role=\"presentation\"\n variant=\"subtitle-small\"\n >\n <p>{option.label}</p>\n </ic-typography>\n {option.children.map((childOption) =>\n this.displayOption(childOption, index, option)\n )}\n </div>\n );\n } else {\n return null;\n }\n } else {\n return this.displayOption(option, index);\n }\n })}\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","small","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n /**\n * @prop --border-color: Border colour of the input component container\n */\n\n display: flex;\n border: 1px solid var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 40px;\n width: var(--input-width, 320px);\n padding: 1px;\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n position: relative;\n fill: var(--ic-architectural-400);\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-space-xxxs) solid var(--ic-status-error);\n padding: 0;\n}\n\nic-input-component-container.warning {\n border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n padding: 0;\n}\n\nic-input-component-container.success {\n border: var(--ic-space-xxxs) solid var(--ic-status-success);\n padding: 0;\n}\n\nic-input-component-container.small {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 7px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n margin-top: 6px;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 6px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n border-color: var(--ic-action-dark-hover);\n color: var(--ic-action-dark-hover);\n\n --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -2px;\n padding: 2px;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n /**\n * disabled\n */\n @Prop() disabled: boolean = false;\n /**\n * readonly\n */\n @Prop() readonly: boolean = false;\n /**\n * validationStatus\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * small\n */\n @Prop() small: boolean = false;\n /**\n * multiLine\n */\n @Prop() multiLine: boolean = false;\n /**\n * validationInline\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n */\n @Prop() dark?: boolean = false;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n @Element() host: HTMLIcInputComponentContainerElement;\n\n render() {\n const {\n small,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n [\"small\"]: small,\n [validationStatus]: hasValidationStatus,\n [\"disabled\"]: disabled,\n [\"readonly\"]: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark,\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark,\n }}\n >\n {isSlotUsed(this.host, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n","ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /**\n * disabled\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * readonly\n */\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: this.disabled,\n [\"readonly\"]: this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n :host([open]) .menu {\n transition: max-height var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n max-height: 0;\n width: var(--input-width, 320px);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popup-menu);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n text-decoration: none;\n list-style-type: none;\n border: 1px solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n max-height: 0;\n overflow-y: hidden;\n}\n\n.menu-scroll {\n overflow-y: auto;\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host([open]) {\n max-height: none;\n display: block;\n}\n\n:host([open]) .menu {\n visibility: visible;\n max-height: 322px;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\n.option {\n padding: 8px 7px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([small]) .option {\n padding: 4px 7px;\n}\n\n.option:last-child {\n border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n outline: none;\n}\n\n.option:not(.disabled-option) .option-description {\n color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n pointer-events: none;\n}\n\n.check-icon {\n height: 24px;\n margin-left: 8px;\n pointer-events: none;\n}\n\n.focused-option .check-icon * {\n fill: white;\n}\n\n.option-group-title {\n padding: 24px 7px 8px;\n color: var(--ic-color-tertiary-text);\n}\n\n:host([small]) .option-group-title {\n padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n color: var(--ic-architectural-200);\n cursor: default;\n pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n background-color: var(--ic-focus-blue) !important;\n color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n background-color: transparent;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Method,\n Listen,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcOptionSelectEventDetail,\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n tag: \"ic-menu\",\n styleUrl: \"ic-menu.css\",\n shadow: true,\n})\nexport class Menu {\n @Element() host: HTMLIcMenuElement;\n\n /**\n * Specify whether the menu is open.\n */\n @Prop({ reflect: true }) open!: boolean;\n\n /**\n * Provide the possible selection options.\n */\n @Prop() options!: IcMenuOption[];\n\n /**\n * Specify whether small styling is to be applied to the element.\n */\n @Prop({ reflect: true }) small?: boolean = false;\n\n /**\n * Id of the menu.\n */\n @Prop() menuId!: string;\n\n /**\n * The value of the currently selected option.\n */\n @Prop() value!: string;\n\n /**\n * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n */\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /**\n * Reference to the input element.\n */\n @Prop() inputEl!: HTMLElement;\n\n /**\n * @internal - set if ic-menu is nested inside another component\n */\n @Prop() parentEl?: HTMLElement;\n\n /**\n * Label for the input element.\n */\n @Prop() inputLabel!: string;\n\n /**\n * Reference to an anchor element the menu will position itself from when rendered.\n */\n @Prop() anchorEl!: HTMLElement;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * @internal If true, autofocus on selected item when menu is open\n */\n @Prop() autoFocusOnSelected: boolean = true;\n\n @State() keyboardNav: boolean = false;\n @State() optionHighlighted: string;\n @State() focusFromSearchKeypress: boolean = false;\n @State() initialOptionsListRender: boolean = false;\n @State() preventIncorrectTabOrder: boolean = false;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n this.ungroupedOptions = [];\n this.loadUngroupedOptions();\n }\n\n /**\n * Emitted when an option is selected.\n */\n @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when state of menu changes (i.e. open or close).\n */\n @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n /**\n * Emitted when an option has been highlighted\n */\n @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n @Listen(\"icClear\", { target: \"document\" })\n handleClearListener(): void {\n this.optionHighlighted = \"\";\n }\n\n @Listen(\"icSubmitSearch\", { target: \"document\" })\n handleSubmitSearch(): void {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.setInputValue(highlightedOptionIndex);\n }\n\n private menu: HTMLUListElement;\n private ungroupedOptions: IcMenuOption[] = [];\n private popperInstance: PopperInstance;\n\n // Prevents menu re-opening immediately after it is closed on blur when clicking input\n private preventClickOpen: boolean = false;\n\n private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n if (!open) this.popperInstance.destroy();\n this.menuChange.emit({ open, focusInput });\n\n if (!open && focusInput !== false) {\n this.inputEl.focus();\n this.preventClickOpen = false;\n }\n };\n\n private setNextOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex + 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n optionId: this.getOptionId(this.ungroupedOptions[0].value),\n });\n }\n };\n\n private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex - 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n ),\n });\n }\n };\n\n /**\n * If menu is opened with the mouse, emit menuChange custom event.\n */\n @Method()\n async handleClickOpen(): Promise<void> {\n if (!this.preventClickOpen) {\n this.menuChange.emit({ open: !this.open });\n this.keyboardNav = false;\n }\n this.preventClickOpen = false;\n }\n\n /**\n * Used alongside activationType\n * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n * @param {KeyboardEvent} event - keyboard event\n */\n @Method()\n async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n this.keyboardNav = false;\n\n if (this.activationType === \"automatic\") {\n this.autoSetInputValueKeyboardOpen(event);\n } else {\n this.keyboardNav = true;\n this.manSetInputValueKeyboardOpen(event);\n }\n }\n\n /**\n * @internal Used to highlight the first option in the menu.\n */\n @Method()\n async handleSetFirstOption(): Promise<void> {\n this.setHighlightedOption(0);\n }\n\n private arrowBehaviour = (event: KeyboardEvent): void => {\n event.preventDefault();\n this.handleMenuChange(true);\n };\n\n private setHighlightedOption = (highlightedIndex: number): void => {\n this.optionHighlighted = this.options[highlightedIndex].value || undefined;\n };\n\n private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setNextOptionValue(selectedOptionIndex);\n break;\n case \"ArrowUp\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setPreviousOptionValue(selectedOptionIndex);\n break;\n case \" \":\n case \"Enter\":\n if ((event.target as HTMLElement).id !== \"clear-button\") {\n this.handleMenuChange(true);\n }\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.menuOptionId.emit({ optionId: undefined });\n\n const getOptionId = (index: number): string =>\n Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.arrowBehaviour(event);\n if (highlightedOptionIndex < this.options.length - 1) {\n this.setHighlightedOption(highlightedOptionIndex + 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex + 1),\n });\n } else {\n this.setHighlightedOption(0);\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \"ArrowUp\":\n this.arrowBehaviour(event);\n if (\n highlightedOptionIndex <= 0 ||\n highlightedOptionIndex > this.options.length + 1\n ) {\n this.setHighlightedOption(this.options.length - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(this.options.length - 1),\n });\n } else {\n this.setHighlightedOption(highlightedOptionIndex - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex - 1),\n });\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \" \":\n case \"Enter\":\n event.preventDefault();\n this.setInputValue(highlightedOptionIndex);\n break;\n case \"Escape\":\n this.handleMenuChange(false);\n this.menuOptionId.emit({ optionId: undefined });\n break;\n case \"Shift\":\n case \"Tab\":\n this.preventIncorrectTabOrder = true;\n break;\n case \"Backspace\":\n if (isSearchBar) {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n default:\n if (isSearchBar && event.key !== \"Tab\") {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n }\n };\n\n private setInputValue = (highlightedOptionIndex: number) => {\n if (this.options[highlightedOptionIndex]) {\n this.optionSelect.emit({\n value: this.options[highlightedOptionIndex]?.value,\n });\n this.optionHighlighted = undefined;\n this.menuOptionId.emit({ optionId: undefined });\n }\n this.handleMenuChange(false);\n };\n\n private handleOptionClick = (event: Event): void => {\n const { value, label } = (event.target as HTMLLIElement).dataset;\n this.optionSelect.emit({ value, label });\n this.handleMenuChange(false);\n };\n\n private handleBlur = (event: FocusEvent): void => {\n if (event.relatedTarget !== this.inputEl) {\n if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n this.handleMenuChange(false, false);\n }\n } else {\n this.handleMenuChange(false);\n this.preventClickOpen = true;\n }\n };\n\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.autoSetValueOnMenuKeyDown(event);\n }\n };\n\n private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n this.setPreviousOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"ArrowDown\":\n event.preventDefault();\n this.setNextOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"Home\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n });\n this.keyboardNav = true;\n break;\n case \"End\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n });\n this.keyboardNav = true;\n break;\n case \" \":\n case \"Enter\":\n case \"Escape\":\n this.handleMenuChange(false);\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n case \"Shift\":\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private handleMenuKeyUp = (event: KeyboardEvent): void => {\n if (event.key === \"Tab\" && event.shiftKey) {\n this.preventClickOpen = false;\n }\n };\n\n private getOptionId = (value: string): string => {\n return `${this.menuId}-${value}`;\n };\n\n private getOptionAriaLabel = (\n option: IcMenuOption,\n parentOption: IcMenuOption\n ): string => {\n let ariaLabel = option.label;\n\n if (option.description) {\n ariaLabel = `${ariaLabel}, ${option.description}`;\n }\n\n if (parentOption) {\n return `${ariaLabel}, ${parentOption.label} group`;\n } else {\n return ariaLabel;\n }\n };\n\n private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n return options.sort((optionA, optionB) =>\n optionA.recommended && !optionB.recommended ? -1 : 0\n );\n };\n\n private isManualMode = this.activationType === \"manual\";\n\n private scrollToSelected = (menu: HTMLUListElement) => {\n const selectedOption = menu.querySelector(\n \".option[aria-selected]\"\n ) as HTMLElement;\n\n if (selectedOption) {\n const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n if (\n elTop > menu.scrollTop + menu.offsetHeight ||\n elTop < menu.scrollTop + menu.offsetHeight\n ) {\n menu.scrollTop = selectedOption.offsetTop;\n }\n selectedOption.focus();\n }\n };\n\n private loadUngroupedOptions = () => {\n if (this.options.length > 0) {\n this.options.map((option) => {\n if (option.children) {\n option.children.map(\n (option) => !option.disabled && this.ungroupedOptions.push(option)\n );\n } else if (!option.disabled) {\n this.ungroupedOptions.push(option);\n }\n });\n }\n this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n };\n\n connectedCallback(): void {\n if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n this.setHighlightedOption(0);\n this.initialOptionsListRender = true;\n }\n }\n\n componentWillLoad(): void {\n this.loadUngroupedOptions();\n }\n\n componentDidLoad(): void {\n let optionsHeight = 0;\n this.host.shadowRoot\n .querySelectorAll(\".option\")\n .forEach((option) => (optionsHeight += option.clientHeight));\n if (optionsHeight > 320) {\n this.menu.classList.add(\"menu-scroll\");\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.open, propName: \"open\" },\n { prop: this.options, propName: \"options\" },\n { prop: this.menuId, propName: \"menu-id\" },\n { prop: this.inputLabel, propName: \"input-label\" },\n //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n ],\n \"Menu\"\n );\n }\n\n componentDidRender(): void {\n if (this.open) {\n this.popperInstance = createPopper(this.anchorEl, this.host, {\n placement: \"bottom\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 7],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n }\n\n componentDidUpdate(): void {\n const inputValueInOptions: boolean = this.options.some(\n (option) => option.value === this.value\n );\n\n const optionHighlightedIsSet =\n this.optionHighlighted !== null &&\n this.optionHighlighted !== undefined &&\n this.optionHighlighted !== \"\";\n\n if (this.open && this.options.length !== 0) {\n if (\n this.value &&\n this.keyboardNav &&\n inputValueInOptions &&\n this.autoFocusOnSelected\n ) {\n this.scrollToSelected(this.menu);\n } else if (\n this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n this.inputEl.tagName !== \"INPUT\"\n ) {\n this.menu.focus();\n } else if (\n optionHighlightedIsSet &&\n !this.focusFromSearchKeypress &&\n !this.preventIncorrectTabOrder\n ) {\n const highlightedEl = this.host.shadowRoot.querySelector(\n `li[data-value=\"${this.optionHighlighted}\"]`\n ) as HTMLElement;\n\n if (highlightedEl) {\n highlightedEl.focus();\n }\n }\n }\n }\n\n private displayOption = (\n option: IcMenuOption,\n index?: number,\n parentOption?: IcMenuOption\n ): HTMLLIElement => {\n const { open, value } = this;\n\n return (\n <li\n id={this.getOptionId(option.value)}\n class={{\n option: true,\n \"focused-option\": this.isManualMode\n ? (this.keyboardNav || this.initialOptionsListRender) &&\n option.value === this.optionHighlighted\n : this.keyboardNav && option.value === value,\n \"last-recommended-option\":\n option.recommended &&\n this.options[index + 1] &&\n !this.options[index + 1].recommended,\n \"disabled-option\": option.disabled,\n }}\n role=\"option\"\n tabindex={\n open &&\n (option.value === value || option.value === this.optionHighlighted) &&\n this.keyboardNav\n ? \"0\"\n : \"-1\"\n }\n aria-label={this.getOptionAriaLabel(option, parentOption)}\n aria-selected={option.value === value}\n aria-disabled={option.disabled ? \"true\" : \"false\"}\n onClick={this.handleOptionClick}\n onBlur={this.handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n data-value={option.value}\n data-label={option.label}\n >\n <div class=\"option-text-container\">\n <ic-typography variant=\"body\" aria-hidden=\"true\">\n <p>{option.label}</p>\n </ic-typography>\n {option.description && (\n <ic-typography\n id={`${this.getOptionId(option.value)}-description`}\n class=\"option-description\"\n variant=\"caption\"\n aria-hidden=\"true\"\n >\n <p>{option.description}</p>\n </ic-typography>\n )}\n </div>\n {option.value === value &&\n this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n <span class=\"check-icon\" innerHTML={Check} />\n )}\n </li>\n );\n };\n\n render() {\n const { inputLabel, options, menuId, value, fullWidth } = this;\n\n return (\n <Host\n class={{\n \"full-width\": fullWidth,\n \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n }}\n >\n {options.length !== 0 && (\n <ul\n id={menuId}\n class=\"menu\"\n role=\"listbox\"\n aria-label={inputLabel}\n aria-activedescendant={\n value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n }\n tabindex={\n open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n ? \"0\"\n : \"-1\"\n }\n ref={(el) => (this.menu = el)}\n onKeyDown={this.handleMenuKeyDown}\n onKeyUp={this.handleMenuKeyUp}\n onBlur={this.handleBlur}\n >\n {this.getSortedOptions(options).map((option, index) => {\n if (option.children) {\n if (option.children.length > 0) {\n return (\n <div>\n <ic-typography\n class=\"option-group-title\"\n role=\"presentation\"\n variant=\"subtitle-small\"\n >\n <p>{option.label}</p>\n </ic-typography>\n {option.children.map((childOption) =>\n this.displayOption(childOption, index, option)\n )}\n </div>\n );\n } else {\n return null;\n }\n } else {\n return this.displayOption(option, index);\n }\n })}\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import{r as t,h as e,H as s,g as a}from"./p-f9370be6.js";import{a as n}from"./p-f228c232.js";import{I as i}from"./p-6f57b13c.js";const o=":host{display:block}:host(.ic-tab-panel-light){color:white}";const r=class{constructor(e){t(this,e);this.contextId="default";this.tabPosition=undefined;this.panelId=undefined;this.selectedTab=undefined;this.appearance="dark"}componentDidLoad(){n([{prop:this.tabPosition,propName:"tab-position"}],"Tab Panel")}render(){const{panelId:t,selectedTab:a,appearance:n}=this;return e(s,{class:{["ic-tab-panel-light"]:n===i.Light},role:"tabpanel",hidden:t!==undefined&&a!==undefined?!(t===a):true},e("div",null,e("slot",null)))}get host(){return a(this)}};r.style=o;export{r as ic_tab_panel};
2
+ //# sourceMappingURL=p-aad5da60.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":["icTabPanelCss","TabPanel","[object Object]","onComponentRequiredPropUndefined","prop","this","tabPosition","propName","panelId","selectedTab","appearance","h","Host","class","IcThemeForegroundEnum","Light","role","hidden","undefined"],"mappings":"iIAAA,MAAMA,EAAgB,oECYTC,EAAQ,8CAM2B,uGAYI,OAElDC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,YAAaC,SAAU,iBACrC,aAIJL,SACE,MAAMM,QAAEA,EAAOC,YAAEA,EAAWC,WAAEA,GAAeL,KAC7C,OACEM,EAACC,EAAI,CACHC,MAAO,CACLX,CAAC,sBAAuBQ,IAAeI,EAAsBC,OAE/DC,KAAK,WACLC,OACET,IAAYU,WAAaT,IAAgBS,YACnCV,IAAYC,GACd,MAGNE,EAAA,MAAA,KACEA,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n}\n\n:host(.ic-tab-panel-light) {\n color: white;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /**\n * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /** @internal The position of the tab panel inside the tabs array in context. */\n @Prop({ reflect: true }) tabPosition!: number;\n\n /** @internal The shared ID that links the panel and tab. */\n @Prop({ reflect: true }) panelId?: string;\n\n /** @internal The shared ID of the currently selected tab. */\n @Prop() selectedTab?: string;\n\n /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab Panel\"\n );\n }\n\n render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}