@ukic/web-components 3.20.0 → 3.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (642) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/{helpers-3a796e7a.js → helpers-81cd6930.js} +3 -16
  3. package/dist/cjs/helpers-81cd6930.js.map +1 -0
  4. package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
  5. package/dist/cjs/ic-accordion.cjs.entry.js +17 -10
  6. package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ic-action-chip.cjs.entry.js +7 -3
  8. package/dist/cjs/ic-action-chip.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ic-alert.cjs.entry.js +1 -1
  10. package/dist/cjs/ic-back-to-top.cjs.entry.js +2 -2
  11. package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-badge.cjs.entry.js +2 -2
  13. package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
  14. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +2 -2
  15. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
  17. package/dist/cjs/ic-button_3.cjs.entry.js +7 -7
  18. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ic-card-horizontal.cjs.entry.js +174 -0
  20. package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -0
  21. package/dist/cjs/ic-card-vertical.cjs.entry.js +2 -2
  22. package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ic-checkbox-group.cjs.entry.js +3 -3
  24. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ic-checkbox.cjs.entry.js +6 -6
  26. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  27. package/dist/cjs/ic-chip.cjs.entry.js +7 -3
  28. package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ic-classification-banner.cjs.entry.js +13 -5
  30. package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ic-data-list.cjs.entry.js +2 -2
  32. package/dist/cjs/ic-data-row.cjs.entry.js +3 -3
  33. package/dist/cjs/ic-dialog.cjs.entry.js +2 -2
  34. package/dist/cjs/ic-divider.cjs.entry.js +17 -8
  35. package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
  36. package/dist/cjs/ic-empty-state.cjs.entry.js +3 -3
  37. package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
  38. package/dist/cjs/ic-footer-link.cjs.entry.js +4 -4
  39. package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
  40. package/dist/cjs/ic-footer.cjs.entry.js +1 -1
  41. package/dist/cjs/ic-hero.cjs.entry.js +5 -5
  42. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +7 -7
  43. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
  44. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +218 -86
  45. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  46. package/dist/cjs/ic-input-label_2.cjs.entry.js +17 -12
  47. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  48. package/dist/cjs/ic-layout-grid-item.cjs.entry.js +2 -2
  49. package/dist/cjs/ic-layout-grid.cjs.entry.js +2 -2
  50. package/dist/cjs/ic-link.cjs.entry.js +3 -3
  51. package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
  52. package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
  53. package/dist/cjs/ic-menu-item.cjs.entry.js +1 -1
  54. package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
  55. package/dist/cjs/ic-navigation-group.cjs.entry.js +3 -3
  56. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  57. package/dist/cjs/ic-navigation-item.cjs.entry.js +7 -5
  58. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ic-navigation-menu.cjs.entry.js +5 -5
  60. package/dist/cjs/ic-page-header.cjs.entry.js +8 -8
  61. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  62. package/dist/cjs/ic-pagination-bar.cjs.entry.js +389 -0
  63. package/dist/cjs/ic-pagination-bar.cjs.entry.js.map +1 -0
  64. package/dist/cjs/ic-pagination-item.cjs.entry.js +3 -3
  65. package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
  66. package/dist/cjs/ic-pagination_3.cjs.entry.js +1412 -0
  67. package/dist/cjs/ic-pagination_3.cjs.entry.js.map +1 -0
  68. package/dist/cjs/ic-popover-menu.cjs.entry.js +5 -5
  69. package/dist/cjs/ic-radio-group.cjs.entry.js +5 -5
  70. package/dist/cjs/ic-radio-option.cjs.entry.js +6 -6
  71. package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
  72. package/dist/cjs/ic-search-bar.cjs.entry.js +12 -12
  73. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  74. package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
  75. package/dist/cjs/ic-side-navigation.cjs.entry.js +30 -15
  76. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  77. package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
  78. package/dist/cjs/ic-skip-link.cjs.entry.js +2 -2
  79. package/dist/cjs/ic-status-tag.cjs.entry.js +3 -3
  80. package/dist/cjs/ic-step.cjs.entry.js +14 -14
  81. package/dist/cjs/ic-stepper.cjs.entry.js +3 -3
  82. package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
  83. package/dist/cjs/ic-switch.cjs.entry.js +6 -6
  84. package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
  85. package/dist/cjs/ic-tab-context.cjs.entry.js +1 -2
  86. package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
  87. package/dist/cjs/ic-tab-group.cjs.entry.js +3 -3
  88. package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
  89. package/dist/cjs/ic-tab.cjs.entry.js +2 -2
  90. package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
  91. package/dist/cjs/ic-theme.cjs.entry.js +2 -2
  92. package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
  93. package/dist/cjs/ic-toast.cjs.entry.js +8 -7
  94. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  95. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +4 -4
  96. package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
  97. package/dist/cjs/ic-toggle-button.cjs.entry.js +3 -3
  98. package/dist/cjs/ic-top-navigation.cjs.entry.js +2 -2
  99. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  100. package/dist/cjs/ic-typography.cjs.entry.js +2 -2
  101. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  102. package/dist/cjs/index-d337cd8a.js +16 -16
  103. package/dist/cjs/loader.cjs.js +1 -1
  104. package/dist/collection/collection-manifest.json +3 -1
  105. package/dist/collection/components/ic-accordion/ic-accordion.css +6 -0
  106. package/dist/collection/components/ic-accordion/ic-accordion.js +15 -8
  107. package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
  108. package/dist/collection/components/ic-action-chip/ic-action-chip.css +15 -2
  109. package/dist/collection/components/ic-action-chip/ic-action-chip.js +5 -1
  110. package/dist/collection/components/ic-action-chip/ic-action-chip.js.map +1 -1
  111. package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +7 -0
  112. package/dist/collection/components/ic-badge/ic-badge.css +6 -0
  113. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.css +8 -0
  114. package/dist/collection/components/ic-button/ic-button.css +7 -0
  115. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +728 -0
  116. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +512 -0
  117. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -0
  118. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js +876 -0
  119. package/dist/collection/components/ic-card-vertical/ic-card-vertical.css +7 -0
  120. package/dist/collection/components/ic-card-vertical/ic-card-vertical.stories.js +1 -1
  121. package/dist/collection/components/ic-checkbox/ic-checkbox.css +7 -5
  122. package/dist/collection/components/ic-checkbox/ic-checkbox.js +4 -5
  123. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  124. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +3 -3
  125. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
  126. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +35 -0
  127. package/dist/collection/components/ic-chip/ic-chip.css +15 -3
  128. package/dist/collection/components/ic-chip/ic-chip.js +5 -1
  129. package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
  130. package/dist/collection/components/ic-classification-banner/ic-classification-banner.js +33 -5
  131. package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map +1 -1
  132. package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js +32 -0
  133. package/dist/collection/components/ic-data-list/ic-data-list.js +2 -2
  134. package/dist/collection/components/ic-data-row/ic-data-row.js +2 -2
  135. package/dist/collection/components/ic-dialog/ic-dialog.js +1 -1
  136. package/dist/collection/components/ic-divider/ic-divider.js +16 -7
  137. package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
  138. package/dist/collection/components/ic-empty-state/ic-empty-state.js +2 -2
  139. package/dist/collection/components/ic-footer-link/ic-footer-link.css +6 -0
  140. package/dist/collection/components/ic-footer-link/ic-footer-link.js +2 -2
  141. package/dist/collection/components/ic-hero/ic-hero.js +4 -4
  142. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.css +6 -0
  143. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +5 -5
  144. package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +7 -0
  145. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +3 -3
  146. package/dist/collection/components/ic-input-container/ic-input-container.js +2 -2
  147. package/dist/collection/components/ic-input-label/ic-input-label.js +16 -8
  148. package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
  149. package/dist/collection/components/ic-input-validation/ic-input-validation.js +3 -3
  150. package/dist/collection/components/ic-layout-grid/ic-layout-grid.js +2 -2
  151. package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js +2 -2
  152. package/dist/collection/components/ic-link/ic-link.css +7 -0
  153. package/dist/collection/components/ic-link/ic-link.js +1 -1
  154. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +5 -5
  155. package/dist/collection/components/ic-menu/ic-menu.css +12 -1
  156. package/dist/collection/components/ic-menu/ic-menu.js +184 -53
  157. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  158. package/dist/collection/components/ic-menu-group/ic-menu-group.js +1 -1
  159. package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +9 -0
  160. package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +1 -1
  161. package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +41 -0
  162. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +5 -3
  163. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
  164. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +4 -4
  165. package/dist/collection/components/ic-page-header/ic-page-header.css +1 -2
  166. package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
  167. package/dist/collection/components/ic-pagination/ic-pagination.js +4 -4
  168. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.css +104 -0
  169. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +895 -0
  170. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -0
  171. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js +215 -0
  172. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js +2 -0
  173. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js.map +1 -0
  174. package/dist/collection/components/ic-pagination-item/ic-pagination-item.css +6 -0
  175. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +1 -1
  176. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +4 -4
  177. package/dist/collection/components/ic-radio-group/ic-radio-group.js +4 -4
  178. package/dist/collection/components/ic-radio-option/ic-radio-option.css +6 -0
  179. package/dist/collection/components/ic-radio-option/ic-radio-option.js +4 -4
  180. package/dist/collection/components/ic-search-bar/ic-search-bar.css +6 -0
  181. package/dist/collection/components/ic-search-bar/ic-search-bar.js +10 -11
  182. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  183. package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
  184. package/dist/collection/components/ic-select/ic-select.css +9 -2
  185. package/dist/collection/components/ic-select/ic-select.js +414 -589
  186. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  187. package/dist/collection/components/ic-select/ic-select.types.js +2 -0
  188. package/dist/collection/components/ic-select/ic-select.types.js.map +1 -0
  189. package/dist/collection/components/ic-select/ic-select_(searchable).stories.js +26 -21
  190. package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +46 -21
  191. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +29 -14
  192. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
  193. package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
  194. package/dist/collection/components/ic-skip-link/ic-skip-link.js +2 -2
  195. package/dist/collection/components/ic-status-tag/ic-status-tag.js +2 -2
  196. package/dist/collection/components/ic-step/ic-step.js +13 -13
  197. package/dist/collection/components/ic-stepper/ic-stepper.js +2 -2
  198. package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
  199. package/dist/collection/components/ic-switch/ic-switch.css +7 -0
  200. package/dist/collection/components/ic-switch/ic-switch.js +4 -4
  201. package/dist/collection/components/ic-tab/ic-tab.css +6 -0
  202. package/dist/collection/components/ic-tab-context/ic-tab-context.js +1 -2
  203. package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
  204. package/dist/collection/components/ic-tab-group/ic-tab-group.js +2 -2
  205. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
  206. package/dist/collection/components/ic-text-field/ic-text-field.js +5 -5
  207. package/dist/collection/components/ic-theme/ic-theme.js +1 -1
  208. package/dist/collection/components/ic-toast/ic-toast.js +7 -6
  209. package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
  210. package/dist/collection/components/ic-toast-region/ic-toast-region.js +1 -1
  211. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +2 -2
  212. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.css +6 -0
  213. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +2 -2
  214. package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +8 -4
  215. package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js +100 -0
  216. package/dist/collection/components/ic-typography/ic-typography.css +6 -0
  217. package/dist/collection/utils/helpers.js +2 -15
  218. package/dist/collection/utils/helpers.js.map +1 -1
  219. package/dist/collection/utils/types.js.map +1 -1
  220. package/dist/components/helpers.js +3 -16
  221. package/dist/components/helpers.js.map +1 -1
  222. package/dist/components/ic-accordion.js +16 -9
  223. package/dist/components/ic-accordion.js.map +1 -1
  224. package/dist/components/ic-action-chip.js +6 -2
  225. package/dist/components/ic-action-chip.js.map +1 -1
  226. package/dist/components/ic-back-to-top.js +1 -1
  227. package/dist/components/ic-back-to-top.js.map +1 -1
  228. package/dist/components/ic-badge.js +1 -1
  229. package/dist/components/ic-badge.js.map +1 -1
  230. package/dist/components/ic-breadcrumb-group.js +1 -1
  231. package/dist/components/ic-breadcrumb-group.js.map +1 -1
  232. package/dist/components/ic-button2.js +1 -1
  233. package/dist/components/ic-button2.js.map +1 -1
  234. package/dist/components/ic-card-horizontal.d.ts +11 -0
  235. package/dist/components/ic-card-horizontal.js +214 -0
  236. package/dist/components/ic-card-horizontal.js.map +1 -0
  237. package/dist/components/ic-card-vertical.js +1 -1
  238. package/dist/components/ic-card-vertical.js.map +1 -1
  239. package/dist/components/ic-checkbox-group.js +2 -2
  240. package/dist/components/ic-checkbox-group.js.map +1 -1
  241. package/dist/components/ic-checkbox.js +5 -5
  242. package/dist/components/ic-checkbox.js.map +1 -1
  243. package/dist/components/ic-chip.js +6 -2
  244. package/dist/components/ic-chip.js.map +1 -1
  245. package/dist/components/ic-classification-banner.js +14 -5
  246. package/dist/components/ic-classification-banner.js.map +1 -1
  247. package/dist/components/ic-data-list.js +2 -2
  248. package/dist/components/ic-data-row.js +2 -2
  249. package/dist/components/ic-dialog.js +1 -1
  250. package/dist/components/ic-divider2.js +17 -8
  251. package/dist/components/ic-divider2.js.map +1 -1
  252. package/dist/components/ic-empty-state.js +2 -2
  253. package/dist/components/ic-footer-link.js +3 -3
  254. package/dist/components/ic-footer-link.js.map +1 -1
  255. package/dist/components/ic-hero.js +4 -4
  256. package/dist/components/ic-horizontal-scroll2.js +6 -6
  257. package/dist/components/ic-horizontal-scroll2.js.map +1 -1
  258. package/dist/components/ic-input-component-container2.js +4 -4
  259. package/dist/components/ic-input-component-container2.js.map +1 -1
  260. package/dist/components/ic-input-container2.js +2 -2
  261. package/dist/components/ic-input-label2.js +13 -8
  262. package/dist/components/ic-input-label2.js.map +1 -1
  263. package/dist/components/ic-input-validation2.js +3 -3
  264. package/dist/components/ic-layout-grid-item.js +2 -2
  265. package/dist/components/ic-layout-grid.js +2 -2
  266. package/dist/components/ic-link2.js +2 -2
  267. package/dist/components/ic-link2.js.map +1 -1
  268. package/dist/components/ic-loading-indicator2.js +5 -5
  269. package/dist/components/ic-menu-group.js +1 -1
  270. package/dist/components/ic-menu2.js +213 -79
  271. package/dist/components/ic-menu2.js.map +1 -1
  272. package/dist/components/ic-navigation-group.js +2 -2
  273. package/dist/components/ic-navigation-group.js.map +1 -1
  274. package/dist/components/ic-navigation-item.js +6 -4
  275. package/dist/components/ic-navigation-item.js.map +1 -1
  276. package/dist/components/ic-navigation-menu2.js +4 -4
  277. package/dist/components/ic-page-header.js +7 -7
  278. package/dist/components/ic-page-header.js.map +1 -1
  279. package/dist/components/ic-pagination-bar.d.ts +11 -0
  280. package/dist/components/ic-pagination-bar.js +523 -0
  281. package/dist/components/ic-pagination-bar.js.map +1 -0
  282. package/dist/components/ic-pagination-item2.js +2 -2
  283. package/dist/components/ic-pagination-item2.js.map +1 -1
  284. package/dist/components/ic-pagination.js +1 -375
  285. package/dist/components/ic-pagination.js.map +1 -1
  286. package/dist/{esm/ic-pagination.entry.js → components/ic-pagination2.js} +86 -15
  287. package/dist/components/ic-pagination2.js.map +1 -0
  288. package/dist/components/ic-popover-menu.js +4 -4
  289. package/dist/components/ic-popover-menu.js.map +1 -1
  290. package/dist/components/ic-radio-group.js +4 -4
  291. package/dist/components/ic-radio-option.js +5 -5
  292. package/dist/components/ic-radio-option.js.map +1 -1
  293. package/dist/components/ic-search-bar.js +12 -12
  294. package/dist/components/ic-search-bar.js.map +1 -1
  295. package/dist/components/ic-section-container2.js +2 -2
  296. package/dist/components/ic-select.js +1 -994
  297. package/dist/components/ic-select.js.map +1 -1
  298. package/dist/components/ic-select2.js +804 -0
  299. package/dist/components/ic-select2.js.map +1 -0
  300. package/dist/components/ic-side-navigation.js +30 -15
  301. package/dist/components/ic-side-navigation.js.map +1 -1
  302. package/dist/components/ic-skeleton.js +2 -2
  303. package/dist/components/ic-skip-link.js +2 -2
  304. package/dist/components/ic-status-tag.js +2 -2
  305. package/dist/components/ic-step.js +13 -13
  306. package/dist/components/ic-stepper.js +2 -2
  307. package/dist/components/ic-stepper.js.map +1 -1
  308. package/dist/components/ic-switch.js +5 -5
  309. package/dist/components/ic-switch.js.map +1 -1
  310. package/dist/components/ic-tab-context.js +1 -2
  311. package/dist/components/ic-tab-context.js.map +1 -1
  312. package/dist/components/ic-tab-group.js +2 -2
  313. package/dist/components/ic-tab-panel.js +2 -2
  314. package/dist/components/ic-tab-panel.js.map +1 -1
  315. package/dist/components/ic-tab.js +1 -1
  316. package/dist/components/ic-tab.js.map +1 -1
  317. package/dist/components/ic-text-field.js +1 -528
  318. package/dist/components/ic-text-field.js.map +1 -1
  319. package/dist/{esm/ic-text-field.entry.js → components/ic-text-field2.js} +119 -16
  320. package/dist/components/ic-text-field2.js.map +1 -0
  321. package/dist/components/ic-theme.js +1 -1
  322. package/dist/components/ic-toast-region.js +1 -1
  323. package/dist/components/ic-toast.js +7 -6
  324. package/dist/components/ic-toast.js.map +1 -1
  325. package/dist/components/ic-toggle-button-group.js +3 -3
  326. package/dist/components/ic-toggle-button-group.js.map +1 -1
  327. package/dist/components/ic-toggle-button.js +2 -2
  328. package/dist/components/ic-top-navigation.js +1 -1
  329. package/dist/components/ic-top-navigation.js.map +1 -1
  330. package/dist/components/ic-typography2.js +1 -1
  331. package/dist/components/ic-typography2.js.map +1 -1
  332. package/dist/core/core.esm.js +1 -1
  333. package/dist/core/core.esm.js.map +1 -1
  334. package/dist/core/p-05fd2707.entry.js +2 -0
  335. package/dist/core/p-05fd2707.entry.js.map +1 -0
  336. package/dist/core/{p-ba4abeac.entry.js → p-09505807.entry.js} +2 -2
  337. package/dist/core/{p-8f45f956.entry.js → p-09caf7ed.entry.js} +2 -2
  338. package/dist/core/p-09caf7ed.entry.js.map +1 -0
  339. package/dist/core/{p-8b1567c9.entry.js → p-0b728f50.entry.js} +2 -2
  340. package/dist/core/p-0b728f50.entry.js.map +1 -0
  341. package/dist/core/p-0fb7f915.entry.js +2 -0
  342. package/dist/core/p-0fb7f915.entry.js.map +1 -0
  343. package/dist/core/p-1b81ec88.entry.js +2 -0
  344. package/dist/core/p-1b81ec88.entry.js.map +1 -0
  345. package/dist/core/{p-3582c7df.entry.js → p-2691cc80.entry.js} +2 -2
  346. package/dist/core/p-2691cc80.entry.js.map +1 -0
  347. package/dist/core/{p-fe0153ec.entry.js → p-2a124daf.entry.js} +2 -2
  348. package/dist/core/{p-f5fd4a76.entry.js → p-2b87c592.entry.js} +2 -2
  349. package/dist/core/p-2b87c592.entry.js.map +1 -0
  350. package/dist/core/{p-c7f8547d.entry.js → p-2bd80913.entry.js} +2 -2
  351. package/dist/core/p-2bd80913.entry.js.map +1 -0
  352. package/dist/core/{p-aed1c7e7.entry.js → p-347cc084.entry.js} +2 -2
  353. package/dist/core/p-393af2bc.entry.js +2 -0
  354. package/dist/core/p-393af2bc.entry.js.map +1 -0
  355. package/dist/core/{p-b5e39585.entry.js → p-3aed13ba.entry.js} +2 -2
  356. package/dist/core/{p-276a6c8f.entry.js → p-46fd555f.entry.js} +2 -2
  357. package/dist/core/p-48a628f0.entry.js +2 -0
  358. package/dist/core/{p-23dc27a8.entry.js.map → p-48a628f0.entry.js.map} +1 -1
  359. package/dist/core/p-4f56acff.entry.js +2 -0
  360. package/dist/core/p-4f56acff.entry.js.map +1 -0
  361. package/dist/core/{p-86989873.entry.js → p-506d428a.entry.js} +2 -2
  362. package/dist/core/p-506d428a.entry.js.map +1 -0
  363. package/dist/core/p-50dca790.entry.js +2 -0
  364. package/dist/core/p-50dca790.entry.js.map +1 -0
  365. package/dist/core/p-53ab3c0f.entry.js +2 -0
  366. package/dist/core/p-53ab3c0f.entry.js.map +1 -0
  367. package/dist/core/{p-889bb8db.entry.js → p-56de4f4b.entry.js} +2 -2
  368. package/dist/core/p-5900cb65.entry.js +2 -0
  369. package/dist/core/p-5900cb65.entry.js.map +1 -0
  370. package/dist/core/{p-608b4912.entry.js → p-5976de6e.entry.js} +2 -2
  371. package/dist/core/{p-cf056074.entry.js → p-61d79fc6.entry.js} +2 -2
  372. package/dist/core/{p-cf056074.entry.js.map → p-61d79fc6.entry.js.map} +1 -1
  373. package/dist/core/{p-45076d7e.entry.js → p-659d048d.entry.js} +2 -2
  374. package/dist/core/{p-1edf2689.entry.js → p-67de1290.entry.js} +2 -2
  375. package/dist/core/p-6b4ec95f.entry.js +3 -0
  376. package/dist/core/p-6b4ec95f.entry.js.map +1 -0
  377. package/dist/core/{p-f700b759.entry.js → p-73043f57.entry.js} +2 -2
  378. package/dist/core/{p-7b8e5926.entry.js → p-735d3096.entry.js} +2 -2
  379. package/dist/core/{p-0301d1c8.entry.js → p-7b538fd1.entry.js} +2 -2
  380. package/dist/core/{p-cdbbcef4.entry.js → p-80d85403.entry.js} +2 -2
  381. package/dist/core/p-80d85403.entry.js.map +1 -0
  382. package/dist/core/{p-09c31ac6.entry.js → p-83578f1d.entry.js} +2 -2
  383. package/dist/core/{p-09c31ac6.entry.js.map → p-83578f1d.entry.js.map} +1 -1
  384. package/dist/core/{p-b8c0c142.entry.js → p-880f7548.entry.js} +2 -2
  385. package/dist/core/p-880f7548.entry.js.map +1 -0
  386. package/dist/core/{p-0d711c6a.entry.js → p-8a833e82.entry.js} +2 -2
  387. package/dist/core/{p-c16e982c.entry.js → p-90678e67.entry.js} +2 -2
  388. package/dist/core/{p-93e1ba0a.entry.js → p-9502fb86.entry.js} +2 -2
  389. package/dist/core/{p-6740c915.entry.js → p-99433296.entry.js} +2 -2
  390. package/dist/core/p-99433296.entry.js.map +1 -0
  391. package/dist/core/{p-76e8df31.entry.js → p-9c2b2cb9.entry.js} +2 -2
  392. package/dist/core/{p-949d08d3.entry.js → p-9cb83a2e.entry.js} +2 -2
  393. package/dist/core/{p-d2d17d6d.entry.js → p-a08d6b46.entry.js} +2 -2
  394. package/dist/core/p-a08d6b46.entry.js.map +1 -0
  395. package/dist/core/p-a321feee.entry.js +2 -0
  396. package/dist/core/p-a321feee.entry.js.map +1 -0
  397. package/dist/core/{p-45c553db.entry.js → p-a780a34b.entry.js} +2 -2
  398. package/dist/core/{p-90814d32.entry.js → p-aad03a3c.entry.js} +2 -2
  399. package/dist/core/{p-ec14c783.entry.js → p-aaf4e367.entry.js} +2 -2
  400. package/dist/core/{p-8c00614c.entry.js → p-b52c44eb.entry.js} +2 -2
  401. package/dist/core/{p-0722d7b6.entry.js → p-b777f0a1.entry.js} +2 -2
  402. package/dist/core/p-b777f0a1.entry.js.map +1 -0
  403. package/dist/core/p-b77b1e1f.js +2 -0
  404. package/dist/core/p-b77b1e1f.js.map +1 -0
  405. package/dist/core/p-b997ad5e.entry.js +2 -0
  406. package/dist/core/p-b997ad5e.entry.js.map +1 -0
  407. package/dist/core/{p-a0af1b0a.entry.js → p-bb7652cd.entry.js} +2 -2
  408. package/dist/core/{p-1d8559f0.entry.js → p-c156e6e9.entry.js} +2 -2
  409. package/dist/core/{p-e1814e7e.entry.js → p-cad23b7d.entry.js} +2 -2
  410. package/dist/core/{p-6aa8d3ce.entry.js → p-cbca04bb.entry.js} +2 -2
  411. package/dist/core/p-cbca04bb.entry.js.map +1 -0
  412. package/dist/core/{p-e176881a.entry.js → p-cc64e5ef.entry.js} +2 -2
  413. package/dist/core/{p-d478d13e.entry.js → p-cfbacca1.entry.js} +2 -2
  414. package/dist/core/p-cfbacca1.entry.js.map +1 -0
  415. package/dist/core/{p-ebc47282.entry.js → p-daec7e69.entry.js} +2 -2
  416. package/dist/core/{p-5ac3adb9.entry.js → p-e7767c0d.entry.js} +2 -2
  417. package/dist/core/p-e7767c0d.entry.js.map +1 -0
  418. package/dist/core/p-e938eb31.entry.js +2 -0
  419. package/dist/core/p-e938eb31.entry.js.map +1 -0
  420. package/dist/core/{p-81f60443.entry.js → p-ea7a3d30.entry.js} +2 -2
  421. package/dist/core/p-ea7a3d30.entry.js.map +1 -0
  422. package/dist/core/{p-ad5aca6f.entry.js → p-ea890d3d.entry.js} +2 -2
  423. package/dist/core/{p-880afd4b.entry.js → p-ebd688b9.entry.js} +2 -2
  424. package/dist/core/p-ebd688b9.entry.js.map +1 -0
  425. package/dist/core/p-ef70ea50.entry.js +2 -0
  426. package/dist/core/p-ef70ea50.entry.js.map +1 -0
  427. package/dist/core/{p-1fc4b88f.entry.js → p-f64996f1.entry.js} +2 -2
  428. package/dist/core/p-f64996f1.entry.js.map +1 -0
  429. package/dist/core/{p-0f998905.entry.js → p-f661ba76.entry.js} +2 -2
  430. package/dist/core/p-f661ba76.entry.js.map +1 -0
  431. package/dist/core/{p-4e43b272.entry.js → p-f84ac9c6.entry.js} +2 -2
  432. package/dist/core/{p-df029b1b.entry.js → p-fb9376f0.entry.js} +2 -2
  433. package/dist/core/p-fb9376f0.entry.js.map +1 -0
  434. package/dist/esm/core.js +1 -1
  435. package/dist/esm/{helpers-0f85537f.js → helpers-66681c73.js} +4 -17
  436. package/dist/esm/helpers-66681c73.js.map +1 -0
  437. package/dist/esm/ic-accordion-group.entry.js +1 -1
  438. package/dist/esm/ic-accordion.entry.js +17 -10
  439. package/dist/esm/ic-accordion.entry.js.map +1 -1
  440. package/dist/esm/ic-action-chip.entry.js +7 -3
  441. package/dist/esm/ic-action-chip.entry.js.map +1 -1
  442. package/dist/esm/ic-alert.entry.js +1 -1
  443. package/dist/esm/ic-back-to-top.entry.js +2 -2
  444. package/dist/esm/ic-back-to-top.entry.js.map +1 -1
  445. package/dist/esm/ic-badge.entry.js +2 -2
  446. package/dist/esm/ic-badge.entry.js.map +1 -1
  447. package/dist/esm/ic-breadcrumb-group.entry.js +2 -2
  448. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
  449. package/dist/esm/ic-breadcrumb.entry.js +1 -1
  450. package/dist/esm/ic-button_3.entry.js +7 -7
  451. package/dist/esm/ic-button_3.entry.js.map +1 -1
  452. package/dist/esm/ic-card-horizontal.entry.js +170 -0
  453. package/dist/esm/ic-card-horizontal.entry.js.map +1 -0
  454. package/dist/esm/ic-card-vertical.entry.js +2 -2
  455. package/dist/esm/ic-card-vertical.entry.js.map +1 -1
  456. package/dist/esm/ic-checkbox-group.entry.js +3 -3
  457. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  458. package/dist/esm/ic-checkbox.entry.js +6 -6
  459. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  460. package/dist/esm/ic-chip.entry.js +7 -3
  461. package/dist/esm/ic-chip.entry.js.map +1 -1
  462. package/dist/esm/ic-classification-banner.entry.js +13 -5
  463. package/dist/esm/ic-classification-banner.entry.js.map +1 -1
  464. package/dist/esm/ic-data-list.entry.js +2 -2
  465. package/dist/esm/ic-data-row.entry.js +3 -3
  466. package/dist/esm/ic-dialog.entry.js +2 -2
  467. package/dist/esm/ic-divider.entry.js +17 -8
  468. package/dist/esm/ic-divider.entry.js.map +1 -1
  469. package/dist/esm/ic-empty-state.entry.js +3 -3
  470. package/dist/esm/ic-footer-link-group.entry.js +1 -1
  471. package/dist/esm/ic-footer-link.entry.js +4 -4
  472. package/dist/esm/ic-footer-link.entry.js.map +1 -1
  473. package/dist/esm/ic-footer.entry.js +1 -1
  474. package/dist/esm/ic-hero.entry.js +5 -5
  475. package/dist/esm/ic-horizontal-scroll.entry.js +7 -7
  476. package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
  477. package/dist/esm/ic-input-component-container_3.entry.js +218 -86
  478. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  479. package/dist/esm/ic-input-label_2.entry.js +17 -12
  480. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  481. package/dist/esm/ic-layout-grid-item.entry.js +2 -2
  482. package/dist/esm/ic-layout-grid.entry.js +2 -2
  483. package/dist/esm/ic-link.entry.js +3 -3
  484. package/dist/esm/ic-link.entry.js.map +1 -1
  485. package/dist/esm/ic-menu-group.entry.js +2 -2
  486. package/dist/esm/ic-menu-item.entry.js +1 -1
  487. package/dist/esm/ic-navigation-button.entry.js +1 -1
  488. package/dist/esm/ic-navigation-group.entry.js +3 -3
  489. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  490. package/dist/esm/ic-navigation-item.entry.js +7 -5
  491. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  492. package/dist/esm/ic-navigation-menu.entry.js +5 -5
  493. package/dist/esm/ic-page-header.entry.js +8 -8
  494. package/dist/esm/ic-page-header.entry.js.map +1 -1
  495. package/dist/esm/ic-pagination-bar.entry.js +385 -0
  496. package/dist/esm/ic-pagination-bar.entry.js.map +1 -0
  497. package/dist/esm/ic-pagination-item.entry.js +3 -3
  498. package/dist/esm/ic-pagination-item.entry.js.map +1 -1
  499. package/dist/esm/ic-pagination_3.entry.js +1406 -0
  500. package/dist/esm/ic-pagination_3.entry.js.map +1 -0
  501. package/dist/esm/ic-popover-menu.entry.js +5 -5
  502. package/dist/esm/ic-radio-group.entry.js +5 -5
  503. package/dist/esm/ic-radio-option.entry.js +6 -6
  504. package/dist/esm/ic-radio-option.entry.js.map +1 -1
  505. package/dist/esm/ic-search-bar.entry.js +12 -12
  506. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  507. package/dist/esm/ic-section-container.entry.js +2 -2
  508. package/dist/esm/ic-side-navigation.entry.js +30 -15
  509. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  510. package/dist/esm/ic-skeleton.entry.js +2 -2
  511. package/dist/esm/ic-skip-link.entry.js +2 -2
  512. package/dist/esm/ic-status-tag.entry.js +3 -3
  513. package/dist/esm/ic-step.entry.js +14 -14
  514. package/dist/esm/ic-stepper.entry.js +3 -3
  515. package/dist/esm/ic-stepper.entry.js.map +1 -1
  516. package/dist/esm/ic-switch.entry.js +6 -6
  517. package/dist/esm/ic-switch.entry.js.map +1 -1
  518. package/dist/esm/ic-tab-context.entry.js +1 -2
  519. package/dist/esm/ic-tab-context.entry.js.map +1 -1
  520. package/dist/esm/ic-tab-group.entry.js +3 -3
  521. package/dist/esm/ic-tab-panel.entry.js +2 -2
  522. package/dist/esm/ic-tab.entry.js +2 -2
  523. package/dist/esm/ic-tab.entry.js.map +1 -1
  524. package/dist/esm/ic-theme.entry.js +2 -2
  525. package/dist/esm/ic-toast-region.entry.js +1 -1
  526. package/dist/esm/ic-toast.entry.js +8 -7
  527. package/dist/esm/ic-toast.entry.js.map +1 -1
  528. package/dist/esm/ic-toggle-button-group.entry.js +4 -4
  529. package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
  530. package/dist/esm/ic-toggle-button.entry.js +3 -3
  531. package/dist/esm/ic-top-navigation.entry.js +2 -2
  532. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  533. package/dist/esm/ic-typography.entry.js +2 -2
  534. package/dist/esm/ic-typography.entry.js.map +1 -1
  535. package/dist/esm/index-a7a720e7.js +16 -16
  536. package/dist/esm/loader.js +1 -1
  537. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +89 -0
  538. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +1 -0
  539. package/dist/types/components/ic-classification-banner/ic-classification-banner.d.ts +4 -0
  540. package/dist/types/components/ic-divider/ic-divider.d.ts +2 -0
  541. package/dist/types/components/ic-input-label/ic-input-label.d.ts +4 -1
  542. package/dist/types/components/ic-menu/ic-menu.d.ts +11 -1
  543. package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts +162 -0
  544. package/dist/types/components/ic-pagination-bar/ic-pagination-bar.types.d.ts +8 -0
  545. package/dist/types/components/ic-select/ic-select.d.ts +53 -80
  546. package/dist/types/components/ic-select/ic-select.types.d.ts +43 -0
  547. package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +3 -2
  548. package/dist/types/components.d.ts +357 -7
  549. package/dist/types/utils/helpers.d.ts +2 -4
  550. package/dist/types/utils/types.d.ts +1 -0
  551. package/hydrate/index.js +1504 -900
  552. package/hydrate/index.mjs +1504 -900
  553. package/package.json +2 -2
  554. package/vscode-data.json +248 -0
  555. package/dist/cjs/helpers-3a796e7a.js.map +0 -1
  556. package/dist/cjs/ic-pagination.cjs.entry.js +0 -312
  557. package/dist/cjs/ic-pagination.cjs.entry.js.map +0 -1
  558. package/dist/cjs/ic-select.cjs.entry.js +0 -879
  559. package/dist/cjs/ic-select.cjs.entry.js.map +0 -1
  560. package/dist/cjs/ic-text-field.cjs.entry.js +0 -433
  561. package/dist/cjs/ic-text-field.cjs.entry.js.map +0 -1
  562. package/dist/core/p-0722d7b6.entry.js.map +0 -1
  563. package/dist/core/p-0f6fd5d3.entry.js +0 -2
  564. package/dist/core/p-0f6fd5d3.entry.js.map +0 -1
  565. package/dist/core/p-0f998905.entry.js.map +0 -1
  566. package/dist/core/p-107281c4.entry.js +0 -2
  567. package/dist/core/p-107281c4.entry.js.map +0 -1
  568. package/dist/core/p-1fc4b88f.entry.js.map +0 -1
  569. package/dist/core/p-23dc27a8.entry.js +0 -2
  570. package/dist/core/p-3582c7df.entry.js.map +0 -1
  571. package/dist/core/p-3c7e90a7.entry.js +0 -2
  572. package/dist/core/p-3c7e90a7.entry.js.map +0 -1
  573. package/dist/core/p-57ce68e5.entry.js +0 -2
  574. package/dist/core/p-57ce68e5.entry.js.map +0 -1
  575. package/dist/core/p-5ac3adb9.entry.js.map +0 -1
  576. package/dist/core/p-656a9127.entry.js +0 -2
  577. package/dist/core/p-656a9127.entry.js.map +0 -1
  578. package/dist/core/p-6740c915.entry.js.map +0 -1
  579. package/dist/core/p-6aa8d3ce.entry.js.map +0 -1
  580. package/dist/core/p-72344764.entry.js +0 -2
  581. package/dist/core/p-72344764.entry.js.map +0 -1
  582. package/dist/core/p-7c38dd1f.entry.js +0 -2
  583. package/dist/core/p-7c38dd1f.entry.js.map +0 -1
  584. package/dist/core/p-81f60443.entry.js.map +0 -1
  585. package/dist/core/p-840c647f.entry.js +0 -2
  586. package/dist/core/p-840c647f.entry.js.map +0 -1
  587. package/dist/core/p-86989873.entry.js.map +0 -1
  588. package/dist/core/p-880afd4b.entry.js.map +0 -1
  589. package/dist/core/p-8b1567c9.entry.js.map +0 -1
  590. package/dist/core/p-8f45f956.entry.js.map +0 -1
  591. package/dist/core/p-9b60ca02.entry.js +0 -2
  592. package/dist/core/p-9b60ca02.entry.js.map +0 -1
  593. package/dist/core/p-a16415e4.entry.js +0 -3
  594. package/dist/core/p-a16415e4.entry.js.map +0 -1
  595. package/dist/core/p-b22fc28d.entry.js +0 -2
  596. package/dist/core/p-b22fc28d.entry.js.map +0 -1
  597. package/dist/core/p-b8c0c142.entry.js.map +0 -1
  598. package/dist/core/p-c3f5907e.entry.js +0 -2
  599. package/dist/core/p-c3f5907e.entry.js.map +0 -1
  600. package/dist/core/p-c7f8547d.entry.js.map +0 -1
  601. package/dist/core/p-cdbbcef4.entry.js.map +0 -1
  602. package/dist/core/p-d2d17d6d.entry.js.map +0 -1
  603. package/dist/core/p-d478d13e.entry.js.map +0 -1
  604. package/dist/core/p-dbc8bf0c.js +0 -2
  605. package/dist/core/p-dbc8bf0c.js.map +0 -1
  606. package/dist/core/p-df029b1b.entry.js.map +0 -1
  607. package/dist/core/p-f5fd4a76.entry.js.map +0 -1
  608. package/dist/core/p-fdb587ab.entry.js +0 -2
  609. package/dist/core/p-fdb587ab.entry.js.map +0 -1
  610. package/dist/esm/helpers-0f85537f.js.map +0 -1
  611. package/dist/esm/ic-pagination.entry.js.map +0 -1
  612. package/dist/esm/ic-select.entry.js +0 -875
  613. package/dist/esm/ic-select.entry.js.map +0 -1
  614. package/dist/esm/ic-text-field.entry.js.map +0 -1
  615. /package/dist/core/{p-ba4abeac.entry.js.map → p-09505807.entry.js.map} +0 -0
  616. /package/dist/core/{p-fe0153ec.entry.js.map → p-2a124daf.entry.js.map} +0 -0
  617. /package/dist/core/{p-aed1c7e7.entry.js.map → p-347cc084.entry.js.map} +0 -0
  618. /package/dist/core/{p-b5e39585.entry.js.map → p-3aed13ba.entry.js.map} +0 -0
  619. /package/dist/core/{p-276a6c8f.entry.js.map → p-46fd555f.entry.js.map} +0 -0
  620. /package/dist/core/{p-889bb8db.entry.js.map → p-56de4f4b.entry.js.map} +0 -0
  621. /package/dist/core/{p-608b4912.entry.js.map → p-5976de6e.entry.js.map} +0 -0
  622. /package/dist/core/{p-45076d7e.entry.js.map → p-659d048d.entry.js.map} +0 -0
  623. /package/dist/core/{p-1edf2689.entry.js.map → p-67de1290.entry.js.map} +0 -0
  624. /package/dist/core/{p-f700b759.entry.js.map → p-73043f57.entry.js.map} +0 -0
  625. /package/dist/core/{p-7b8e5926.entry.js.map → p-735d3096.entry.js.map} +0 -0
  626. /package/dist/core/{p-0301d1c8.entry.js.map → p-7b538fd1.entry.js.map} +0 -0
  627. /package/dist/core/{p-0d711c6a.entry.js.map → p-8a833e82.entry.js.map} +0 -0
  628. /package/dist/core/{p-c16e982c.entry.js.map → p-90678e67.entry.js.map} +0 -0
  629. /package/dist/core/{p-93e1ba0a.entry.js.map → p-9502fb86.entry.js.map} +0 -0
  630. /package/dist/core/{p-76e8df31.entry.js.map → p-9c2b2cb9.entry.js.map} +0 -0
  631. /package/dist/core/{p-949d08d3.entry.js.map → p-9cb83a2e.entry.js.map} +0 -0
  632. /package/dist/core/{p-45c553db.entry.js.map → p-a780a34b.entry.js.map} +0 -0
  633. /package/dist/core/{p-90814d32.entry.js.map → p-aad03a3c.entry.js.map} +0 -0
  634. /package/dist/core/{p-ec14c783.entry.js.map → p-aaf4e367.entry.js.map} +0 -0
  635. /package/dist/core/{p-8c00614c.entry.js.map → p-b52c44eb.entry.js.map} +0 -0
  636. /package/dist/core/{p-a0af1b0a.entry.js.map → p-bb7652cd.entry.js.map} +0 -0
  637. /package/dist/core/{p-1d8559f0.entry.js.map → p-c156e6e9.entry.js.map} +0 -0
  638. /package/dist/core/{p-e1814e7e.entry.js.map → p-cad23b7d.entry.js.map} +0 -0
  639. /package/dist/core/{p-e176881a.entry.js.map → p-cc64e5ef.entry.js.map} +0 -0
  640. /package/dist/core/{p-ebc47282.entry.js.map → p-daec7e69.entry.js.map} +0 -0
  641. /package/dist/core/{p-ad5aca6f.entry.js.map → p-ea890d3d.entry.js.map} +0 -0
  642. /package/dist/core/{p-4e43b272.entry.js.map → p-f84ac9c6.entry.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"names":["icTypographyCss","IcTypographyStyle0","Typography","constructor","hostRef","this","focusBtnFromKeyboard","inAGGrid","lastMarkerTop","lastWidth","resizeObserver","truncatedHeight","truncated","truncButtonFocussed","applyVerticalMargins","bold","italic","strikethrough","theme","underline","variant","expanded","toggleExpanded","ev","stopPropagation","typographyTruncationExpandToggle","emit","typographyEl","el","checkMarkerPosition","elTop","markerTop","getElementTop","getClientRects","top","runResizeObserver","truncWrapperEl","ResizeObserver","clearTimeout","resizeInterval","window","setTimeout","resizeObserverCallback","observe","clientWidth","checkMaxLines","clientHeight","marker","truncButtonFocus","truncButtonBlur","truncButtonFocusFromMouse","watchExpandedHandler","setAttribute","maxLines","disconnectedCallback","disconnect","resetTruncation","removeAttribute","componentDidLoad","_b","_a","getRootNode","host","tagName","document","createElement","style","visibility","appendChild","checkResizeObserver","componentWillRender","isElInAGGrid","height","numLines","Math","floor","setShowHideExpanded","render","h","Host","key","class","ref","focus","onFocus","onBlur","onMouseDown","onClick"],"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n position: relative;\n color: var(--ic-typography-color, var(--ic-color-text-primary));\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1) !important;\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-code-large) {\n font: var(--ic-font-code-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-code-small) {\n font: var(--ic-font-code-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-code-extra-small) {\n font: var(--ic-font-code-extra-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-badge) {\n font: var(--ic-font-badge);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-badge-small) {\n font: var(--ic-font-badge-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n\n.trunc-wrapper {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: var(--truncation-max-lines, initial);\n -webkit-line-clamp: var(--truncation-max-lines, initial);\n overflow: hidden;\n padding-right: var(--ellipsis-padding-right, 0);\n}\n\n.trunc-btn {\n border: none;\n background: none;\n padding: 0;\n color: var(--ic-color-text-primary);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n.trunc-btn:hover,\n.trunc-btn.focus {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n:host(.ic-typography-strikethrough) {\n text-decoration: line-through;\n}\n\n:host(.ic-typography-underline) {\n text-decoration: underline;\n}\n\n:host(.ic-typography-underline.ic-typography-strikethrough) {\n text-decoration: line-through underline;\n}\n\n:host(.ic-typography-italic) {\n font-style: italic !important;\n}\n\n:host(.ic-typography-bold) {\n font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.ic-theme-dark),\n:host(.ic-theme-light) {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted(*) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@supports (text-underline-offset: 25%) {\n .trunc-btn:hover,\n .trunc-btn.focus {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n@media (prefers-color-scheme: dark) and (forced-colors: none) {\n :host,\n .trunc-btn:not(ic-tooltip) {\n color: var(--ic-typography-color);\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n Host,\n State,\n Watch,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants, IcThemeMode } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n private focusBtnFromKeyboard: boolean = true;\n private inAGGrid: boolean = false;\n private lastMarkerTop: number = 0;\n private lastWidth: number = 0;\n private marker: HTMLElement;\n private resizeInterval: number;\n private resizeObserver: ResizeObserver | null = null;\n private truncatedHeight: number = 0;\n private truncWrapperEl?: Element;\n\n @Element() el: HTMLIcTypographyElement;\n\n @State() truncated: boolean = false;\n @State() truncButtonFocussed: boolean = false;\n\n /**\n * If `true`, appropriate top and bottom margins will be applied to the typography.\n */\n @Prop() applyVerticalMargins?: boolean = false;\n\n /**\n * If `true`, the typography will have a bold font weight.\n * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n */\n @Prop() bold?: boolean = false;\n\n /**\n * If `true`, the typography will have an italic font style.\n */\n @Prop() italic?: boolean = false;\n\n /**\n * The number of lines to display before truncating the text, only used for the 'body' variant.\n */\n @Prop({ mutable: true }) maxLines?: number;\n\n /**\n * If `true`, the typography will have a line through it.\n */\n @Prop() strikethrough?: boolean = false;\n\n /**\n * Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * If `true`, the typography will have a line under it.\n */\n @Prop() underline?: boolean = false;\n\n /**\n * The ICDS typography style to use.\n */\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /**\n * @internal Emits and event when the typography truncation button has been clicked.\n */\n @Event() typographyTruncationExpandToggle: EventEmitter<{\n expanded: boolean;\n typographyEl: HTMLIcTypographyElement;\n }>;\n\n @State() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.el.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n /**\n * @internal This is used by data table to remove all truncation in certain events\n */\n @Method()\n async resetTruncation() {\n if (this.truncated) {\n this.truncated = false;\n this.maxLines = 0;\n this.el.removeAttribute(\"max-lines\");\n this.expanded = false;\n this.el.removeAttribute(\"style\");\n }\n }\n\n componentDidLoad(): void {\n if (\n (this.variant === \"body\" ||\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n this.maxLines &&\n this.maxLines > 0\n ) {\n const marker = document.createElement(\"span\");\n marker.style.visibility = \"hidden\";\n this.el.appendChild(marker);\n this.marker = marker;\n this.lastWidth = this.el.clientWidth;\n this.checkMaxLines(this.el.clientHeight);\n checkResizeObserver(this.runResizeObserver);\n }\n }\n\n componentWillRender(): void {\n if (isElInAGGrid(this.el)) {\n this.inAGGrid = true;\n }\n }\n\n private toggleExpanded = (ev: Event) => {\n ev.stopPropagation();\n\n this.expanded = !this.expanded;\n this.typographyTruncationExpandToggle.emit({\n expanded: this.expanded,\n typographyEl: this.el,\n });\n };\n\n /**\n * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n * @param height - text container height\n */\n\n @Method()\n async checkMaxLines(height: number) {\n //24 is the height of a single line\n const numLines = Math.floor(height / 24);\n if (this.maxLines && numLines > this.maxLines) {\n this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n this.truncatedHeight = this.el.clientHeight;\n this.truncated = true;\n }\n }\n\n /**\n * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n */\n @Method()\n async setShowHideExpanded(expanded: boolean) {\n this.expanded = expanded;\n }\n\n private checkMarkerPosition = (elTop: number, markerTop: number) => {\n if (markerTop - elTop < this.truncatedHeight) {\n this.truncated = false;\n this.expanded = false;\n } else {\n this.truncated = true;\n }\n };\n\n private getElementTop = (el: HTMLElement) => {\n return el.getClientRects && el.getClientRects()[0]\n ? el.getClientRects()[0].top\n : 0;\n };\n\n private runResizeObserver = () => {\n if (this.truncWrapperEl) {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeInterval);\n this.resizeInterval = window.setTimeout(\n this.resizeObserverCallback,\n 50\n );\n });\n this.resizeObserver.observe(this.truncWrapperEl);\n }\n };\n\n private resizeObserverCallback = () => {\n if (this.lastWidth === this.el.clientWidth) {\n return;\n }\n\n if (this.truncatedHeight === 0) {\n this.checkMaxLines(this.el.clientHeight);\n return;\n }\n\n const markerTop = this.getElementTop(this.marker);\n if (markerTop === this.lastMarkerTop) {\n return;\n }\n\n this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n this.lastMarkerTop = markerTop;\n this.lastWidth = this.el.clientWidth;\n };\n\n private truncButtonFocus = (): void => {\n if (this.focusBtnFromKeyboard) {\n this.truncButtonFocussed = true;\n }\n };\n\n private truncButtonBlur = (): void => {\n this.focusBtnFromKeyboard = true;\n this.truncButtonFocussed = false;\n };\n\n private truncButtonFocusFromMouse = (): void => {\n this.focusBtnFromKeyboard = false;\n };\n\n render() {\n const {\n variant,\n applyVerticalMargins,\n maxLines,\n truncated,\n expanded,\n strikethrough,\n underline,\n italic,\n bold,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: !!applyVerticalMargins,\n [\"ic-typography-bold\"]: !!bold,\n [\"ic-typography-italic\"]: !!italic,\n [\"ic-typography-strikethrough\"]: !!strikethrough,\n [\"ic-typography-underline\"]: !!underline,\n [\"in-ag-grid\"]: this.inAGGrid,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {(variant === \"body\" ||\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n maxLines &&\n maxLines > 0 ? (\n <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n <slot />\n </div>\n ) : (\n <slot />\n )}\n {variant === \"body\" && maxLines && maxLines > 0 && truncated && (\n <button\n class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n onFocus={this.truncButtonFocus}\n onBlur={this.truncButtonBlur}\n onMouseDown={this.truncButtonFocusFromMouse}\n onClick={this.toggleExpanded}\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as o}from"./p-8e4e97b4.js";import{r as a,o as n}from"./p-dbc8bf0c.js";import"./p-6215e2ae.js";const h=`<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>\n</svg>\n`;const r=`<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M11.1709 8.825L7.34589 5L11.1709 1.175L9.99589 0L4.99589 5L9.99589 10L11.1709 8.825ZM0.829224 0H2.49589V10H0.829224V0Z" fill="currentColour"/>\n</svg>`;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{box-sizing:border-box;width:100%;display:flex;justify-content:center}nav{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ic-button{cursor:pointer}ic-button.next-previous{--icon-width:var(--ic-space-xs);--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs));padding:0 var(--ic-space-xxs) 0 var(--ic-space-xxxs)}ic-button.first-last{--icon-width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}ic-button.first-last::part(button),ic-button.next-previous::part(button){color:var(--ic-pagination-chevron)}:host(.ic-pagination-monochrome) ic-button.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.next-previous::part(button){color:var(--ic-pagination-chevron-monochrome)}ic-button.ic-button-disabled.first-last::part(button),ic-button.ic-button-disabled.next-previous::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.next-previous::part(button){color:var(--ic-pagination-chevron-disabled)}.disabled{color:var(--ic-color-text-disabled-mid);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hide-current-page{display:none}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}';const c=l;const d=class{constructor(s){t(this,s);this.icPageChange=i(this,"icPageChange",7);this.endEllipsis=false;this.endItems=[];this.midItems=[];this.startEllipsis=false;this.startItems=[];this.accessibleLabel="Pagination Navigation";this.adjacentPageCount=1;this.boundaryPageCount=1;this.defaultPage=1;this.disabled=false;this.hideCurrentPage=false;this.hideFirstAndLastPageButton=false;this.label="Page";this.monochrome=false;this.theme="inherit";this.type="simple";this.currentPage=this.defaultPage;this.handleClickFirst=()=>{this.currentPage=1;this.icPageChange.emit({value:this.currentPage})};this.handleClickPrevious=()=>{this.currentPage--;this.icPageChange.emit({value:this.currentPage})};this.handleClickNext=()=>{this.currentPage++;this.icPageChange.emit({value:this.currentPage})};this.handleClickLast=()=>{this.currentPage=this.pages;this.icPageChange.emit({value:this.currentPage})};this.firstButton=()=>e("ic-button",{id:"first-page-button","aria-label":"Go to first page",theme:this.theme,onClick:this.handleClickFirst,class:"page-button first-last",disabled:this.currentPage===1||this.disabled,variant:"icon-tertiary",monochrome:this.theme=="light"||this.theme=="dark",innerHTML:r});this.previousButton=()=>e("ic-button",{id:"previous-page-button","aria-label":"Go to previous page",theme:this.theme,onClick:this.handleClickPrevious,class:"page-button next-previous flip",disabled:this.currentPage===1||this.disabled,variant:"icon-tertiary",monochrome:this.theme=="light"||this.theme=="dark",innerHTML:h});this.nextButton=()=>e("ic-button",{id:"next-page-button","aria-label":"Go to next page",theme:this.theme,onClick:this.handleClickNext,class:"page-button next-previous",disabled:this.currentPage===this.pages||this.disabled,variant:"icon-tertiary",monochrome:this.theme=="light"||this.theme=="dark",innerHTML:h});this.lastButton=()=>e("ic-button",{id:"last-page-button","aria-label":"Go to last page",theme:this.theme,onClick:this.handleClickLast,class:"page-button first-last flip",disabled:this.currentPage===this.pages||this.disabled,variant:"icon-tertiary",monochrome:this.theme=="light"||this.theme=="dark",innerHTML:r});this.renderStartEllipsis=()=>e("ic-pagination-item",{theme:this.theme,monochrome:this.monochrome,type:"ellipsis",id:"start-ellipsis",disabled:this.disabled});this.renderEndEllipsis=()=>e("ic-pagination-item",{theme:this.theme,monochrome:this.monochrome,type:"ellipsis",id:"end-ellipsis",disabled:this.disabled});this.renderStartItems=()=>this.startItems.map((t=>e("ic-pagination-item",{theme:this.theme,monochrome:this.monochrome,selected:t===this.currentPage,id:`pagination-item-${t}`,type:"page",page:t,disabled:this.disabled})));this.renderEndItems=()=>this.endItems.map((t=>e("ic-pagination-item",{theme:this.theme,monochrome:this.monochrome,selected:t===this.currentPage,id:`pagination-item-${t}`,type:"page",page:t,disabled:this.disabled})));this.renderMiddleItems=()=>this.midItems.map((t=>e("ic-pagination-item",{theme:this.theme,monochrome:this.monochrome,selected:t===this.currentPage,id:`pagination-item-${t}`,type:"page",page:t,disabled:this.disabled})))}watchAdjacentPageCountHandler(){if(this.adjacentPageCount>2){this.adjacentPageCount=2}}watchBoundaryPageCountHandler(){if(this.boundaryPageCount>2){this.boundaryPageCount=2}}watchDisabledHandler(){a(this.disabled,this.el)}watchNumberPagesHandler(){this.watchPageChangeHandler()}watchTypeHandler(){this.watchPageChangeHandler()}watchPageChangeHandler(){if(this.type==="simple"){return}this.startEllipsis=false;this.endEllipsis=false;this.startItems=[];this.endItems=[];this.midItems=[];const t=[];let i=0;const e=[];let s=this.pages;const o=[];let a;let n;let h=false;let r=false;if(this.pages<=this.boundaryPageCount*2+this.adjacentPageCount*2+3){this.startEllipsis=false;this.endEllipsis=false;for(let i=1;i<=this.pages;i++){t.push(i)}this.startItems=t;return}i=this.boundaryPageCount===0?1:this.boundaryPageCount;s=this.boundaryPageCount===0?this.pages:this.pages-this.boundaryPageCount+1;if(this.currentPage<=this.adjacentPageCount+this.boundaryPageCount+2){h=false;r=true;let t=2*this.adjacentPageCount+1;if(this.boundaryPageCount===0){t--}a=i+1;n=a+t}else{h=true;if(this.currentPage>this.pages-(this.adjacentPageCount+this.boundaryPageCount+2)){let t=2*this.adjacentPageCount+1;if(this.boundaryPageCount===0){t--}n=this.boundaryPageCount===0?this.pages-1:this.pages-this.boundaryPageCount;a=n-t}else{r=true;a=this.currentPage-this.adjacentPageCount;n=this.currentPage+this.adjacentPageCount}}if(this.boundaryPageCount>0||this.boundaryPageCount===0&&h===false){for(let e=1;e<=i;e++){t.push(e)}}if(this.boundaryPageCount>0||this.boundaryPageCount===0&&r===false){for(let t=s;t<=this.pages;t++){e.push(t)}}for(let t=a;t<=n;t++){o.push(t)}this.startEllipsis=h;this.endEllipsis=r;this.startItems=t;this.endItems=e;this.midItems=o}componentWillLoad(){this.watchPageChangeHandler();this.watchBoundaryPageCountHandler();this.watchAdjacentPageCountHandler();a(this.disabled,this.el)}componentDidLoad(){n([{prop:this.pages,propName:"pages"}],"Pagination")}icPageChangeHandler(t){var i,e,s;const o=(i=document.activeElement)===null||i===void 0?void 0:i.shadowRoot;const a=o?o.activeElement:document.activeElement;if(!o||!a){return}if(t.detail.value===1&&["first-page-button","previous-page-button"].some((t=>t===(a===null||a===void 0?void 0:a.id)))){const t=(e=o.querySelector("#next-page-button").shadowRoot)===null||e===void 0?void 0:e.querySelector("button");setTimeout((()=>t===null||t===void 0?void 0:t.focus()),10)}else if(t.detail.value===this.pages&&["last-page-button","next-page-button"].some((t=>t===(a===null||a===void 0?void 0:a.id)))){const t=(s=o.querySelector("#previous-page-button").shadowRoot)===null||s===void 0?void 0:s.querySelector("button");setTimeout((()=>t===null||t===void 0?void 0:t.focus()),10)}}paginationItemClickHandler(t){const i=t.detail.page;this.currentPage=i;this.icPageChange.emit({value:this.currentPage})}async setCurrentPage(t){if(typeof t==="number"&&t>0&&t<=this.pages){this.currentPage=t}else{console.error("Current page must be a number greater than zero but less than or equal to the total number of pages")}}render(){const{type:t,currentPage:i,hideCurrentPage:o,disabled:a,hideFirstAndLastPageButton:n,label:h,theme:r,monochrome:l}=this;return e(s,{key:"06b3adf0d59e3e20e2192fa3836d13c4577003fe",class:{[`ic-theme-${r}`]:r!=="inherit",["ic-pagination-monochrome"]:!!l}},t==="simple"&&e("nav",{key:"75f6cfc6bd708870bb6dd4e6b1d44ab63f9f3bf5",class:{["disabled"]:!!a},role:"navigation","aria-label":this.accessibleLabel},n?null:this.firstButton(),this.previousButton(),e("ic-pagination-item",{key:"24ddac40513c65ac26604271f6a1ab268f107dfe",theme:this.theme,monochrome:this.monochrome,type:"simple-current",page:i,label:h,class:{["hide-current-page"]:!!o},disabled:a}),this.nextButton(),n?null:this.lastButton()),t==="complex"&&e("nav",{key:"5c864426c60fced527cf6457aded27e8c29fd26f",class:{["disabled"]:!!a},role:"navigation","aria-label":this.accessibleLabel},n?null:this.firstButton(),this.previousButton(),this.renderStartItems(),this.startEllipsis&&this.renderStartEllipsis(),this.renderMiddleItems(),this.endEllipsis&&this.renderEndEllipsis(),this.renderEndItems(),this.nextButton(),n?null:this.lastButton()),t==="complex"&&e("span",{key:"52bb61a07010197513bd02b450b79895cb80030c",class:"sr-only","aria-live":"polite"},"Page ",this.currentPage))}get el(){return o(this)}static get watchers(){return{adjacentPageCount:["watchAdjacentPageCountHandler"],boundaryPageCount:["watchBoundaryPageCountHandler"],disabled:["watchDisabledHandler"],pages:["watchNumberPagesHandler"],type:["watchTypeHandler"],currentPage:["watchPageChangeHandler"]}}};d.style=c;export{d as ic_pagination};
2
- //# sourceMappingURL=p-656a9127.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icPaginationCss","IcPaginationStyle0","Pagination","constructor","hostRef","this","endEllipsis","endItems","midItems","startEllipsis","startItems","accessibleLabel","adjacentPageCount","boundaryPageCount","defaultPage","disabled","hideCurrentPage","hideFirstAndLastPageButton","label","monochrome","theme","type","currentPage","handleClickFirst","icPageChange","emit","value","handleClickPrevious","handleClickNext","handleClickLast","pages","firstButton","h","id","onClick","class","variant","innerHTML","paginationFirstLast","previousButton","paginationNextPrevious","nextButton","lastButton","renderStartEllipsis","renderEndEllipsis","renderStartItems","map","page","selected","renderEndItems","renderMiddleItems","watchAdjacentPageCountHandler","watchBoundaryPageCountHandler","watchDisabledHandler","removeDisabledFalse","el","watchNumberPagesHandler","watchPageChangeHandler","watchTypeHandler","startItemCount","endStart","midStart","midEnd","i","push","numItems","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","icPageChangeHandler","ev","shadow","_a","document","activeElement","shadowRoot","activeEl","detail","some","btn","_b","querySelector","setTimeout","focus","_c","paginationItemClickHandler","setCurrentPage","console","error","render","Host","key","role"],"sources":["src/components/ic-pagination/ic-pagination.css?tag=ic-pagination&encapsulation=shadow","src/components/ic-pagination/ic-pagination.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n box-sizing: border-box;\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\nnav {\n width: 100%;\n display: flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n align-items: center;\n}\n\nic-button {\n cursor: pointer;\n}\n\nic-button.next-previous {\n --icon-width: var(--ic-space-xs);\n --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n\n padding: 0 var(--ic-space-xxs) 0 var(--ic-space-xxxs);\n}\n\nic-button.first-last {\n --icon-width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n}\n\nic-button.first-last::part(button),\nic-button.next-previous::part(button) {\n color: var(--ic-pagination-chevron);\n}\n\n:host(.ic-pagination-monochrome) ic-button.first-last::part(button),\n:host(.ic-pagination-monochrome) ic-button.next-previous::part(button) {\n color: var(--ic-pagination-chevron-monochrome);\n}\n\nic-button.ic-button-disabled.first-last::part(button),\nic-button.ic-button-disabled.next-previous::part(button),\n:host(.ic-pagination-monochrome)\n ic-button.ic-button-disabled.first-last::part(button),\n:host(.ic-pagination-monochrome)\n ic-button.ic-button-disabled.next-previous::part(button) {\n color: var(--ic-pagination-chevron-disabled);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n pointer-events: none;\n cursor: none;\n user-select: none;\n}\n\n.hide-current-page {\n display: none;\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n right: -9999px;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Listen,\n State,\n Watch,\n Event,\n EventEmitter,\n Method,\n} from \"@stencil/core\";\nimport paginationNextPrevious from \"../../assets/pagination-next-previous.svg\";\nimport paginationFirstLast from \"../../assets/pagination-first-last.svg\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { IcPaginationTypes, IcChangeEventDetail } from \"./ic-pagination.types\";\nimport {\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-pagination\",\n styleUrl: \"ic-pagination.css\",\n shadow: true,\n})\nexport class Pagination {\n @Element() el: HTMLIcPaginationElement;\n\n @State() endEllipsis: boolean = false;\n @State() endItems: number[] = [];\n @State() midItems: number[] = [];\n @State() startEllipsis: boolean = false;\n @State() startItems: number[] = [];\n\n /**\n * The accessible label of the pagination component to provide context for screen reader users.\n */\n @Prop() accessibleLabel?: string = \"Pagination Navigation\";\n\n /**\n * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n */\n @Prop({ mutable: true }) adjacentPageCount?: number = 1;\n\n @Watch(\"adjacentPageCount\")\n watchAdjacentPageCountHandler(): void {\n if (this.adjacentPageCount! > 2) {\n this.adjacentPageCount = 2;\n }\n }\n\n /**\n * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n */\n @Prop({ mutable: true }) boundaryPageCount?: number = 1;\n\n @Watch(\"boundaryPageCount\")\n watchBoundaryPageCountHandler(): void {\n if (this.boundaryPageCount! > 2) {\n this.boundaryPageCount = 2;\n }\n }\n\n /**\n * The default page to display.\n */\n @Prop() defaultPage?: number = 1;\n\n /**\n * If `true`, the pagination will not allow interaction.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the current page of the simple pagination will not be displayed.\n */\n @Prop() hideCurrentPage?: boolean = false;\n\n /**\n * If `true`, the first and last page buttons will not be displayed.\n */\n @Prop() hideFirstAndLastPageButton?: boolean = false;\n\n /**\n * The label for the pagination item (applicable when simple pagination is being used).\n */\n @Prop() label?: string = \"Page\";\n\n /**\n * If `true`, the pagination will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome?: boolean = false;\n\n /**\n * The total number of pages.\n */\n @Prop() pages!: number;\n\n @Watch(\"pages\")\n watchNumberPagesHandler(): void {\n this.watchPageChangeHandler();\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The type of pagination to be used.\n */\n @Prop() type?: IcPaginationTypes = \"simple\";\n\n @Watch(\"type\")\n watchTypeHandler(): void {\n this.watchPageChangeHandler();\n }\n\n /**\n * The current page displayed by the pagination.\n */\n @Prop({ mutable: true }) currentPage?: number = this.defaultPage;\n\n @Watch(\"currentPage\")\n watchPageChangeHandler(): void {\n if (this.type === \"simple\") {\n return;\n }\n\n this.startEllipsis = false;\n this.endEllipsis = false;\n this.startItems = [];\n this.endItems = [];\n this.midItems = [];\n\n const startItems = [];\n let startItemCount = 0;\n const endItems = [];\n let endStart = this.pages;\n const midItems = [];\n let midStart;\n let midEnd;\n let startEllipsis = false;\n let endEllipsis = false;\n\n if (\n this.pages <=\n this.boundaryPageCount! * 2 + this.adjacentPageCount! * 2 + 3\n ) {\n this.startEllipsis = false;\n this.endEllipsis = false;\n for (let i = 1; i <= this.pages; i++) {\n startItems.push(i);\n }\n this.startItems = startItems;\n return;\n }\n\n startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount!;\n endStart =\n this.boundaryPageCount === 0\n ? this.pages\n : this.pages - this.boundaryPageCount! + 1;\n\n if (\n this.currentPage! <=\n this.adjacentPageCount! + this.boundaryPageCount! + 2\n ) {\n startEllipsis = false;\n endEllipsis = true;\n\n let numItems = 2 * this.adjacentPageCount! + 1;\n if (this.boundaryPageCount === 0) {\n numItems--;\n }\n midStart = startItemCount + 1;\n midEnd = midStart + numItems;\n } else {\n startEllipsis = true;\n if (\n this.currentPage! >\n this.pages - (this.adjacentPageCount! + this.boundaryPageCount! + 2)\n ) {\n let numItems = 2 * this.adjacentPageCount! + 1;\n if (this.boundaryPageCount === 0) {\n numItems--;\n }\n midEnd =\n this.boundaryPageCount === 0\n ? this.pages - 1\n : this.pages - this.boundaryPageCount!;\n midStart = midEnd - numItems;\n } else {\n endEllipsis = true;\n midStart = this.currentPage! - this.adjacentPageCount!;\n midEnd = this.currentPage! + this.adjacentPageCount!;\n }\n }\n\n //create array of start items\n if (\n this.boundaryPageCount! > 0 ||\n (this.boundaryPageCount === 0 && startEllipsis === false)\n ) {\n for (let i = 1; i <= startItemCount; i++) {\n startItems.push(i);\n }\n }\n\n //create array of end items\n if (\n this.boundaryPageCount! > 0 ||\n (this.boundaryPageCount === 0 && endEllipsis === false)\n ) {\n for (let i = endStart; i <= this.pages; i++) {\n endItems.push(i);\n }\n }\n\n //create array of mid items\n for (let i = midStart; i <= midEnd; i++) {\n midItems.push(i);\n }\n\n this.startEllipsis = startEllipsis;\n this.endEllipsis = endEllipsis;\n this.startItems = startItems;\n this.endItems = endItems;\n this.midItems = midItems;\n }\n\n /**\n * Emitted when a page is selected.\n */\n @Event() icPageChange: EventEmitter<IcChangeEventDetail>;\n\n componentWillLoad(): void {\n this.watchPageChangeHandler();\n this.watchBoundaryPageCountHandler();\n this.watchAdjacentPageCountHandler();\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.pages, propName: \"pages\" }],\n \"Pagination\"\n );\n }\n\n /**\n * Prevents focus lingering on a disabled element. If the currently\n * focused element is one of the back buttons (and we reach the first page),\n * move focus to \"next\" button, and vice versa.\n * @param ev\n */\n @Listen(\"icPageChange\")\n icPageChangeHandler(ev: CustomEvent<IcChangeEventDetail>) {\n const shadow = document.activeElement?.shadowRoot;\n\n const activeEl = shadow ? shadow.activeElement : document.activeElement;\n if (!shadow || !activeEl) {\n return;\n }\n\n if (\n ev.detail.value === 1 &&\n [\"first-page-button\", \"previous-page-button\"].some(\n (id) => id === activeEl?.id\n )\n ) {\n const btn = (\n shadow.querySelector(\"#next-page-button\") as HTMLElement\n ).shadowRoot?.querySelector(\"button\");\n // When navigating from firstPage->lastPage or vice versa, the to-be-selected element will be disabled. wait a tick so that it can receive focus.\n setTimeout(() => btn?.focus(), 10);\n } else if (\n ev.detail.value === this.pages &&\n [\"last-page-button\", \"next-page-button\"].some((id) => id === activeEl?.id)\n ) {\n const btn = (\n shadow!.querySelector(\"#previous-page-button\") as HTMLElement\n ).shadowRoot?.querySelector(\"button\");\n setTimeout(() => btn?.focus(), 10);\n }\n }\n\n @Listen(\"paginationItemClick\")\n paginationItemClickHandler(ev: CustomEvent): void {\n const page = ev.detail.page;\n this.currentPage = page;\n this.icPageChange.emit({ value: this.currentPage! });\n }\n\n /**\n * Sets the currently displayed page.\n * @param {number} page The page number to set as the current page\n */\n @Method()\n async setCurrentPage(page: number): Promise<void> {\n if (typeof page === \"number\" && page > 0 && page <= this.pages) {\n this.currentPage = page;\n } else {\n console.error(\n \"Current page must be a number greater than zero but less than or equal to the total number of pages\"\n );\n }\n }\n\n private handleClickFirst = () => {\n this.currentPage = 1;\n this.icPageChange.emit({ value: this.currentPage });\n };\n\n private handleClickPrevious = (): void => {\n this.currentPage!--;\n this.icPageChange.emit({ value: this.currentPage! });\n };\n\n private handleClickNext = (): void => {\n this.currentPage!++;\n this.icPageChange.emit({ value: this.currentPage! });\n };\n\n private handleClickLast = (): void => {\n this.currentPage = this.pages;\n this.icPageChange.emit({ value: this.currentPage });\n };\n\n // button rendering abstracted from component render methods for clarity\n private firstButton = () => {\n return (\n <ic-button\n id=\"first-page-button\"\n aria-label=\"Go to first page\"\n theme={this.theme}\n onClick={this.handleClickFirst}\n class=\"page-button first-last\"\n disabled={this.currentPage === 1 || this.disabled}\n variant=\"icon-tertiary\"\n monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n innerHTML={paginationFirstLast}\n />\n );\n };\n\n private previousButton = () => {\n return (\n <ic-button\n id=\"previous-page-button\"\n aria-label=\"Go to previous page\"\n theme={this.theme}\n onClick={this.handleClickPrevious}\n class=\"page-button next-previous flip\"\n disabled={this.currentPage === 1 || this.disabled}\n variant=\"icon-tertiary\"\n monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n innerHTML={paginationNextPrevious}\n />\n );\n };\n\n private nextButton = () => {\n return (\n <ic-button\n id=\"next-page-button\"\n aria-label=\"Go to next page\"\n theme={this.theme}\n onClick={this.handleClickNext}\n class=\"page-button next-previous\"\n disabled={this.currentPage === this.pages || this.disabled}\n variant=\"icon-tertiary\"\n monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n innerHTML={paginationNextPrevious}\n />\n );\n };\n\n private lastButton = () => {\n return (\n <ic-button\n id=\"last-page-button\"\n aria-label=\"Go to last page\"\n theme={this.theme}\n onClick={this.handleClickLast}\n class=\"page-button first-last flip\"\n disabled={this.currentPage === this.pages || this.disabled}\n variant=\"icon-tertiary\"\n monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n innerHTML={paginationFirstLast}\n />\n );\n };\n\n private renderStartEllipsis = () => {\n return (\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n type=\"ellipsis\"\n id=\"start-ellipsis\"\n disabled={this.disabled}\n />\n );\n };\n\n private renderEndEllipsis = () => {\n return (\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n type=\"ellipsis\"\n id=\"end-ellipsis\"\n disabled={this.disabled}\n />\n );\n };\n\n private renderStartItems = () => {\n return this.startItems.map((page: number) => {\n return (\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n selected={page === this.currentPage}\n id={`pagination-item-${page}`}\n type=\"page\"\n page={page}\n disabled={this.disabled}\n />\n );\n });\n };\n\n private renderEndItems = () => {\n return this.endItems.map((page: number) => {\n return (\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n selected={page === this.currentPage}\n id={`pagination-item-${page}`}\n type=\"page\"\n page={page}\n disabled={this.disabled}\n />\n );\n });\n };\n\n private renderMiddleItems = () => {\n return this.midItems.map((page: number) => {\n return (\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n selected={page === this.currentPage}\n id={`pagination-item-${page}`}\n type=\"page\"\n page={page}\n disabled={this.disabled}\n />\n );\n });\n };\n\n render() {\n const {\n type,\n currentPage,\n hideCurrentPage,\n disabled,\n hideFirstAndLastPageButton,\n label,\n theme,\n monochrome,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-pagination-monochrome\"]: !!monochrome,\n }}\n >\n {type === \"simple\" && (\n <nav\n class={{\n [\"disabled\"]: !!disabled,\n }}\n role=\"navigation\"\n aria-label={this.accessibleLabel}\n >\n {hideFirstAndLastPageButton ? null : this.firstButton()}\n {this.previousButton()}\n <ic-pagination-item\n theme={this.theme}\n monochrome={this.monochrome}\n type=\"simple-current\"\n page={currentPage}\n label={label}\n class={{ [\"hide-current-page\"]: !!hideCurrentPage }}\n disabled={disabled}\n />\n {this.nextButton()}\n {hideFirstAndLastPageButton ? null : this.lastButton()}\n </nav>\n )}\n {type === \"complex\" && (\n <nav\n class={{\n [\"disabled\"]: !!disabled,\n }}\n role=\"navigation\"\n aria-label={this.accessibleLabel}\n >\n {hideFirstAndLastPageButton ? null : this.firstButton()}\n {this.previousButton()}\n {this.renderStartItems()}\n {this.startEllipsis && this.renderStartEllipsis()}\n {this.renderMiddleItems()}\n {this.endEllipsis && this.renderEndEllipsis()}\n {this.renderEndItems()}\n {this.nextButton()}\n {hideFirstAndLastPageButton ? null : this.lastButton()}\n </nav>\n )}\n {type === \"complex\" && (\n <span class=\"sr-only\" aria-live=\"polite\">\n Page {this.currentPage}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icStepperCss","IcStepperStyle0","Stepper","constructor","hostRef","this","resizeObserver","visuallyHidden","alignedFullWidth","autoSetStepTitles","lastStepWidth","noOfResizes","stepperWidth","_a","document","querySelector","getBoundingClientRect","width","stepTypes","variantOverride","variant","aligned","connectorWidth","hideStepInfo","icI18n","next","step","steps","of","lastStep","completed","notRequired","required","optional","theme","stepHeading","includeAutogeneratedTitles","hasAttribute","getAttribute","undefined","headingSlot","shadowRoot","assignedNodes","_b","call","node","text","nodeType","Node","TEXT_NODE","_c","textContent","trim","_d","innerText","heading","getChildren","Array","from","el","querySelectorAll","stepsWithStepTitles","filter","checkStepTitles","length","console","error","setStepTypes","i","push","setStepperWidth","style","maxWidth","offsetWidth","pxToRem","initialiseStepStates","forEach","index","stepNum","lastStepNum","type","current","stepTitleArea","setAttribute","removeAttribute","classList","remove","add","contains","nextStep","nextStepHeading","progress","compactStepStyling","minWidth","stepConnect","setHideStepInfo","overrideVariant","minDefaultStepperWidth","clientWidth","resizeObserverCallback","handleThemeChange","runResizeObserver","ResizeObserver","observe","handlePropChange","disconnectedCallback","disconnect","componentWillLoad","componentWillRender","componentDidLoad","checkResizeObserver","render","h","Host","key","class"],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver | null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number | undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /**\n * The alignment of the default stepper within its container.\n */\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /**\n * The length of the connector between each step in pixels. Minimum length is 100px.\n */\n @Prop() connectorWidth?: number = 100;\n\n /**\n * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n */\n @Prop() hideStepInfo?: boolean = false;\n\n /**\n * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n */\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /**\n * The variant of the stepper.\n */\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private stepHeading = (\n step: HTMLIcStepElement,\n includeAutogeneratedTitles: boolean = false\n ): string | undefined => {\n if (step.hasAttribute(\"heading\") && step.getAttribute(\"heading\") !== \"\") {\n return step.getAttribute(\"heading\") || undefined;\n }\n\n const headingSlot = step.shadowRoot?.querySelector(\n 'slot[name=\"heading\"]'\n ) as HTMLSlotElement | null;\n const assignedNodes = headingSlot?.assignedNodes?.() || [];\n for (const node of assignedNodes) {\n const text =\n node.nodeType === Node.TEXT_NODE\n ? node.textContent?.trim()\n : (node as HTMLElement).innerText?.trim();\n if (text) return text;\n }\n\n if (includeAutogeneratedTitles && step.heading) {\n return step.heading;\n }\n return undefined;\n };\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = this.steps.filter(\n (step) => !!this.stepHeading(step, false)\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true || step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n const nextStep = this.steps[index + 1];\n step.nextStepHeading = this.stepHeading(nextStep, true);\n step.progress = (step.stepNum / this.steps.length) * 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icSwitchCss","IcSwitchStyle0","inputIds","Switch","constructor","hostRef","this","inputId","checkedState","initiallyChecked","checked","disabled","helperText","hideLabel","name","size","theme","value","handleChange","icChange","emit","onFocus","icFocus","onBlur","icBlur","handleFormReset","checkedChangeHandler","watchDisabledHandler","removeDisabledFalse","el","disconnectedCallback","removeFormResetListener","componentWillLoad","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","setFocus","_b","_a","shadowRoot","querySelector","focus","render","isSmall","renderHiddenInput","h","Host","key","class","htmlFor","for","readonly","slot","getInputDescribedByText","role","type","id","onChange","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r"],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n\n --ic-input-label-text-color: var(--ic-switch-label);\n --ic-input-label-helper-text-color: var(--ic-switch-help-text);\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n}\n\ninput {\n overflow: hidden;\n appearance: none;\n}\n\n.ic-switch-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n cursor: pointer;\n}\n\n.ic-switch-label {\n margin-left: var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-label-small {\n margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-toggle {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 4rem;\n height: var(--ic-space-xl);\n position: relative;\n border-radius: 100vw;\n background-color: var(--ic-switch-unchecked-bg);\n border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n box-sizing: border-box;\n transition: var(--ic-transition-duration-fast);\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-switch-line-break {\n flex: 1 0 100%;\n}\n\n.ic-switch-toggle::before {\n content: \"\";\n width: 1.333rem;\n height: 1.333rem;\n border-radius: 50%;\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 0.333rem;\n transform: translate(0, -50%);\n background-color: var(--ic-switch-unchecked);\n transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n display: inline-block;\n vertical-align: middle;\n width: 0.625rem;\n height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off);\n}\n\n.ic-switch-icon-line {\n stroke: var(--ic-switch-indicator-on);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle::before {\n transition-duration: 0ms;\n }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg);\n border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-xl), -50%);\n background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n stroke: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n background-color: var(--ic-switch-unchecked-bg-disabled);\n border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg-disabled);\n border: var(--ic-border-width) dashed\n var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small .ic-switch-toggle {\n width: var(--ic-space-xxl);\n height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted([slot=\"right-adornment\"]) {\n margin-left: var(--ic-space-sm);\n fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n .ic-switch-toggle::before,\n .ic-switch-input:checked + .ic-switch-toggle {\n border: var(--ic-border-hc);\n }\n\n .ic-switch-input:focus + .ic-switch-toggle {\n border-color: highlight;\n outline: var(--ic-space-xxxs) solid highlight;\n }\n\n .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n }\n\n .ic-switch-input:disabled + .ic-switch-toggle,\n .ic-switch-input:disabled:checked + .ic-switch-toggle,\n .ic-switch-input:disabled + .ic-switch-toggle::before {\n border-color: GrayText;\n }\n\n .ic-switch-disabled .ic-switch-icon-circle,\n .ic-switch-disabled .ic-switch-icon-line {\n stroke: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the switch.\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the switch will display as checked.\n */\n @Prop() checked?: boolean = false;\n\n @Watch(\"checked\")\n checkedChangeHandler(): void {\n this.checkedState = !!this.checked;\n }\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The aria-label applied to the switch when no visual 'name' is provided.\n */\n @Prop() label!: string;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name?: string = this.inputId;\n\n /**\n * The size of the switch component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n *\n * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n */\n @Prop() value?: string | null = \"on\";\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the value property has changed.\n */\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n this.checkedState = this.checked!;\n addFormResetListener(this.el, this.handleFormReset);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n /**\n * Sets focus on the switch.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector(\"input\")?.focus();\n }\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value!,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked!;\n };\n\n render() {\n const {\n label,\n checkedState,\n size,\n disabled,\n name,\n value,\n hideLabel,\n helperText,\n inputId,\n theme,\n } = this;\n\n const isSmall = size === \"small\";\n\n renderHiddenInput(this.el, checkedState ? value : \"\", name, disabled);\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <label\n class={{\n \"ic-switch-container\": true,\n \"ic-switch-disabled\": !!disabled,\n \"ic-switch-small\": isSmall,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={false}\n disabled={disabled}\n class={{\n \"ic-switch-label\": true,\n \"ic-switch-label-small\": isSmall,\n }}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={getInputDescribedByText(\n this.el,\n inputId,\n helperText !== \"\",\n false\n )}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={isSmall ? \"2\" : \"1\"}\n x2=\"9\"\n y2={isSmall ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={isSmall ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as a}from"./p-8e4e97b4.js";import{F as r,G as h,H as o,r as n,J as l,o as c,q as d,m as u}from"./p-dbc8bf0c.js";import"./p-6215e2ae.js";const b=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>\n</svg>\n`;const f=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>\n</svg>`;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(.ic-search-bar-search){display:block;--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xs);--border-color:var(--ic-search-bar-outline);--input-bg-color:var(--ic-search-bar-background);--border-color-disabled:var(--ic-search-bar-outline-disabled);--menu-item-text-color:var(--ic-search-bar-dropdown-option-text);--menu-item-desc-text-color:var(--ic-search-bar-dropdown-option-description);--menu-bg-color:var(--ic-search-bar-dropdown-background);--menu-border-color:var(--ic-search-bar-dropdown-outline)}:host(.ic-search-bar-disabled){--ic-input-label-text-color:var(--ic-search-bar-label-disabled);--ic-input-label-helper-text-color:var(--ic-search-bar-subtitle-disabled)}:host(.ic-search-bar-search:hover){--border-color:var(--ic-search-bar-outline-hover)}:host(.ic-search-bar-search:active){--border-color:var(--ic-search-bar-outline-pressed)}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}::-moz-placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}::placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}input{border:0;border-radius:var(--ic-border-radius);color:var(--ic-search-bar-filled-text);background-color:var(--input-bg-color);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(--ic-search-bar-filled-text-cursor)}input:focus{border:0;outline:0}input:disabled::-moz-placeholder{color:var(--ic-search-bar-disabled-text)}input:disabled,input:disabled::placeholder{color:var(--ic-search-bar-disabled-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.no-left-pad{padding-left:0}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button-unfocused *{fill:var(--ic-search-bar-clear-button)}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-unfocused *{fill:var(--ic-search-bar-filled-icon)}.search-submit-button-disabled *{fill:var(--ic-search-bar-icon-disabled)}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-search-bar-dropdown-divider);height:var(--divider-height)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}@media (forced-colors: active){.search-submit-button-unfocused *{fill:canvastext}.search-submit-button-disabled *{fill:GrayText}}@media screen AND (max-width: 22rem){.menu-container{max-width:var(--menu-width, var(--input-width, 20rem));width:100%}}';const m=p;let v=0;const g=class{constructor(e){t(this,e);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icInput=i(this,"icInput",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icMenuChange=i(this,"icMenuChange",7);this.icClearBlur=i(this,"icClearBlur",7);this.icRetryLoad=i(this,"icRetryLoad",7);this.icSubmitSearch=i(this,"icSubmitSearch",7);this.icSubmitSearchBlur=i(this,"icSubmitSearchBlur",7);this.icSearchBarBlur=i(this,"icSearchBarBlur",7);this.icSearchBarFocus=i(this,"icSearchBarFocus",7);this.icKeydown=i(this,"icKeydown",7);this.hasTimedOut=false;this.inputId=`ic-search-bar-input-${v++}`;this.menuCloseFromMenuChangeEvent=false;this.menuId=`${this.inputId}-menu`;this.preLoad=true;this.preventSubmit=false;this.prevNoOption=false;this.retryButtonClick=false;this.retryViaKeyPress=false;this.truncateValue=false;this.clearButtonFocused=false;this.open=false;this.searchSubmitFocused=false;this.showClearButton=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.charactersUntilSuggestion=2;this.disabled=false;this.disableAutoFiltering=false;this.debounce=0;this.emptyOptionListText="No results found";this.focusOnLoad=false;this.fullWidth=false;this.helperText="";this.hideLabel=false;this.assistiveHintText="When autocomplete results are available use the up and down arrows to choose and press enter to select";this.labelField="label";this.loading=false;this.loadingErrorLabel="Loading Error";this.loadingLabel="Loading...";this.name=this.inputId;this.placeholder="Search";this.preventFormSubmitOnSearch=false;this.readonly=false;this.required=false;this.searchMode="navigation";this.size="medium";this.spellcheck=false;this.theme="inherit";this.valueField="value";this.filteredOptions=[];this.options=[];this.value="";this.handleClear=t=>{var i;const e=t;const s=t;if(s.type==="click"||e.code==="Enter"||e.code==="Space"){this.value="";(i=this.inputEl)===null||i===void 0?void 0:i.setAttribute("value","");this.loading=false;clearTimeout(this.timeoutTimer);this.filteredOptions=this.options;this.showMenuWithNoInput()&&this.setMenuChange(true);this.el.setFocus();this.icClear.emit();t.preventDefault();this.preventSubmit=true}};this.onInput=({target:t})=>{this.value=t.value;this.icInput.emit({value:this.value});if(this.options.length>0){this.setMenuChange(true);this.preLoad=false;if(this.disableAutoFiltering===false){const t=r(this.options,false,this.value,"anywhere",this.labelField);this.filteredOptions=t.length>0?t:[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}]}}if(!this.showClearButton)this.showClearButton=true;this.debounceAriaLiveUpdate()};this.onInputBlur=({target:t,relatedTarget:i})=>{this.icSearchBarBlur.emit({value:t.value,relatedTarget:i})};this.onInputFocus=({target:t})=>{this.icSearchBarFocus.emit({value:t.value});this.showClearButton=true};this.handleClearBlur=({relatedTarget:t})=>{this.icClearBlur.emit({relatedTarget:t});this.clearButtonFocused=false};this.handleSubmitSearchBlur=({relatedTarget:t})=>{this.icSubmitSearchBlur.emit({relatedTarget:t});this.searchSubmitFocused=false};this.setInputValue=t=>{if(this.inputEl){const i=h(t,this.options,this.valueField,this.labelField);if(i)this.inputEl.value=i;else if(this.inputEl.value!==t){this.inputEl.value=t}}};this.handleMouseDown=t=>{t.preventDefault()};this.handleSubmitSearchFocus=()=>{this.searchSubmitFocused=true};this.handleSubmitSearch=()=>{if(this.highlightedValue)this.value=this.highlightedValue;this.highlightedValue=undefined;this.icSubmitSearch.emit({value:this.value});const t=this.el.closest("FORM");if(this.searchSubmitButton&&!!t&&!this.preventSubmit){o(t,this.searchSubmitButton)}};this.handleSubmitSearchKeyDown=t=>{if(t.key===" "){t.preventDefault();this.handleSubmitSearch()}};this.handleRetry=t=>{this.retryViaKeyPress=t.detail.keyPressed==="Enter";this.icRetryLoad.emit({value:t.detail.value});this.triggerLoading();this.retryButtonClick=true};this.triggerLoading=()=>{const t=[{[this.labelField]:this.loadingLabel,[this.valueField]:"",loading:true}];if(this.filteredOptions!==t)this.filteredOptions=t;if(this.timeout){this.timeoutTimer=window.setTimeout((()=>{this.filteredOptions=[{[this.labelField]:this.loadingErrorLabel,[this.valueField]:"",timedOut:true}]}),this.timeout)}};this.handleOptionSelect=t=>{if(t.detail.label===this.emptyOptionListText){this.el.setFocus();return}this.value=t.detail.value;this.icOptionSelect.emit({value:this.value})};this.handleMenuOptionHighlight=t=>{const{optionId:i}=t.detail;if(i)this.highlightedValue=i.replace(`${this.menuId}-`,"");this.ariaActiveDescendant=i||""};this.handleMenuChange=t=>{this.setMenuChange(t.detail.open);if(!t.detail.open){this.menuCloseFromMenuChangeEvent=true}};this.setMenuChange=t=>{if(this.open!==t){this.open=t;this.icMenuChange.emit({open:t})}};this.handleHostFocus=()=>{if(this.options&&(this.value||this.showMenuWithNoInput())&&!this.menuCloseFromMenuChangeEvent){this.setMenuChange(true)}this.truncateValue=false;this.showMenuWithNoInput()&&this.debounceAriaLiveUpdate();this.icSearchBarFocus.emit()};this.handleHostBlur=({relatedTarget:t})=>{var i;if(this.open&&this.options&&t!==this.menu&&!this.retryViaKeyPress&&!this.retryButtonClick){this.setMenuChange(false)}if(this.retryButtonClick||this.retryViaKeyPress){(i=this.inputEl)===null||i===void 0?void 0:i.focus()}this.showClearButton=false;this.menuCloseFromMenuChangeEvent=false;this.truncateValue=true;this.icSearchBarBlur.emit({relatedTarget:t,value:this.value});this.retryViaKeyPress=false;this.retryButtonClick=false;this.showMenuWithNoInput()&&this.updateSearchResultAriaLive()};this.handleFocusClearButton=()=>{this.clearButtonFocused=true};this.renderAssistiveHintEl=()=>{var t,i;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#${this.inputId}`);if(e&&Object.keys(e).length>0&&this.hasOptionsOrFilterDisabled()){this.assistiveHintEl=document.createElement("span");this.assistiveHintEl.innerText=this.assistiveHintText;this.assistiveHintEl.id=`${this.inputId}-assistive-hint`;this.assistiveHintEl.style.display="none";(i=e.after)===null||i===void 0?void 0:i.call(e,this.assistiveHintEl)}};this.updateSearchResultAriaLive=()=>{var t;const i=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".search-results-status");if(i){if(!this.open||this.value===""&&!this.showMenuWithNoInput()||this.value.length<this.charactersUntilSuggestion){i.innerText=""}else if(this.hasOptionsOrFilterDisabled()&&this.filteredOptions.length>0&&this.open&&!this.filteredOptions[0].loading){i.innerText=this.hadNoOptions()?this.emptyOptionListText:`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableAutoFiltering;this.hadNoOptions=()=>this.filteredOptions.length===1&&this.filteredOptions[0][this.labelField]===this.emptyOptionListText&&this.searchMode==="navigation";this.isSubmitDisabled=()=>!this.value||this.value.length<this.charactersUntilSuggestion||this.disabled||this.hadNoOptions()||this.hasTimedOut||this.loading;this.showMenuWithNoInput=()=>this.charactersUntilSuggestion===0;this.updateSearchButtonType=()=>{this.searchButtonType=!!this.el.closest("FORM")&&!this.preventFormSubmitOnSearch?"submit":"button"}}watchCharactersUntilSuggestionHandler(){if(this.showMenuWithNoInput()){this.filteredOptions=this.options}}watchDisabledHandler(){n(this.disabled,this.el)}debounceChanged(){this.icChange=l(this.icChange,this.debounce)}loadingHandler(t){if(t&&!this.hasTimedOut){this.preLoad=false;this.triggerLoading()}}preventFormSubmitOnSearchHandler(){this.updateSearchButtonType()}filteredOptionsHandler(t){this.hasTimedOut=t.some((t=>t.timedOut))}watchOptionsHandler(t){if(this.disableAutoFiltering){if(!this.hasTimedOut){this.loading=false;clearTimeout(this.timeoutTimer);if(t.length>0){this.filteredOptions=t}else{if(this.hadNoOptions()){return}this.setMenuChange(true);if(!this.preLoad){this.filteredOptions=[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}]}this.preLoad=true}}}else if(this.showMenuWithNoInput()){this.filteredOptions=t}this.debounceAriaLiveUpdate()}watchValueHandler(t){this.setInputValue(t);this.icChange.emit({value:t})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var t;(t=this.assistiveHintEl)===null||t===void 0?void 0:t.remove()}componentWillLoad(){this.setInputValue(this.value);n(this.disabled,this.el);this.updateSearchButtonType()}componentDidLoad(){if(this.focusOnLoad){this.el.setFocus()}if(this.hasOptionsOrFilterDisabled()){this.renderAssistiveHintEl();if(this.disableAutoFiltering||this.showMenuWithNoInput()){this.filteredOptions=this.options}}c([{prop:this.label,propName:"label"}],"Search Bar")}componentWillRender(){if(this.prevNoOption&&this.menu&&!this.hasTimedOut){this.menu.handleSetFirstOption();this.prevNoOption=false}if(this.filteredOptions.find((t=>t[this.labelField]===this.emptyOptionListText||t[this.labelField]===this.loadingErrorLabel||t[this.labelField]===this.loadingLabel))){this.prevNoOption=true}}handleKeyDown(t){this.icKeydown.emit({event:t});if(this.menu&&this.open){this.menu.handleKeyboardOpen(t)}}handleKeyUp(t){if(t.key==="Enter"){if(this.preventSubmit||this.isSubmitDisabled()){return}this.handleSubmitSearch();this.setMenuChange(false)}if(t.key==="Escape"){this.setMenuChange(false)}if(this.preventSubmit){this.preventSubmit=false}}async setFocus(){var t;this.retryViaKeyPress=false;this.retryButtonClick=false;(t=this.inputEl)===null||t===void 0?void 0:t.focus()}debounceAriaLiveUpdate(){clearTimeout(this.debounceAriaLive);this.debounceAriaLive=window.setTimeout((()=>{this.updateSearchResultAriaLive()}),500)}render(){const{inputId:t,name:i,label:a,required:r,size:o,placeholder:n,helperText:l,disabled:c,value:p,readonly:m,spellcheck:v,fullWidth:g,options:w,open:y,hideLabel:x,menuId:k,ariaActiveDescendant:L,truncateValue:z,autofocus:C,autocapitalize:S,autocomplete:F,filteredOptions:T,theme:H,charactersUntilSuggestion:B,labelField:O,valueField:M,loadingLabel:$,loadingErrorLabel:D,searchMode:E,showClearButton:I,searchSubmitFocused:j,clearButtonFocused:q,searchButtonType:U}=this;const W=m||c;const K=d(this.el,t,l!=="",false).trim();let R=undefined;if(K!==""&&this.hasOptionsOrFilterDisabled()){R=`${K} ${t}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){R=`${t}-assistive-hint`}else if(K!==""){R=K}const V=(!!p||this.showMenuWithNoInput())&&this.hasOptionsOrFilterDisabled();const A=V&&y&&T.length>0;const N=A&&p.length>=B;const Z=h(p,w,M,O);u(this.el,p,i,W);return e(s,{key:"97932f66827d3d1aa3e41ca8aa15e8bdb1ad5518",class:{"ic-search-bar-search":true,"ic-search-bar-full-width":g,"ic-search-bar-disabled":c,"ic-search-bar-small":o==="small",[`ic-theme-${H}`]:H!=="inherit"},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},e("ic-input-container",{key:"3fc6cebca3191c6e19e523e4273f4ad7cfd39ea4",readonly:m,disabled:W},!x&&e("ic-input-label",{key:"453ef1b4a73227f5525e386100ba4d09fc75a1a0",for:t,label:a,helperText:l,required:r,disabled:W&&!m,readonly:m},e("slot",{key:"d72a6705f4e98030a9af02c832478ecb3cd11570",name:"helper-text",slot:"helper-text"})),e("ic-input-component-container",{key:"e0ae23eaa33e7194eec066a1e72050b91be3cdd5",ref:t=>this.anchorEl=t,size:o,disabled:W,readonly:m,fullWidth:g},e("input",{key:"ed239f98bcc086b05bbb14c43154aee3f7c2c76e",id:t,name:i,ref:t=>this.inputEl=t,value:w&&!!Z?Z:p,class:{"no-left-pad":m,readonly:m,"truncate-value":z},placeholder:n,required:r,disabled:W,readonly:m,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":x?a:undefined,"aria-activedescendant":L,"aria-expanded":w.length>0&&N?`${A}`:undefined,"aria-owns":N?k:undefined,"aria-describedby":R,"aria-controls":N?k:undefined,"aria-haspopup":w.length>0?"listbox":undefined,"aria-autocomplete":V?"list":undefined,role:w.length>0&&N?"combobox":undefined,autocomplete:F,autocapitalize:S,autoFocus:C,spellcheck:v,inputmode:"search"}),e("div",{key:"ed272c63c361866a3c096a4ed63e94582d4fcdf8",class:{"clear-button-container":true,"clear-button-visible":!!p&&!W&&I}},e("ic-button",{key:"5e9c4058a68f853a552bfa0f2113858a275a365a",id:"clear-button",class:{"clear-button":true,"clear-button-unfocused":!q},"aria-label":"Clear",innerHTML:b,onClick:this.handleClear,onMouseDown:this.handleMouseDown,size:o,onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"button",variant:"icon-tertiary",theme:q?"light":"dark"}),e("div",{key:"262820b10ac5df18f2b73fcb4aa0f1b3602c2c0f",class:"divider"})),e("div",{key:"e0ff6496a2b2a703a3d87980893926dd4fdf543d",class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()}},e("ic-button",{key:"4eefcd8121169df7b713df93cade880d0fcf5d60",id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{"search-submit-button":true,"search-submit-button-small":o==="small","search-submit-button-unfocused":!j,"search-submit-button-disabled":this.isSubmitDisabled()},disabled:this.isSubmitDisabled(),innerHTML:f,size:o,onClick:this.handleSubmitSearch,onMouseDown:this.handleMouseDown,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,onKeyDown:this.handleSubmitSearchKeyDown,type:U,variant:"icon-tertiary",theme:j?"light":"dark"}))),e("div",{key:"1194a402978db78f8abbaa5e1127e6e1ce8d77d3",class:{"menu-container":true,fullwidth:g}},N&&this.anchorEl&&this.inputEl&&e("ic-menu",{key:"1bf2856fb888425fd0b7f690e9f3389f9bb1ec9f",class:{"no-results":this.hadNoOptions()||T.length===1&&(T[0][O]===$||T[0][O]===D)},activationType:"manual",anchorEl:this.anchorEl,autofocusOnSelected:false,searchMode:E,inputEl:this.inputEl,inputLabel:a,ref:t=>this.menu=t,fullWidth:g,menuId:k,open:true,options:T,onMenuOptionSelect:this.handleOptionSelect,onMenuStateChange:this.handleMenuChange,onMenuOptionId:this.handleMenuOptionHighlight,onRetryButtonClicked:this.handleRetry,parentEl:this.el,value:p,labelField:O,valueField:M,searchBar:true}))),e("div",{key:"f3333622e515486aeb77de5e8c7061b02f8f19b6","aria-live":"polite",role:"status",class:"search-results-status"}))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{charactersUntilSuggestion:["watchCharactersUntilSuggestionHandler"],disabled:["watchDisabledHandler"],debounce:["debounceChanged"],loading:["loadingHandler"],preventFormSubmitOnSearch:["preventFormSubmitOnSearchHandler"],filteredOptions:["filteredOptionsHandler"],options:["watchOptionsHandler"],value:["watchValueHandler"]}}};g.style=m;export{g as ic_search_bar};
2
- //# sourceMappingURL=p-72344764.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icSearchBarCss","IcSearchBarStyle0","inputIds","SearchBar","constructor","hostRef","this","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","retryViaKeyPress","truncateValue","clearButtonFocused","open","searchSubmitFocused","showClearButton","autocapitalize","autocomplete","autocorrect","autofocus","charactersUntilSuggestion","disabled","disableAutoFiltering","debounce","emptyOptionListText","focusOnLoad","fullWidth","helperText","hideLabel","assistiveHintText","labelField","loading","loadingErrorLabel","loadingLabel","name","placeholder","preventFormSubmitOnSearch","readonly","required","searchMode","size","spellcheck","theme","valueField","filteredOptions","options","value","handleClear","ev","keyboardEvent","mouseEvent","type","code","_a","inputEl","setAttribute","clearTimeout","timeoutTimer","showMenuWithNoInput","setMenuChange","el","setFocus","icClear","emit","preventDefault","onInput","target","icInput","length","rawFilteredOptions","getFilteredMenuOptions","debounceAriaLiveUpdate","onInputBlur","relatedTarget","icSearchBarBlur","onInputFocus","icSearchBarFocus","handleClearBlur","icClearBlur","handleSubmitSearchBlur","icSubmitSearchBlur","setInputValue","newValue","label","getLabelFromValue","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","timeout","window","setTimeout","timedOut","handleOptionSelect","icOptionSelect","handleMenuOptionHighlight","optionId","replace","ariaActiveDescendant","handleMenuChange","icMenuChange","handleHostFocus","handleHostBlur","menu","focus","updateSearchResultAriaLive","handleFocusClearButton","renderAssistiveHintEl","input","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","assistiveHintEl","document","createElement","innerText","id","style","display","_b","after","call","searchResultsStatusEl","hadNoOptions","isSubmitDisabled","updateSearchButtonType","searchButtonType","watchCharactersUntilSuggestionHandler","watchDisabledHandler","removeDisabledFalse","debounceChanged","icChange","debounceEvent","loadingHandler","preventFormSubmitOnSearchHandler","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","connectedCallback","disconnectedCallback","remove","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","handleSetFirstOption","find","filteredOption","handleKeyDown","event","icKeydown","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","onFocus","onBlur","for","slot","ref","anchorEl","role","autoFocus","inputmode","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","searchIcon","fullwidth","activationType","autofocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl","searchBar"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.ic-search-bar-search) {\n display: block;\n\n --divider-height: 1.5rem;\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n --border-color: var(--ic-search-bar-outline);\n --input-bg-color: var(--ic-search-bar-background);\n --border-color-disabled: var(--ic-search-bar-outline-disabled);\n --menu-item-text-color: var(--ic-search-bar-dropdown-option-text);\n --menu-item-desc-text-color: var(--ic-search-bar-dropdown-option-description);\n --menu-bg-color: var(--ic-search-bar-dropdown-background);\n --menu-border-color: var(--ic-search-bar-dropdown-outline);\n}\n\n:host(.ic-search-bar-disabled) {\n --ic-input-label-text-color: var(--ic-search-bar-label-disabled);\n --ic-input-label-helper-text-color: var(--ic-search-bar-subtitle-disabled);\n}\n\n:host(.ic-search-bar-search:hover) {\n --border-color: var(--ic-search-bar-outline-hover);\n}\n\n:host(.ic-search-bar-search:active) {\n --border-color: var(--ic-search-bar-outline-pressed);\n}\n\n:host(.ic-search-bar-search.ic-search-bar-small) {\n --divider-height: 1rem;\n}\n\n:host(.ic-search-bar-full-width) {\n width: 100%;\n}\n\n/* Custom Input */\n\n::placeholder {\n color: var(--ic-search-bar-placeholder-text);\n opacity: 1;\n}\n\ninput {\n border: 0;\n border-radius: var(--ic-border-radius);\n color: var(--ic-search-bar-filled-text);\n background-color: var(--input-bg-color);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n caret-color: var(--ic-search-bar-filled-text-cursor);\n}\n\ninput:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ninput:disabled::placeholder {\n color: var(--ic-search-bar-disabled-text);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-color-focus-inner);\n box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer);\n border-radius: 0.25rem;\n}\n\n.clear-button-unfocused * {\n fill: var(--ic-search-bar-clear-button);\n}\n\n.clear-button:focus,\n.clear-button:active * {\n fill: var(--ic-atoms-input-clear-button-focus);\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-unfocused * {\n fill: var(--ic-search-bar-filled-icon);\n}\n\n.search-submit-button-disabled * {\n fill: var(--ic-search-bar-icon-disabled);\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-color-focus-inner) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-search-bar-dropdown-divider);\n height: var(--divider-height);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n\n@media (forced-colors: active) {\n .search-submit-button-unfocused * {\n fill: canvastext;\n }\n\n .search-submit-button-disabled * {\n fill: GrayText;\n }\n}\n\n/* Breakpoint value chosen as it's a small amount bigger than the search bar's default width */\n@media screen AND (max-width: 22rem) {\n .menu-container {\n max-width: var(--menu-width, var(--input-width, 20rem));\n width: 100%;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcMenuOption,\n IcMultiValueEventDetail,\n IcSizesNoLarge,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n debounceEvent,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\nimport { IcButtonTypes } from \"../ic-button/ic-button.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the search bar.\n */\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl?: HTMLElement;\n private assistiveHintEl?: HTMLSpanElement;\n private debounceAriaLive?: number;\n private hasTimedOut = false;\n private inputEl?: HTMLInputElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu?: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit = false;\n private prevNoOption = false;\n private retryButtonClick = false;\n private retryViaKeyPress = false;\n private timeoutTimer?: number;\n private truncateValue = false;\n private searchSubmitButton?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant?: string;\n @State() clearButtonFocused = false;\n @State() highlightedValue?: string;\n @State() open = false;\n @State() searchSubmitFocused = false;\n @State() showClearButton = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n */\n @Prop() charactersUntilSuggestion = 2;\n @Watch(\"charactersUntilSuggestion\")\n watchCharactersUntilSuggestionHandler(): void {\n if (this.showMenuWithNoInput()) {\n this.filteredOptions = this.options;\n }\n }\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n }\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n */\n @Prop() disableAutoFiltering = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce = 0;\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * If `true`, the search bar will be focused when component loaded.\n */\n @Prop() focusOnLoad = false;\n\n /**\n * Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel = false;\n\n /**\n * The hint text for the hidden assistive description element.\n */\n @Prop() assistiveHintText =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * The label for the search bar.\n */\n @Prop() label!: string;\n\n /**\n * The custom name for the label field to correspond with the IcMenuOption type.\n */\n @Prop() labelField = \"label\";\n\n /**\n * Trigger loading state when fetching options asynchronously\n */\n @Prop({ mutable: true }) loading = false;\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n /**\n * Change the message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel = \"Loading Error\";\n\n /**\n * Change the message displayed whilst the options are being loaded externally.\n */\n @Prop() loadingLabel = \"Loading...\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name = this.inputId;\n\n /**\n * The placeholder value to display.\n */\n @Prop() placeholder = \"Search\";\n\n /**\n * If `true` the parent form will not submit when the icSubmitSearch event fires.\n */\n @Prop() preventFormSubmitOnSearch = false;\n @State() searchButtonType: IcButtonTypes;\n @Watch(\"preventFormSubmitOnSearch\")\n preventFormSubmitOnSearchHandler(): void {\n this.updateSearchButtonType();\n }\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly = false;\n\n /**\n * If `true`, the search bar will require a value.\n */\n @Prop() required = false;\n\n /**\n * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n */\n @Prop() searchMode: IcSearchBarSearchModes = \"navigation\";\n\n /**\n * The size of the search bar component.\n */\n @Prop() size: IcSizesNoLarge = \"medium\";\n\n /**\n * If `true`, the value of the search will have its spelling and grammar checked.\n */\n @Prop() spellcheck = false;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /**\n * If using external filtering, set a timeout for when loading takes too long.\n */\n @Prop() timeout?: number;\n\n /**\n * The custom name for the value field to correspond with the IcMenuOption type.\n */\n @Prop() valueField = \"value\";\n\n @State() filteredOptions: IcMenuOption[] = [];\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /**\n * The suggested search options.\n */\n @Prop() options: IcMenuOption[] = [];\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableAutoFiltering) {\n if (!this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n if (!this.preLoad) {\n this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ];\n }\n this.preLoad = true;\n }\n }\n } else if (this.showMenuWithNoInput()) {\n this.filteredOptions = newOptions;\n }\n this.debounceAriaLiveUpdate();\n }\n\n /**\n * The value of the search input.\n */\n @Prop({ reflect: true, mutable: true }) value = \"\";\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n this.setInputValue(newValue);\n this.icChange.emit({ value: newValue });\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl?.setAttribute(\"value\", \"\");\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.showMenuWithNoInput() && this.setMenuChange(true);\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = ({ target }: Event) => {\n this.value = (target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableAutoFiltering === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0\n ? rawFilteredOptions\n : [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ];\n }\n }\n\n if (!this.showClearButton) this.showClearButton = true;\n\n this.debounceAriaLiveUpdate();\n };\n\n private onInputBlur = ({ target, relatedTarget }: FocusEvent) => {\n this.icSearchBarBlur.emit({\n value: (target as HTMLInputElement).value,\n relatedTarget,\n });\n };\n\n private onInputFocus = ({ target }: Event) => {\n this.icSearchBarFocus.emit({ value: (target as HTMLInputElement).value });\n\n this.showClearButton = true;\n };\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = ({ relatedTarget }: FocusEvent) => {\n this.icClearBlur.emit({ relatedTarget });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * Emitted when the 'retry loading' button is clicked\n */\n @Event() icRetryLoad: EventEmitter<IcMultiValueEventDetail>;\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = ({ relatedTarget }: FocusEvent) => {\n this.icSubmitSearchBlur.emit({ relatedTarget });\n\n this.searchSubmitFocused = false;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n this.assistiveHintEl?.remove();\n }\n\n componentWillLoad(): void {\n this.setInputValue(this.value);\n\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n\n this.updateSearchButtonType();\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableAutoFiltering || this.showMenuWithNoInput()) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n }\n\n componentWillRender(): void {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n if (\n this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText ||\n filteredOption[this.labelField] === this.loadingErrorLabel ||\n filteredOption[this.labelField] === this.loadingLabel\n )\n ) {\n this.prevNoOption = true;\n }\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(event: KeyboardEvent): void {\n this.icKeydown.emit({ event });\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(event);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n this.inputEl?.focus();\n }\n\n private setInputValue = (newValue: string) => {\n if (this.inputEl) {\n const label = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n if (label) this.inputEl.value = label;\n else if (this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n };\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n if (this.highlightedValue) this.value = this.highlightedValue;\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form = this.el.closest<HTMLFormElement>(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcMultiValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (\n ev: CustomEvent<IcMenuOptionIdEventDetail>\n ) => {\n const { optionId } = ev.detail;\n if (optionId)\n this.highlightedValue = optionId.replace(`${this.menuId}-`, \"\");\n this.ariaActiveDescendant = optionId || \"\";\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.menuCloseFromMenuChangeEvent = true;\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (\n this.options &&\n (this.value || this.showMenuWithNoInput()) &&\n !this.menuCloseFromMenuChangeEvent\n ) {\n this.setMenuChange(true);\n }\n this.truncateValue = false;\n this.showMenuWithNoInput() && this.debounceAriaLiveUpdate();\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n this.open &&\n this.options &&\n relatedTarget !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick || this.retryViaKeyPress) {\n this.inputEl?.focus();\n }\n\n this.showClearButton = false;\n this.menuCloseFromMenuChangeEvent = false;\n this.truncateValue = true;\n this.icSearchBarBlur.emit({\n relatedTarget,\n value: this.value,\n });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n this.showMenuWithNoInput() && this.updateSearchResultAriaLive();\n };\n\n private handleFocusClearButton = () => {\n this.clearButtonFocused = true;\n };\n\n private renderAssistiveHintEl = () => {\n const input = this.el.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.assistiveHintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n input.after?.(this.assistiveHintEl);\n }\n };\n\n private updateSearchResultAriaLive = () => {\n const searchResultsStatusEl =\n this.el.shadowRoot?.querySelector<HTMLParagraphElement>(\n \".search-results-status\"\n );\n\n if (searchResultsStatusEl) {\n if (\n !this.open ||\n (this.value === \"\" && !this.showMenuWithNoInput()) ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n searchResultsStatusEl.innerText = this.hadNoOptions()\n ? this.emptyOptionListText\n : `${this.filteredOptions.length} result${\n this.filteredOptions.length > 1 ? \"s\" : \"\"\n } available`;\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = () =>\n this.options.length > 0 || this.disableAutoFiltering;\n\n private hadNoOptions = () =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = () =>\n !this.value ||\n this.value.length < this.charactersUntilSuggestion ||\n this.disabled ||\n this.hadNoOptions() ||\n this.hasTimedOut ||\n this.loading;\n\n private showMenuWithNoInput = () => this.charactersUntilSuggestion === 0;\n private updateSearchButtonType = () => {\n this.searchButtonType =\n !!this.el.closest<HTMLFormElement>(\"FORM\") &&\n !this.preventFormSubmitOnSearch\n ? \"submit\"\n : \"button\";\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n theme,\n charactersUntilSuggestion,\n labelField,\n valueField,\n loadingLabel,\n loadingErrorLabel,\n searchMode,\n showClearButton,\n searchSubmitFocused,\n clearButtonFocused,\n searchButtonType,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const describedBy = getInputDescribedByText(\n this.el,\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById = undefined;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n }\n\n const hasSuggestedSearch =\n (!!value || this.showMenuWithNoInput()) &&\n this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;\n\n const labelValue = getLabelFromValue(\n value,\n options,\n valueField,\n labelField\n );\n\n renderHiddenInput(this.el as HTMLElement, value, name, disabledMode);\n\n return (\n <Host\n class={{\n \"ic-search-bar-search\": true,\n \"ic-search-bar-full-width\": fullWidth,\n \"ic-search-bar-disabled\": disabled,\n \"ic-search-bar-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledMode && !readonly}\n readonly={readonly}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n )}\n <ic-input-component-container\n ref={(el) => (this.anchorEl = el)}\n size={size}\n disabled={disabledMode}\n readonly={readonly}\n fullWidth={fullWidth}\n >\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el)}\n value={options && !!labelValue ? labelValue : value}\n class={{\n \"no-left-pad\": readonly,\n readonly,\n \"truncate-value\": truncateValue,\n }}\n placeholder={placeholder}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : undefined}\n aria-activedescendant={ariaActiveDescendant}\n aria-expanded={\n options.length > 0 && menuRendered ? `${menuOpen}` : undefined\n }\n aria-owns={menuRendered ? menuId : undefined}\n aria-describedby={describedById}\n aria-controls={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={options.length > 0 && menuRendered ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n ></input>\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n !!value && !disabledMode && showClearButton,\n }}\n >\n <ic-button\n id=\"clear-button\"\n class={{\n \"clear-button\": true,\n \"clear-button-unfocused\": !clearButtonFocused,\n }}\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type={\"button\"}\n variant=\"icon-tertiary\"\n theme={clearButtonFocused ? \"light\" : \"dark\"}\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n \"search-submit-button\": true,\n \"search-submit-button-small\": size === \"small\",\n \"search-submit-button-unfocused\": !searchSubmitFocused,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type={searchButtonType}\n variant=\"icon-tertiary\"\n theme={searchSubmitFocused ? \"light\" : \"dark\"}\n ></ic-button>\n </div>\n </ic-input-component-container>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n >\n {menuRendered && this.anchorEl && this.inputEl && (\n <ic-menu\n class={{\n \"no-results\":\n this.hadNoOptions() ||\n (filteredOptions.length === 1 &&\n (filteredOptions[0][labelField] === loadingLabel ||\n filteredOptions[0][labelField] === loadingErrorLabel)),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autofocusOnSelected={false}\n searchMode={searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n fullWidth={fullWidth}\n menuId={menuId}\n open={true}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el as HTMLElement}\n value={value}\n labelField={labelField}\n valueField={valueField}\n searchBar={true}\n ></ic-menu>\n )}\n </div>\n </ic-input-container>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as i,h as s,H as t,g as e}from"./p-8e4e97b4.js";import{D as h,f as a,h as l}from"./p-dbc8bf0c.js";import"./p-6215e2ae.js";const d=":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";const r=d;const c=class{constructor(s){i(this,s);this.ADD_CLASS_DELAY=50;this.IC_BREADCRUMB="ic-breadcrumb";this.SHOW_BACK_ICON="show-back-icon";this.collapsedBreadcrumbs=[];this.resizeObserver=null;this.lastParentBreadcrumb=null;this.deviceSize=h.XL;this.backBreadcrumbOnly=false;this.collapsed=false;this.monochrome=false;this.theme="inherit";this.setBreadcrumbTheme=()=>{Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((i=>{i.theme=this.theme}))};this.setBreadcrumbMonochrome=()=>{Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB)).forEach((i=>{i.monochrome=this.monochrome}))};this.setBackBreadcrumb=()=>{if(this.backBreadcrumbOnly){this.setLastParentCollapsedBackBreadcrumb()}else{this.revertLastParentCollapsedBreadcrumb()}};this.setBackBreadcrumbAttr=()=>{if(this.lastParentBreadcrumb){this.lastParentBreadcrumb.classList.add("show");this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON,"true")}};this.getLastParentBreadcrumb=()=>{const i=this.el.querySelectorAll(this.IC_BREADCRUMB);return i.length>1?i[i.length-2]:null};this.setCollapsed=()=>{var i,s;this.collapsedBreadcrumbs.forEach((i=>{i.classList.remove("visuallyhidden");i.classList.remove("fade")}));if(this.collapsed){this.renderCollapsedBreadcrumb();const s=Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));this.collapsedBreadcrumbs=s.splice(1,s.length-2).filter((i=>!i.classList.contains("collapsed-breadcrumb-wrapper")));if(!this.backBreadcrumbOnly){this.collapsedBreadcrumbs.forEach((i=>i.classList.add("hide")))}if(this.collapsedBreadcrumbWrapper){(i=s[0])===null||i===void 0?void 0:i.insertAdjacentElement("afterend",this.collapsedBreadcrumbWrapper)}}else{(s=this.collapsedBreadcrumbWrapper)===null||s===void 0?void 0:s.remove()}};this.clickHandler=()=>{var i;(i=this.collapsedBreadcrumbWrapper)===null||i===void 0?void 0:i.remove();this.collapsedBreadcrumbs.forEach((i=>{i.classList.add("visuallyhidden");i.classList.remove("hide");setTimeout((()=>{i.classList.add("fade")}),this.ADD_CLASS_DELAY);i.addEventListener("transitionend",this.transitionendHandler)}));this.collapsed=false;this.collapsedBreadcrumbs[0].setFocus()};this.renderCollapsedBreadcrumb=()=>{if(this.collapsedBreadcrumbEl===undefined){this.collapsedBreadcrumbWrapper=document.createElement("ic-breadcrumb");this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");this.collapsedBreadcrumbEl=document.createElement("button");const i=document.createElement("span");i.id="collapsed-button-label";i.innerText="Collapsed breadcrumbs";i.className="hide";this.collapsedBreadcrumbEl.setAttribute("aria-labelledby",i.id);const s=document.createElement("span");s.id="collapsed-button-described";s.innerText="Select to view collapsed breadcrumbs";s.className="hide";this.collapsedBreadcrumbEl.setAttribute("aria-describedby",s.id);this.collapsedBreadcrumbEl.id="collapsed-ellipsis";this.collapsedBreadcrumbEl.innerText="...";this.collapsedBreadcrumbEl.classList.add("collapsed-breadcrumb");this.collapsedBreadcrumbEl.addEventListener("click",this.clickHandler);this.collapsedBreadcrumbWrapper.append(s);this.collapsedBreadcrumbWrapper.append(i);this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl)}};this.transitionendHandler=i=>{if(i.propertyName==="opacity"){i.target.classList.remove("visuallyhidden")}};this.setLastParentCollapsedBackBreadcrumb=()=>{this.lastParentBreadcrumb=this.getLastParentBreadcrumb();this.setBackBreadcrumbAttr();if(this.lastParentBreadcrumb){this.lastParentBreadcrumb.classList.remove("hide");this.lastParentBreadcrumb.classList.add("show")}};this.revertLastParentCollapsedBreadcrumb=()=>{if(this.lastParentBreadcrumb){this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON,"false");if(this.collapsed){this.lastParentBreadcrumb.classList.add("hide")}}};this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;const s=this.deviceSize<=h.S;this.el.setAttribute("back-breadcrumb-only",`${s}`);if(s){if(this.collapsed){this.setLastParentCollapsedBackBreadcrumb()}else{this.setBackBreadcrumb()}}else{const i=Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));if(this.collapsed&&i.length>2){this.revertLastParentCollapsedBreadcrumb();this.setCollapsed()}else{i.forEach((i=>{i.setAttribute(this.SHOW_BACK_ICON,"false")}))}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback(a())}));this.resizeObserver.observe(this.el)}}watchBackBreadcrumbHandler(){this.setBackBreadcrumb()}watchCollapsedHandler(){this.setCollapsed()}watchMonochromeHandler(){this.setBreadcrumbMonochrome()}watchThemeHandler(){this.setBreadcrumbTheme()}componentWillLoad(){this.setBreadcrumbTheme();this.setBreadcrumbMonochrome();if(this.backBreadcrumbOnly){this.setBackBreadcrumb()}else{l(this.runResizeObserver)}if(this.collapsed&&this.el.querySelectorAll(this.IC_BREADCRUMB).length>2){if(a()===h.S){this.setLastParentCollapsedBackBreadcrumb()}else{this.setCollapsed()}}this.lastParentBreadcrumb=this.getLastParentBreadcrumb()}disconnectedCallback(){var i,s;(i=this.lastParentBreadcrumb)===null||i===void 0?void 0:i.removeEventListener("transitionend",this.transitionendHandler);(s=this.collapsedBreadcrumbEl)===null||s===void 0?void 0:s.removeEventListener("click",this.clickHandler)}render(){const{backBreadcrumbOnly:i,collapsed:e,theme:h}=this;return s(t,{key:"6bee18e1a84707b5d493149d23094af6a0fb1be8",class:{"ic-breadcrumb-group-back":i,"ic-breadcrumb-group-collapsed":e,[`ic-theme-${h}`]:h!=="inherit"}},s("nav",{key:"144ad11cead96e18ae62eba8fc2dead82e188854","aria-label":"breadcrumbs"},s("ol",{key:"c101766f5e9b0e5d9a5aaebd5d0d8eda63ffc9ea"},s("slot",{key:"c761cdbb01472d0d8c2550254063b59fa714f722"}))))}get el(){return e(this)}static get watchers(){return{backBreadcrumbOnly:["watchBackBreadcrumbHandler"],collapsed:["watchCollapsedHandler"],monochrome:["watchMonochromeHandler"],theme:["watchThemeHandler"]}}};c.style=r;export{c as ic_breadcrumb_group};
2
- //# sourceMappingURL=p-7c38dd1f.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icBreadcrumbGroupCss","IcBreadcrumbGroupStyle0","BreadcrumbGroup","constructor","hostRef","this","ADD_CLASS_DELAY","IC_BREADCRUMB","SHOW_BACK_ICON","collapsedBreadcrumbs","resizeObserver","lastParentBreadcrumb","deviceSize","DEVICE_SIZES","XL","backBreadcrumbOnly","collapsed","monochrome","theme","setBreadcrumbTheme","Array","from","el","querySelectorAll","forEach","breadcrumb","setBreadcrumbMonochrome","setBackBreadcrumb","setLastParentCollapsedBackBreadcrumb","revertLastParentCollapsedBreadcrumb","setBackBreadcrumbAttr","classList","add","setAttribute","getLastParentBreadcrumb","allBreadcrumbs","length","setCollapsed","remove","renderCollapsedBreadcrumb","splice","filter","contains","collapsedBreadcrumbWrapper","_a","insertAdjacentElement","_b","clickHandler","setTimeout","addEventListener","transitionendHandler","setFocus","collapsedBreadcrumbEl","undefined","document","createElement","ariaLabel","id","innerText","className","ariaDescribed","append","event","propertyName","target","resizeObserverCallback","currSize","isSmallDevice","S","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","watchBackBreadcrumbHandler","watchCollapsedHandler","watchMonochromeHandler","watchThemeHandler","componentWillLoad","checkResizeObserver","disconnectedCallback","removeEventListener","render","h","Host","key","class"],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n ol\n ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private IC_BREADCRUMB = \"ic-breadcrumb\";\n private SHOW_BACK_ICON = \"show-back-icon\";\n private collapsedBreadcrumbEl?: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[] = [];\n private collapsedBreadcrumbWrapper?: HTMLIcBreadcrumbElement;\n private resizeObserver: ResizeObserver | null = null;\n private lastParentBreadcrumb: HTMLIcBreadcrumbElement | null = null;\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /**\n * If `true`, display only a single breadcrumb for the parent page with a back icon.\n */\n @Prop() backBreadcrumbOnly = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /**\n * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n */\n @Prop({ mutable: true }) collapsed = false;\n @Watch(\"collapsed\")\n watchCollapsedHandler(): void {\n this.setCollapsed();\n }\n\n /**\n * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.setBreadcrumbMonochrome();\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.setBreadcrumbTheme();\n }\n\n componentWillLoad(): void {\n this.setBreadcrumbTheme();\n this.setBreadcrumbMonochrome();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (\n this.collapsed &&\n this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2\n ) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n }\n\n disconnectedCallback(): void {\n this.lastParentBreadcrumb?.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl?.removeEventListener(\"click\", this.clickHandler);\n }\n\n private setBreadcrumbTheme = () => {\n Array.from(\n this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n ).forEach((breadcrumb) => {\n breadcrumb.theme = this.theme;\n });\n };\n\n private setBreadcrumbMonochrome = () => {\n Array.from(\n this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n ).forEach((breadcrumb) => {\n breadcrumb.monochrome = this.monochrome;\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.revertLastParentCollapsedBreadcrumb();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n const allBreadcrumbs = this.el.querySelectorAll<HTMLIcBreadcrumbElement>(\n this.IC_BREADCRUMB\n );\n\n return allBreadcrumbs.length > 1\n ? allBreadcrumbs[allBreadcrumbs.length - 2]\n : null;\n };\n\n private setCollapsed = () => {\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.remove(\"visuallyhidden\");\n breadcrumb.classList.remove(\"fade\");\n });\n\n if (this.collapsed) {\n this.renderCollapsedBreadcrumb();\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n );\n\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n if (!this.backBreadcrumbOnly) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n }\n\n if (this.collapsedBreadcrumbWrapper) {\n allBreadcrumbs[0]?.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n } else {\n this.collapsedBreadcrumbWrapper?.remove();\n }\n };\n\n private clickHandler = () => {\n this.collapsedBreadcrumbWrapper?.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n });\n this.collapsed = false;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private renderCollapsedBreadcrumb = () => {\n if (this.collapsedBreadcrumbEl === undefined) {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\"aria-labelledby\", ariaLabel.id);\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n ariaDescribed.id\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n }\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n this.lastParentBreadcrumb.classList.add(\"show\");\n }\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n if (this.collapsed) {\n this.lastParentBreadcrumb.classList.add(\"hide\");\n }\n }\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;\n this.el.setAttribute(\"back-breadcrumb-only\", `${isSmallDevice}`);\n\n if (isSmallDevice) {\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (this.collapsed && allBreadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n this.setCollapsed();\n } else {\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const { backBreadcrumbOnly, collapsed, theme } = this;\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-group-back\": backBreadcrumbOnly,\n \"ic-breadcrumb-group-collapsed\": collapsed,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icDividerCss","IcDividerStyle0","Divider","constructor","hostRef","this","foregroundColor","getBrandForegroundAppearance","borderStyle","labelPlacement","monochrome","orientation","theme","weight","brandChangeHandler","ev","detail","mode","updateMonochromeState","parentEl","el","parentElement","isBottomSideNav","classList","contains","isBottomWrapper","_a","tagName","add","componentWillRender","render","label","invalidPropCombination","placement","console","error","charAt","toUpperCase","slice","getTypographyVariant","renderLabel","slotHasContent","h","class","name","isPropDefined","variant","Host","Object","assign","isEmptyString","role"],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["/**\n * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. \n */\n\n/**\n * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.\n */\n\n/**\n * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.\n */\n\n/* IC-DIVIDER COLORS */\n\n/**\n * @internal @prop --ic-divider-background\n */\n\n/**\n * @internal @prop --ic-divider-background-monochrome\n */\n\n/**\n * @internal @prop --ic-divider-label\n */\n\n/**\n * @internal @prop --ic-divider-label-monochrome\n */\n\n/* Horizontal Divider */\n:host(.ic-divider-horizontal) {\n display: flex;\n width: var(--ic-divider-horizontal-width, 100%);\n align-items: center;\n -moz-column-gap: var(--ic-space-xxs);\n column-gap: var(--ic-space-xxs);\n}\n\nhr {\n padding: 0;\n margin: 0;\n border: none;\n border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n width: inherit;\n}\n\n:host(.ic-divider-horizontal)::before,\n:host(.ic-divider-horizontal)::after {\n border-left: none !important;\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n content: \"\";\n border: none;\n width: 100%;\n}\n\n/* Vertical Divider */\n:host(.ic-divider-vertical) {\n display: flex;\n flex-direction: column;\n height: var(--ic-divider-vertical-height, inherit);\n width: -moz-max-content;\n width: max-content;\n align-items: center;\n -moz-column-gap: var(--ic-space-xxs);\n column-gap: var(--ic-space-xxs);\n border: none;\n}\n\n:host(.ic-divider-vertical) div.vertical-divider {\n display: flex;\n height: inherit;\n}\n\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n content: \"\";\n height: 100%;\n}\n\n/* Theme */\nhr,\n:host(.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-horizontal.ic-divider-label-center)::after {\n border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) hr,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::after {\n border-bottom-color: var(--ic-divider-background-monochrome);\n}\n\n:host() div.vertical-divider,\n:host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-vertical.ic-divider-label-center)::after {\n border-left: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) div.vertical-divider,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::after {\n border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Divider in ic-side-navigation */\n:host(.ic-side-navigation-keyline.ic-theme-dark) {\n --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) {\n --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) hr,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::after {\n border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::after {\n border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-right)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-left)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::after {\n border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-bottom)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-top)::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::after {\n border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Weight */\n:host(.ic-divider-very-thick) hr,\n:host(.ic-divider-very-thick.ic-divider-label-right)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-left)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n border-bottom-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-very-thick) .vertical-divider,\n:host(.ic-divider-very-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-very-thick.ic-divider-label-center)::before,\n:host(.ic-divider-very-thick.ic-divider-label-top)::after,\n:host(.ic-divider-very-thick.ic-divider-label-center)::after {\n border-left-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-thick) hr,\n:host(.ic-divider-thick.ic-divider-label-right)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-left)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n border-bottom-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-thick) .vertical-divider,\n:host(.ic-divider-thick.ic-divider-label-bottom)::before,\n:host(.ic-divider-thick.ic-divider-label-center)::before,\n:host(.ic-divider-thick.ic-divider-label-top)::after,\n:host(.ic-divider-thick.ic-divider-label-center)::after {\n border-left-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-medium) hr,\n:host(.ic-divider-medium.ic-divider-label-right)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-left)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n border-bottom-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-medium) .vertical-divider,\n:host(.ic-divider-medium.ic-divider-label-bottom)::before,\n:host(.ic-divider-medium.ic-divider-label-center)::before,\n:host(.ic-divider-medium.ic-divider-label-top)::after,\n:host(.ic-divider-medium.ic-divider-label-center)::after {\n border-left-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-thin) hr,\n:host(.ic-divider-thin.ic-divider-label-right)::before,\n:host(.ic-divider-thin.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-left)::after,\n:host(.ic-divider-thin.ic-divider-label-center)::after {\n border-bottom-width: var(--ic-space-1px);\n}\n\n:host(.ic-divider-thin) .vertical-divider,\n:host(.ic-divider-thin.ic-divider-label-bottom)::before,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::before,\n:host(.ic-divider-thin.ic-divider-label-top)::after,\n:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::after {\n border-left-width: var(--ic-space-1px);\n}\n\n/* Border styling */\n:host(.ic-divider-dashed) hr,\n:host(.ic-divider-dashed.ic-divider-label-right)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-left)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n border-bottom-style: dashed;\n}\n\n:host(.ic-divider-dashed) .vertical-divider,\n:host(.ic-divider-dashed.ic-divider-label-bottom)::before,\n:host(.ic-divider-dashed.ic-divider-label-center)::before,\n:host(.ic-divider-dashed.ic-divider-label-top)::after,\n:host(.ic-divider-dashed.ic-divider-label-center)::after {\n border-left-style: dashed;\n}\n\n/* Label styling */\n:host() .ic-divider-label {\n text-wrap: wrap;\n text-align: left;\n width: -moz-max-content;\n width: max-content;\n max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-horizontal.ic-divider-label-center) .ic-divider-label {\n text-align: center;\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n text-align: center;\n max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label-container {\n width: -moz-max-content;\n width: max-content;\n max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-vertical) .ic-divider-label-container {\n max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label p {\n width: -moz-max-content;\n width: max-content;\n max-width: 100%;\n}\n\n:host() .ic-divider-label,\n:host() ::slotted(*) {\n color: var(--ic-divider-label);\n}\n\n:host(.ic-divider-monochrome) .ic-divider-label,\n:host(.ic-divider-monochrome) ::slotted(*) {\n color: var(--ic-divider-label-monochrome);\n}\n\n/* High contrast */\n@media (forced-colors: active) {\n hr,\n :host(.ic-divider-horizontal.ic-divider-label-right)::before,\n :host(.ic-divider-horizontal.ic-divider-label-center)::before,\n :host(.ic-divider-horizontal.ic-divider-label-left)::after,\n :host(.ic-divider-horizontal.ic-divider-label-center)::after {\n border-bottom-color: transparent;\n }\n\n :host() div.vertical-divider,\n :host(.ic-divider-vertical.ic-divider-label-bottom)::before,\n :host(.ic-divider-vertical.ic-divider-label-center)::before,\n :host(.ic-divider-vertical.ic-divider-label-top)::after,\n :host(.ic-divider-vertical.ic-divider-label-center)::after {\n border-left-color: transparent;\n }\n}\n","import {\n h,\n Component,\n Host,\n Listen,\n State,\n Prop,\n Element,\n} from \"@stencil/core\";\n\nimport {\n getBrandForegroundAppearance,\n isPropDefined,\n slotHasContent,\n isEmptyString,\n} from \"../../utils/helpers\";\n\nimport {\n IcBrand,\n IcOrientation,\n IcBrandForeground,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n IcDividerLabelPlacement,\n IcDividerStyles,\n IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n tag: \"ic-divider\",\n styleUrl: \"ic-divider.css\",\n scoped: true,\n})\nexport class Divider {\n @Element() el: HTMLIcDividerElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n /**\n * The line style of the divider.\n */\n @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n /**\n * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n */\n @Prop() label?: string;\n\n /**\n * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n */\n @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n /** If `true`, the divider will be displayed in a grey colour. */\n @Prop() monochrome?: boolean = false;\n\n /**\n * The orientation of the divider.\n */\n @Prop() orientation?: IcOrientation = \"horizontal\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n /**\n * The thickness of the divider.\n */\n @Prop() weight?: IcDividerWeights = \"thin\";\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n private updateMonochromeState(): void {\n const parentEl = this.el.parentElement;\n if (parentEl) {\n const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n const isBottomWrapper =\n parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n if (\n parentEl.tagName === \"IC-SIDE-NAVIGATION\" ||\n (isBottomSideNav && isBottomWrapper)\n ) {\n this.el.classList.add(\"ic-side-navigation-keyline\");\n if (this.foregroundColor === \"light\") {\n this.theme = \"dark\";\n } else {\n this.theme = \"light\";\n }\n }\n }\n }\n\n componentWillRender(): void {\n this.updateMonochromeState();\n }\n\n render() {\n const {\n borderStyle,\n label,\n labelPlacement,\n monochrome,\n orientation,\n weight,\n } = this;\n\n const { theme } = this;\n\n const invalidPropCombination = (\n placement: IcDividerLabelPlacement\n ): void => {\n console.error(\n `${\n placement.charAt(0).toUpperCase() + placement.slice(1)\n } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n );\n };\n\n if (\n ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n orientation === \"vertical\") ||\n ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n orientation === \"horizontal\")\n ) {\n invalidPropCombination(labelPlacement);\n }\n\n const getTypographyVariant = (weight: string) => {\n switch (weight) {\n case \"very-thick\":\n return \"h4\";\n case \"thick\":\n return \"subtitle-large\";\n default:\n return \"label\";\n }\n };\n\n const renderLabel = () => {\n if (slotHasContent(this.el, \"label\")) {\n return (\n <div class=\"ic-divider-label-container\">\n <slot name=\"label\"></slot>\n </div>\n );\n } else if (isPropDefined(label)) {\n return (\n <ic-typography\n class=\"ic-divider-label\"\n variant={getTypographyVariant(weight!)}\n >\n <p>{label}</p>\n </ic-typography>\n );\n }\n return null;\n };\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [`ic-divider-monochrome`]: !!monochrome,\n [`ic-divider-${orientation}`]: true,\n [`ic-divider-${weight}`]: true,\n [`ic-divider-${borderStyle}`]: true,\n [`ic-divider-label-${labelPlacement}`]:\n slotHasContent(this.el, \"label\") || !isEmptyString(label),\n }}\n {...((orientation === \"vertical\" ||\n (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n \"aria-orientation\": orientation,\n role: \"separator\",\n })}\n >\n {orientation === \"horizontal\" &&\n (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n {orientation === \"vertical\" &&\n (!renderLabel() || !isPropDefined(labelPlacement)) && (\n <div class=\"vertical-divider\"></div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"qIAAA,MAAMA,EAAe,u/VACrB,MAAAC,EAAeD,E,MCkCFE,EAAO,MALpB,WAAAC,CAAAC,G,UAQWC,KAAAC,gBAAqCC,IAKtCF,KAAAG,YAAgC,QAUhCH,KAAAI,eAA2C,SAG3CJ,KAAAK,WAAuB,MAKvBL,KAAAM,YAA8B,aAKbN,KAAAO,MAA0C,UAK3DP,KAAAQ,OAA4B,M,CAGpC,kBAAAC,CAAmBC,GACjBV,KAAKC,gBAAkBS,EAAGC,OAAOC,I,CAG3B,qBAAAC,G,MACN,MAAMC,EAAWd,KAAKe,GAAGC,cACzB,GAAIF,EAAU,CACZ,MAAMG,EAAkBH,EAASI,UAAUC,SAAS,mBACpD,MAAMC,GACJC,EAAAP,EAASE,iBAAa,MAAAK,SAAA,SAAAA,EAAEH,UAAUC,SAAS,kBAE7C,GACEL,EAASQ,UAAY,sBACpBL,GAAmBG,EACpB,CACApB,KAAKe,GAAGG,UAAUK,IAAI,8BACtB,GAAIvB,KAAKC,kBAAoB,QAAS,CACpCD,KAAKO,MAAQ,M,KACR,CACLP,KAAKO,MAAQ,O,IAMrB,mBAAAiB,GACExB,KAAKa,uB,CAGP,MAAAY,GACE,MAAMtB,YACJA,EAAWuB,MACXA,EAAKtB,eACLA,EAAcC,WACdA,EAAUC,YACVA,EAAWE,OACXA,GACER,KAEJ,MAAMO,MAAEA,GAAUP,KAElB,MAAM2B,EACJC,IAEAC,QAAQC,MACN,GACEF,EAAUG,OAAO,GAAGC,cAAgBJ,EAAUK,MAAM,8CACV3B,oDAC7C,EAGH,IACIF,IAAmB,QAAUA,IAAmB,UAChDE,IAAgB,aAChBF,IAAmB,OAASA,IAAmB,WAC/CE,IAAgB,aAClB,CACAqB,EAAuBvB,E,CAGzB,MAAM8B,EAAwB1B,IAC5B,OAAQA,GACN,IAAK,aACH,MAAO,KACT,IAAK,QACH,MAAO,iBACT,QACE,MAAO,Q,EAIb,MAAM2B,EAAc,KAClB,GAAIC,EAAepC,KAAKe,GAAI,SAAU,CACpC,OACEsB,EAAA,OAAKC,MAAM,8BACTD,EAAA,QAAME,KAAK,U,MAGV,GAAIC,EAAcd,GAAQ,CAC/B,OACEW,EAAA,iBACEC,MAAM,mBACNG,QAASP,EAAqB1B,IAE9B6B,EAAA,SAAIX,G,CAIV,OAAO,IAAI,EAGb,OACEW,EAACK,EAAIC,OAAAC,OAAA,CACHN,MAAO,CACL,CAAC,YAAY/B,KAAUA,IAAU,UACjC,CAAC,2BAA4BF,EAC7B,CAAC,cAAcC,KAAgB,KAC/B,CAAC,cAAcE,KAAW,KAC1B,CAAC,cAAcL,KAAgB,KAC/B,CAAC,oBAAoBC,KACnBgC,EAAepC,KAAKe,GAAI,WAAa8B,EAAcnB,MAEjDpB,IAAgB,cACjB6B,OAAmBK,EAAcpC,KAAqB,CACzD,mBAAoBE,EACpBwC,KAAM,cAGPxC,IAAgB,gBACb6B,MAAkBK,EAAcpC,KAAoBiC,EAAA,aACrDG,EAAcpC,MAAqB+B,KAAiBA,IACtD7B,IAAgB,cACb6B,MAAkBK,EAAcpC,KAChCiC,EAAA,OAAKC,MAAM,qB","ignoreList":[]}