@ukic/web-components 3.27.0 → 3.29.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 (275) hide show
  1. package/components/close-icon.js +1 -2
  2. package/components/close-icon.js.map +1 -1
  3. package/components/ic-breadcrumb-group.js +16 -12
  4. package/components/ic-breadcrumb-group.js.map +1 -1
  5. package/components/ic-data-list.js +1 -1
  6. package/components/ic-data-list.js.map +1 -1
  7. package/components/ic-data-row.js +1 -1
  8. package/components/ic-data-row.js.map +1 -1
  9. package/components/ic-menu-item2.js +7 -2
  10. package/components/ic-menu-item2.js.map +1 -1
  11. package/components/ic-menu2.js +1153 -306
  12. package/components/ic-menu2.js.map +1 -1
  13. package/components/ic-pagination-bar.js.map +1 -1
  14. package/components/ic-pagination-item2.js +1 -1
  15. package/components/ic-pagination-item2.js.map +1 -1
  16. package/components/ic-pagination2.js +12 -8
  17. package/components/ic-pagination2.js.map +1 -1
  18. package/components/ic-popover-menu.js +46 -12
  19. package/components/ic-popover-menu.js.map +1 -1
  20. package/components/ic-radio-group.js.map +1 -1
  21. package/components/ic-search-bar.js +2 -6
  22. package/components/ic-search-bar.js.map +1 -1
  23. package/components/ic-section-container2.js +2 -2
  24. package/components/ic-skeleton.js +2 -2
  25. package/components/ic-skip-link.js +2 -2
  26. package/components/ic-status-tag.js +2 -2
  27. package/components/ic-step.js +13 -13
  28. package/components/ic-stepper.js +2 -2
  29. package/components/ic-switch.js +4 -4
  30. package/components/ic-switch.js.map +1 -1
  31. package/components/ic-tab-context.js +1 -1
  32. package/components/ic-tab-group.js +2 -2
  33. package/components/ic-tab-panel.js +2 -2
  34. package/components/ic-theme.js +1 -1
  35. package/components/ic-toast-region.js +1 -1
  36. package/components/ic-toast.js +5 -5
  37. package/components/ic-toggle-button-group.js +2 -2
  38. package/components/ic-toggle-button.js +2 -2
  39. package/dist/cjs/{close-icon-7f6ef8e4.js → close-icon-30d8bb41.js} +2 -3
  40. package/dist/cjs/close-icon-30d8bb41.js.map +1 -0
  41. package/dist/cjs/core.cjs.js +1 -1
  42. package/dist/cjs/ic-alert.cjs.entry.js +1 -1
  43. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +16 -12
  44. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ic-data-list.cjs.entry.js +1 -1
  46. package/dist/cjs/ic-data-list.cjs.entry.js.map +1 -1
  47. package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
  48. package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
  49. package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
  50. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +1153 -306
  51. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  52. package/dist/cjs/ic-menu-item.cjs.entry.js +5 -1
  53. package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
  54. package/dist/cjs/ic-pagination-item.cjs.entry.js +1 -1
  55. package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
  56. package/dist/cjs/ic-pagination_3.cjs.entry.js +12 -8
  57. package/dist/cjs/ic-pagination_3.cjs.entry.js.map +1 -1
  58. package/dist/cjs/ic-popover-menu.cjs.entry.js +44 -11
  59. package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
  60. package/dist/cjs/ic-search-bar.cjs.entry.js +2 -6
  61. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  62. package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
  63. package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
  64. package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
  65. package/dist/cjs/ic-skip-link.cjs.entry.js +2 -2
  66. package/dist/cjs/ic-status-tag.cjs.entry.js +2 -2
  67. package/dist/cjs/ic-step.cjs.entry.js +13 -13
  68. package/dist/cjs/ic-stepper.cjs.entry.js +2 -2
  69. package/dist/cjs/ic-switch.cjs.entry.js +4 -4
  70. package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
  71. package/dist/cjs/ic-tab-group.cjs.entry.js +2 -2
  72. package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
  73. package/dist/cjs/ic-theme.cjs.entry.js +1 -1
  74. package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
  75. package/dist/cjs/ic-toast.cjs.entry.js +6 -6
  76. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +2 -2
  77. package/dist/cjs/ic-toggle-button.cjs.entry.js +2 -2
  78. package/dist/cjs/loader.cjs.js +1 -1
  79. package/dist/collection/assets/close-icon.svg +1 -2
  80. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +17 -13
  81. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
  82. package/dist/collection/components/ic-data-list/ic-data-list.css +4 -0
  83. package/dist/collection/components/ic-data-row/ic-data-row.css +1 -1
  84. package/dist/collection/components/ic-menu-item/ic-menu-item.css +9 -14
  85. package/dist/collection/components/ic-menu-item/ic-menu-item.js +24 -0
  86. package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
  87. package/dist/collection/components/ic-pagination/ic-pagination.js +12 -8
  88. package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
  89. package/dist/collection/components/ic-pagination-item/ic-pagination-item.css +2 -1
  90. package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +4 -4
  91. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +67 -11
  92. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
  93. package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js +241 -1
  94. package/dist/collection/components/ic-search-bar/ic-search-bar.js +1 -1
  95. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  96. package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
  97. package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
  98. package/dist/collection/components/ic-skip-link/ic-skip-link.js +2 -2
  99. package/dist/collection/components/ic-status-tag/ic-status-tag.js +2 -2
  100. package/dist/collection/components/ic-step/ic-step.js +13 -13
  101. package/dist/collection/components/ic-stepper/ic-stepper.js +2 -2
  102. package/dist/collection/components/ic-switch/ic-switch.js +4 -4
  103. package/dist/collection/components/ic-tab-context/ic-tab-context.js +1 -1
  104. package/dist/collection/components/ic-tab-group/ic-tab-group.js +2 -2
  105. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
  106. package/dist/collection/components/ic-theme/ic-theme.js +1 -1
  107. package/dist/collection/components/ic-toast/ic-toast.js +5 -5
  108. package/dist/collection/components/ic-toast-region/ic-toast-region.js +1 -1
  109. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +2 -2
  110. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +2 -2
  111. package/dist/components/close-icon.js +1 -2
  112. package/dist/components/close-icon.js.map +1 -1
  113. package/dist/components/ic-breadcrumb-group.js +16 -12
  114. package/dist/components/ic-breadcrumb-group.js.map +1 -1
  115. package/dist/components/ic-data-list.js +1 -1
  116. package/dist/components/ic-data-list.js.map +1 -1
  117. package/dist/components/ic-data-row.js +1 -1
  118. package/dist/components/ic-data-row.js.map +1 -1
  119. package/dist/components/ic-hero.js.map +1 -1
  120. package/dist/components/ic-menu-item2.js +7 -2
  121. package/dist/components/ic-menu-item2.js.map +1 -1
  122. package/dist/components/ic-menu2.js +1153 -306
  123. package/dist/components/ic-menu2.js.map +1 -1
  124. package/dist/components/ic-pagination-bar.js.map +1 -1
  125. package/dist/components/ic-pagination-item2.js +1 -1
  126. package/dist/components/ic-pagination-item2.js.map +1 -1
  127. package/dist/components/ic-pagination2.js +12 -8
  128. package/dist/components/ic-pagination2.js.map +1 -1
  129. package/dist/components/ic-popover-menu.js +46 -12
  130. package/dist/components/ic-popover-menu.js.map +1 -1
  131. package/dist/components/ic-radio-group.js.map +1 -1
  132. package/dist/components/ic-search-bar.js +2 -6
  133. package/dist/components/ic-search-bar.js.map +1 -1
  134. package/dist/components/ic-section-container2.js +2 -2
  135. package/dist/components/ic-skeleton.js +2 -2
  136. package/dist/components/ic-skeleton.js.map +1 -1
  137. package/dist/components/ic-skip-link.js +2 -2
  138. package/dist/components/ic-status-tag.js +2 -2
  139. package/dist/components/ic-step.js +13 -13
  140. package/dist/components/ic-stepper.js +2 -2
  141. package/dist/components/ic-switch.js +4 -4
  142. package/dist/components/ic-switch.js.map +1 -1
  143. package/dist/components/ic-tab-context.js +1 -1
  144. package/dist/components/ic-tab-group.js +2 -2
  145. package/dist/components/ic-tab-panel.js +2 -2
  146. package/dist/components/ic-theme.js +1 -1
  147. package/dist/components/ic-toast-region.js +1 -1
  148. package/dist/components/ic-toast.js +5 -5
  149. package/dist/components/ic-toggle-button-group.js +2 -2
  150. package/dist/components/ic-toggle-button.js +2 -2
  151. package/dist/core/core.esm.js +1 -1
  152. package/dist/core/core.esm.js.map +1 -1
  153. package/dist/core/{p-23fb87be.entry.js → p-0558baed.entry.js} +2 -2
  154. package/dist/core/{p-a0c54a50.entry.js → p-0740be66.entry.js} +2 -2
  155. package/dist/core/{p-d0dd9f2c.entry.js → p-0cd21e04.entry.js} +2 -2
  156. package/dist/core/p-0cd21e04.entry.js.map +1 -0
  157. package/dist/core/{p-bb52e752.entry.js → p-1043f3dd.entry.js} +2 -2
  158. package/dist/core/{p-74a3a450.entry.js → p-1843357b.entry.js} +2 -2
  159. package/dist/core/{p-b58fb588.entry.js → p-2251df98.entry.js} +2 -2
  160. package/dist/core/{p-cf87b6db.entry.js → p-2bb815ef.entry.js} +2 -2
  161. package/dist/core/p-305d9639.entry.js +3 -0
  162. package/dist/core/p-305d9639.entry.js.map +1 -0
  163. package/dist/core/p-308be45e.entry.js +2 -0
  164. package/dist/core/p-308be45e.entry.js.map +1 -0
  165. package/dist/core/p-4b61e92e.entry.js +2 -0
  166. package/dist/core/{p-99b20121.entry.js.map → p-4b61e92e.entry.js.map} +1 -1
  167. package/dist/core/{p-fd9ea62a.entry.js → p-75f91c8c.entry.js} +2 -2
  168. package/dist/core/p-77f011e7.entry.js +2 -0
  169. package/dist/core/p-77f011e7.entry.js.map +1 -0
  170. package/dist/core/{p-70ca7796.entry.js → p-85db7e71.entry.js} +2 -2
  171. package/dist/core/{p-ab104baa.entry.js → p-987b08f9.entry.js} +2 -2
  172. package/dist/core/{p-85ac0d78.entry.js → p-9b144bed.entry.js} +2 -2
  173. package/dist/core/{p-d1220d2a.entry.js → p-a8d98164.entry.js} +2 -2
  174. package/dist/core/{p-a7c263bd.entry.js → p-ba8799ea.entry.js} +2 -2
  175. package/dist/core/p-ba8799ea.entry.js.map +1 -0
  176. package/dist/core/p-be8bbed8.entry.js +2 -0
  177. package/dist/core/p-be8bbed8.entry.js.map +1 -0
  178. package/dist/core/{p-85232cec.entry.js → p-bf06d022.entry.js} +2 -2
  179. package/dist/core/{p-c41fd2cf.entry.js → p-c0f6f568.entry.js} +2 -2
  180. package/dist/core/p-c391e323.js +2 -0
  181. package/dist/core/{p-271ee0bc.entry.js → p-c75c316b.entry.js} +2 -2
  182. package/dist/core/{p-970e190c.entry.js → p-e0b52a71.entry.js} +2 -2
  183. package/dist/core/p-ef289935.entry.js +2 -0
  184. package/dist/core/p-ef289935.entry.js.map +1 -0
  185. package/dist/core/{p-3da9774b.entry.js → p-ef91cf17.entry.js} +2 -2
  186. package/dist/core/p-f8aa89ff.entry.js +2 -0
  187. package/dist/core/p-f8aa89ff.entry.js.map +1 -0
  188. package/dist/core/{p-d7c6fc8d.entry.js → p-f8e5d8f8.entry.js} +2 -2
  189. package/dist/core/{p-6b5edd6b.entry.js → p-f9daecc7.entry.js} +2 -2
  190. package/dist/esm/{close-icon-539ec8d1.js → close-icon-0db44bf2.js} +2 -3
  191. package/dist/esm/close-icon-0db44bf2.js.map +1 -0
  192. package/dist/esm/core.js +1 -1
  193. package/dist/esm/ic-alert.entry.js +1 -1
  194. package/dist/esm/ic-breadcrumb-group.entry.js +16 -12
  195. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
  196. package/dist/esm/ic-data-list.entry.js +1 -1
  197. package/dist/esm/ic-data-list.entry.js.map +1 -1
  198. package/dist/esm/ic-data-row.entry.js +1 -1
  199. package/dist/esm/ic-data-row.entry.js.map +1 -1
  200. package/dist/esm/ic-dialog.entry.js +1 -1
  201. package/dist/esm/ic-input-component-container_3.entry.js +1153 -306
  202. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  203. package/dist/esm/ic-menu-item.entry.js +5 -1
  204. package/dist/esm/ic-menu-item.entry.js.map +1 -1
  205. package/dist/esm/ic-pagination-item.entry.js +1 -1
  206. package/dist/esm/ic-pagination-item.entry.js.map +1 -1
  207. package/dist/esm/ic-pagination_3.entry.js +12 -8
  208. package/dist/esm/ic-pagination_3.entry.js.map +1 -1
  209. package/dist/esm/ic-popover-menu.entry.js +45 -12
  210. package/dist/esm/ic-popover-menu.entry.js.map +1 -1
  211. package/dist/esm/ic-search-bar.entry.js +2 -6
  212. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  213. package/dist/esm/ic-section-container.entry.js +2 -2
  214. package/dist/esm/ic-side-navigation.entry.js +1 -1
  215. package/dist/esm/ic-skeleton.entry.js +2 -2
  216. package/dist/esm/ic-skip-link.entry.js +2 -2
  217. package/dist/esm/ic-status-tag.entry.js +2 -2
  218. package/dist/esm/ic-step.entry.js +13 -13
  219. package/dist/esm/ic-stepper.entry.js +2 -2
  220. package/dist/esm/ic-switch.entry.js +4 -4
  221. package/dist/esm/ic-tab-context.entry.js +1 -1
  222. package/dist/esm/ic-tab-group.entry.js +2 -2
  223. package/dist/esm/ic-tab-panel.entry.js +2 -2
  224. package/dist/esm/ic-theme.entry.js +1 -1
  225. package/dist/esm/ic-toast-region.entry.js +1 -1
  226. package/dist/esm/ic-toast.entry.js +6 -6
  227. package/dist/esm/ic-toggle-button-group.entry.js +2 -2
  228. package/dist/esm/ic-toggle-button.entry.js +2 -2
  229. package/dist/esm/loader.js +1 -1
  230. package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +6 -1
  231. package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +4 -0
  232. package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +8 -0
  233. package/dist/types/components.d.ts +18 -2
  234. package/hydrate/index.js +1284 -393
  235. package/hydrate/index.mjs +1284 -393
  236. package/package.json +12 -9
  237. package/vscode-data.json +20 -1
  238. package/dist/cjs/close-icon-7f6ef8e4.js.map +0 -1
  239. package/dist/collection/assets/clear-icon.svg +0 -3
  240. package/dist/core/p-023cf5d9.entry.js +0 -2
  241. package/dist/core/p-023cf5d9.entry.js.map +0 -1
  242. package/dist/core/p-2424f82f.entry.js +0 -2
  243. package/dist/core/p-2424f82f.entry.js.map +0 -1
  244. package/dist/core/p-2b1ce5b7.entry.js +0 -2
  245. package/dist/core/p-2b1ce5b7.entry.js.map +0 -1
  246. package/dist/core/p-99b20121.entry.js +0 -2
  247. package/dist/core/p-a7c263bd.entry.js.map +0 -1
  248. package/dist/core/p-d0dd9f2c.entry.js.map +0 -1
  249. package/dist/core/p-d5fcd4f9.entry.js +0 -2
  250. package/dist/core/p-d5fcd4f9.entry.js.map +0 -1
  251. package/dist/core/p-e0b66371.entry.js +0 -2
  252. package/dist/core/p-e0b66371.entry.js.map +0 -1
  253. package/dist/core/p-f074ef5b.js +0 -2
  254. package/dist/core/p-fdc4376e.entry.js +0 -3
  255. package/dist/core/p-fdc4376e.entry.js.map +0 -1
  256. package/dist/esm/close-icon-539ec8d1.js.map +0 -1
  257. /package/dist/core/{p-23fb87be.entry.js.map → p-0558baed.entry.js.map} +0 -0
  258. /package/dist/core/{p-a0c54a50.entry.js.map → p-0740be66.entry.js.map} +0 -0
  259. /package/dist/core/{p-bb52e752.entry.js.map → p-1043f3dd.entry.js.map} +0 -0
  260. /package/dist/core/{p-74a3a450.entry.js.map → p-1843357b.entry.js.map} +0 -0
  261. /package/dist/core/{p-b58fb588.entry.js.map → p-2251df98.entry.js.map} +0 -0
  262. /package/dist/core/{p-cf87b6db.entry.js.map → p-2bb815ef.entry.js.map} +0 -0
  263. /package/dist/core/{p-fd9ea62a.entry.js.map → p-75f91c8c.entry.js.map} +0 -0
  264. /package/dist/core/{p-70ca7796.entry.js.map → p-85db7e71.entry.js.map} +0 -0
  265. /package/dist/core/{p-ab104baa.entry.js.map → p-987b08f9.entry.js.map} +0 -0
  266. /package/dist/core/{p-85ac0d78.entry.js.map → p-9b144bed.entry.js.map} +0 -0
  267. /package/dist/core/{p-d1220d2a.entry.js.map → p-a8d98164.entry.js.map} +0 -0
  268. /package/dist/core/{p-85232cec.entry.js.map → p-bf06d022.entry.js.map} +0 -0
  269. /package/dist/core/{p-c41fd2cf.entry.js.map → p-c0f6f568.entry.js.map} +0 -0
  270. /package/dist/core/{p-f074ef5b.js.map → p-c391e323.js.map} +0 -0
  271. /package/dist/core/{p-271ee0bc.entry.js.map → p-c75c316b.entry.js.map} +0 -0
  272. /package/dist/core/{p-970e190c.entry.js.map → p-e0b52a71.entry.js.map} +0 -0
  273. /package/dist/core/{p-3da9774b.entry.js.map → p-ef91cf17.entry.js.map} +0 -0
  274. /package/dist/core/{p-d7c6fc8d.entry.js.map → p-f8e5d8f8.entry.js.map} +0 -0
  275. /package/dist/core/{p-6b5edd6b.entry.js.map → p-f9daecc7.entry.js.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ukic/web-components",
3
- "version": "3.27.0",
3
+ "version": "3.29.0",
4
4
  "description": "A web component UI library compiled with StencilJS",
5
5
  "bugs": {
6
6
  "url": "https://github.com/mi6/ic-ui-kit",
@@ -58,10 +58,10 @@
58
58
  "@stencil/angular-output-target": "^1.1.1",
59
59
  "@stencil/postcss": "^2.1.0",
60
60
  "@stencil/react-output-target": "^0.5.3",
61
- "@storybook/addon-a11y": "10.1.11",
62
- "@storybook/addon-docs": "10.1.11",
63
- "@storybook/addon-links": "10.1.11",
64
- "@storybook/web-components-vite": "10.1.11",
61
+ "@storybook/addon-a11y": "^10.4.6",
62
+ "@storybook/addon-docs": "^10.4.6",
63
+ "@storybook/addon-links": "^10.4.6",
64
+ "@storybook/web-components-vite": "^10.4.6",
65
65
  "@types/autoprefixer": "^10.2.0",
66
66
  "@types/jest": "^29.5.14",
67
67
  "@types/jest-axe": "^3.5.9",
@@ -69,7 +69,7 @@
69
69
  "@types/react-dom": "^17.0.11",
70
70
  "autoprefixer": "^10.4.2",
71
71
  "babel-loader": "^8.2.3",
72
- "concurrently": "^9.2.1",
72
+ "concurrently": "^10.0.3",
73
73
  "css-loader": "^7.1.2",
74
74
  "jest": "^29.7.0",
75
75
  "jest-axe": "^10.0.0",
@@ -81,17 +81,20 @@
81
81
  "react": "^17.0.0",
82
82
  "react-dom": "^17.0.0",
83
83
  "stencil-inline-svg": "^1.1.0",
84
- "storybook": "10.1.11",
84
+ "storybook": "^10.4.6",
85
85
  "style-loader": "^4.0.0",
86
86
  "ts-jest": "^29.4.9"
87
87
  },
88
88
  "peerDependencies": {
89
89
  "@ukic/fonts": "^3.1.0"
90
90
  },
91
+ "overrides": {
92
+ "esbuild": "0.28.1",
93
+ "js-yaml": "4.2.0"
94
+ },
91
95
  "packageManager": "^npm@10.9.2",
92
96
  "collection": "dist/collection/collection-manifest.json",
93
97
  "collection:main": "dist/collection/index.js",
94
98
  "es2015": "dist/esm/index.mjs",
95
- "es2017": "dist/esm/index.mjs",
96
- "gitHead": "cafac0f4819c3629fc9998f3e1d7aedb7943ea32"
99
+ "es2017": "dist/esm/index.mjs"
97
100
  }
package/vscode-data.json CHANGED
@@ -547,7 +547,7 @@
547
547
  "attributes": [
548
548
  {
549
549
  "name": "back-breadcrumb-only",
550
- "description": "If `true`, display only a single breadcrumb for the parent page with a back icon."
550
+ "description": "If `true`, display only a single breadcrumb for the parent page with a back icon.\nRequires at least two `ic-breadcrumb` children, as the displayed breadcrumb\nshows the title of the parent (second-to-last) page."
551
551
  },
552
552
  {
553
553
  "name": "collapsed",
@@ -2454,6 +2454,10 @@
2454
2454
  "name": "checked",
2455
2455
  "description": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`."
2456
2456
  },
2457
+ {
2458
+ "name": "close-menu-on-select",
2459
+ "description": "If `true`, the menu will close when this menu item is clicked."
2460
+ },
2457
2461
  {
2458
2462
  "name": "description",
2459
2463
  "description": "The description displayed in the menu item, below the label."
@@ -3113,6 +3117,21 @@
3113
3117
  "name": "anchor",
3114
3118
  "description": "The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu."
3115
3119
  },
3120
+ {
3121
+ "name": "close-on-item-select",
3122
+ "description": "If `always`, the popover menu will close when any menu item is clicked. If `toggle`, the popover menu will close when a non-toggle menu item is clicked. If `never`, the popover menu will not close when any menu item is clicked.",
3123
+ "values": [
3124
+ {
3125
+ "name": "always"
3126
+ },
3127
+ {
3128
+ "name": "never"
3129
+ },
3130
+ {
3131
+ "name": "toggle"
3132
+ }
3133
+ ]
3134
+ },
3116
3135
  {
3117
3136
  "name": "fixed-positioning",
3118
3137
  "description": "Setting to `true` can help in situations where tooltip content is clipped by a parent element."
@@ -1 +0,0 @@
1
- {"file":"close-icon-7f6ef8e4.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1,3 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <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"/>
3
- </svg>
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as i,H as o,g as s}from"./p-8e4e97b4.js";import{E as n,e as a}from"./p-eeb8d98a.js";import{c as r}from"./p-68a5aaff.js";import"./p-6215e2ae.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-popover-nav-text);--ic-typography-color:var(--ic-popover-nav-text);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-color:var(--ic-popover-border);border-radius:var(--ic-border-radius);background-color:var(--ic-popover-background);visibility:hidden;height:0;display:flex;flex-direction:column}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.ic-popover-menu-open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.ic-popover-menu-open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const c=l;const h="div.menu-body";const d=class{constructor(i){e(this,i);this.icPopoverClosed=t(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.openingFromChild=false;this.openingFromParent=false;this.popperProps={};this.fixedPositioning=false;this.submenuLevel=1;this.theme="inherit";this.open=undefined;this.setButtonFocus=()=>{var e;(e=this.popoverMenuEls[this.currentFocus])===null||e===void 0?void 0:e.focus()};this.findAnchorEl=e=>{let t=null;if(!e){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{t=document.querySelector(e.indexOf("#")===0?e:"#"+e);if(t===null){console.error(`Popover anchor element '${e}' not found`)}}return t};this.isNotPopoverMenuEl=e=>{const{id:t,tagName:i}=e.target;return t!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(e,t)=>{const i=this.popoverMenuEls.length-1;if(e<1){e=0}let o=t?e+1:e-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=e=>{var t;for(let i=0;i<e.length;i++){const o=e[i];if(o.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(o)}else if(o.tagName==="IC-MENU-GROUP"){const e=(t=o.shadowRoot)===null||t===void 0?void 0:t.querySelector(".menu-items-wrapper");if(e){const t=n(e);t&&this.addMenuItems(t)}}}};this.getMenuAriaLabel=()=>{const e=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${e}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return e}};this.handleBackButtonClick=()=>{var e;(e=this.parentPopover)===null||e===void 0?void 0:e.openFromChild();this.open=false};this.initPopperJS=()=>{if(this.anchorEl){this.popperInstance=r(this.anchorEl,this.el,Object.assign({strategy:this.fixedPositioning?"fixed":"absolute",placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]},this.popperProps))}}}watchOpenHandler(){var e;const t=(e=this.el.parentElement)===null||e===void 0?void 0:e.querySelectorAll(`ic-popover-menu`);if(this.open){if(t.length>0){t.forEach((e=>{if(e!==this.el){e.open=false}}))}if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((e=>e.id))){this.backButton&&this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){if(t.length>0){t.forEach((e=>{if(e!==this.el){e.open=false}}))}this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector(h);if(t){const e=n(t);if(e!==null){this.addMenuItems(e)}}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}this.watchOpenHandler()}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(e){if(!e.detail.submenuTriggerFor&&e.detail.label!=="Back"){this.closeMenu(false,e.detail)}}handleSubmenuChange(e){const t=e.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${t.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=t.label}handleClick(e){if(this.open&&this.isNotPopoverMenuEl(e)){this.closeMenu()}}handleKeyDown(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,e.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":e.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(e=false,t){var i;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(e,t)}else{if(e){(i=this.anchorEl)===null||i===void 0?void 0:i.focus()}this.icPopoverClosed.emit(t)}}async setExternalPopperProps(e){this.popperProps=e}render(){return i(o,{key:"331cedc179eb4d558f29f7704df951210f43fa77",class:{["ic-popover-menu-open"]:!!this.open,[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("div",{key:"4efbe811a462e960af2d7a5ab63d3df5f69209cb",id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true}},i("span",{key:"25207afa860d6d4b897a8d7b7406d5a450652949",class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",{key:"21bebc9796ecd62d6c0a51247f450eb0f61de6fb"},i("span",{key:"bf64a9672b93e4831bce7309514121108e79f26c",role:"menu"},i("ic-menu-item",{key:"a6bbb41562f8047a34e81f7afb72f6fdf7489b53",class:"ic-popover-submenu-back-button",ref:e=>this.backButton=e,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{key:"a5267871273dfffa86198105d325adf3b62f2728",slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{key:"cfba5502e9594fe2dc299d7e8922a39e64e6e282",d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{key:"4c718558761258605c42ad71966c54cc09fc7bac",variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("div",{key:"8c127ed3e934a257795e0b3472c6d901e8e3fb62",class:"menu-body","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",{key:"8f06fc83099461573082afc75d008e37ee84cf65"})))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};d.style=c;export{d as ic_popover_menu};
2
- //# sourceMappingURL=p-023cf5d9.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icPopoverMenuCss","IcPopoverMenuStyle0","MENU_SELECTOR","PopoverMenu","constructor","hostRef","this","ARIA_LABEL","popoverMenuEls","openingFromChild","openingFromParent","popperProps","fixedPositioning","submenuLevel","theme","open","undefined","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","parentLabel","handleBackButtonClick","parentPopover","openFromChild","initPopperJS","anchorEl","popperInstance","createPopper","Object","assign","strategy","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","popoverArr","parentElement","querySelectorAll","forEach","popover","some","menuItem","backButton","unshift","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","submenuTriggerFor","label","closeMenu","handleSubmenuChange","childEl","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","setFocusToAnchor","menuElement","icPopoverClosed","emit","setExternalPopperProps","props","render","h","Host","class","menu","role","ref","onClick","slot","viewBox","fill","xmlns","d","variant"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n display: flex;\n flex-direction: column;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport {\n createPopper,\n Instance as PopperInstance,\n Options,\n} from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst MENU_SELECTOR = \"div.menu-body\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement | null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance | null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n @State() popperProps: Partial<Options> = {};\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor?: string;\n\n /**\n * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n */\n @Prop() fixedPositioning: boolean = false;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel?: number = 1;\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 `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open?: boolean | undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(MENU_SELECTOR);\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string | undefined): HTMLElement | null => {\n let anchorElement: HTMLElement | null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /**\n * @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n /**\n * @internal This method allows props to be added to the PopperJS createPopper instance outside of the popover menu\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string | null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n ...this.popperProps,\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <div\n class=\"menu-body\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as o,g as i}from"./p-8e4e97b4.js";import{r as a,C as r}from"./p-eeb8d98a.js";import"./p-6215e2ae.js";const n='/*! 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}a{text-align:center}.item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}button{background:none;border:none;outline:inherit;position:relative}.ellipsis{pointer-events:none;--ic-typography-color:var(--ic-pagination-ellipsis)}.monochrome .ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome)}.item-container:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.page{--ic-typography-color:var(--ic-pagination-page-number)}.monochrome .page{--ic-typography-color:var(--ic-pagination-page-number-monochrome)}.simple-current{min-width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}.item-container.page:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-pagination-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed)}.monochrome .item-container.page:hover:not(.selected):not(:focus){background-color:var(--ic-pagination-hover-monochrome)}.monochrome .item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed-monochrome)}.selected{pointer-events:none;outline:none}.selected::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-pagination-selected-banner)}.monochrome .selected::after{background-color:var(--ic-pagination-selected-banner-monochrome)}.page-selected{--ic-typography-color:var(--ic-pagination-text)}.item-container.page.light:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}.item-container.page.light:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-pressed)}ic-typography.light,ic-typography.page-selected.light{--ic-typography-color:var(--ic-architectural-white)}.selected.light::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome)}.item-container.page.dark:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}.item-container.page.dark:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-pressed)}ic-typography.dark{--ic-typography-color:var(--ic-color-text-primary)}.selected.dark::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome-dark)}.disabled{--ic-typography-color:var(--ic-pagination-text-disabled);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.disabled.page ic-typography{--ic-typography-color:var(--ic-pagination-page-number-disabled)}.disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-disabled)}.monochrome .disabled.page{--ic-typography-color:var(--ic-pagination-page-number-monochrome-disabled)}.monochrome .disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome-disabled)}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}.disabled{--ic-typography-color:GrayText}}@media (prefers-reduced-motion: reduce){.item-container:focus{transition:none}}';const c=n;const s=class{constructor(o){e(this,o);this.paginationItemClick=t(this,"paginationItemClick",7);this.disabled=false;this.label="Page";this.monochrome=false;this.selected=false;this.theme="inherit";this.handleClick=()=>{this.paginationItemClick.emit({page:this.page||null})}}watchDisabledHandler(){a(this.disabled,this.el)}watchLabelHandler(){this.capitalizedLabel=r(this.label)}componentWillLoad(){this.watchLabelHandler();a(this.disabled,this.el)}render(){const{page:e,selected:t,type:i,disabled:a,label:r,capitalizedLabel:n,monochrome:c}=this;return o("a",{key:"1ed788f91d47fcaf163a11cf910c9269ca83466c",class:{["monochrome"]:!!c}},i==="ellipsis"?o("div",{class:{["item-container"]:true,["ellipsis"]:true,["disabled"]:!!a}},o("ic-typography",{variant:"label"},"...")):i==="page"?o("button",{disabled:a,onClick:this.handleClick,tabindex:t?"-1":"0",role:"button","aria-current":t&&"page","aria-label":t?`${r}: ${e}`:`Go to ${r} ${e}`,class:{["selected"]:!a&&t,["disabled"]:!!a,["item-container"]:true,["page"]:i==="page"}},o("ic-typography",{variant:"label",class:{["page-selected"]:t,["disabled"]:!!a}},e)):o("ic-typography",{"aria-live":"polite",class:{[`simple-current`]:true,["disabled"]:!!a},variant:"label"},n," ",e))}get el(){return i(this)}static get watchers(){return{disabled:["watchDisabledHandler"],label:["watchLabelHandler"]}}};s.style=c;export{s as ic_pagination_item};
2
- //# sourceMappingURL=p-2424f82f.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icPaginationItemCss","IcPaginationItemStyle0","PaginationItem","constructor","hostRef","this","disabled","label","monochrome","selected","theme","handleClick","paginationItemClick","emit","page","watchDisabledHandler","removeDisabledFalse","el","watchLabelHandler","capitalizedLabel","capitalize","componentWillLoad","render","type","h","key","class","variant","onClick","tabindex","role"],"sources":["src/components/ic-pagination-item/ic-pagination-item.css?tag=ic-pagination-item&encapsulation=shadow","src/components/ic-pagination-item/ic-pagination-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\na {\n text-align: center;\n}\n\n.item-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: calc(var(--ic-space-xl) + var(--ic-space-sm));\n height: var(--ic-space-xl);\n margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n cursor: pointer;\n text-decoration: none;\n}\n\nbutton {\n background: none;\n border: none;\n outline: inherit;\n position: relative;\n}\n\n.ellipsis {\n pointer-events: none;\n\n --ic-typography-color: var(--ic-pagination-ellipsis);\n}\n\n.monochrome .ellipsis {\n --ic-typography-color: var(--ic-pagination-ellipsis-monochrome);\n}\n\n.item-container:focus {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.page {\n --ic-typography-color: var(--ic-pagination-page-number);\n}\n\n.monochrome .page {\n --ic-typography-color: var(--ic-pagination-page-number-monochrome);\n}\n\n.simple-current {\n min-width: calc(var(--ic-space-xxl) + var(--ic-space-md));\n height: var(--ic-space-lg);\n cursor: default;\n}\n\n/** DEFAULT STATES **/\n.item-container.page:hover:not(.selected):not(:focus) {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-pagination-hover);\n}\n\n.item-container.page:active:not(.selected):not(:focus) {\n background-color: var(--ic-pagination-pressed);\n}\n\n.monochrome .item-container.page:hover:not(.selected):not(:focus) {\n background-color: var(--ic-pagination-hover-monochrome);\n}\n\n.monochrome .item-container.page:active:not(.selected):not(:focus) {\n background-color: var(--ic-pagination-pressed-monochrome);\n}\n\n.selected {\n pointer-events: none;\n outline: none;\n}\n\n.selected::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-pagination-selected-banner);\n}\n\n.monochrome .selected::after {\n background-color: var(--ic-pagination-selected-banner-monochrome);\n}\n\n.page-selected {\n --ic-typography-color: var(--ic-pagination-text);\n}\n\n/** LIGHT STATES **/\n.item-container.page.light:hover:not(.selected):not(:focus) {\n background-color: var(--ic-action-light-bg-hover);\n}\n\n.item-container.page.light:active:not(.selected):not(:focus) {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\nic-typography.light,\nic-typography.page-selected.light {\n --ic-typography-color: var(--ic-architectural-white);\n}\n\n.selected.light::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-action-monochrome);\n}\n\n/** DARK STATES **/\n.item-container.page.dark:hover:not(.selected):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.item-container.page.dark:active:not(.selected):not(:focus) {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\nic-typography.dark {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n.selected.dark::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-action-monochrome-dark);\n}\n\n.disabled {\n --ic-typography-color: var(--ic-pagination-text-disabled);\n\n pointer-events: none;\n cursor: none;\n user-select: none;\n}\n\n.disabled.page ic-typography {\n --ic-typography-color: var(--ic-pagination-page-number-disabled);\n}\n\n.disabled.ellipsis {\n --ic-typography-color: var(--ic-pagination-ellipsis-disabled);\n}\n\n.monochrome .disabled.page {\n --ic-typography-color: var(--ic-pagination-page-number-monochrome-disabled);\n}\n\n.monochrome .disabled.ellipsis {\n --ic-typography-color: var(--ic-pagination-ellipsis-monochrome-disabled);\n}\n\n@media (forced-colors: active) {\n .selected::after {\n background-color: Highlight;\n }\n\n .selected.light::after {\n background-color: Highlight;\n }\n\n .selected.dark::after {\n background-color: Highlight;\n }\n\n .disabled {\n --ic-typography-color: GrayText;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .item-container:focus {\n transition: none;\n }\n}\n","import {\n Component,\n Prop,\n State,\n Element,\n h,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-pagination-item\",\n styleUrl: \"ic-pagination-item.css\",\n shadow: true,\n})\nexport class PaginationItem {\n @Element() el: HTMLIcPaginationItemElement;\n\n @State() capitalizedLabel: string;\n\n /**\n * If `true`, the pagination item will be disabled.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The label for the pagination item (applicable when simple pagination is being used).\n */\n @Prop() label?: string = \"Page\";\n\n @Watch(\"label\")\n watchLabelHandler(): void {\n this.capitalizedLabel = capitalize(this.label!);\n }\n\n /**\n * If `true`, the pagination item will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome?: boolean = false;\n\n /**\n * The current page number.\n */\n @Prop() page?: number;\n\n /**\n * If `true`, the pagination item will be selected.\n */\n @Prop() selected: boolean = 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 * The type of pagination item - 'page' or 'ellipsis'.\n */\n @Prop() type: IcPaginationItemType;\n\n /**\n * @internal - Emitted when a pagination item is clicked.\n */\n @Event() paginationItemClick: EventEmitter<{ page: number | null }>;\n\n componentWillLoad(): void {\n this.watchLabelHandler();\n removeDisabledFalse(this.disabled, this.el);\n }\n\n private handleClick = () => {\n this.paginationItemClick.emit({ page: this.page || null });\n };\n\n render() {\n const {\n page,\n selected,\n type,\n disabled,\n label,\n capitalizedLabel,\n monochrome,\n } = this;\n\n return (\n <a class={{ [\"monochrome\"]: !!monochrome }}>\n {type === \"ellipsis\" ? (\n <div\n class={{\n [\"item-container\"]: true,\n [\"ellipsis\"]: true,\n [\"disabled\"]: !!disabled,\n }}\n >\n <ic-typography variant=\"label\">...</ic-typography>\n </div>\n ) : type === \"page\" ? (\n <button\n disabled={disabled}\n onClick={this.handleClick}\n tabindex={selected ? \"-1\" : \"0\"}\n role=\"button\"\n aria-current={selected && \"page\"}\n aria-label={\n selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n }\n class={{\n [\"selected\"]: !disabled && selected,\n [\"disabled\"]: !!disabled,\n [\"item-container\"]: true,\n [\"page\"]: type === \"page\",\n }}\n >\n <ic-typography\n variant=\"label\"\n class={{\n [\"page-selected\"]: selected,\n [\"disabled\"]: !!disabled,\n }}\n >\n {page}\n </ic-typography>\n </button>\n ) : (\n <ic-typography\n aria-live=\"polite\"\n class={{\n [`simple-current`]: true,\n [\"disabled\"]: !!disabled,\n }}\n variant=\"label\"\n >\n {capitalizedLabel} {page}\n </ic-typography>\n )}\n </a>\n );\n }\n}\n"],"mappings":"4HAAA,MAAMA,EAAsB,wwLAC5B,MAAAC,EAAeD,E,MCkBFE,EAAc,MAL3B,WAAAC,CAAAC,G,mEAaUC,KAAAC,SAAqB,MASrBD,KAAAE,MAAiB,OAUjBF,KAAAG,WAAuB,MAUvBH,KAAAI,SAAoB,MAKpBJ,KAAAK,MAAsB,UAiBtBL,KAAAM,YAAc,KACpBN,KAAKO,oBAAoBC,KAAK,CAAEC,KAAMT,KAAKS,MAAQ,MAAO,C,CAlD5D,oBAAAC,GACEC,EAAoBX,KAAKC,SAAUD,KAAKY,G,CAS1C,iBAAAC,GACEb,KAAKc,iBAAmBC,EAAWf,KAAKE,M,CAiC1C,iBAAAc,GACEhB,KAAKa,oBACLF,EAAoBX,KAAKC,SAAUD,KAAKY,G,CAO1C,MAAAK,GACE,MAAMR,KACJA,EAAIL,SACJA,EAAQc,KACRA,EAAIjB,SACJA,EAAQC,MACRA,EAAKY,iBACLA,EAAgBX,WAChBA,GACEH,KAEJ,OACEmB,EAAA,KAAAC,IAAA,2CAAGC,MAAO,CAAE,CAAC,gBAAiBlB,IAC3Be,IAAS,WACRC,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,YAAa,KACd,CAAC,cAAepB,IAGlBkB,EAAA,iBAAeG,QAAQ,SAAO,QAE9BJ,IAAS,OACXC,EAAA,UACElB,SAAUA,EACVsB,QAASvB,KAAKM,YACdkB,SAAUpB,EAAW,KAAO,IAC5BqB,KAAK,SAAQ,eACCrB,GAAY,OAAM,aAE9BA,EAAW,GAAGF,MAAUO,IAAS,SAASP,KAASO,IAErDY,MAAO,CACL,CAAC,aAAcpB,GAAYG,EAC3B,CAAC,cAAeH,EAChB,CAAC,kBAAmB,KACpB,CAAC,QAASiB,IAAS,SAGrBC,EAAA,iBACEG,QAAQ,QACRD,MAAO,CACL,CAAC,iBAAkBjB,EACnB,CAAC,cAAeH,IAGjBQ,IAILU,EAAA,6BACY,SACVE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,cAAepB,GAElBqB,QAAQ,SAEPR,EAAgB,IAAGL,G","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as i,H as o,g as r}from"./p-8e4e97b4.js";import{e as s,r as n,o as a,i as c}from"./p-eeb8d98a.js";import{C as u}from"./p-c2e091d7.js";import{C as l}from"./p-3b185c32.js";import"./p-6215e2ae.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host ::part(button){color:var(--ic-popover-menu-item-check);--ic-typography-color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host(.ic-menu-item-variant-destructive) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host(.ic-menu-item-variant-destructive) ::part(button):focus-visible,:host(.ic-menu-item-variant-destructive) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host(.ic-menu-item-variant-destructive) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n --ic-popover-menu-destructive-item-label\n ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host(.ic-menu-item-variant-destructive) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host(.ic-menu-item-variant-destructive) ic-button:active .menu-item-label{--ic-typography-color:var(\n --ic-popover-menu-destructive-item-label\n ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}';const m=p;const d=class{constructor(i){e(this,i);this.childBlur=t(this,"childBlur",7);this.handleMenuItemClick=t(this,"handleMenuItemClick",7);this.icToggleChecked=t(this,"icToggleChecked",7);this.triggerPopoverMenuInstance=t(this,"triggerPopoverMenuInstance",7);this.checked=false;this.disabled=false;this.variant="default";this.handleClick=e=>{if(s(this.submenuTriggerFor)){this.triggerPopoverMenuInstance.emit()}else if(this.variant==="toggle"){e.preventDefault();this.checked=!this.checked;this.icToggleChecked.emit({checked:this.checked})}this.handleMenuItemClick.emit(this.el)};this.getMenuItemAriaLabel=()=>{let e=this.label;if(s(this.description)){e=`${e}, ${this.description}`}if(s(this.keyboardShortcutLabel)){e=`${e}, ${this.keyboardShortcutLabel}`}if(this.variant==="destructive"){e=`${e}, destructive`}if(s(this.submenuTriggerFor)){e=`${e}, triggers submenu`}if(this.el.classList.contains("ic-popover-submenu-back-button")){e="Go back to parent menu"}const t=this.el.parentElement;if(t&&t.tagName==="IC-MENU-GROUP"&&t.label){return`${e}, ${t.label} menu group`}else{return e}}}watchDisabledHandler(){n(this.disabled,this.el)}componentWillLoad(){if(s(this.submenuTriggerFor)&&this.variant!=="default"){this.variant="default"}n(this.disabled,this.el)}componentDidLoad(){a([{prop:this.label,propName:"label"}],"Menu Item")}handleHostClick(e){if(this.disabled){e.stopImmediatePropagation()}}render(){const e=()=>i("div",{class:"menu-item-info"},i("div",{class:"menu-labels"},i("ic-typography",{class:"menu-item-label"},this.label),this.keyboardShortcutLabel&&i("ic-typography",{variant:"caption",class:"shortcut"},this.keyboardShortcutLabel)),this.description&&i("ic-typography",{class:"menu-item-description",variant:"caption"},this.description));return i(o,{class:{["ic-menu-item-disabled"]:!!this.disabled,[`ic-menu-item-variant-${this.variant}`]:this.variant!==undefined}},i("ic-button",{fullWidth:true,variant:"tertiary",onClick:this.handleClick,href:s(this.href),hreflang:s(this.hreflang),target:s(this.target),rel:s(this.rel),referrerpolicy:this.referrerpolicy,role:this.variant==="toggle"?"menuitemcheckbox":"menuitem","aria-disabled":`${this.disabled}`,"aria-checked":this.variant==="toggle"?this.checked?"true":"false":undefined,"aria-label":this.getMenuItemAriaLabel(),"aria-haspopup":s(this.submenuTriggerFor)||this.el.classList.contains("ic-popover-submenu-back-button")?"menu":false},i("div",{class:"focus-border"},c(this.el,"icon")&&i("span",{class:"icon"},i("slot",{name:"icon"})),i(e,null),this.variant==="toggle"&&i("span",{class:{["check-icon"]:true,["hide"]:!this.checked},"aria-hidden":"true",innerHTML:u}),s(this.submenuTriggerFor)&&i("span",{class:{["submenu-icon"]:true},"aria-hidden":"true",innerHTML:l}))))}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};d.style=m;export{d as ic_menu_item};
2
- //# sourceMappingURL=p-2b1ce5b7.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icMenuItemCss","IcMenuItemStyle0","MenuItem","constructor","hostRef","this","checked","disabled","variant","handleClick","e","isPropDefined","submenuTriggerFor","triggerPopoverMenuInstance","emit","preventDefault","icToggleChecked","handleMenuItemClick","el","getMenuItemAriaLabel","ariaLabel","label","description","keyboardShortcutLabel","classList","contains","parentEl","parentElement","tagName","watchDisabledHandler","removeDisabledFalse","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","handleHostClick","stopImmediatePropagation","render","MenuItemInformation","h","class","Host","undefined","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","role","isSlotUsed","name","innerHTML","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host ::part(button) {\n color: var(--ic-popover-menu-item-check);\n\n --ic-typography-color: var(--ic-popover-menu-item-check);\n\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n color: var(--ic-popover-menu-item-check-disabled) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host(.ic-menu-item-variant-destructive) ::part(button) {\n color: var(--ic-popover-menu-destructive-item-icon);\n\n --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-focused);\n\n --ic-typography-color: purple;\n\n background-color: var(--ic-popover-background-focus);\n box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n --ic-typography-color: orange !important;\n}\n\n:host(.ic-menu-item-variant-destructive) ::part(button):focus-visible,\n:host(.ic-menu-item-variant-destructive) ::part(button):focus {\n background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-item-label) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host(.ic-menu-item-variant-destructive) ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-destructive-item-label) !important;\n\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n display: flex;\n flex: min-content;\n}\n\n:host(.ic-menu-item-variant-destructive) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host(.ic-menu-item-variant-destructive) ic-button:active .menu-item-label {\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.ic-menu-item-disabled) .menu-item-info,\n :host(.ic-menu-item-disabled) .menu-item-label,\n :host(.ic-menu-item-disabled) .shortcut,\n :host(.ic-menu-item-disabled) .menu-item-description,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: GrayText !important;\n }\n\n :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n :host(.ic-menu-item-disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /**\n * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n */\n @Prop({ mutable: true, reflect: true }) checked?: boolean = false;\n\n /**\n * The description displayed in the menu item, below the label.\n */\n @Prop() description?: string;\n\n /**\n * If `true`, the menu item will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The URL that the link points to. This will render the menu item as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label describing the keyboard shortcut for a menu item's action.\n */\n @Prop() keyboardShortcutLabel?: string;\n\n /**\n * The label to display in the menu item.\n */\n @Prop() label!: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n */\n @Prop() submenuTriggerFor?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The variant of the menu item.\n */\n @Prop({ mutable: true, reflect: true }) variant?: IcMenuItemVariants =\n \"default\";\n\n /**\n * @internal Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal Emitted when the user clicks a menu item.\n */\n @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n /**\n * Emitted when the user clicks a menu item that is set to the toggle variant.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /**\n * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.checked = !this.checked;\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n this.handleMenuItemClick.emit(this.el);\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcutLabel)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl &&\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcutLabel && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcutLabel}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"ic-menu-item-disabled\"]: !!this.disabled,\n [`ic-menu-item-variant-${this.variant}`]: this.variant !== undefined,\n }}\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={this.referrerpolicy}\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.checked\n ? \"true\"\n : \"false\"\n : undefined\n }\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) ||\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.checked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"yNAAA,MAAMA,EAAgB,kmOACtB,MAAAC,EAAeD,E,MC+BFE,EAAQ,MAPrB,WAAAC,CAAAC,G,gOAa0CC,KAAAC,QAAoB,MAUpDD,KAAAE,SAAqB,MAiDWF,KAAAG,QACtC,UA8CMH,KAAAI,YAAeC,IACrB,GAAIC,EAAcN,KAAKO,mBAAoB,CACzCP,KAAKQ,2BAA2BC,M,MAC3B,GAAIT,KAAKG,UAAY,SAAU,CACpCE,EAAEK,iBACFV,KAAKC,SAAWD,KAAKC,QACrBD,KAAKW,gBAAgBF,KAAK,CACxBR,QAASD,KAAKC,S,CAGlBD,KAAKY,oBAAoBH,KAAKT,KAAKa,GAAG,EAGhCb,KAAAc,qBAAuB,KAC7B,IAAIC,EAAYf,KAAKgB,MAErB,GAAIV,EAAcN,KAAKiB,aAAc,CACnCF,EAAY,GAAGA,MAAcf,KAAKiB,a,CAGpC,GAAIX,EAAcN,KAAKkB,uBAAwB,CAC7CH,EAAY,GAAGA,MAAcf,KAAKkB,uB,CAGpC,GAAIlB,KAAKG,UAAY,cAAe,CAClCY,EAAY,GAAGA,gB,CAGjB,GAAIT,EAAcN,KAAKO,mBAAoB,CACzCQ,EAAY,GAAGA,qB,CAGjB,GAAIf,KAAKa,GAAGM,UAAUC,SAAS,kCAAmC,CAChEL,EAAY,wB,CAEd,MAAMM,EAAWrB,KAAKa,GAAGS,cAEzB,GACED,GACAA,EAASE,UAAY,iBACpBF,EAAoCL,MACrC,CACA,MAAO,GAAGD,MACPM,EAAoCL,kB,KAElC,CACL,OAAOD,C,GA5IX,oBAAAS,GACEC,EAAoBzB,KAAKE,SAAUF,KAAKa,G,CAuE1C,iBAAAa,GAEE,GAAIpB,EAAcN,KAAKO,oBAAsBP,KAAKG,UAAY,UAAW,CACvEH,KAAKG,QAAU,S,CAEjBsB,EAAoBzB,KAAKE,SAAUF,KAAKa,G,CAG1C,gBAAAc,GACEC,EACE,CAAC,CAAEC,KAAM7B,KAAKgB,MAAOc,SAAU,UAC/B,Y,CAKJ,eAAAC,CAAgB1B,GACd,GAAIL,KAAKE,SAAU,CACjBG,EAAE2B,0B,EAsDN,MAAAC,GAEE,MAAMC,EAAsB,IAExBC,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,iBAAeC,MAAM,mBAAmBpC,KAAKgB,OAC5ChB,KAAKkB,uBACJiB,EAAA,iBAAehC,QAAQ,UAAUiC,MAAM,YACpCpC,KAAKkB,wBAIXlB,KAAKiB,aACJkB,EAAA,iBAAeC,MAAM,wBAAwBjC,QAAQ,WAClDH,KAAKiB,cAOhB,OACEkB,EAACE,EAAI,CACHD,MAAO,CACL,CAAC,2BAA4BpC,KAAKE,SAClC,CAAC,wBAAwBF,KAAKG,WAAYH,KAAKG,UAAYmC,YAG7DH,EAAA,aACEI,UAAS,KACTpC,QAAQ,WACRqC,QAASxC,KAAKI,YACdqC,KAAMnC,EAAcN,KAAKyC,MACzBC,SAAUpC,EAAcN,KAAK0C,UAC7BC,OAAQrC,EAAcN,KAAK2C,QAC3BC,IAAKtC,EAAcN,KAAK4C,KACxBC,eAAgB7C,KAAK6C,eACrBC,KAAM9C,KAAKG,UAAY,SAAW,mBAAqB,WAAU,gBAClD,GAAGH,KAAKE,WAAU,eAE/BF,KAAKG,UAAY,SACbH,KAAKC,QACH,OACA,QACFqC,UAAS,aAEHtC,KAAKc,uBAAsB,gBAErCR,EAAcN,KAAKO,oBACnBP,KAAKa,GAAGM,UAAUC,SAAS,kCACvB,OACA,OAGNe,EAAA,OAAKC,MAAM,gBACRW,EAAW/C,KAAKa,GAAI,SACnBsB,EAAA,QAAMC,MAAM,QACVD,EAAA,QAAMa,KAAK,UAGfb,EAACD,EAAmB,MACnBlC,KAAKG,UAAY,UAChBgC,EAAA,QACEC,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,SAAUpC,KAAKC,SACjB,cACW,OACZgD,UAAWC,IAGd5C,EAAcN,KAAKO,oBAClB4B,EAAA,QACEC,MAAO,CAAE,CAAC,gBAAiB,MAAM,cACrB,OACZa,UAAWE,M","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-eeb8d98a.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%}}@media (prefers-reduced-motion: reduce){.clear-button{transition:none}}';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,this.value,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:"f9ec3f2c47607e817cf0352546d0f72653b433ae",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:"fde0dc358fd80f81d23927eb18b6bd73e9694bcc",readonly:m,disabled:W},!x&&e("ic-input-label",{key:"3c2a138a07c5a637842bf0330a857cd8a4c05be5",for:t,label:a,helperText:l,required:r,disabled:W&&!m,readonly:m},e("slot",{key:"4e5d465c5f4486826f3a634a4dd5ed2ecf01b249",name:"helper-text",slot:"helper-text"})),e("ic-input-component-container",{key:"62ad9581a1280af102d990de7fcac4055f800bec",ref:t=>this.anchorEl=t,size:o,disabled:W,readonly:m,fullWidth:g},e("input",{key:"196cad9c551d68276d99af9a60bd07a141130bd9",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:"94889d1ffab13321ea522704aacd7ebf0e0c3d00",class:{"clear-button-container":true,"clear-button-visible":!!p&&!W&&I}},e("ic-button",{key:"d0a3c5b6288c249ba8be2a4bcbbd2a33f1a30025",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:"3965e828aba0dd8f88051ec717c7fafcb237a271",class:"divider"})),e("div",{key:"c143dbc227dce558f5f87e1e2f7e3a014b9d250c",class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()}},e("ic-button",{key:"98e79886a69703ab39c8d6f5f97c147fb406870d",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:"4b0377230ac437eda9f5674876e87a7a72a0779c",class:{"menu-container":true,fullwidth:g}},N&&this.anchorEl&&this.inputEl&&e("ic-menu",{key:"8be3e2accba616f85a408e8c82304433e98f7715",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:"09953fbff84f3e27a6522da365ef49e96b21fa62","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-99b20121.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icDataRowCss","IcDataRowStyle0","DataRow","constructor","hostRef","this","hasEndComponent","resizeObserver","deviceSize","DEVICE_SIZES","XL","size","theme","runResizeObserver","ResizeObserver","checkLabelAbove","observe","el","renderCellContent","cell","isValue","h","class","isSlotUsed","name","variant","listSize","value","label","disconnectedCallback","_a","disconnect","componentWillLoad","getCurrentDeviceSize","slotHasContent","componentDidLoad","checkResizeObserver","labelEndComponent","row","shadowRoot","querySelector","rowSize","clientWidth","S","M","querySelectorAll","forEach","child","setAttribute","render","Host","key","role"],"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: top;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n\n --ic-typography-color: var(--ic-data-list-text-cell);\n\n color: var(--ic-data-list-text-cell);\n}\n\n.label {\n width: var(--data-row-label-width, 12.5rem);\n min-width: 12.5rem;\n margin-right: var(--ic-space-md);\n\n --ic-typography-color: var(--ic-data-list-text-label);\n\n color: var(--ic-data-list-text-label);\n}\n\n.value {\n flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n width: fit-content;\n margin-left: 3.5rem;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-data-list-keyline-cell);\n}\n\n:host(.ic-data-row-small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 10rem;\n min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 8rem;\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n margin-left: 0;\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n private hasEndComponent: boolean = false;\n private resizeObserver: ResizeObserver | null = null;\n\n @Element() el: HTMLIcDataRowElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n /**\n * The label in the leftmost cell of the row.\n */\n @Prop() label?: string;\n\n /**\n * The size of the data row 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 middle (right if no end-component supplied) cell of the row.\n */\n @Prop() value?: string;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n this.checkLabelAbove();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (this.hasEndComponent) this.labelEndComponent();\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const row = this.el.shadowRoot?.querySelector(\".data\");\n if (row) {\n const rowSize = row?.clientWidth + 46;\n if (rowSize) {\n this.listSize =\n rowSize < DEVICE_SIZES.S\n ? \"xs\"\n : rowSize < DEVICE_SIZES.M\n ? \"m\"\n : \"xl\";\n }\n }\n }\n\n private renderCellContent = (cell: \"label\" | \"value\") => {\n const isValue = cell === \"value\";\n return (\n <div class={cell}>\n {isSlotUsed(this.el, cell) ? (\n <slot name={cell}></slot>\n ) : (\n <ic-typography\n variant={\n isValue\n ? \"body\"\n : this.listSize === \"xs\"\n ? \"label\"\n : \"subtitle-large\"\n }\n >\n {isValue ? this.value : this.label}\n </ic-typography>\n )}\n </div>\n );\n };\n\n private labelEndComponent(): void {\n this.el.shadowRoot\n ?.querySelectorAll(\"slot[name=end-component]\")\n .forEach((child) =>\n child.setAttribute(\"aria-label\", `for ${this.label} row`)\n );\n }\n\n render() {\n const {\n el,\n listSize,\n hasEndComponent,\n label,\n renderCellContent,\n size,\n theme,\n value,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-data-row-small\"]: size === \"small\",\n [\"breakpoint-medium\"]: listSize === \"m\",\n [\"breakpoint-xs\"]: listSize === \"xs\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n </div>\n {hasEndComponent && (\n <div class=\"end-component\">\n <slot name=\"end-component\"></slot>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"],"mappings":"iJAAA,MAAMA,EAAe,+sHACrB,MAAAC,EAAeD,E,MCmBFE,EAAO,MALpB,WAAAC,CAAAC,G,UAMUC,KAAAC,gBAA2B,MAC3BD,KAAAE,eAAwC,KAIvCF,KAAAG,WAAqBC,EAAaC,GAWnCL,KAAAM,KAAwB,SAKxBN,KAAAO,MAAsB,UAsBtBP,KAAAQ,kBAAoB,KAC1BR,KAAKE,eAAiB,IAAIO,gBAAe,KACvCT,KAAKU,iBAAiB,IAGxBV,KAAKE,eAAeS,QAAQX,KAAKY,GAAG,EAkB9BZ,KAAAa,kBAAqBC,IAC3B,MAAMC,EAAUD,IAAS,QACzB,OACEE,EAAA,OAAKC,MAAOH,GACTI,EAAWlB,KAAKY,GAAIE,GACnBE,EAAA,QAAMG,KAAML,IAEZE,EAAA,iBACEI,QACEL,EACI,OACAf,KAAKqB,WAAa,KAClB,QACA,kBAGLN,EAAUf,KAAKsB,MAAQtB,KAAKuB,OAG7B,C,CAzDV,oBAAAC,G,OACEC,EAAAzB,KAAKE,kBAAc,MAAAuB,SAAA,SAAAA,EAAEC,Y,CAGvB,iBAAAC,GACE3B,KAAKG,WAAayB,IAClB5B,KAAKC,gBAAkB4B,EAAe7B,KAAKY,GAAI,iBAC/CZ,KAAKU,iB,CAGP,gBAAAoB,GACEC,EAAoB/B,KAAKQ,mBACzB,GAAIR,KAAKC,gBAAiBD,KAAKgC,mB,CAWzB,eAAAtB,G,MACN,MAAMuB,GAAMR,EAAAzB,KAAKY,GAAGsB,cAAU,MAAAT,SAAA,SAAAA,EAAEU,cAAc,SAC9C,GAAIF,EAAK,CACP,MAAMG,GAAUH,IAAG,MAAHA,SAAG,SAAHA,EAAKI,aAAc,GACnC,GAAID,EAAS,CACXpC,KAAKqB,SACHe,EAAUhC,EAAakC,EACnB,KACAF,EAAUhC,EAAamC,EACvB,IACA,I,GA4BJ,iBAAAP,G,OACNP,EAAAzB,KAAKY,GAAGsB,cAAU,MAAAT,SAAA,SAAAA,EACde,iBAAiB,4BAClBC,SAASC,GACRA,EAAMC,aAAa,aAAc,OAAO3C,KAAKuB,c,CAInD,MAAAqB,GACE,MAAMhC,GACJA,EAAES,SACFA,EAAQpB,gBACRA,EAAesB,MACfA,EAAKV,kBACLA,EAAiBP,KACjBA,EAAIC,MACJA,EAAKe,MACLA,GACEtB,KAEJ,OACEgB,EAAC6B,EAAI,CAAAC,IAAA,2CACH7B,MAAO,CACL,CAAC,qBAAsBX,IAAS,QAChC,CAAC,qBAAsBe,IAAa,IACpC,CAAC,iBAAkBA,IAAa,KAChC,CAAC,YAAYd,KAAUA,IAAU,WAEnCwC,KAAK,YAEL/B,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,QACTD,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,eACPC,EAAWN,EAAI,UAAYW,IAAUV,EAAkB,UACvDK,EAAWN,EAAI,UAAYU,IAAUT,EAAkB,UAE1DZ,GACCe,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,iBACTD,EAAA,QAAA8B,IAAA,2CAAM3B,KAAK,oBAIjBH,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,Y","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icDataListCss","IcDataListStyle0","DataList","constructor","hostRef","this","size","theme","render","el","heading","Array","from","children","forEach","child","setAttribute","hasHeading","querySelector","h","Host","key","class","id","name","variant","divider"],"sources":["src/components/ic-data-list/ic-data-list.css?tag=ic-data-list&encapsulation=shadow","src/components/ic-data-list/ic-data-list.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --data-row-label-width: Width of the label column in the data list.\n */\n\n:host {\n display: block;\n}\n\n.heading {\n --ic-typography-color: var(--ic-data-list-text-heading);\n\n color: var(--ic-data-list-text-heading);\n}\n\n.rows {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n}\n\n:host(.ic-data-list-small) .rows {\n gap: var(--ic-space-xs);\n}\n\n.divider {\n margin-top: var(--ic-space-lg);\n margin-bottom: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-data-list-keyline-heading);\n}\n\n.divider-no-heading {\n margin-top: 0;\n}\n\n:host(.ic-data-list-small) .divider {\n margin-top: var(--ic-space-sm);\n margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n tag: \"ic-data-list\",\n styleUrl: \"ic-data-list.css\",\n shadow: true,\n})\nexport class DataList {\n @Element() el: HTMLIcDataListElement;\n\n /**\n * The title for the data list.\n */\n @Prop() heading?: string;\n\n /**\n * The size of the data list 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 render() {\n const { el, heading, size, theme } = this;\n\n if (size === \"small\") {\n Array.from(el.children).forEach((child) =>\n child.setAttribute(\"size\", \"small\")\n );\n }\n\n const hasHeading = heading || el.querySelector('[slot=\"heading\"]');\n\n return (\n <Host\n class={{\n \"ic-data-list-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"heading\" id=\"data-list-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class={{ divider: true, \"divider-no-heading\": !hasHeading }} />\n <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,27FACtB,MAAAC,EAAeD,E,MCUFE,EAAQ,MALrB,WAAAC,CAAAC,G,UAgBUC,KAAAC,KAAwB,SAKxBD,KAAAE,MAAsB,S,CAE9B,MAAAC,GACE,MAAMC,GAAEA,EAAEC,QAAEA,EAAOJ,KAAEA,EAAIC,MAAEA,GAAUF,KAErC,GAAIC,IAAS,QAAS,CACpBK,MAAMC,KAAKH,EAAGI,UAAUC,SAASC,GAC/BA,EAAMC,aAAa,OAAQ,U,CAI/B,MAAMC,EAAaP,GAAWD,EAAGS,cAAc,oBAE/C,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsBhB,IAAS,QAC/B,CAAC,YAAYC,KAAUA,IAAU,YAGnCY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,GAAG,qBACtBJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACTL,EAAA,iBAAAE,IAAA,2CAAeI,QAAQ,MAAMf,KAGjCS,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEI,QAAS,KAAM,sBAAuBT,KACpDE,EAAA,MAAAE,IAAA,6DAAoB,oBAAoBC,MAAM,QAC5CH,EAAA,QAAAE,IAAA,8C","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 d}from"./p-eeb8d98a.js";import"./p-6215e2ae.js";const l=":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}@media (prefers-reduced-motion: reduce){:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){transition:none}}";const r=l;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{d(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-d5fcd4f9.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\n@media (prefers-reduced-motion: reduce) {\n :host(.ic-breadcrumb-group-collapsed)\n ol\n ::slotted(ic-breadcrumb.visuallyhidden) {\n transition: none;\n }\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":[]}