@ukic/web-components 2.1.0-beta.12 → 2.1.0-beta.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (376) hide show
  1. package/dist/cjs/core.cjs.js +2 -2
  2. package/dist/cjs/ic-alert.cjs.entry.js +1 -1
  3. package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
  4. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
  5. package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
  6. package/dist/cjs/ic-button_3.cjs.entry.js +16 -5
  7. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  8. package/dist/cjs/ic-card.cjs.entry.js +2 -2
  9. package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-checkbox-group.cjs.entry.js +14 -16
  11. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-checkbox.cjs.entry.js +9 -3
  13. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  14. package/dist/cjs/ic-chip.cjs.entry.js +1 -1
  15. package/dist/cjs/ic-classification-banner.cjs.entry.js +1 -1
  16. package/dist/cjs/ic-data-entity.cjs.entry.js +1 -1
  17. package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
  18. package/dist/cjs/ic-divider.cjs.entry.js +1 -1
  19. package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
  20. package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
  21. package/dist/cjs/ic-footer.cjs.entry.js +1 -1
  22. package/dist/cjs/ic-hero.cjs.entry.js +1 -1
  23. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
  24. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +145 -64
  25. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  26. package/dist/cjs/ic-input-label_2.cjs.entry.js +1 -1
  27. package/dist/cjs/ic-link.cjs.entry.js +1 -1
  28. package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
  29. package/dist/cjs/ic-menu-item.cjs.entry.js +2 -2
  30. package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
  32. package/dist/cjs/ic-navigation-group.cjs.entry.js +1 -1
  33. package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
  34. package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
  35. package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
  36. package/dist/cjs/ic-pagination-item.cjs.entry.js +51 -0
  37. package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -0
  38. package/dist/cjs/ic-pagination.cjs.entry.js +206 -0
  39. package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -0
  40. package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
  41. package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
  42. package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
  43. package/dist/cjs/ic-radio-option.cjs.entry.js +1 -1
  44. package/dist/cjs/ic-search-bar.cjs.entry.js +79 -12
  45. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  46. package/dist/cjs/ic-section-container.cjs.entry.js +1 -1
  47. package/dist/cjs/ic-select.cjs.entry.js +152 -44
  48. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  49. package/dist/cjs/ic-side-navigation.cjs.entry.js +11 -3
  50. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  51. package/dist/cjs/ic-skeleton.cjs.entry.js +1 -1
  52. package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
  53. package/dist/cjs/ic-step.cjs.entry.js +1 -1
  54. package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
  55. package/dist/cjs/ic-switch.cjs.entry.js +1 -1
  56. package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
  57. package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
  58. package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
  59. package/dist/cjs/ic-tab.cjs.entry.js +1 -1
  60. package/dist/cjs/ic-text-field.cjs.entry.js +18 -7
  61. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  62. package/dist/cjs/ic-theme.cjs.entry.js +1 -1
  63. package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
  64. package/dist/cjs/ic-toast.cjs.entry.js +1 -1
  65. package/dist/cjs/ic-top-navigation.cjs.entry.js +3 -5
  66. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  67. package/dist/cjs/ic-typography.cjs.entry.js +1 -1
  68. package/dist/cjs/{index-f79a4e53.js → index-a62312a7.js} +11 -1
  69. package/dist/cjs/index-a62312a7.js.map +1 -0
  70. package/dist/cjs/loader.cjs.js +2 -2
  71. package/dist/cjs/types-3eb02246.js.map +1 -1
  72. package/dist/collection/assets/pagination-first-last.svg +3 -0
  73. package/dist/collection/assets/pagination-next-previous.svg +3 -0
  74. package/dist/collection/collection-manifest.json +2 -0
  75. package/dist/collection/components/ic-button/ic-button.css +5 -1
  76. package/dist/collection/components/ic-card/ic-card.css +3 -0
  77. package/dist/collection/components/ic-checkbox/ic-checkbox.css +4 -1
  78. package/dist/collection/components/ic-checkbox/ic-checkbox.js +8 -1
  79. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  80. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +14 -20
  81. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
  82. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.types.js.map +1 -1
  83. package/dist/collection/components/ic-menu/ic-menu.css +30 -1
  84. package/dist/collection/components/ic-menu/ic-menu.js +188 -63
  85. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  86. package/dist/collection/components/ic-menu-item/ic-menu-item.css +1 -6
  87. package/dist/collection/components/ic-pagination/ic-pagination.css +490 -0
  88. package/dist/collection/components/ic-pagination/ic-pagination.js +435 -0
  89. package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -0
  90. package/dist/collection/components/ic-pagination/ic-pagination.test.a11y.js +11 -0
  91. package/dist/collection/components/ic-pagination/ic-pagination.test.a11y.js.map +1 -0
  92. package/dist/collection/components/ic-pagination/ic-pagination.types.js +2 -0
  93. package/dist/collection/components/ic-pagination/ic-pagination.types.js.map +1 -0
  94. package/dist/collection/components/ic-pagination-item/ic-pagination-item.css +581 -0
  95. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +225 -0
  96. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -0
  97. package/dist/collection/components/ic-pagination-item/ic-pagination-item.types.js +2 -0
  98. package/dist/collection/components/ic-pagination-item/ic-pagination-item.types.js.map +1 -0
  99. package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +2 -1
  100. package/dist/collection/components/ic-search-bar/ic-search-bar.css +0 -4
  101. package/dist/collection/components/ic-search-bar/ic-search-bar.js +172 -11
  102. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  103. package/dist/collection/components/ic-select/ic-select.js +247 -44
  104. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  105. package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +36 -16
  106. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +9 -1
  107. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
  108. package/dist/collection/components/ic-text-field/ic-text-field.js +66 -12
  109. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  110. package/dist/collection/components/ic-tooltip/ic-tooltip.js +53 -4
  111. package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
  112. package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +9 -0
  113. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +1 -3
  114. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
  115. package/dist/collection/utils/types.js.map +1 -1
  116. package/dist/components/ic-button2.js +1 -1
  117. package/dist/components/ic-button2.js.map +1 -1
  118. package/dist/components/ic-card.js +1 -1
  119. package/dist/components/ic-card.js.map +1 -1
  120. package/dist/components/ic-checkbox-group.js +14 -17
  121. package/dist/components/ic-checkbox-group.js.map +1 -1
  122. package/dist/components/ic-checkbox.js +8 -2
  123. package/dist/components/ic-checkbox.js.map +1 -1
  124. package/dist/components/ic-menu-item2.js +1 -1
  125. package/dist/components/ic-menu-item2.js.map +1 -1
  126. package/dist/components/ic-menu2.js +164 -66
  127. package/dist/components/ic-menu2.js.map +1 -1
  128. package/dist/components/ic-pagination-item.d.ts +11 -0
  129. package/dist/components/ic-pagination-item.js +8 -0
  130. package/dist/components/ic-pagination-item.js.map +1 -0
  131. package/dist/components/ic-pagination-item2.js +77 -0
  132. package/dist/components/ic-pagination-item2.js.map +1 -0
  133. package/dist/components/ic-pagination.d.ts +11 -0
  134. package/dist/components/ic-pagination.js +266 -0
  135. package/dist/components/ic-pagination.js.map +1 -0
  136. package/dist/components/ic-popover-menu.js +1 -2
  137. package/dist/components/ic-popover-menu.js.map +1 -1
  138. package/dist/components/ic-search-bar.js +82 -12
  139. package/dist/components/ic-search-bar.js.map +1 -1
  140. package/dist/components/ic-select.js +157 -43
  141. package/dist/components/ic-select.js.map +1 -1
  142. package/dist/components/ic-side-navigation.js +10 -2
  143. package/dist/components/ic-side-navigation.js.map +1 -1
  144. package/dist/components/ic-text-field2.js +20 -8
  145. package/dist/components/ic-text-field2.js.map +1 -1
  146. package/dist/components/ic-tooltip2.js +1817 -8
  147. package/dist/components/ic-tooltip2.js.map +1 -1
  148. package/dist/components/ic-top-navigation.js +2 -4
  149. package/dist/components/ic-top-navigation.js.map +1 -1
  150. package/dist/components/index.d.ts +2 -0
  151. package/dist/components/index.js +2 -0
  152. package/dist/components/index.js.map +1 -1
  153. package/dist/components/types.js.map +1 -1
  154. package/dist/core/core.esm.js +1 -1
  155. package/dist/core/core.esm.js.map +1 -1
  156. package/dist/core/{p-0f0dfa16.entry.js → p-002a63e9.entry.js} +2 -2
  157. package/dist/core/{p-759c80a3.entry.js → p-0575a77f.entry.js} +2 -2
  158. package/dist/core/{p-3453aa9c.entry.js → p-0a41c3cb.entry.js} +2 -2
  159. package/dist/core/{p-b7fc1f35.entry.js → p-100dbcec.entry.js} +2 -2
  160. package/dist/core/{p-1bd4d07e.entry.js → p-14835d6f.entry.js} +2 -2
  161. package/dist/core/{p-28b2158b.entry.js → p-1eb0992b.entry.js} +2 -2
  162. package/dist/core/{p-62b3516e.entry.js → p-223a214f.entry.js} +2 -2
  163. package/dist/core/{p-dd71a986.entry.js → p-276f7ecb.entry.js} +2 -2
  164. package/dist/core/{p-3d84a743.entry.js → p-28bc3bf0.entry.js} +2 -2
  165. package/dist/core/{p-8ffa00c9.entry.js → p-312c10b0.entry.js} +2 -2
  166. package/dist/core/p-3845b769.entry.js +2 -0
  167. package/dist/core/p-3845b769.entry.js.map +1 -0
  168. package/dist/core/{p-cc62d065.entry.js → p-3a67718c.entry.js} +2 -2
  169. package/dist/core/p-3c23f963.entry.js +2 -0
  170. package/dist/core/p-3c23f963.entry.js.map +1 -0
  171. package/dist/core/{p-74a768bc.entry.js → p-3dc2ff7b.entry.js} +2 -2
  172. package/dist/core/p-3e5eb873.entry.js +2 -0
  173. package/dist/core/p-3e5eb873.entry.js.map +1 -0
  174. package/dist/core/{p-58ff516f.entry.js → p-3fb307e6.entry.js} +2 -2
  175. package/dist/core/{p-d2508752.entry.js → p-454b1ecd.entry.js} +2 -2
  176. package/dist/core/{p-7e309c50.entry.js → p-47b0ed42.entry.js} +2 -2
  177. package/dist/core/{p-68c84039.entry.js → p-4b87445b.entry.js} +2 -2
  178. package/dist/core/p-4c8fcfe6.entry.js +2 -0
  179. package/dist/core/p-4c8fcfe6.entry.js.map +1 -0
  180. package/dist/core/p-52fd3533.entry.js +2 -0
  181. package/dist/core/p-52fd3533.entry.js.map +1 -0
  182. package/dist/core/{p-0a463a65.entry.js → p-546b620e.entry.js} +2 -2
  183. package/dist/core/p-56fe91ad.entry.js +2 -0
  184. package/dist/core/p-56fe91ad.entry.js.map +1 -0
  185. package/dist/core/{p-5450cebf.js → p-589f6dd3.js} +3 -3
  186. package/dist/core/p-589f6dd3.js.map +1 -0
  187. package/dist/core/{p-dc4ba6a0.entry.js → p-5d077cf7.entry.js} +2 -2
  188. package/dist/core/{p-8c9cc4d5.entry.js → p-6a77992e.entry.js} +2 -2
  189. package/dist/core/{p-d27dbb63.entry.js → p-6b39f8b4.entry.js} +2 -2
  190. package/dist/core/p-6f57b13c.js.map +1 -1
  191. package/dist/core/p-80eff050.entry.js +2 -0
  192. package/dist/core/p-80eff050.entry.js.map +1 -0
  193. package/dist/core/p-864b46bf.entry.js +2 -0
  194. package/dist/core/p-864b46bf.entry.js.map +1 -0
  195. package/dist/core/{p-9e578e82.entry.js → p-8780890e.entry.js} +2 -2
  196. package/dist/core/{p-ff15c756.entry.js → p-895bda21.entry.js} +2 -2
  197. package/dist/core/{p-08535d97.entry.js → p-92c4fa7f.entry.js} +2 -2
  198. package/dist/core/{p-41459307.entry.js → p-9413d639.entry.js} +2 -2
  199. package/dist/core/{p-e17eea34.entry.js → p-a0f4e641.entry.js} +2 -2
  200. package/dist/core/{p-4d8392fe.entry.js → p-a33a04b2.entry.js} +2 -2
  201. package/dist/core/{p-65b94ddb.entry.js → p-a5bee11f.entry.js} +2 -2
  202. package/dist/core/{p-eeefddb5.entry.js → p-b61e76e2.entry.js} +2 -2
  203. package/dist/core/p-b61e76e2.entry.js.map +1 -0
  204. package/dist/core/p-c0813424.entry.js +2 -0
  205. package/dist/core/p-c0813424.entry.js.map +1 -0
  206. package/dist/core/{p-b5b03f86.entry.js → p-cb437317.entry.js} +2 -2
  207. package/dist/core/p-d5d9923a.entry.js +2 -0
  208. package/dist/core/p-d5d9923a.entry.js.map +1 -0
  209. package/dist/core/{p-f777679c.entry.js → p-db7131b6.entry.js} +2 -2
  210. package/dist/core/{p-6c9ce0ec.entry.js → p-dc0b9e80.entry.js} +2 -2
  211. package/dist/core/{p-1e0174dc.entry.js → p-de45134c.entry.js} +2 -2
  212. package/dist/core/{p-9daae2ae.entry.js → p-de891d3d.entry.js} +2 -2
  213. package/dist/core/p-e0f24ccd.entry.js +2 -0
  214. package/dist/core/p-e0f24ccd.entry.js.map +1 -0
  215. package/dist/core/{p-741b4ea3.entry.js → p-e384aaee.entry.js} +2 -2
  216. package/dist/core/{p-977af213.entry.js → p-e41e701a.entry.js} +2 -2
  217. package/dist/core/{p-deada16f.entry.js → p-e839e5dc.entry.js} +2 -2
  218. package/dist/core/{p-186ecccd.entry.js → p-ea526b54.entry.js} +2 -2
  219. package/dist/core/{p-eb7599cc.entry.js → p-ec8b228c.entry.js} +2 -2
  220. package/dist/core/{p-eb7599cc.entry.js.map → p-ec8b228c.entry.js.map} +1 -1
  221. package/dist/core/{p-4269584a.entry.js → p-f3e10149.entry.js} +2 -2
  222. package/dist/core/{p-ad2477d8.entry.js → p-fc7dce3d.entry.js} +2 -2
  223. package/dist/core/p-ff6583e6.entry.js +2 -0
  224. package/dist/core/p-ff6583e6.entry.js.map +1 -0
  225. package/dist/esm/core.js +2 -2
  226. package/dist/esm/ic-alert.entry.js +1 -1
  227. package/dist/esm/ic-back-to-top.entry.js +1 -1
  228. package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
  229. package/dist/esm/ic-breadcrumb.entry.js +1 -1
  230. package/dist/esm/ic-button_3.entry.js +16 -5
  231. package/dist/esm/ic-button_3.entry.js.map +1 -1
  232. package/dist/esm/ic-card.entry.js +2 -2
  233. package/dist/esm/ic-card.entry.js.map +1 -1
  234. package/dist/esm/ic-checkbox-group.entry.js +14 -16
  235. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  236. package/dist/esm/ic-checkbox.entry.js +9 -3
  237. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  238. package/dist/esm/ic-chip.entry.js +1 -1
  239. package/dist/esm/ic-classification-banner.entry.js +1 -1
  240. package/dist/esm/ic-data-entity.entry.js +1 -1
  241. package/dist/esm/ic-data-row.entry.js +1 -1
  242. package/dist/esm/ic-divider.entry.js +1 -1
  243. package/dist/esm/ic-footer-link-group.entry.js +1 -1
  244. package/dist/esm/ic-footer-link.entry.js +1 -1
  245. package/dist/esm/ic-footer.entry.js +1 -1
  246. package/dist/esm/ic-hero.entry.js +1 -1
  247. package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
  248. package/dist/esm/ic-input-component-container_3.entry.js +145 -64
  249. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  250. package/dist/esm/ic-input-label_2.entry.js +1 -1
  251. package/dist/esm/ic-link.entry.js +1 -1
  252. package/dist/esm/ic-menu-group.entry.js +1 -1
  253. package/dist/esm/ic-menu-item.entry.js +2 -2
  254. package/dist/esm/ic-menu-item.entry.js.map +1 -1
  255. package/dist/esm/ic-navigation-button.entry.js +1 -1
  256. package/dist/esm/ic-navigation-group.entry.js +1 -1
  257. package/dist/esm/ic-navigation-item.entry.js +1 -1
  258. package/dist/esm/ic-navigation-menu.entry.js +1 -1
  259. package/dist/esm/ic-page-header.entry.js +1 -1
  260. package/dist/esm/ic-pagination-item.entry.js +47 -0
  261. package/dist/esm/ic-pagination-item.entry.js.map +1 -0
  262. package/dist/esm/ic-pagination.entry.js +202 -0
  263. package/dist/esm/ic-pagination.entry.js.map +1 -0
  264. package/dist/esm/ic-popover-menu.entry.js +1 -1
  265. package/dist/esm/ic-popover-menu.entry.js.map +1 -1
  266. package/dist/esm/ic-radio-group.entry.js +1 -1
  267. package/dist/esm/ic-radio-option.entry.js +1 -1
  268. package/dist/esm/ic-search-bar.entry.js +79 -12
  269. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  270. package/dist/esm/ic-section-container.entry.js +1 -1
  271. package/dist/esm/ic-select.entry.js +152 -44
  272. package/dist/esm/ic-select.entry.js.map +1 -1
  273. package/dist/esm/ic-side-navigation.entry.js +11 -3
  274. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  275. package/dist/esm/ic-skeleton.entry.js +1 -1
  276. package/dist/esm/ic-status-tag.entry.js +1 -1
  277. package/dist/esm/ic-step.entry.js +1 -1
  278. package/dist/esm/ic-stepper.entry.js +1 -1
  279. package/dist/esm/ic-switch.entry.js +1 -1
  280. package/dist/esm/ic-tab-context.entry.js +1 -1
  281. package/dist/esm/ic-tab-group.entry.js +1 -1
  282. package/dist/esm/ic-tab-panel.entry.js +1 -1
  283. package/dist/esm/ic-tab.entry.js +1 -1
  284. package/dist/esm/ic-text-field.entry.js +18 -7
  285. package/dist/esm/ic-text-field.entry.js.map +1 -1
  286. package/dist/esm/ic-theme.entry.js +1 -1
  287. package/dist/esm/ic-toast-region.entry.js +1 -1
  288. package/dist/esm/ic-toast.entry.js +1 -1
  289. package/dist/esm/ic-top-navigation.entry.js +3 -5
  290. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  291. package/dist/esm/ic-typography.entry.js +1 -1
  292. package/dist/esm/{index-90721b3c.js → index-3b144b17.js} +11 -2
  293. package/dist/esm/index-3b144b17.js.map +1 -0
  294. package/dist/esm/loader.js +2 -2
  295. package/dist/esm/types-dd515332.js.map +1 -1
  296. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +1 -3
  297. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.types.d.ts +5 -0
  298. package/dist/types/components/ic-menu/ic-menu.d.ts +26 -7
  299. package/dist/types/components/ic-pagination/ic-pagination.d.ts +74 -0
  300. package/dist/types/components/ic-pagination/ic-pagination.test.a11y.d.ts +1 -0
  301. package/dist/types/components/ic-pagination/ic-pagination.types.d.ts +4 -0
  302. package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +46 -0
  303. package/dist/types/components/ic-pagination-item/ic-pagination-item.types.d.ts +1 -0
  304. package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +30 -1
  305. package/dist/types/components/ic-select/ic-select.d.ts +31 -1
  306. package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +2 -1
  307. package/dist/types/components/ic-text-field/ic-text-field.d.ts +11 -2
  308. package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +7 -0
  309. package/dist/types/components.d.ts +282 -19
  310. package/dist/types/utils/types.d.ts +3 -0
  311. package/hydrate/index.js +743 -159
  312. package/package.json +3 -3
  313. package/dist/cjs/index-f79a4e53.js.map +0 -1
  314. package/dist/components/popper.js +0 -1801
  315. package/dist/components/popper.js.map +0 -1
  316. package/dist/core/p-0d4ccf6a.entry.js +0 -2
  317. package/dist/core/p-0d4ccf6a.entry.js.map +0 -1
  318. package/dist/core/p-5450cebf.js.map +0 -1
  319. package/dist/core/p-6e1f5022.entry.js +0 -2
  320. package/dist/core/p-6e1f5022.entry.js.map +0 -1
  321. package/dist/core/p-7c2b09c8.entry.js +0 -2
  322. package/dist/core/p-7c2b09c8.entry.js.map +0 -1
  323. package/dist/core/p-8959dd7d.entry.js +0 -2
  324. package/dist/core/p-8959dd7d.entry.js.map +0 -1
  325. package/dist/core/p-90d6dbd6.entry.js +0 -2
  326. package/dist/core/p-90d6dbd6.entry.js.map +0 -1
  327. package/dist/core/p-a8e969ea.entry.js +0 -2
  328. package/dist/core/p-a8e969ea.entry.js.map +0 -1
  329. package/dist/core/p-bb505d2a.entry.js +0 -2
  330. package/dist/core/p-bb505d2a.entry.js.map +0 -1
  331. package/dist/core/p-ce96a494.entry.js +0 -2
  332. package/dist/core/p-ce96a494.entry.js.map +0 -1
  333. package/dist/core/p-e4390415.entry.js +0 -2
  334. package/dist/core/p-e4390415.entry.js.map +0 -1
  335. package/dist/core/p-eeefddb5.entry.js.map +0 -1
  336. package/dist/core/p-f0244b5a.entry.js +0 -2
  337. package/dist/core/p-f0244b5a.entry.js.map +0 -1
  338. package/dist/esm/index-90721b3c.js.map +0 -1
  339. /package/dist/core/{p-0f0dfa16.entry.js.map → p-002a63e9.entry.js.map} +0 -0
  340. /package/dist/core/{p-759c80a3.entry.js.map → p-0575a77f.entry.js.map} +0 -0
  341. /package/dist/core/{p-3453aa9c.entry.js.map → p-0a41c3cb.entry.js.map} +0 -0
  342. /package/dist/core/{p-b7fc1f35.entry.js.map → p-100dbcec.entry.js.map} +0 -0
  343. /package/dist/core/{p-1bd4d07e.entry.js.map → p-14835d6f.entry.js.map} +0 -0
  344. /package/dist/core/{p-28b2158b.entry.js.map → p-1eb0992b.entry.js.map} +0 -0
  345. /package/dist/core/{p-62b3516e.entry.js.map → p-223a214f.entry.js.map} +0 -0
  346. /package/dist/core/{p-dd71a986.entry.js.map → p-276f7ecb.entry.js.map} +0 -0
  347. /package/dist/core/{p-3d84a743.entry.js.map → p-28bc3bf0.entry.js.map} +0 -0
  348. /package/dist/core/{p-8ffa00c9.entry.js.map → p-312c10b0.entry.js.map} +0 -0
  349. /package/dist/core/{p-cc62d065.entry.js.map → p-3a67718c.entry.js.map} +0 -0
  350. /package/dist/core/{p-74a768bc.entry.js.map → p-3dc2ff7b.entry.js.map} +0 -0
  351. /package/dist/core/{p-58ff516f.entry.js.map → p-3fb307e6.entry.js.map} +0 -0
  352. /package/dist/core/{p-d2508752.entry.js.map → p-454b1ecd.entry.js.map} +0 -0
  353. /package/dist/core/{p-7e309c50.entry.js.map → p-47b0ed42.entry.js.map} +0 -0
  354. /package/dist/core/{p-68c84039.entry.js.map → p-4b87445b.entry.js.map} +0 -0
  355. /package/dist/core/{p-0a463a65.entry.js.map → p-546b620e.entry.js.map} +0 -0
  356. /package/dist/core/{p-dc4ba6a0.entry.js.map → p-5d077cf7.entry.js.map} +0 -0
  357. /package/dist/core/{p-8c9cc4d5.entry.js.map → p-6a77992e.entry.js.map} +0 -0
  358. /package/dist/core/{p-d27dbb63.entry.js.map → p-6b39f8b4.entry.js.map} +0 -0
  359. /package/dist/core/{p-9e578e82.entry.js.map → p-8780890e.entry.js.map} +0 -0
  360. /package/dist/core/{p-ff15c756.entry.js.map → p-895bda21.entry.js.map} +0 -0
  361. /package/dist/core/{p-08535d97.entry.js.map → p-92c4fa7f.entry.js.map} +0 -0
  362. /package/dist/core/{p-41459307.entry.js.map → p-9413d639.entry.js.map} +0 -0
  363. /package/dist/core/{p-e17eea34.entry.js.map → p-a0f4e641.entry.js.map} +0 -0
  364. /package/dist/core/{p-4d8392fe.entry.js.map → p-a33a04b2.entry.js.map} +0 -0
  365. /package/dist/core/{p-65b94ddb.entry.js.map → p-a5bee11f.entry.js.map} +0 -0
  366. /package/dist/core/{p-b5b03f86.entry.js.map → p-cb437317.entry.js.map} +0 -0
  367. /package/dist/core/{p-f777679c.entry.js.map → p-db7131b6.entry.js.map} +0 -0
  368. /package/dist/core/{p-6c9ce0ec.entry.js.map → p-dc0b9e80.entry.js.map} +0 -0
  369. /package/dist/core/{p-1e0174dc.entry.js.map → p-de45134c.entry.js.map} +0 -0
  370. /package/dist/core/{p-9daae2ae.entry.js.map → p-de891d3d.entry.js.map} +0 -0
  371. /package/dist/core/{p-741b4ea3.entry.js.map → p-e384aaee.entry.js.map} +0 -0
  372. /package/dist/core/{p-977af213.entry.js.map → p-e41e701a.entry.js.map} +0 -0
  373. /package/dist/core/{p-deada16f.entry.js.map → p-e839e5dc.entry.js.map} +0 -0
  374. /package/dist/core/{p-186ecccd.entry.js.map → p-ea526b54.entry.js.map} +0 -0
  375. /package/dist/core/{p-4269584a.entry.js.map → p-f3e10149.entry.js.map} +0 -0
  376. /package/dist/core/{p-ad2477d8.entry.js.map → p-fc7dce3d.entry.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"names":["icTextFieldCss","inputIds","TextField","this","inheritedAttributes","showLeftIcon","hasLeftIconSlot","onInput","ev","value","target","icInput","emit","onBlur","icBlur","onFocus","icFocus","isTextArea","rows","hasStatus","status","disabled","showStatusText","IcInformationStatus","Success","validationInline","handleFormReset","initialValue","undefined","inputId","[object Object]","icChange","debounceEvent","debounce","newValue","inputEl","numChars","length","type","Number","min","minValueUnattained","max","maxValueExceeded","maxLength","maxLengthExceeded","focus","icKeydown","event","cancelBubble","iconEl","el","querySelector","debounceChanged","watchValueHandler","inheritAttributes","IC_INHERITED_ARIA","readonly","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","removeFormResetListener","name","required","small","placeholder","helperText","resize","validationStatus","validationText","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","placeholderText","currentStatus","Error","currentValidationText","maxNumChars","messageAriaLive","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","invalid","disabledText","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","aria-label","aria-describedby","aria-invalid","aria-activedescendant","ariaActiveDescendant","aria-expanded","ariaExpanded","aria-owns","ariaOwns","autocomplete","autocapitalize","autoFocus","role","isSlotUsed","isEmptyString","message","ariaLiveMode","variant","aria-live","hidden"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field\n */\n display: block;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n::placeholder {\n color: var(--ic-color-tertiary-text);\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-color-primary-text);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n resize: none;\n}\n\n.maxlengthtext {\n color: var(--ic-color-secondary-text);\n}\n\n.error {\n color: var(--ic-status-error);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n input.readonly,\n textarea.readonly {\n color: canvastext;\n }\n\n .has-value ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLIcTextFieldElement;\n\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * If `true`, the small styling will be applied to the text field.\n */\n @Prop({ reflect: true }) small: boolean = false;\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /**\n * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n */\n @Prop() min: number = undefined;\n\n /**\n * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n */\n @Prop() max: number = undefined;\n\n /**\n * The maximum number of characters that can be entered in the field.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n /**\n * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n @State() numChars: number = 0;\n @State() maxLengthExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.numChars = newValue.length;\n\n if (this.type === \"number\") {\n if (newValue && Number(newValue) < this.min) {\n this.minValueUnattained = true;\n } else {\n this.minValueUnattained = false;\n }\n if (Number(newValue) > this.max) {\n this.maxValueExceeded = true;\n } else {\n this.maxValueExceeded = false;\n }\n }\n\n if (this.maxLength > 0) {\n if (newValue.length > this.maxLength) {\n this.maxLengthExceeded = true;\n } else {\n this.maxLengthExceeded = false;\n }\n }\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.focus();\n }\n }\n\n //stop keydown event bubbling up to storybook\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n ev.cancelBubble = true;\n }\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icBlur.emit({ value: value });\n };\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n private onFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icFocus.emit({ value: value });\n };\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n private isTextArea = (): boolean => {\n return this.rows > 1;\n };\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n return status !== \"\" && !this.disabled;\n };\n\n private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n if (\n this.hasStatus(status) &&\n !(status == IcInformationStatus.Success && this.validationInline)\n ) {\n return true;\n }\n return false;\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n \"aria-autocomplete\",\n \"aria-haspopup\",\n ]);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const placeholderText = disabled ? \"\" : placeholder;\n\n const currentStatus =\n maxLengthExceeded || maxValueExceeded || minValueUnattained\n ? IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n\n const messageAriaLive =\n maxLengthExceeded ||\n maxValueExceeded ||\n minValueUnattained ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText = this.showStatusText(currentStatus);\n const multiline = this.isTextArea();\n const hiddenCharCountDescId =\n maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n const describedBy = (\n hiddenCharCountDescId +\n \" \" +\n getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n ).trim();\n\n if (this.showLeftIcon) {\n if (!readonly && disabledMode) {\n this.showLeftIcon = false;\n }\n }\n\n const invalid =\n currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n const disabledText = disabledMode && !readonly;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n small={small}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {this.showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline && (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholderText}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n {...this.inheritedAttributes}\n ></input>\n )}\n {multiline && (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholderText}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {(!isEmptyString(validationStatus) ||\n !isEmptyString(validationText) ||\n maxNumChars > 0 ||\n maxValueExceeded ||\n minValueUnattained) && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline)\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import{r as i,h as t,H as a,g as e}from"./p-5450cebf.js";import{c as o}from"./p-44512ebe.js";import{C as n}from"./p-06321d19.js";import{z as s,i as r,D as l,g as d,k as p,c,a as h,l as v}from"./p-3dea2867.js";import{I as g}from"./p-6f57b13c.js";const m=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n <path d="M0 0h24v24H0V0z" fill="none" />\n <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n <title>menu icon</title>\n</svg>\n`;const b=':host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:3.5rem;--sm-side-navigation-collapsed-labels-width:6rem;--sm-side-navigation-expand-transition-duration:var(\n --ic-transition-duration-slow\n );--side-navigation-width:20rem;z-index:var(--ic-z-index-side-navigation)}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary);z-index:var(--ic-z-index-side-navigation)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);bottom:0;left:0;z-index:2;box-shadow:-0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.inline) .bottom-wrapper{position:sticky}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}slot[name="app-title"]::slotted(a),slot[name="app-icon"]::slotted(a){color:var(--ic-theme-text);outline:none;text-decoration:none}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:6.5rem}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:6.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:5rem;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:6.25rem}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:6rem}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:2.75rem;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:3.5rem;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:0.25rem}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:3.5rem;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:sticky}:host(.anchor-right) .top-bar{box-shadow:0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 0.281rem) 0 calc(-1 * 0.281rem) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center;display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:0.25rem;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:1rem}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-hc-border)}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const u=class{constructor(a){i(this,a);this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.emitSideNavigationExpanded=i=>{const t=new CustomEvent("sideNavExpanded",{detail:{sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile}});this.el.dispatchEvent(t)};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const e=t.querySelector(".bottom-wrapper");if(i){e.classList.add("menu-visibility-visible");a.classList.add("menu-visibility-visible")}else{setTimeout((()=>{a.classList.remove("menu-visibility-visible");e.classList.remove("menu-visibility-visible")}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{const t=this.el.shadowRoot.querySelector("#menu-button").shadowRoot.querySelector("button");if(i){t.setAttribute("aria-expanded","true");t.setAttribute("aria-label","Close navigation menu")}else{t.setAttribute("aria-expanded","false");t.setAttribute("aria-label","Open navigation menu")}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=()=>{this.menuExpanded=!this.menuExpanded;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded()}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=r(t,"navigation-item");if(a){const a=t.querySelector("[slot='navigation-item']");const e=document.createElement("div");const o=a.querySelector("svg");const n=t.textContent.trim();const s=document.createElement("ic-typography");s.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.className="icon-container";e.append(o);a.textContent="";s.textContent=n;a.append(e);a.append(s);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,s)}else{this.styleSlottedIconLabels(i,s)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.animateCollapsedIconLabels=()=>{const i=this.el.shadowRoot.querySelector(".primary-navigation");const t=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");if(i){i.classList.remove("collapsed-icon-labels-end");i.classList.add("collapsed-icon-labels-start")}if(t){t.classList.remove("collapsed-icon-labels-end");t.classList.add("collapsed-icon-labels-start")}this.el.addEventListener("transitionend",(()=>{if(i){i.classList.remove("collapsed-icon-labels-start");i.classList.add("collapsed-icon-labels-end")}if(t){t.classList.remove("collapsed-icon-labels-start");t.classList.add("collapsed-icon-labels-end")}}))};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].querySelector("a");const a=i[0].querySelector("svg");const e={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(e).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll("ic-navigation-item"));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,o;const n=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth)||((o=t.querySelector("ic-typography.ic-typography-label"))===null||o===void 0?void 0:o.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.setProperty("padding-top",i)};this.setParentPaddingLeft=i=>{this.el.parentElement.style.setProperty("padding-left",i)};this.resizeObserver=null;this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;if(i===l.S){if(!this.disableAutoParentStyling){const i=this.el.shadowRoot.querySelector(".top-bar").scrollHeight;this.setParentPaddingTop(`${i}px`);this.setParentPaddingLeft("0");if(this.inline){this.el.parentElement.style.setProperty("height",`calc(100% - ${i}px)`)}}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:true})}else{if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.el.parentElement.style.setProperty("height","100%")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:false})}if(i>l.L){if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}}else if(i>l.S&&i<=l.L&&!this.static&&!this.disableAutoParentStyling){if(this.collapsedIconLabels){this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)")}else{this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))")}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=d();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:a,menuOpen:e,href:n,isAppNameSubtitleVariant:s,appTitle:l})=>{const d=this.appTitle!==""&&this.appTitle!==undefined;const p=r(this.el,"app-title")?"div":"a";const c=p=="a"&&{href:n};return t("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&t("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},t("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"small","full-width":"true",appearance:a,onClick:this.toggleMenu,"aria-owns":"side-navigation","aria-haspopup":"true","aria-expanded":"false"},t("span",{class:"mobile-top-bar-menu-icon",slot:"icon",innerHTML:e?o:m}),e?"Close":"Menu"),t("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),t("div",{class:"app-title-wrapper"},(d||r(this.el,"app-title"))&&t(p,Object.assign({},c,{class:"title-link"}),t("div",{class:"app-icon-container","aria-hidden":"true"},t("slot",{name:"app-icon"})),t("ic-typography",{variant:s?"subtitle-small":"h3"},r(this.el,"app-title")?t("slot",{name:"app-title"}):l))))};this.appTitle=undefined;this.status=undefined;this.version=undefined;this.expanded=false;this.href="/";this.static=false;this.collapsedIconLabels=false;this.inline=false;this.disableAutoParentStyling=false;this.foregroundColor=p();this.menuOpen=false;this.menuExpanded=false;this.deviceSize=l.XL;this.deviceSizeAppTitle=l.S;this.hasSecondaryNavigation=false}themeChangeHandler(i){const t=i.detail;this.foregroundColor=t.mode}componentWillLoad(){if(this.expanded){this.setMenuExpanded(true)}else{this.setMenuExpanded(false)}if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=r(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===l.S});c(this.runResizeObserver);this.styleSlottedCollapsedIconLabel();this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);!r(this.el,"app-title")&&h([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{appTitle:i,menuOpen:e,foregroundColor:o,menuExpanded:s,href:d,status:p,version:c,collapsedIconLabels:h,inline:m}=this;const b=this.deviceSize===l.S;const u=this.deviceSize===l.M;const x=this.deviceSize>=l.L;const f=this.deviceSizeAppTitle===l.S;const y=u||x&&!this.static;const w={isSDevice:b,foregroundColor:o,menuOpen:e,href:d,isAppNameSubtitleVariant:f,appTitle:i};return t(a,{class:{"xs-menu-open":e&&b,"xs-menu-close":!e&&b,"sm-collapsed":!b&&!s,"sm-expanded":!b&&s,[g.Dark]:o===g.Dark,["collapsed-labels"]:!b&&!s&&h,["static"]:this.static,["inline"]:m}},b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation",id:"side-navigation"},!b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation-inner"},r(this.el,"primary-navigation")&&t("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),t("ul",{class:"navigation-list"},t("slot",{name:"primary-navigation"})))),t("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:v()}},r(this.el,"secondary-navigation")&&t("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),t("ul",{class:"navigation-list"},t("slot",{name:"secondary-navigation"}))),t("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&t("ic-divider",null),y&&t("button",{class:"menu-expand-button",innerHTML:n,onClick:this.toggleMenuExpanded,"aria-label":`${s?"Collapse":"Expand"} side navigation`}),t("div",{class:"app-status-wrapper"},p!==""&&t("div",{class:{["app-status"]:true}},t("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},p)),c!==""&&t("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}};u.style=b;export{u as ic_side_navigation};
2
- //# sourceMappingURL=p-8959dd7d.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","emitSideNavigationExpanded","objDetails","event","CustomEvent","detail","sideNavExpanded","sideNavMobile","el","dispatchEvent","toggleMenu","menuOpen","setMobileMenuAriaAttributes","setToggleMenuFlyoutMenuVisibility","sideNav","shadowRoot","querySelector","sideNavInner","bottomWrapper","classList","add","setTimeout","remove","nativeButton","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","arrangeSlottedNavigationItem","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","navItems","querySelectorAll","forEach","navItem","hasUsedSlot","isSlotUsed","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","className","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","style","marginTop","whiteSpace","overflow","textOverflow","opacity","visibility","transition","primaryNavigationWrapper","secondaryNavigationWrapper","addEventListener","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","expanded","setParentPaddingTop","value","parentElement","setProperty","setParentPaddingLeft","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","S","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","isAppNameSubtitleVariant","hasTitle","undefined","Component","attrs","h","class","top-bar","[object Object]","aria-labelledby","aria-hidden","aria-label","id","variant","size","full-width","appearance","onClick","aria-owns","aria-haspopup","aria-expanded","slot","innerHTML","closeIcon","menuIcon","assign","name","getThemeForegroundColor","XL","ev","theme","mode","hasSecondaryNavigation","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnect","status","version","isMdDevice","M","isLgDevice","displayExpandBtn","topBarProps","Host","xs-menu-open","xs-menu-close","sm-collapsed","sm-expanded","IcThemeForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"mappings":"2fAAA,MAAMA,EAAsB,+oWC0CfC,EAAc,+BA+CjBC,KAAAC,mBACNC,SAASC,EAAe,mCAAqC,EAQvDH,KAAAI,2BAA8BC,IAIpC,MAAMC,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CC,OAAQ,CACNC,gBAAiBJ,EAAWI,gBAC5BC,cAAeL,EAAWK,iBAG9BV,KAAKW,GAAGC,cAAcN,IAGhBN,KAAAa,WAAa,KACnBb,KAAKc,UAAYd,KAAKc,SACtBd,KAAKe,4BAA4Bf,KAAKc,UAEtCd,KAAKgB,kCAAkChB,KAAKc,UAE5Cd,KAAKI,2BAA2B,CAC9BK,gBAAiBT,KAAKc,SACtBJ,cAAe,QAIXV,KAAAgB,kCAAqCF,IAC3C,MAAMG,EAAUjB,KAAKW,GAAGO,WAAWC,cACjC,oBAEF,MAAMC,EAAeH,EAAQE,cAC3B,0BAEF,MAAME,EAAgBJ,EAAQE,cAC5B,mBAGF,GAAIL,EAAU,CACZO,EAAcC,UAAUC,IAAI,2BAC5BH,EAAaE,UAAUC,IAAI,+BACtB,CACLC,YAAW,KACTJ,EAAaE,UAAUG,OAAO,2BAC9BJ,EAAcC,UAAUG,OAAO,6BAC9BzB,KAAKC,sBAIJD,KAAAe,4BAA+BD,IACrC,MAAMY,EAAe1B,KAAKW,GAAGO,WAC1BC,cAAc,gBACdD,WAAWC,cAAc,UAE5B,GAAIL,EAAU,CACZY,EAAaC,aAAa,gBAAiB,QAC3CD,EAAaC,aAAa,aAAc,6BACnC,CACLD,EAAaC,aAAa,gBAAiB,SAC3CD,EAAaC,aAAa,aAAc,0BAIpC3B,KAAA4B,oCAAsC,KAC5C,MAAMC,EAAW7B,KAAKW,GAAGO,WAAWC,cAClC,6BAGFU,EAASP,UAAUC,IAAI,yBAEvBC,YAAW,KACTK,EAASP,UAAUG,OAAO,2BACzBzB,KAAKC,qBAGFD,KAAA8B,mBAAqB,KAC3B9B,KAAK+B,cAAgB/B,KAAK+B,aAE1B,GAAI/B,KAAK+B,aAAc,CACrB/B,KAAK4B,sCAGP5B,KAAKgC,6BAA6BhC,KAAK+B,cAEvC/B,KAAKiC,oCAAoCjC,KAAK+B,cAE9C,GAAI/B,KAAKkC,oBAAqB,CAC5BlC,KAAKmC,6BAGPnC,KAAKI,2BAA2B,CAAEK,gBAAiBT,KAAK+B,gBASlD/B,KAAAgC,6BAAgCD,IACtC,MAAMK,EAAWpC,KAAKW,GAAG0B,iBAAiB,sBAE1CD,EAASE,SAASC,IAChB,MAAMC,EAAcC,EAAWF,EAAS,mBAExC,GAAIC,EAAa,CACf,MAAME,EAAcH,EAAQpB,cAAc,4BAC1C,MAAMwB,EAAcC,SAASC,cAAc,OAC3C,MAAMC,EAAOJ,EAAYvB,cAAc,OACvC,MAAM4B,EAAQR,EAAQS,YAAYC,OAClC,MAAMC,EAAeN,SAASC,cAAc,iBAC5CK,EAAa5B,UAAUC,IACrB,sBACA,WACA,yCAGFoB,EAAYQ,UAAY,iBACxBR,EAAYS,OAAON,GAEnBJ,EAAYM,YAAc,GAE1BE,EAAaF,YAAcD,EAE3BL,EAAYU,OAAOT,GACnBD,EAAYU,OAAOF,GAEnB,GAAIlD,KAAKkC,oBAAqB,CAC5BlC,KAAKqD,gCAAgCtB,EAAcmB,OAC9C,CACLlD,KAAKsD,uBAAuBvB,EAAcmB,SAM1ClD,KAAAqD,gCAAkC,CACxCtB,EACAmB,KAEA,GAAInB,EAAc,CAChBmB,EAAaK,MAAMC,UAAY,IAC/BN,EAAaK,MAAME,WAAa,SAChCP,EAAaK,MAAMG,SAAW,SAC9BR,EAAaK,MAAMI,aAAe,eAC7B,CACLT,EAAaK,MAAMC,UAAY,OAC/BN,EAAaK,MAAME,WAAa,SAChCP,EAAaK,MAAMG,SAAW,SAC9BR,EAAaK,MAAMI,aAAe,aAI9B3D,KAAAsD,uBAAyB,CAC/BvB,EACAmB,KAEA,GAAInB,EAAc,CAChBmB,EAAaK,MAAMK,QAAU,IAC7BV,EAAaK,MAAMM,WAAa,UAChCX,EAAaK,MAAMO,WACjB,8DACG,CACLZ,EAAaK,MAAMK,QAAU,IAC7BV,EAAaK,MAAMM,WAAa,SAChCX,EAAaK,MAAMO,WACjB,4DAIE9D,KAAAmC,2BAA6B,KACnC,MAAM4B,EAA2B/D,KAAKW,GAAGO,WAAWC,cAClD,uBAEF,MAAM6C,EAA6BhE,KAAKW,GAAGO,WAAWC,cACpD,2CAGF,GAAI4C,EAA0B,CAC5BA,EAAyBzC,UAAUG,OAAO,6BAC1CsC,EAAyBzC,UAAUC,IAAI,+BAGzC,GAAIyC,EAA4B,CAC9BA,EAA2B1C,UAAUG,OAAO,6BAC5CuC,EAA2B1C,UAAUC,IAAI,+BAG3CvB,KAAKW,GAAGsD,iBAAiB,iBAAiB,KACxC,GAAIF,EAA0B,CAC5BA,EAAyBzC,UAAUG,OACjC,+BAEFsC,EAAyBzC,UAAUC,IAAI,6BAGzC,GAAIyC,EAA4B,CAC9BA,EAA2B1C,UAAUG,OACnC,+BAEFuC,EAA2B1C,UAAUC,IAAI,kCAKvCvB,KAAAkE,iBACN9B,IAEA,MAAM+B,EACH/B,EAAS,GAAGlB,YACXkB,EAAS,GAAGlB,WAAWC,cAAc,iBACvCiB,EAAS,GAAGjB,cAAc,KAC5B,MAAMiD,EAAahC,EAAS,GAAGjB,cAAc,OAE7C,MAAMkD,EAAY,CAChBC,IAAKC,OAAOC,iBAAiBL,GAAaG,IAC1CG,UAAWF,OAAOC,iBAAiBJ,GAAYM,MAC/CC,YAAaJ,OAAOC,iBAAiBL,GAAaQ,aAGpD,OAAOC,OAAOC,OAAOR,GAAWS,QAAO,CAACC,EAAMC,IACpCD,GAAQ7E,SAAS8E,IACxB,IAGGhF,KAAAiC,oCAAuCF,IAC7C,IAAIkD,EAEJ,GAAIlD,EAAc,CAChBkD,EAAQzD,YAAW,KACjB,MAAM0D,EAAelF,KAAKW,GAAGwE,YAE7B,MAAMC,EAAiDC,MAAMC,KAC3DtF,KAAKW,GAAG0B,iBAAiB,uBAG3B,MAAMkD,EAAmBH,EAAgBI,OACrCxF,KAAKkE,iBAAiBkB,GACtB,EAEJA,EAAgB9C,SACbmD,YACC,MAAMC,IACJC,EACEF,EAAevE,YACfuE,EAAevE,WAAWC,cACxB,yDAEH,MAAAwE,SAAA,OAAA,EAAAA,EAAEC,gBACHC,EAAAJ,EAAetE,cAAc,wCAAoC,MAAA0E,SAAA,OAAA,EAAAA,EAC7DD,aAEN,GAAIF,EAA0BR,EAAeK,EAAkB,CAC7DE,EAAe9D,aAAa,6BAA8B,cAI/D3B,KAAKC,wBACH,CACL6F,aAAab,GAEb,MAAMG,EAAiDC,MAAMC,KAC3DtF,KAAKW,GAAG0B,iBAAiB,uBAE3B+C,EAAgB9C,SAASmD,IACvBA,EAAe9D,aAAa,6BAA8B,cAKxD3B,KAAA+F,gBAAmBC,IACzBhG,KAAK+B,aAAeiE,GAQdhG,KAAAiG,oBAAuBC,IAC7BlG,KAAKW,GAAGwF,cAAc5C,MAAM6C,YAAY,cAAeF,IAGjDlG,KAAAqG,qBAAwBH,IAC9BlG,KAAKW,GAAGwF,cAAc5C,MAAM6C,YAAY,eAAgBF,IAGlDlG,KAAAsG,eAAiC,KAEjCtG,KAAAuG,uBAA0BC,IAChC,GAAIA,IAAaxG,KAAKyG,WAAY,CAChCzG,KAAKyG,WAAaD,EAElB,GAAIA,IAAaE,EAAaC,EAAG,CAC/B,IAAK3G,KAAK4G,yBAA0B,CAClC,MAAMC,EACJ7G,KAAKW,GAAGO,WAAWC,cAAc,YAAY2F,aAC/C9G,KAAKiG,oBAAoB,GAAGY,OAC5B7G,KAAKqG,qBAAqB,KAE1B,GAAIrG,KAAK+G,OAAQ,CACf/G,KAAKW,GAAGwF,cAAc5C,MAAM6C,YAC1B,SACA,eAAeS,SAIrB7G,KAAKI,2BAA2B,CAC9BK,gBAAiBT,KAAK+B,aACtBrB,cAAe,WAEZ,CACL,IAAKV,KAAK4G,yBAA0B,CAClC5G,KAAKiG,oBAAoB,KACzBjG,KAAKW,GAAGwF,cAAc5C,MAAM6C,YAAY,SAAU,QAEpDpG,KAAKI,2BAA2B,CAC9BK,gBAAiBT,KAAK+B,aACtBrB,cAAe,QAInB,GAAI8F,EAAWE,EAAaM,EAAG,CAC7B,IAAKhH,KAAK4G,yBAA0B,CAClC5G,KAAKiG,oBAAoB,KACzBjG,KAAKqG,qBAAqB,WAEvB,GACLG,EAAWE,EAAaC,GACxBH,GAAYE,EAAaM,IACxBhH,KAAKiH,SACLjH,KAAK4G,yBACN,CACA,GAAI5G,KAAKkC,oBAAqB,CAC5BlC,KAAKqG,qBAAqB,qCACrB,CACLrG,KAAKqG,qBACH,sDAOFrG,KAAAkH,kBAAoB,KAC1BlH,KAAKsG,eAAiB,IAAIa,gBAAe,KACvC,MAAMX,EAAWY,IACjBpH,KAAKqH,mBAAqBb,EAC1BxG,KAAKuG,uBAAuBC,MAG9BxG,KAAKsG,eAAegB,QAAQ1E,SAAS2E,KAAM,CAAEC,IAAK,iBAG5CxH,KAAAyH,uBAAyB,KAC/B,MAAMrC,EAAiDC,MAAMC,KAC3DtF,KAAKW,GAAG0B,iBAAiB,uBAE3B+C,EAAgB9C,SAASmD,IACvBA,EAAe9D,aAAa,uBAAwB,YAIhD3B,KAAA0H,+BAAiC,KACvC,MAAMC,EACJtC,MAAMC,KACJtF,KAAKW,GAAG0B,iBAAiB,2CAG7BsF,EAAgCrF,SAASY,YACvC,IACE2C,GAAAF,EAAAzC,IAAY,MAAZA,SAAY,OAAA,EAAZA,EAAciD,iBAAa,MAAAR,SAAA,OAAA,EAAAA,EAAEQ,iBAAa,MAAAN,SAAA,OAAA,EAAAA,EAAEvE,UAAUsG,SACpD,iDAEF,CACA1E,EAAaK,MAAME,WAAa,SAChCP,EAAaK,MAAMG,SAAW,SAC9BR,EAAaK,MAAMI,aAAe,WAClCT,EAAaK,MAAMC,UAAY,YAK7BxD,KAAA6H,aAAe,EACrBC,UAAAA,EACAC,gBAAAA,EACAjH,SAAAA,EACAkH,KAAAA,EACAC,yBAAAA,EACApG,SAAAA,MAEA,MAAMqG,EAAWlI,KAAK6B,WAAa,IAAM7B,KAAK6B,WAAasG,UAE3D,MAAMC,EAAY3F,EAAWzC,KAAKW,GAAI,aAAe,MAAQ,IAE7D,MAAM0H,EAAQD,GAAa,KAAO,CAChCJ,KAAMA,GAGR,OACEM,EAAA,MAAA,CACEC,MAAO,CACLC,UAAW,KACXC,CAACzI,KAAK+H,iBAAkB,OAGzBD,GACCQ,EAAA,MAAA,CAAAI,kBACkB,yCAAwCC,cAC5C,SAEZL,EAAA,YAAA,CAAAM,aACa,uBACXL,MAAM,cACNM,GAAG,cACHC,QAAQ,YACRC,KAAK,QAAOC,aACD,OACXC,WAAYlB,EACZmB,QAASlJ,KAAKa,WAAUsI,YACd,kBAAiBC,gBACb,OAAMC,gBACN,SAEdf,EAAA,OAAA,CACEC,MAAM,2BACNe,KAAK,OACLC,UAAWzI,EAAW0I,EAAYC,IAEnC3I,EAAW,QAAU,QAExBwH,EAAA,OAAA,CACEO,GAAG,yCACHN,MAAM,4BAA2BI,cACrB,QAAM,kCAMxBL,EAAA,MAAA,CAAKC,MAAM,sBACPL,GAAYzF,EAAWzC,KAAKW,GAAI,eAChC2H,EAACF,EAASxD,OAAA8E,OAAA,GAAKrB,EAAK,CAAEE,MAAM,eAC1BD,EAAA,MAAA,CAAKC,MAAM,qBAAoBI,cAAa,QAC1CL,EAAA,OAAA,CAAMqB,KAAK,cAEbrB,EAAA,gBAAA,CACEQ,QAASb,EAA2B,iBAAmB,MAEtDxF,EAAWzC,KAAKW,GAAI,aACnB2H,EAAA,OAAA,CAAMqB,KAAK,cAAmB,0FAvelB,gBAIL,gBAIG,+BAIa,kBAIb,oCAKkB,2BAEEC,kBACjB,wBACI,sBACHlD,EAAamD,2BACbnD,EAAaC,8BACA,MAM3C8B,mBAAmBqB,GACjB,MAAMC,EAAiBD,EAAGtJ,OAC1BR,KAAK+H,gBAAkBgC,EAAMC,KA+c/BvB,oBACE,GAAIzI,KAAKgG,SAAU,CACjBhG,KAAK+F,gBAAgB,UAChB,CACL/F,KAAK+F,gBAAgB,OAGvB,GAAI/F,KAAKkC,oBAAqB,CAC5BlC,KAAKyH,yBAGPzH,KAAKiK,uBAAyBxH,EAAWzC,KAAKW,GAAI,wBAGpD8H,mBACEzI,KAAKI,2BAA2B,CAC9BK,gBAAiBT,KAAK+B,aACtBrB,cAAeV,KAAKyG,aAAeC,EAAaC,IAGlDuD,EAAoBlK,KAAKkH,mBACzBlH,KAAK0H,iCACL1H,KAAKgC,6BAA6BhC,KAAK+B,cACvC/B,KAAKiC,oCAAoCjC,KAAK+B,eAE7CU,EAAWzC,KAAKW,GAAI,cACnBwJ,EACE,CAAC,CAAEC,KAAMpK,KAAK6B,SAAUwI,SAAU,cAClC,mBAIN5B,uBACE,GAAIzI,KAAKsG,iBAAmB,KAAM,CAChCtG,KAAKsG,eAAegE,cAIxB7B,SACE,MAAM5G,SACJA,EAAQf,SACRA,EAAQiH,gBACRA,EAAehG,aACfA,EAAYiG,KACZA,EAAIuC,OACJA,EAAMC,QACNA,EAAOtI,oBACPA,EAAmB6E,OACnBA,GACE/G,KAEJ,MAAM8H,EAAY9H,KAAKyG,aAAeC,EAAaC,EACnD,MAAM8D,EAAazK,KAAKyG,aAAeC,EAAagE,EACpD,MAAMC,EAAa3K,KAAKyG,YAAcC,EAAaM,EACnD,MAAMiB,EAA2BjI,KAAKqH,qBAAuBX,EAAaC,EAC1E,MAAMiE,EAAmBH,GAAeE,IAAe3K,KAAKiH,OAE5D,MAAM4D,EAAwB,CAC5B/C,UAAAA,EACAC,gBAAAA,EACAjH,SAAAA,EACAkH,KAAAA,EACAC,yBAAAA,EACApG,SAAAA,GAGF,OACEyG,EAACwC,EAAI,CACHvC,MAAO,CACLwC,eAAgBjK,GAAYgH,EAC5BkD,iBAAkBlK,GAAYgH,EAC9BmD,gBAAiBnD,IAAc/F,EAC/BmJ,eAAgBpD,GAAa/F,EAC7B0G,CAAC0C,EAAsBC,MACrBrD,IAAoBoD,EAAsBC,KAC5C3C,CAAC,qBACEX,IAAc/F,GAAgBG,EACjCuG,CAAC,UAAWzI,KAAKiH,OACjBwB,CAAC,UAAW1B,IAGbe,GAAa9H,KAAK6H,aAAYjD,OAAA8E,OAAA,GAAMmB,IACrCvC,EAAA,MAAA,CAAKC,MAAM,kBAAkBM,GAAG,oBAC5Bf,GAAa9H,KAAK6H,aAAYjD,OAAA8E,OAAA,GAAMmB,IACtCvC,EAAA,MAAA,CAAKC,MAAM,yBACR9F,EAAWzC,KAAKW,GAAI,uBACnB2H,EAAA,MAAA,CACEC,MAAM,qBAAoBG,kBACV,+BAEhBJ,EAAA,OAAA,CAAAK,cACc,OACZJ,MAAM,4BACNM,GAAG,+BAA6B,WAIlCP,EAAA,KAAA,CAAIC,MAAM,mBACRD,EAAA,OAAA,CAAMqB,KAAK,0BAKnBrB,EAAA,MAAA,CACEC,MAAO,CACLE,CAAC,kBAAmB,KACpBA,CAAC,0BAA2B4C,MAG7B5I,EAAWzC,KAAKW,GAAI,yBACnB2H,EAAA,MAAA,CACEC,MAAM,uBAAsBG,kBACZ,iCAEhBJ,EAAA,OAAA,CAAAK,cACc,OACZJ,MAAM,4BACNM,GAAG,iCAA+B,aAIpCP,EAAA,KAAA,CAAIC,MAAM,mBACRD,EAAA,OAAA,CAAMqB,KAAK,2BAIjBrB,EAAA,MAAA,CAAKC,MAAM,mBACRvI,KAAKiK,wBAA0B3B,EAAA,aAAA,MAC/BsC,GACCtC,EAAA,SAAA,CACEC,MAAM,qBACNgB,UAAW+B,EACXpC,QAASlJ,KAAK8B,mBAAkB8G,aACpB,GACV7G,EAAe,WAAa,6BAIlCuG,EAAA,MAAA,CAAKC,MAAM,sBACRgC,IAAW,IACVjC,EAAA,MAAA,CACEC,MAAO,CACLE,CAAC,cAAe,OAGlBH,EAAA,gBAAA,CAAAM,aACa,UACXE,QAAQ,kBACRP,MAAM,mBAELgC,IAINC,IAAY,IACXlC,EAAA,gBAAA,CACEQ,QAAQ,QACRP,MAAM,cAAaK,aACR,eAEV4B","sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n display: block;\n\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 3.5rem;\n --sm-side-navigation-collapsed-labels-width: 6rem;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 20rem;\n\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-theme-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-theme-primary);\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n overflow: auto;\n visibility: hidden;\n}\n\n:host(.inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--ic-keyline-lighten);\n bottom: 0;\n left: 0;\n z-index: 2;\n box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n visibility: hidden;\n}\n\n:host(.inline) .bottom-wrapper {\n position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-theme-primary);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--ic-keyline-darken);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.inline) .top-bar {\n position: absolute;\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--ic-keyline-darken);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n color: var(--ic-theme-text);\n outline: none;\n text-decoration: none;\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 6.5rem;\n}\n\n.app-status-wrapper {\n position: absolute;\n right: var(--ic-space-md);\n top: 0;\n bottom: 0;\n width: auto;\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n max-width: 6.25rem;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n border-radius: 5rem;\n background-color: var(--ic-theme-text);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-right: var(--ic-space-xs);\n max-width: 6.25rem;\n}\n\n.app-status-wrapper .app-status-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 6rem;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 2.75rem;\n --navigation-group-width: 100%;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-theme-hover);\n --navigation-group-text-hover: var(--ic-theme-text);\n --navigation-item-child-height: 3.5rem;\n --navigation-item-child-active: var(--ic-action-dark-bg-active);\n --navigation-item-child-color: var(--ic-theme-text);\n --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-height: 3.5rem;\n --navigation-item-width: auto;\n --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n height: var(--sm-side-navigation-top-bar-height);\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n /* Hide scrollbar when required but keep functionality */\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n}\n\n.menu-visibility-hidden {\n visibility: hidden;\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 577px) {\n :host {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n }\n\n :host(.static) {\n position: relative;\n left: auto;\n top: auto;\n bottom: auto;\n }\n\n .app-icon-container {\n padding: var(--ic-space-xxs) 0;\n }\n\n .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n }\n\n :host(.inline) .top-bar {\n position: sticky;\n }\n\n :host(.anchor-right) .top-bar {\n box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n }\n\n :host(.anchor-right) .bottom-wrapper {\n box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n }\n\n .side-navigation,\n .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n }\n\n :host(.sm-collapsed) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed.collapsed-labels) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n }\n\n :host(.sm-expanded) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n }\n\n .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n }\n\n :host(.inline) .side-navigation {\n position: relative;\n }\n\n :host(.anchor-right) .side-navigation {\n left: auto;\n right: 0;\n }\n\n .side-navigation-inner {\n width: 100%;\n visibility: visible;\n }\n\n .bottom-wrapper {\n visibility: visible;\n }\n\n .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-sm);\n }\n\n .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n }\n\n .app-title-wrapper ic-typography {\n margin: calc(-1 * 0.281rem) 0 calc(-1 * 0.281rem) var(--ic-space-md);\n font-weight: var(--ic-font-weight-semibold);\n }\n\n :host(.sm-collapsed) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) ic-typography {\n position: relative;\n left: 0;\n }\n\n :host(.sm-expanded) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.anchor-right.sm-expanded) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n }\n\n .app-status-wrapper,\n :host(.sm-collapsed) .app-status-wrapper {\n display: none;\n }\n\n :host(.sm-expanded) .app-status-wrapper {\n display: flex;\n }\n\n .bottom-side-nav {\n justify-items: flex-end;\n display: flex;\n flex-direction: column;\n }\n\n .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-theme-text);\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n }\n\n .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n }\n\n .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-theme-hover);\n }\n\n :host .bottom-side-nav {\n outline: none;\n }\n\n :host .bottom-side-nav .menu-expand-button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n }\n\n :host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n }\n\n :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n }\n\n :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-item),\n :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n }\n\n :host(.sm-expanded) ::slotted(ic-navigation-item),\n :host(.sm-expanded) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n }\n\n :host(.sm-expanded) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 0.25rem;\n --navigation-group-title-opacity: flex;\n }\n\n :host(.sm-collapsed.collapsed-labels) .side-navigation,\n :host(.sm-collapsed.collapsed-labels) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n }\n\n :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n padding: 0;\n }\n\n :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n }\n\n :host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 1rem;\n }\n\n :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n }\n\n :host .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n }\n\n :host .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n }\n}\n\n@media screen and (min-width: 993px) {\n :host {\n position: sticky;\n left: auto;\n top: 0;\n bottom: 0;\n }\n\n :host(.sm-expanded) {\n box-shadow: none;\n }\n}\n\n@media (forced-colors: active) {\n .side-navigation,\n .top-bar {\n border-right: var(--ic-hc-border);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getThemeForegroundColor,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n @Element() el: HTMLIcSideNavigationElement;\n /**\n * The app title to be displayed. This is required, unless a slotted app title link is used.\n */\n @Prop() appTitle: string;\n /**\n * The status of the app to be displayed.\n */\n @Prop() status: string;\n /**\n * The version of the app to be displayed.\n */\n @Prop() version: string;\n /**\n * If `true`, the side navigation will load in an expanded state.\n */\n @Prop() expanded: boolean = false;\n /**\n * The URL that the app title link points to.\n */\n @Prop() href: string = \"/\";\n /**\n * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n */\n @Prop() static: boolean = false;\n /**\n * If `true`, the icon and label will appear when side navigation is collapsed.\n */\n @Prop() collapsedIconLabels: boolean = false;\n /**\n * @internal If `true`, side navigation will be contained by its parent element.\n */\n @Prop() inline: boolean = false;\n\n /**\n * If `true`, automatic parent wrapper styling will be disabled.\n */\n @Prop() disableAutoParentStyling: boolean = false;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() menuOpen: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n @State() hasSecondaryNavigation: boolean = false;\n\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n const event = new CustomEvent(\"sideNavExpanded\", {\n detail: {\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: objDetails.sideNavMobile,\n },\n });\n this.el.dispatchEvent(event);\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n if (menuOpen) {\n bottomWrapper.classList.add(\"menu-visibility-visible\");\n sideNavInner.classList.add(\"menu-visibility-visible\");\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(\"menu-visibility-visible\");\n bottomWrapper.classList.remove(\"menu-visibility-visible\");\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n const nativeButton = this.el.shadowRoot\n .querySelector(\"#menu-button\")\n .shadowRoot.querySelector(\"button\");\n\n if (menuOpen) {\n nativeButton.setAttribute(\"aria-expanded\", \"true\");\n nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n } else {\n nativeButton.setAttribute(\"aria-expanded\", \"false\");\n nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle = this.el.shadowRoot.querySelector(\n \".title-link ic-typography\"\n );\n\n appTitle.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (): void => {\n this.menuExpanded = !this.menuExpanded;\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /**\n * In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on seide navigation state\n */\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n navItems.forEach((navItem) => {\n const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n if (hasUsedSlot) {\n const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot.querySelector(\"svg\");\n const label = navItem.textContent.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.className = \"icon-container\";\n iconWrapper.append(icon);\n\n navItemSlot.textContent = \"\";\n\n icTypography.textContent = label;\n\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private animateCollapsedIconLabels = () => {\n const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".primary-navigation\"\n );\n const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n }\n\n this.el.addEventListener(\"transitionend\", () => {\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(\n \"collapsed-icon-labels-start\"\n );\n primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(\n \"collapsed-icon-labels-start\"\n );\n secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n }\n });\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n navItems[0].querySelector(\"a\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth ||\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n /**\n * As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n */\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-left\", value);\n };\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (currSize === DEVICE_SIZES.S) {\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n this.setParentPaddingTop(`${topBarHeight}px`);\n this.setParentPaddingLeft(\"0\");\n\n if (this.inline) {\n this.el.parentElement.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n }\n }\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: true,\n });\n } else {\n if (!this.disableAutoParentStyling) {\n this.setParentPaddingTop(\"0\");\n this.el.parentElement.style.setProperty(\"height\", \"100%\");\n }\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: false,\n });\n }\n\n if (currSize > DEVICE_SIZES.L) {\n if (!this.disableAutoParentStyling) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n }\n } else if (\n currSize > DEVICE_SIZES.S &&\n currSize <= DEVICE_SIZES.L &&\n !this.static &&\n !this.disableAutoParentStyling\n ) {\n if (this.collapsedIconLabels) {\n this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n } else {\n this.setParentPaddingLeft(\n \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n );\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography?.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n }: IcTopBar) => {\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"small\"\n full-width=\"true\"\n appearance={foregroundColor}\n onClick={this.toggleMenu}\n aria-owns=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <ic-typography\n variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n >\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </ic-typography>\n </Component>\n )}\n </div>\n </div>\n );\n };\n\n componentWillLoad(): void {\n if (this.expanded) {\n this.setMenuExpanded(true);\n } else {\n this.setMenuExpanded(false);\n }\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && collapsedIconLabels,\n [\"static\"]: this.static,\n [\"inline\"]: inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={this.toggleMenuExpanded}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status !== \"\" && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version !== \"\" && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import{r as e,c as i,h as t,H as a,g as o}from"./p-5450cebf.js";import{d as c,a as r,r as n,e as s,f as d,i as l}from"./p-3dea2867.js";import"./p-6f57b13c.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.disabled){color:var(--ic-architectural-200);pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs)}:host(.small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-space-1px) solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast)}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-space-1px) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:transparent;border:0.125rem solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:0.125rem solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-space-1px) solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);top:0.688rem;right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}';const b=class{constructor(t){e(this,t);this.checkboxChecked=i(this,"checkboxChecked",7);this.icCheck=i(this,"icCheck",7);this.handleClick=()=>{this.checked=!this.checked;this.icCheck.emit();this.checkboxChecked.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked};this.checked=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.indeterminate=false;this.small=false;this.initiallyChecked=this.checked}async setFocus(){const e=this.host.shadowRoot.querySelector(".checkbox");if(e){e.focus()}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.checked){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}else{if(!this.checked){this.additionalFieldContainer.style.display="none"}else{this.additionalFieldContainer.style.display="flex"}}}componentWillLoad(){c(this.host,this.handleFormReset)}componentDidLoad(){r([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}disconnectedCallback(){n(this.host,this.handleFormReset)}render(){let e=`ic-checkbox-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;e=e.replace(/ /g,"-");this.checked?s(true,this.host,this.name,this.checked&&this.value,this.disabled):d(this.host);return t(a,{class:{["disabled"]:this.disabled,["small"]:this.small}},t("div",{class:"container"},this.checked&&!this.indeterminate&&t("svg",{class:"checkmark",width:"1.5rem",height:"1.5rem",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},t("title",null,"checkmark icon"),t("path",{d:"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"})),this.checked&&this.indeterminate&&t("div",{class:"indeterminate-symbol"}),t("input",{role:"checkbox",class:{["checkbox"]:true,["checked"]:this.checked,["indeterminate"]:this.indeterminate},type:"checkbox",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.checked,indeterminate:this.indeterminate,onClick:this.handleClick}),t("ic-typography",{variant:"body"},t("label",{class:"checkbox-label",htmlFor:e},this.label))),l(this.host,"additional-field")&&t("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},this.additionalFieldDisplay==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,this.additionalFieldDisplay==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text","aria-live":"polite"},this.dynamicText)),t("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get host(){return o(this)}};b.style=h;export{b as ic_checkbox};
2
- //# sourceMappingURL=p-90d6dbd6.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"names":["icCheckboxCss","Checkbox","this","handleClick","checked","icCheck","emit","checkboxChecked","handleFormReset","initiallyChecked","[object Object]","checkboxEl","host","shadowRoot","querySelector","focus","additionalFieldDisplay","textfield","setAttribute","removeAttribute","additionalFieldContainer","style","display","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","value","removeFormResetListener","id","undefined","groupLabel","replace","renderHiddenInput","name","disabled","removeHiddenInput","h","Host","class","small","indeterminate","width","height","viewBox","xmlns","fill-rule","clip-rule","d","role","type","onClick","variant","htmlFor","isSlotUsed","ref","el","aria-live","dynamicText","additional-field-wrapper"],"mappings":"+JAAA,MAAMA,EAAgB,4iMC4BTC,EAAQ,iHA4DXC,KAAAC,YAAc,KACpBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,QAAQC,OACbJ,KAAKK,gBAAgBD,QAGfJ,KAAAM,gBAAkB,KACxBN,KAAKE,QAAUF,KAAKO,+BA/DsC,oBAI/B,+GAoBC,yEAK5B,4BAI+B,iBAKP,4BAEEP,KAAKE,QA8BjCM,iBACE,MAAMC,EACJT,KAAKU,KAAKC,WAAWC,cAAc,aACrC,GAAIH,EAAY,CACdA,EAAWI,SAIfL,qBACE,GAAIR,KAAKc,yBAA2B,SAAU,CAC5C,MAAMC,EAAYf,KAAKU,KAAKE,cAAc,iBAC1C,IAAKZ,KAAKE,QAAS,CACjBa,GAAaA,EAAUC,aAAa,WAAY,QAC3C,CACLD,GAAaA,EAAUE,gBAAgB,iBAEpC,CACL,IAAKjB,KAAKE,QAAS,CACjBF,KAAKkB,yBAAyBC,MAAMC,QAAU,WACzC,CACLpB,KAAKkB,yBAAyBC,MAAMC,QAAU,SAKpDZ,oBACEa,EAAqBrB,KAAKU,KAAMV,KAAKM,iBAGvCE,mBACEc,EACE,CACE,CAAEC,KAAMvB,KAAKwB,MAAOC,SAAU,SAC9B,CAAEF,KAAMvB,KAAK0B,MAAOD,SAAU,UAEhC,YAIJjB,uBACEmB,EAAwB3B,KAAKU,KAAMV,KAAKM,iBAG1CE,SACE,IAAIoB,EAAK,eACP5B,KAAKwB,QAAUK,UAAY7B,KAAKwB,MAAQxB,KAAK0B,SAC3C1B,KAAK8B,aAETF,EAAKA,EAAGG,QAAQ,KAAM,KAEtB/B,KAAKE,QACD8B,EACE,KACAhC,KAAKU,KACLV,KAAKiC,KACLjC,KAAKE,SAAWF,KAAK0B,MACrB1B,KAAKkC,UAEPC,EAAkBnC,KAAKU,MAE3B,OACE0B,EAACC,EAAI,CAACC,MAAO,CAAE9B,CAAC,YAAaR,KAAKkC,SAAU1B,CAAC,SAAUR,KAAKuC,QAC1DH,EAAA,MAAA,CAAKE,MAAM,aACRtC,KAAKE,UAAYF,KAAKwC,eACrBJ,EAAA,MAAA,CACEE,MAAM,YACNG,MAAM,SACNC,OAAO,SACPC,QAAQ,YACRC,MAAM,6BAA4BC,YACxB,UAASC,YACT,WAEVV,EAAA,QAAA,KAAA,kBACAA,EAAA,OAAA,CAAMW,EAAE,yFAGX/C,KAAKE,SAAWF,KAAKwC,eACpBJ,EAAA,MAAA,CAAKE,MAAM,yBAEbF,EAAA,QAAA,CACEY,KAAK,WACLV,MAAO,CACL9B,CAAC,YAAa,KACdA,CAAC,WAAYR,KAAKE,QAClBM,CAAC,iBAAkBR,KAAKwC,eAE1BS,KAAK,WACLhB,KAAMjC,KAAKiC,KACXL,GAAIA,EACJF,MAAO1B,KAAK0B,MACZQ,SAAUlC,KAAKkC,SAAW,KAAO,KACjChC,QAASF,KAAKE,QACdsC,cAAexC,KAAKwC,cACpBU,QAASlD,KAAKC,cAEhBmC,EAAA,gBAAA,CAAee,QAAQ,QACrBf,EAAA,QAAA,CAAOE,MAAM,iBAAiBc,QAASxB,GACpC5B,KAAKwB,SAIX6B,EAAWrD,KAAKU,KAAM,qBACrB0B,EAAA,MAAA,CACEE,MAAM,oBACNgB,IAAMC,GAAQvD,KAAKkB,yBAA2BqC,GAE7CvD,KAAKc,yBAA2B,WAC/BsB,EAAA,MAAA,CAAKE,MAAM,kBAEbF,EAAA,MAAA,KACGpC,KAAKc,yBAA2B,WAC/BsB,EAAA,gBAAA,CAAee,QAAQ,WACrBf,EAAA,IAAA,CAAGE,MAAM,eAAckB,YAAW,UAC/BxD,KAAKyD,cAIZrB,EAAA,MAAA,CACEE,MAAO,CACLoB,2BACE1D,KAAKc,yBAA2B,WAGpCsB,EAAA,OAAA,CAAMH,KAAK","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: var(--ic-space-1px) solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-space-1px) solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-space-1px) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-space-1px) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n top: 0.688rem;\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox {\n /**\n * If `true`, the checkbox will be set to the checked state.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n /**\n * The value for the checkbox.\n */\n @Prop() value!: string;\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop() name: string;\n /**\n * The group label for the checkbox.\n */\n @Prop() groupLabel: string;\n /**\n * The text to be displayed when dynamic.\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n\n /**\n * If true, the small styling will be applied to the checkbox.\n */\n @Prop() small?: boolean = false;\n\n @State() initiallyChecked = this.checked;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.host.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n componentWillLoad(): void {\n addFormResetListener(this.host, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n let id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n this.checked\n ? renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.host);\n\n return (\n <Host class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n <div class=\"container\">\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n ></input>\n <ic-typography variant=\"body\">\n <label class=\"checkbox-label\" htmlFor={id}>\n {this.label}\n </label>\n </ic-typography>\n </div>\n {isSlotUsed(this.host, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as i,H as o,g as s}from"./p-5450cebf.js";import{a as n,i as a,H as r}from"./p-3dea2867.js";import{C as c}from"./p-8c7f4343.js";import{C as l}from"./p-06321d19.js";import"./p-6f57b13c.js";const d='/*! 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}li{list-style:none;padding:0}:host::part(button){color:var(--ic-color-primary-text);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(.disabled)::part(button){color:var(--ic-architectural-200) !important;pointer-events:none}:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description{color:var(--ic-architectural-200) !important}:host([variant="destructive"])::part(button){color:var(--ic-action-destructive)}:host::part(button):hover{background-color:var(--ic-action-dark-bg-hover)}:host::part(button):focus-visible,:host::part(button):focus{color:var(--ic-color-white-text);background-color:var(--ic-focus-blue);box-shadow:none}:host(.disabled)::part(button):focus-visible,:host(.disabled)::part(button):focus{color:var(--ic-theme-lighten-40) !important}:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description{color:var(--ic-architectural-200) !important}:host([variant="destructive"])::part(button):focus-visible,:host([variant="destructive"])::part(button):focus{background-color:var(--ic-action-destructive)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{color:var(--ic-color-white-text)}:host(.disabled) ic-button:focus-within .focus-border{border-color:var(--ic-architectural-white)}:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:var(--ic-theme-lighten-40) !important}:host::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-color-primary-text) !important}:host([variant="destructive"])::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-destructive) !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{color:var(--ic-color-secondary-text)}.shortcut{color:var(--ic-color-tertiary-text);display:flex;flex:min-content}:host([variant="destructive"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{color:var(--ic-color-primary-text)}ic-button:active .menu-item-description{color:var(--ic-color-secondary-text)}ic-button:active .shortcut{color:var(--ic-color-tertiary-text)}:host([variant="destructive"]) ic-button:active .menu-item-label{color:var(--ic-action-destructive) !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(.disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.disabled) .menu-item-info,:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description,:host(.disabled) ic-button:focus-within .menu-item-info,:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:GrayText !important}:host(.disabled)::part(button):focus-visible,:host(.disabled)::part(button):focus{outline-color:GrayText !important}}';const u=class{constructor(i){t(this,i);this.childBlur=e(this,"childBlur",7);this.triggerPopoverMenuInstance=e(this,"triggerPopoverMenuInstance",7);this.handleMenuItemClick=e(this,"handleMenuItemClick",7);this.handleClick=t=>{t.preventDefault();if(this.submenuTriggerFor!==undefined){this.triggerPopoverMenuInstance.emit()}else if(this.variant==="toggle"){this.toggleChecked?this.toggleChecked=false:this.toggleChecked=true}this.handleMenuItemClick.emit({label:this.label,hasSubMenu:!!this.el.submenuTriggerFor})};this.getMenuItemAriaLabel=()=>{let t=this.label;if(this.description!==undefined){t=`${t}, ${this.description}`}if(this.keyboardShortcut!==undefined){t=`${t}, ${this.keyboardShortcut}`}if(this.variant==="destructive"){t=`${t}, destructive`}if(this.submenuTriggerFor!==undefined){t=`${t}, triggers submenu`}if(this.el.classList.contains("ic-popover-submenu-back-button")){t="Go back to parent menu"}const e=r(this.el);if(e.tagName==="IC-MENU-GROUP"){return`${t}, ${e.label} menu group`}else{return t}};this.variant="default";this.label=undefined;this.description=undefined;this.disabled=false;this.href=undefined;this.target=undefined;this.rel=undefined;this.hreflang=undefined;this.referrerpolicy=undefined;this.keyboardShortcut=undefined;this.submenuTriggerFor=undefined;this.toggleChecked=false}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}}componentWillLoad(){if(this.submenuTriggerFor!==undefined&&this.variant!=="default"){this.variant="default"}}componentDidLoad(){n([{prop:this.label,propName:"label"}],"Menu Item")}render(){const t=t=>t!==undefined?t:null;const e=()=>i("div",{class:"menu-item-info"},i("div",{class:"menu-labels"},i("ic-typography",{class:"menu-item-label"},this.label),this.keyboardShortcut&&i("ic-typography",{variant:"caption",class:"shortcut"},this.keyboardShortcut)),this.description&&i("ic-typography",{class:"menu-item-description",variant:"caption"},this.description));return i(o,{class:{["disabled"]:this.disabled}},i("li",{role:this.variant==="toggle"?"menuitemcheckbox":"menuitem","aria-disabled":`${this.disabled}`,"aria-checked":this.variant==="toggle"&&this.toggleChecked===true?true:this.variant==="toggle"&&this.toggleChecked===false?false:undefined},i("ic-button",{disableTooltip:true,fullWidth:true,variant:"tertiary",onClick:this.handleClick,href:t(this.href),hreflang:t(this.hreflang),target:t(this.target),rel:t(this.rel),referrerpolicy:this.referrerpolicy!==undefined?this.referrerpolicy:null,"aria-disabled":`${this.disabled}`,"aria-label":this.getMenuItemAriaLabel(),"aria-controls":this.submenuTriggerFor!==undefined?`ic-popover-submenu-${this.submenuTriggerFor}`:false,"aria-haspopup":this.submenuTriggerFor!==undefined||this.el.classList.contains("ic-popover-submenu-back-button")?"menu":false,"aria-owns":this.submenuTriggerFor!==undefined?`ic-popover-submenu-${this.submenuTriggerFor}`:false},i("div",{class:"focus-border"},a(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.toggleChecked},"aria-hidden":"true",innerHTML:c}),this.submenuTriggerFor!==undefined&&i("span",{class:{["submenu-icon"]:true},"aria-hidden":"true",innerHTML:l})))))}static get delegatesFocus(){return true}get el(){return s(this)}};u.style=d;export{u as ic_menu_item};
2
- //# sourceMappingURL=p-a8e969ea.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"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"],"names":["icMenuItemCss","MenuItem","this","handleClick","e","preventDefault","submenuTriggerFor","undefined","triggerPopoverMenuInstance","emit","variant","toggleChecked","handleMenuItemClick","label","hasSubMenu","el","getMenuItemAriaLabel","ariaLabel","description","keyboardShortcut","classList","contains","parentEl","getParentElement","tagName","[object Object]","disabled","stopImmediatePropagation","onComponentRequiredPropUndefined","prop","propName","isPropDefined","MenuItemInformation","h","class","Host","role","aria-disabled","aria-checked","disableTooltip","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","aria-label","aria-controls","aria-haspopup","aria-owns","isSlotUsed","name","aria-hidden","innerHTML","Check","Chevron"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n list-style: none;\n padding: 0;\n}\n\n:host::part(button) {\n color: var(--ic-color-primary-text);\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 --icon-height: auto;\n}\n\n:host(.disabled)::part(button) {\n color: var(--ic-architectural-200) !important;\n pointer-events: none;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"])::part(button) {\n color: var(--ic-action-destructive);\n}\n\n:host::part(button):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host::part(button):focus-visible,\n:host::part(button):focus {\n color: var(--ic-color-white-text);\n background-color: var(--ic-focus-blue);\n box-shadow: none;\n}\n\n:host(.disabled)::part(button):focus-visible,\n:host(.disabled)::part(button):focus {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"])::part(button):focus-visible,\n:host([variant=\"destructive\"])::part(button):focus {\n background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-button:focus-within .menu-item-label,\n:host(.disabled) ic-button:focus-within .shortcut,\n:host(.disabled) ic-button:focus-within .menu-item-description {\n color: var(--ic-theme-lighten-40) !important;\n}\n\n:host::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-color-primary-text) !important;\n}\n\n:host([variant=\"destructive\"])::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-action-destructive) !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 color: var(--ic-color-secondary-text);\n}\n\n.shortcut {\n color: var(--ic-color-tertiary-text);\n display: flex;\n flex: min-content;\n}\n\n:host([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 color: var(--ic-color-primary-text);\n}\n\nic-button:active .menu-item-description {\n color: var(--ic-color-secondary-text);\n}\n\nic-button:active .shortcut {\n color: var(--ic-color-tertiary-text);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n color: var(--ic-action-destructive) !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(.disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.disabled) .menu-item-info,\n :host(.disabled) .menu-item-label,\n :host(.disabled) .shortcut,\n :host(.disabled) .menu-item-description,\n :host(.disabled) ic-button:focus-within .menu-item-info,\n :host(.disabled) ic-button:focus-within .menu-item-label,\n :host(.disabled) ic-button:focus-within .shortcut,\n :host(.disabled) ic-button:focus-within .menu-item-description {\n color: GrayText !important;\n }\n\n :host(.disabled)::part(button):focus-visible,\n :host(.disabled)::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport {\n getParentElement,\n isSlotUsed,\n onComponentRequiredPropUndefined,\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 * The variant of the menu item.\n */\n @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n \"default\";\n /**\n * The label to display in the menu item.\n */\n @Prop() label!: string;\n /**\n * The description displayed in the menu item, below the label.\n */\n @Prop() description?: string;\n /**\n * If `true`, the menu item will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\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 * 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 * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n /**\n * The label describing the keyboard shortcut for a menu item's action.\n */\n @Prop() keyboardShortcut?: string;\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 * @internal Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\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 * @internal Emitted when the user clicks a menu item.\n */\n @Event() handleMenuItemClick: EventEmitter<{\n label: string;\n hasSubMenu: boolean;\n }>;\n\n @State() toggleChecked: boolean = false;\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 e.preventDefault();\n if (this.submenuTriggerFor !== undefined) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n this.toggleChecked\n ? (this.toggleChecked = false)\n : (this.toggleChecked = true);\n }\n this.handleMenuItemClick.emit({\n label: this.label,\n hasSubMenu: !!this.el.submenuTriggerFor,\n });\n };\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (this.submenuTriggerFor !== undefined && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (this.description !== undefined) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (this.keyboardShortcut !== undefined) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (this.submenuTriggerFor !== undefined) {\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 = getParentElement(this.el);\n\n if (parentEl.tagName === \"IC-MENU-GROUP\") {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A helper function that checks if a prop has been defined\n const isPropDefined = (prop: string) => {\n return prop !== undefined ? prop : null;\n };\n\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.keyboardShortcut && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcut}\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 [\"disabled\"]: this.disabled,\n }}\n >\n <li\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\" && this.toggleChecked === true\n ? true\n : this.variant === \"toggle\" && this.toggleChecked === false\n ? false\n : undefined\n }\n >\n <ic-button\n disableTooltip\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={\n this.referrerpolicy !== undefined ? this.referrerpolicy : null\n }\n aria-disabled={`${this.disabled}`}\n aria-label={this.getMenuItemAriaLabel()}\n aria-controls={\n this.submenuTriggerFor !== undefined\n ? `ic-popover-submenu-${this.submenuTriggerFor}`\n : false\n }\n aria-haspopup={\n this.submenuTriggerFor !== undefined ||\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n aria-owns={\n this.submenuTriggerFor !== undefined\n ? `ic-popover-submenu-${this.submenuTriggerFor}`\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.toggleChecked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {this.submenuTriggerFor !== undefined && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </li>\n </Host>\n );\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as a,g as s}from"./p-5450cebf.js";import{I as n}from"./p-6f57b13c.js";import{G as o,D as r,g as l,k as c,o as h,i as d,c as p,a as m}from"./p-3dea2867.js";const u='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-theme-text);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name="app-icon"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name="toggle-icon"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:10rem}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(svg){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const g=class{constructor(e){t(this,e);this.icNavigationMenuOpened=i(this,"icNavigationMenuOpened",7);this.icNavigationMenuClosed=i(this,"icNavigationMenuClosed",7);this.hasAppIcon=false;this.hasNavigation=false;this.hasIconButtons=false;this.hasSearchSlotContent=false;this.searchBar=null;this.initialiseSearchBar=()=>{if(this.hasSearchSlotContent){const t=o(this.el,"search");if(t&&t.tagName==="IC-SEARCH-BAR"){this.searchBar=t}else if(t&&t.tagName==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}}};this.emitTopNavResized=t=>{const i=new CustomEvent("topNavResized",{detail:{size:t}});this.el.dispatchEvent(i)};this.menuButtonClick=()=>{this.showNavMenu(true)};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserver=null;this.resizeObserverCallback=t=>{if(t!==this.deviceSize){this.deviceSize=t;if(t>r.L){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.emitTopNavResized(t);if(document.activeElement!==null&&document.activeElement!==undefined&&document.activeElement.tagName==="IC-SEARCH-BAR"){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{this.searchBar.focus()}),100)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const t=l();this.resizeObserverCallback(t)}));this.resizeObserver.observe(this.el)};this.appTitle=undefined;this.href="/";this.version="";this.status="";this.contentAligned="full-width";this.inline=false;this.menuOpen=false;this.deviceSize=r.XL;this.mobileSearchBarVisible=false;this.navMenuVisible=false;this.searchValue="";this.mobileSearchHiddenOnBlur=false;this.searchButtonClick=false;this.foregroundColor=c();this.hasFullWidthSearchBar=false}watchPropHandler(t,i){h(i,t,this.initialiseSearchBar)}navBarMenuCloseHandler(){this.showNavMenu(false);const t=this.el.shadowRoot.querySelector("#menu-button");t.focus()}searchInputBlurHandler(t){if(t.detail!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.detail.value}}searchValueChangeHandler(t){this.searchValue=t.detail.value}themeChangeHandler(t){const i=t.detail;this.foregroundColor=i.mode}toggleSearchBar(){this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(this.searchBar!==null){if(this.mobileSearchBarVisible){this.mobileSearchButtonEl.updateAriaLabel("Hide search");this.hasFullWidthSearchBar=true;this.searchBar.fullWidth=true;setTimeout((()=>{this.searchBar.focus()}),100)}else{this.mobileSearchButtonEl.updateAriaLabel("Show search");this.hasFullWidthSearchBar=false;this.searchBar.fullWidth=false}}}showNavMenu(t){this.navMenuVisible=t;if(t){this.icNavigationMenuOpened.emit();document.body.style.height="100%";document.body.style.overflow="hidden"}else{this.icNavigationMenuClosed.emit();document.body.style.height="auto";document.body.style.overflow="auto"}}componentWillLoad(){this.hasAppIcon=d(this.el,"app-icon");this.hasNavigation=d(this.el,"navigation");this.hasIconButtons=d(this.el,"buttons");this.hasSearchSlotContent=d(this.el,"search");this.deviceSize=l();this.initialiseSearchBar()}componentWillRender(){this.hasNavigation=d(this.el,"navigation");this.hasSearchSlotContent=d(this.el,"search");this.hasIconButtons=d(this.el,"buttons");this.hasAppIcon=d(this.el,"app-icon")}componentDidLoad(){p(this.runResizeObserver);!d(this.el,"app-title")&&m([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const t=this.hasNavigation||this.hasIconButtons||this.status!==""||this.version!=="";const i=this.deviceSize<=r.S?"default":"large";let s="h3";const o=this.appTitle!==""&&this.appTitle!==undefined;if(this.deviceSize<=r.L){s="h4";if(this.deviceSize<=r.S){s="subtitle-small"}}const l=this.mobileSearchBarVisible?"Hide search":"Show search";const c=this.deviceSize<=r.S?"small":"default";const h=d(this.el,"app-title")?"div":"a";const p=h=="a"&&{href:this.href};return e(a,{class:{["fullwidth-searchbar"]:this.hasFullWidthSearchBar,[n.Dark]:this.foregroundColor===n.Dark}},e("div",{class:"top-navigation"},e("ic-section-container",{aligned:this.contentAligned,"full-height":true},e("header",{role:"banner"},e("div",{class:"top-panel-container"},e("div",{class:"app-details-container"},(o||d(this.el,"app-title"))&&e(h,Object.assign({class:"title-link"},p),this.hasAppIcon&&e("div",{class:"app-icon-container","aria-hidden":"true"},e("slot",{name:"app-icon"})),e("ic-typography",{variant:s},e("h1",{class:"title-wrap"},d(this.el,"app-title")?e("slot",{name:"app-title"}):this.appTitle))),this.status!==""&&e("div",{class:"app-status"},e("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},this.status)),this.version!==""&&e("div",{class:"app-version"},e("ic-typography",{variant:"label",class:"app-version-text","aria-label":"app version"},this.version))),(this.hasSearchSlotContent||t)&&e("div",{class:"search-menu-container"},e("div",{class:"search-actions-container"},this.deviceSize>r.L&&e("slot",{name:"search"}),this.hasSearchSlotContent&&this.deviceSize<=r.L&&e("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:this.searchButtonMouseDownHandler,variant:"icon",size:i,"aria-label":l,appearance:this.foregroundColor,onClick:this.searchButtonClickHandler},e("slot",{name:"toggle-icon",slot:"icon"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"#ffffff"},e("path",{d:"M0 0h24v24H0V0z",fill:"none"}),e("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),this.hasIconButtons&&this.deviceSize>r.L&&e("div",{class:"icon-buttons-container"},e("slot",{name:"buttons"})),t&&this.deviceSize<=r.L&&e("div",{class:"menu-button-container"},e("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":!this.hasNavigation||this.navMenuVisible?"true":"false"},e("ic-button",{id:"menu-button",appearance:this.foregroundColor,variant:"secondary","aria-expanded":this.menuOpen?"true":"false","aria-haspopup":"true","aria-label":`Open ${this.hasNavigation?"navigation":"app"} menu`,size:c,onClick:this.menuButtonClick},"Menu",e("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"icon"},e("path",{d:"M0 0h24v24H0V0z",fill:"none"}),e("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))))))),this.mobileSearchBarVisible&&e("div",{class:"search-bar-container"},e("slot",{name:"search"})),this.hasNavigation&&this.deviceSize>r.L&&e("div",{class:"navigation-tabs"},e("span",{id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main navigation"),e("nav",{"aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},e("ic-horizontal-scroll",{appearance:this.foregroundColor},e("ul",{class:"navigation-item-list",tabindex:"-1"},e("slot",{name:"navigation"})))))))),this.navMenuVisible&&e("ic-navigation-menu",{version:this.version,status:this.status,class:{["inline"]:this.inline}},e("div",{class:"menu-buttons-slot",slot:"buttons"},e("slot",{name:"buttons"})),e("ul",{slot:"navigation"},e("slot",{name:"navigation"}))))}get el(){return s(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};g.style=u;export{g as ic_top_navigation};
2
- //# sourceMappingURL=p-bb505d2a.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasNavigation","hasIconButtons","hasSearchSlotContent","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","emitTopNavResized","size","event","CustomEvent","detail","dispatchEvent","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","L","mobileSearchBarVisible","document","activeElement","undefined","setAttribute","removeAttribute","setTimeout","focus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","XL","getThemeForegroundColor","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","menuBtn","shadowRoot","ev","searchValue","value","theme","foregroundColor","mode","mobileSearchButtonEl","updateAriaLabel","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","emit","body","style","height","overflow","icNavigationMenuClosed","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","disconnect","hasMenuContent","status","version","searchButtonSize","S","appTitleVariant","hasTitle","mobileSearchButtonTitle","menuSize","Component","attrs","href","h","Host","class","IcThemeForegroundEnum","Dark","aligned","contentAligned","full-height","role","Object","assign","aria-hidden","name","variant","aria-label","id","ref","onMouseDown","appearance","onClick","xmlns","viewBox","fill","d","aria-labelledby","aria-expanded","menuOpen","aria-haspopup","width","tabindex","inline"],"mappings":"yLAAA,MAAMA,EAAqB,u3NC4CdC,EAAa,6JAgEhBC,KAAAC,WAAsB,MACtBD,KAAAE,cAAyB,MACzBF,KAAAG,eAA0B,MAC1BH,KAAAI,qBAAgC,MAChCJ,KAAAK,UAAoC,KAkCpCL,KAAAM,oBAAsB,KAC5B,GAAIN,KAAKI,qBAAsB,CAC7B,MAAMG,EAAOC,EAAQR,KAAKS,GAAI,UAC9B,GAAIF,GAAQA,EAAKG,UAAY,gBAAiB,CAC5CV,KAAKK,UAAYE,OACZ,GAAIA,GAAQA,EAAKG,UAAY,OAAQ,CAC1CV,KAAKK,UAAYE,EAAKI,cACpB,iBAIJ,GAAIX,KAAKK,YAAc,KAAM,CAC3BL,KAAKK,UAAUO,UAAY,QAwBzBZ,KAAAa,kBAAqBC,IAC3B,MAAMC,EAAQ,IAAIC,YAAY,gBAAiB,CAAEC,OAAQ,CAAEH,KAAMA,KACjEd,KAAKS,GAAGS,cAAcH,IAGhBf,KAAAmB,gBAAkB,KACxBnB,KAAKoB,YAAY,OAgBXpB,KAAAqB,6BAA+B,KACrCrB,KAAKsB,kBAAoB,MAGnBtB,KAAAuB,yBAA2B,KACjCvB,KAAKwB,kBACLxB,KAAKsB,kBAAoB,OAGnBtB,KAAAyB,eAAiC,KAEjCzB,KAAA0B,uBAA0BC,IAChC,GAAIA,IAAa3B,KAAK4B,WAAY,CAChC5B,KAAK4B,WAAaD,EAClB,GAAIA,EAAWE,EAAaC,EAAG,CAC7B9B,KAAKoB,YAAY,OACjB,GAAIpB,KAAK+B,uBAAwB,CAC/B/B,KAAKwB,mBAGTxB,KAAKa,kBAAkBc,GACvB,GACEK,SAASC,gBAAkB,MAC3BD,SAASC,gBAAkBC,WAC3BF,SAASC,cAAcvB,UAAY,gBACnC,CACAV,KAAKK,UAAU8B,aAAa,SAAU,QAEtCnC,KAAKK,UAAU+B,gBAAgB,UAC/BC,YAAW,KACTrC,KAAKK,UAAUiC,UACd,QAKDtC,KAAAuC,kBAAoB,KAC1BvC,KAAKyB,eAAiB,IAAIe,gBAAe,KACvC,MAAMb,EAAWc,IACjBzC,KAAK0B,uBAAuBC,MAG9B3B,KAAKyB,eAAeiB,QAAQ1C,KAAKS,uCA/LZ,iBAKG,eAKD,uBAKa,yBAKZ,oBAEG,sBACCoB,EAAac,+BACA,0BACR,uBACJ,iCACc,6BACP,2BACQC,+BACJ,MAG1CC,iBAAiBC,EAAkBC,GAGjCC,EACED,EACAD,EACA9C,KAAKM,qBAsBTuC,yBACE7C,KAAKoB,YAAY,OACjB,MAAM6B,EAAUjD,KAAKS,GAAGyC,WAAWvC,cACjC,gBAEFsC,EAAQX,QAIVO,uBAAuBM,GACrB,GAAIA,EAAGlC,SAAW,KAAM,CACtB,GAAIjB,KAAK+B,yBAA2B/B,KAAKsB,kBAAmB,CAE1DtB,KAAKwB,kBAEPxB,KAAKoD,YAAcD,EAAGlC,OAAOoC,OAKjCR,yBAAyBM,GACvBnD,KAAKoD,YAAcD,EAAGlC,OAAOoC,MAI/BR,mBAAmBM,GACjB,MAAMG,EAAiBH,EAAGlC,OAC1BjB,KAAKuD,gBAAkBD,EAAME,KAoBvBX,kBACN7C,KAAK+B,wBAA0B/B,KAAK+B,uBAEpC,GAAI/B,KAAKK,YAAc,KAAM,CAC3B,GAAIL,KAAK+B,uBAAwB,CAC/B/B,KAAKyD,qBAAqBC,gBAAgB,eAC1C1D,KAAK2D,sBAAwB,KAC7B3D,KAAKK,UAAUuD,UAAY,KAC3BvB,YAAW,KACTrC,KAAKK,UAAUiC,UACd,SACE,CACLtC,KAAKyD,qBAAqBC,gBAAgB,eAC1C1D,KAAK2D,sBAAwB,MAC7B3D,KAAKK,UAAUuD,UAAY,QAczBf,YAAYgB,GAClB7D,KAAK8D,eAAiBD,EACtB,GAAIA,EAAM,CACR7D,KAAK+D,uBAAuBC,OAC5BhC,SAASiC,KAAKC,MAAMC,OAAS,OAC7BnC,SAASiC,KAAKC,MAAME,SAAW,aAC1B,CACLpE,KAAKqE,uBAAuBL,OAC5BhC,SAASiC,KAAKC,MAAMC,OAAS,OAC7BnC,SAASiC,KAAKC,MAAME,SAAW,QAiDnCvB,oBACE7C,KAAKC,WAAaqE,EAAWtE,KAAKS,GAAI,YACtCT,KAAKE,cAAgBoE,EAAWtE,KAAKS,GAAI,cACzCT,KAAKG,eAAiBmE,EAAWtE,KAAKS,GAAI,WAC1CT,KAAKI,qBAAuBkE,EAAWtE,KAAKS,GAAI,UAChDT,KAAK4B,WAAaa,IAClBzC,KAAKM,sBAGPuC,sBACE7C,KAAKE,cAAgBoE,EAAWtE,KAAKS,GAAI,cACzCT,KAAKI,qBAAuBkE,EAAWtE,KAAKS,GAAI,UAChDT,KAAKG,eAAiBmE,EAAWtE,KAAKS,GAAI,WAC1CT,KAAKC,WAAaqE,EAAWtE,KAAKS,GAAI,YAGxCoC,mBACE0B,EAAoBvE,KAAKuC,oBAExB+B,EAAWtE,KAAKS,GAAI,cACnB+D,EACE,CAAC,CAAEC,KAAMzE,KAAK0E,SAAUC,SAAU,cAClC,kBAIN9B,uBACE,GAAI7C,KAAKyB,iBAAmB,KAAM,CAChCzB,KAAKyB,eAAemD,cAIxB/B,SACE,MAAMgC,EACJ7E,KAAKE,eACLF,KAAKG,gBACLH,KAAK8E,SAAW,IAChB9E,KAAK+E,UAAY,GAEnB,MAAMC,EACJhF,KAAK4B,YAAcC,EAAaoD,EAAI,UAAY,QAElD,IAAIC,EAAwC,KAE5C,MAAMC,EAAWnF,KAAK0E,WAAa,IAAM1E,KAAK0E,WAAaxC,UAE3D,GAAIlC,KAAK4B,YAAcC,EAAaC,EAAG,CACrCoD,EAAkB,KAClB,GAAIlF,KAAK4B,YAAcC,EAAaoD,EAAG,CACrCC,EAAkB,kBAItB,MAAME,EAA0BpF,KAAK+B,uBACjC,cACA,cACJ,MAAMsD,EAAWrF,KAAK4B,YAAcC,EAAaoD,EAAI,QAAU,UAE/D,MAAMK,EAAYhB,EAAWtE,KAAKS,GAAI,aAAe,MAAQ,IAE7D,MAAM8E,EAAQD,GAAa,KAAO,CAChCE,KAAMxF,KAAKwF,MAGb,OACEC,EAACC,EAAI,CACHC,MAAO,CACL9C,CAAC,uBAAwB7C,KAAK2D,sBAC9Bd,CAAC+C,EAAsBC,MACrB7F,KAAKuD,kBAAoBqC,EAAsBC,OAGnDJ,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,uBAAA,CAAsBK,QAAS9F,KAAK+F,eAAcC,cAAA,MAChDP,EAAA,SAAA,CAAQQ,KAAK,UACXR,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,0BACPR,GAAYb,EAAWtE,KAAKS,GAAI,eAChCgF,EAACH,EAASY,OAAAC,OAAA,CAACR,MAAM,cAAiBJ,GAC/BvF,KAAKC,YACJwF,EAAA,MAAA,CAAKE,MAAM,qBAAoBS,cAAa,QAC1CX,EAAA,OAAA,CAAMY,KAAK,cAGfZ,EAAA,gBAAA,CAAea,QAASpB,GACtBO,EAAA,KAAA,CAAIE,MAAM,cACPrB,EAAWtE,KAAKS,GAAI,aACnBgF,EAAA,OAAA,CAAMY,KAAK,cAEXrG,KAAa,YAMtBA,KAAK8E,SAAW,IACfW,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,gBAAA,CAAAc,aACa,UACXD,QAAQ,kBACRX,MAAM,mBAEL3F,KAAK8E,SAIX9E,KAAK+E,UAAY,IAChBU,EAAA,MAAA,CAAKE,MAAM,eACTF,EAAA,gBAAA,CACEa,QAAQ,QACRX,MAAM,mBAAkBY,aACb,eAEVvG,KAAK+E,YAMZ/E,KAAKI,sBAAwByE,IAC7BY,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,MAAA,CAAKE,MAAM,4BACR3F,KAAK4B,WAAaC,EAAaC,GAC9B2D,EAAA,OAAA,CAAMY,KAAK,WAGZrG,KAAKI,sBACJJ,KAAK4B,YAAcC,EAAaC,GAC9B2D,EAAA,YAAA,CACEe,GAAG,uBACHC,IAAMhG,GAAQT,KAAKyD,qBAAuBhD,EAC1CiG,YAAa1G,KAAKqB,6BAClBiF,QAAQ,OACRxF,KAAMkE,EAAgBuB,aACVnB,EACZuB,WAAY3G,KAAKuD,gBACjBqD,QAAS5G,KAAKuB,0BAEdkE,EAAA,OAAA,CAAMY,KAAK,cAAc9F,KAAK,QAC5BkF,EAAA,MAAA,CACEoB,MAAM,6BACNC,QAAQ,YACRC,KAAK,WAELtB,EAAA,OAAA,CAAMuB,EAAE,kBAAkBD,KAAK,SAC/BtB,EAAA,OAAA,CAAMuB,EAAE,kPAMjBhH,KAAKG,gBAAkBH,KAAK4B,WAAaC,EAAaC,GACrD2D,EAAA,MAAA,CAAKE,MAAM,0BACTF,EAAA,OAAA,CAAMY,KAAK,aAGdxB,GAAkB7E,KAAK4B,YAAcC,EAAaC,GACjD2D,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,MAAA,CAAAwB,kBACkB,2BAA0Bb,eAEvCpG,KAAKE,eAAiBF,KAAK8D,eACxB,OACA,SAGN2B,EAAA,YAAA,CACEe,GAAG,cACHG,WAAY3G,KAAKuD,gBACjB+C,QAAQ,YAAWY,gBACJlH,KAAKmH,SAAW,OAAS,QAAOC,gBACjC,OAAMb,aACR,QACVvG,KAAKE,cAAgB,aAAe,aAEtCY,KAAMuE,EACNuB,QAAS5G,KAAKmB,iBAAe,OAG7BsE,EAAA,MAAA,CACEoB,MAAM,6BACN1C,OAAO,OACP2C,QAAQ,YACRO,MAAM,OACNN,KAAK,UACLxG,KAAK,QAELkF,EAAA,OAAA,CAAMuB,EAAE,kBAAkBD,KAAK,SAC/BtB,EAAA,OAAA,CAAMuB,EAAE,yDAWzBhH,KAAK+B,wBACJ0D,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,OAAA,CAAMY,KAAK,YAIdrG,KAAKE,eAAiBF,KAAK4B,WAAaC,EAAaC,GACpD2D,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CACEe,GAAG,2BACHb,MAAM,2BAA0BS,cACpB,QAAM,mBAIpBX,EAAA,MAAA,CAAAwB,kBACkB,2BAChBtB,MAAM,uBAENF,EAAA,uBAAA,CAAsBkB,WAAY3G,KAAKuD,iBACrCkC,EAAA,KAAA,CAAIE,MAAM,uBAAuB2B,SAAS,MACxC7B,EAAA,OAAA,CAAMY,KAAK,sBAS1BrG,KAAK8D,gBACJ2B,EAAA,qBAAA,CACEV,QAAS/E,KAAK+E,QACdD,OAAQ9E,KAAK8E,OACba,MAAO,CACL9C,CAAC,UAAW7C,KAAKuH,SAGnB9B,EAAA,MAAA,CAAKE,MAAM,oBAAoBpF,KAAK,WAClCkF,EAAA,OAAA,CAAMY,KAAK,aAEbZ,EAAA,KAAA,CAAIlF,KAAK,cACPkF,EAAA,OAAA,CAAMY,KAAK","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-theme-text);\n width: 100%;\n position: relative;\n}\n\n:host .top-navigation {\n background-color: var(--ic-theme-primary);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-theme-text);\n text-decoration: none;\n outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-keyline-lighten);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n background-color: var(--ic-theme-text);\n color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-theme-active);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n fill: var(--ic-theme-text);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n :host .nav-panel-container,\n :host .app-status,\n :host .app-version {\n display: none;\n }\n\n :host .title-link {\n margin-right: var(--ic-space-xs);\n }\n\n .search-menu-container {\n max-width: 10rem;\n }\n\n .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .searchbox-inline {\n display: none;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-hc-border);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-hc-border);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcTheme,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n @Element() el: HTMLIcTopNavigationElement;\n\n /**\n * The app title to be displayed. This is required, unless a slotted app title link is used.\n */\n @Prop() appTitle: string;\n\n /**\n * The URL to navigate to when the app title is clicked.\n */\n @Prop() href: string = \"/\";\n\n /**\n * The version info to be displayed.\n */\n @Prop() version: string = \"\";\n\n /**\n * The status info to be displayed.\n */\n @Prop() status: string = \"\";\n\n /**\n * The alignment of the top navigation content.\n */\n @Prop() contentAligned: IcAlignment = \"full-width\";\n\n /**\n * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n */\n @Prop() inline: boolean = false;\n\n @State() menuOpen: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() mobileSearchBarVisible: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchValue: string = \"\";\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\n\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once gatbsy hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /**\n * @internal - Emitted when the menu is opened.\n */\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n private hasAppIcon: boolean = false;\n private hasNavigation: boolean = false;\n private hasIconButtons: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private searchBar: HTMLIcSearchBarElement = null;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n const menuBtn = this.el.shadowRoot.querySelector(\n \"#menu-button\"\n ) as HTMLElement;\n menuBtn.focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler(ev: CustomEvent): void {\n if (ev.detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = ev.detail.value;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler(ev: CustomEvent): void {\n this.searchValue = ev.detail.value;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot && slot.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\n \"ic-search-bar\"\n ) as HTMLIcSearchBarElement;\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n if (this.mobileSearchBarVisible) {\n this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n this.hasFullWidthSearchBar = true;\n this.searchBar.fullWidth = true;\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n } else {\n this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n this.hasFullWidthSearchBar = false;\n this.searchBar.fullWidth = false;\n }\n }\n }\n\n private emitTopNavResized = (size: number): void => {\n const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n this.el.dispatchEvent(event);\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n if (show) {\n this.icNavigationMenuOpened.emit();\n document.body.style.height = \"100%\";\n document.body.style.overflow = \"hidden\";\n } else {\n this.icNavigationMenuClosed.emit();\n document.body.style.height = \"auto\";\n document.body.style.overflow = \"auto\";\n }\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > DEVICE_SIZES.L) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.emitTopNavResized(currSize);\n if (\n document.activeElement !== null &&\n document.activeElement !== undefined &&\n document.activeElement.tagName === \"IC-SEARCH-BAR\"\n ) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n componentWillLoad(): void {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const hasMenuContent =\n this.hasNavigation ||\n this.hasIconButtons ||\n this.status !== \"\" ||\n this.version !== \"\";\n\n const searchButtonSize =\n this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n let appTitleVariant: IcTypographyVariants = \"h3\";\n\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n if (this.deviceSize <= DEVICE_SIZES.L) {\n appTitleVariant = \"h4\";\n if (this.deviceSize <= DEVICE_SIZES.S) {\n appTitleVariant = \"subtitle-small\";\n }\n }\n\n const mobileSearchButtonTitle = this.mobileSearchBarVisible\n ? \"Hide search\"\n : \"Show search\";\n const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: this.href,\n };\n\n return (\n <Host\n class={{\n [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n [IcThemeForegroundEnum.Dark]:\n this.foregroundColor === IcThemeForegroundEnum.Dark,\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={this.contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n <Component class=\"title-link\" {...attrs}>\n {this.hasAppIcon && (\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\" />\n </div>\n )}\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.appTitle\n )}\n </h1>\n </ic-typography>\n </Component>\n )}\n {this.status !== \"\" && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(this.hasSearchSlotContent || hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {this.deviceSize > DEVICE_SIZES.L && (\n <slot name=\"search\"></slot>\n )}\n\n {this.hasSearchSlotContent &&\n this.deviceSize <= DEVICE_SIZES.L && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={this.searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={this.foregroundColor}\n onClick={this.searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\" slot=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n <div class=\"menu-button-container\">\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={\n !this.hasNavigation || this.navMenuVisible\n ? \"true\"\n : \"false\"\n }\n >\n <ic-button\n id=\"menu-button\"\n appearance={this.foregroundColor}\n variant=\"secondary\"\n aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"true\"\n aria-label={`Open ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={this.menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {this.mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll appearance={this.foregroundColor}>\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {this.navMenuVisible && (\n <ic-navigation-menu\n version={this.version}\n status={this.status}\n class={{\n [\"inline\"]: this.inline,\n }}\n >\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as a}from"./p-5450cebf.js";import{x as n,w as o,m as h,d as l,a as r,r as c,e as d,h as u,j as p,y as b,n as f}from"./p-3dea2867.js";import{I as m,a as v}from"./p-6f57b13c.js";const g=`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />\n</svg>\n`;const w=`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.6666 4.27334L11.7266 3.33334L7.99998 7.06001L4.27331 3.33334L3.33331 4.27334L7.05998 8.00001L3.33331 11.7267L4.27331 12.6667L7.99998 8.94001L11.7266 12.6667L12.6666 11.7267L8.93998 8.00001L12.6666 4.27334Z" fill="currentColor" />\n</svg>\n`;const x='/*! 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{position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url("data:image/svg+xml;utf8,<svg fill=\'black\' height=\'24\' viewBox=\'0 0 24 24\' width=\'24\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 10l5 5 5-5z\'/><path d=\'M0 0h24v24H0z\' fill=\'none\'/></svg>")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url("data:image/svg+xml;utf8,<svg fill=\'grey\' height=\'24\' viewBox=\'0 0 24 24\' width=\'24\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 10l5 5 5-5z\'/><path d=\'M0 0h24v24H0z\' fill=\'none\'/></svg>")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-space-1px);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}';let y=0;const k=class{constructor(e){t(this,e);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icFocus=i(this,"icFocus",7);this.icBlur=i(this,"icBlur",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icInput=i(this,"icInput",7);this.inputId=`ic-select-input-${y++}`;this.menuId=`${this.inputId}-menu`;this.ungroupedOptions=[];this.inheritedAttributes={};this.hasSetDefaultValue=false;this.initialOptionsEmpty=false;this.emitIcChange=t=>{this.value=t;clearTimeout(this.debounceIcChange);this.debounceIcChange=window.setTimeout((()=>{this.icChange.emit({value:t})}),this.currDebounce)};this.emitImmediateIcChange=t=>{this.value=t;clearTimeout(this.debounceIcChange);this.icChange.emit({value:t})};this.isMenuEnabled=()=>this.searchableSelectInputValue!==null||this.searchableSelectInputValue!=="";this.setOptionsValuesFromLabels=()=>{if(this.options.length>0&&this.options.map){this.options.map((t=>{if(!t.value){t.value=t.label}}))}};this.setUngroupedOptions=t=>{this.ungroupedOptions=t.detail.options};this.setTextColor=()=>{if(this.nativeSelectElement.selectedIndex===0){this.nativeSelectElement.className="placeholder"}else{this.nativeSelectElement.className="select-option-selected"}};this.setMenuChange=t=>{if(this.open!==t){this.open=t}};this.getLabelFromValue=t=>n(t,this.options);this.getValueFromLabel=t=>{var i;const e=(i=this.options.find((i=>i.label===t)))===null||i===void 0?void 0:i.value;return e};this.getFilteredChildMenuOptions=t=>{let i=t.children;if(this.searchable){i=o(t.children,this.includeDescriptionsInSearch,this.searchableSelectInputValue,this.searchMatchPosition)}else{i=o(t.children,false,this.pressedCharacters,"start")}const e=Object.assign({},t);e.children=i;return e};this.handleNativeSelectChange=()=>{this.icOptionSelect.emit({value:this.nativeSelectElement.value});this.emitImmediateIcChange(this.nativeSelectElement.value);this.setTextColor()};this.handleCustomSelectChange=t=>{if(this.searchable&&t.detail.label===this.emptyOptionListText){this.searchableSelectElement.focus();return}if(this.searchable){this.searchableSelectInputValue=this.getLabelFromValue(t.detail.value)}this.ariaActiveDescendant=t.detail.optionId;this.icOptionSelect.emit({value:t.detail.value});this.emitIcChange(t.detail.value)};this.handleMenuChange=t=>{this.open=t.detail.open;this.pressedCharacters="";this.searchable&&this.handleFocusIndicatorDisplay()};this.handleMenuKeyPress=t=>{t.cancelBubble=true;this.handleCharacterKeyDown(t.detail.key)};this.handleFocusIndicatorDisplay=()=>{const t=this.host.shadowRoot.querySelector(".focus-indicator");if(this.open){t.classList.add("focus-indicator-enabled")}else{t.classList.remove("focus-indicator-enabled")}};this.handleMouseDown=t=>{if(!this.open){t.preventDefault()}};this.isExternalFiltering=()=>this.searchable&&this.disableFilter;this.handleClick=t=>{if(this.isExternalFiltering()){this.menu.options=this.filteredOptions}else{this.noOptions=null;this.menu.options=this.options}if(t.detail!==0&&this.isMenuEnabled()){this.menu.handleClickOpen()}};this.handleExpandIconMouseDown=t=>{if(!this.disabled){t.preventDefault();this.searchableSelectElement.focus();this.handleClick(t)}};this.handleClear=t=>{t.stopPropagation();this.noOptions=null;this.emitImmediateIcChange(null);this.icClear.emit();if(this.searchable){this.searchableSelectElement.value=null;this.searchableSelectInputValue=null;this.menu.options=this.options;this.searchableSelectElement.focus();if(!this.isMenuEnabled()){this.setMenuChange(false)}}else{this.customSelectElement.focus()}};this.handleCharacterKeyDown=t=>{if(this.open&&t===" "&&this.pressedCharacters.length===0){this.setMenuChange(false)}if(t.length===1&&!this.searchable){window.clearTimeout(this.characterKeyPressTimer);this.characterKeyPressTimer=window.setTimeout((()=>this.pressedCharacters=""),1e3);this.pressedCharacters+=t;this.handleFilter();if(!this.noOptions){this.emitImmediateIcChange(this.filteredOptions[0].value)}}else{this.pressedCharacters=""}};this.handleNativeSelectKeyDown=t=>{t.cancelBubble=true;this.handleCharacterKeyDown(t.key)};this.handleKeyDown=t=>{t.cancelBubble=true;const i=t.key==="ArrowDown"||t.key==="ArrowUp";if(!this.open){if(this.isExternalFiltering()&&(t.key==="Enter"||i)){this.menu.options=this.filteredOptions}else{this.noOptions=null;this.menu.options=this.options}}if(this.open&&t.key==="Enter"){this.setMenuChange(false)}else{if(!(i&&this.noOptions!==null)&&this.isMenuEnabled()){if(!(t.key===" "&&this.pressedCharacters.length>0)){this.menu.handleKeyboardOpen(t)}this.handleCharacterKeyDown(t.key)}}};this.handleClearButtonFocus=()=>{this.clearButtonFocused=true};this.handleClearButtonBlur=()=>{this.clearButtonFocused=false};this.handleFilter=()=>{const t=this.searchable?[...this.options]:this.ungroupedOptions;let i=false;let e=[];t.map((t=>{if(t.children)i=true}));let s;if(this.searchable){s=o(t,this.includeDescriptionsInSearch,this.searchableSelectInputValue,this.searchMatchPosition)}else{s=o(t,false,this.pressedCharacters,"start")}if(!i){e=s}else{t.map((t=>{if(this.includeGroupTitlesInSearch){if(s.indexOf(t)!==-1){e.push(t)}else{e.push(this.getFilteredChildMenuOptions(t))}}else{e.push(this.getFilteredChildMenuOptions(t))}}))}let a=false;if(i){a=true;e.map((t=>{if(t.children.length>0){a=false}}))}const n=[{label:this.emptyOptionListText,value:""}];if(e.length>0&&!a){this.noOptions=null;this.filteredOptions=e}else{this.noOptions=n;this.filteredOptions=this.noOptions}};this.handleSearchableSelectInput=t=>{this.searchableSelectInputValue=t.target.value;this.icInput.emit({value:this.searchableSelectInputValue});if(this.disableFilter){this.emitIcChange(this.searchableSelectInputValue)}else if(this.getValueFromLabel(this.searchableSelectInputValue)===undefined){this.emitIcChange(null)}if(this.isMenuEnabled()){this.setMenuChange(true)}else{this.setMenuChange(false)}if(!this.disableFilter){this.handleFilter();this.debounceAriaLiveUpdate()}};this.updateSearchableSelectResultAriaLive=()=>{const t=this.host.shadowRoot.querySelector(".searchable-select-results-status");if(t){if(this.noOptions!==null){t.innerText=this.emptyOptionListText}else{t.innerText=""}}};this.getDefaultValue=t=>this.getLabelFromValue(t)||t||null;this.onFocus=()=>{this.icFocus.emit()};this.onBlur=t=>{const i=this.searchable&&t.relatedTarget!==this.menu&&!Array.from(this.menu.querySelectorAll("[role='option']")).includes(t.relatedTarget)&&!(this.clearButton&&t.relatedTarget===this.clearButton);if(i){this.setMenuChange(false);this.handleFocusIndicatorDisplay()}this.icBlur.emit()};this.handleFormReset=()=>{this.value=this.initialValue;if(this.searchable){this.searchableSelectInputValue=this.getDefaultValue(this.value)}};this.label=undefined;this.options=[];this.required=false;this.hideLabel=false;this.disabled=false;this.readonly=false;this.placeholder="Select an option";this.helperText="";this.small=false;this.fullWidth=false;this.validationStatus="";this.validationText="";this.value=undefined;this.debounce=0;this.name=this.inputId;this.showClearButton=false;this.searchable=false;this.includeDescriptionsInSearch=false;this.includeGroupTitlesInSearch=false;this.searchMatchPosition="anywhere";this.charactersUntilSuggestions=0;this.emptyOptionListText="No results found";this.disableFilter=false;this.open=false;this.clearButtonFocused=false;this.searchableSelectInputValue=null;this.filteredOptions=this.options;this.ariaActiveDescendant=undefined;this.noOptions=null;this.initialValue=this.value;this.currDebounce=this.debounce;this.currValue=this.value;this.debounceIcChange=undefined;this.pressedCharacters=""}watchOptionsHandler(){if(this.isExternalFiltering()){if(this.options.length>0){this.setOptionsValuesFromLabels();this.noOptions=null;this.filteredOptions=this.options}else if(this.isMenuEnabled()){this.noOptions=[{label:this.emptyOptionListText,value:""}];this.filteredOptions=this.noOptions}this.updateSearchableSelectResultAriaLive();this.setDefaultValue()}else{this.setOptionsValuesFromLabels();this.filteredOptions=this.options;if(this.initialOptionsEmpty){this.setDefaultValue();this.initialOptionsEmpty=false}}}debounceChangedHandler(t){this.updateOnChangeDebounce(t)}valueChangedHandler(){if(this.value!==this.currValue){this.currValue=this.value}}async setFocus(){if(this.nativeSelectElement){this.nativeSelectElement.focus()}else if(this.customSelectElement){this.customSelectElement.focus()}else if(this.searchableSelectElement){this.searchableSelectElement.focus()}}updateOnChangeDebounce(t){if(this.currDebounce!==t){this.currDebounce=t}}debounceAriaLiveUpdate(){clearTimeout(this.debounceAria);window.setTimeout((()=>{this.updateSearchableSelectResultAriaLive()}),800)}setDefaultValue(){if(!this.hasSetDefaultValue&&this.currValue){this.searchableSelectInputValue=this.getDefaultValue(this.currValue);this.initialValue=this.currValue;this.hasSetDefaultValue=true}}componentWillLoad(){this.inheritedAttributes=h(this.host,[...f,"tabindex","title"]);this.setOptionsValuesFromLabels();l(this.host,this.handleFormReset);if(!this.options.length){this.initialOptionsEmpty=true}else if(!this.disableFilter){this.setDefaultValue()}}componentDidRender(){if(this.nativeSelectElement&&!this.disabled){this.setTextColor()}}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Select")}disconnectedCallback(){c(this.host,this.handleFormReset)}render(){const{small:t,disabled:i,fullWidth:a,helperText:n,hideLabel:o,label:h,menuId:l,name:r,options:c,placeholder:f,readonly:x,required:y,searchable:k,showClearButton:z,validationStatus:L,validationText:C,currValue:M}=this;d(true,this.host,r,M,i);const H=L===v.Error?"true":"false";const B=u(this.inputId,n!=="",p(this.validationStatus,this.disabled)).trim();return e(s,{class:{disabled:i,searchable:k,small:t,"full-width":a}},e("ic-input-container",{readonly:x},!o&&e("ic-input-label",{for:this.inputId,label:h,helperText:n,required:y,disabled:i,readonly:x}),e("ic-input-component-container",{ref:t=>this.anchorEl=t,class:{"menu-open":this.open},small:t,fullWidth:a,disabled:i,readonly:x,validationStatus:L},x?e("ic-typography",null,e("p",null,this.getLabelFromValue(M))):b()?e("select",Object.assign({ref:t=>this.nativeSelectElement=t,disabled:i,onChange:this.handleNativeSelectChange,required:y,id:this.inputId,"aria-label":h,"aria-describedby":B,"aria-invalid":H,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.handleNativeSelectKeyDown},this.inheritedAttributes),e("option",{value:"",selected:true,disabled:!z},f),c.map((t=>{if(t.children){return e("optgroup",{label:t.label},t.children.map((t=>e("option",{value:t.value,disabled:t.disabled,selected:t.value===M},t.label))))}else{return e("option",{value:t.value,disabled:t.disabled,selected:t.value===M},t.label)}}))):k?e("div",{class:"searchable-select-container"},e("input",{class:"select-input",role:"combobox",autocomplete:"off","aria-label":h,"aria-describedby":B,"aria-activedescendant":this.ariaActiveDescendant,"aria-autocomplete":"list","aria-expanded":this.open?"true":"false","aria-invalid":H,"aria-required":y?"true":"false","aria-controls":l,ref:t=>this.searchableSelectElement=t,id:this.inputId,value:this.searchableSelectInputValue,placeholder:f,disabled:i,onInput:this.handleSearchableSelectInput,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.onFocus,onBlur:this.onBlur}),this.searchableSelectInputValue&&(z||k)&&e("div",{class:"clear-button-container"},e("ic-button",{id:"clear-button",ref:t=>this.clearButton=t,"aria-label":this.searchableSelectInputValue&&M===null?"Clear input":"Clear selection",class:"clear-button",innerHTML:w,onClick:this.handleClear,onFocus:this.handleClearButtonFocus,onBlur:this.handleClearButtonBlur,size:t?"small":"default",variant:"icon",appearance:this.clearButtonFocused?m.Light:m.Dark}),e("div",{class:"divider"})),e("span",{onMouseDown:this.handleExpandIconMouseDown,class:{"expand-icon":true,"expand-icon-open":this.open,"expand-icon-filled":!(M==null||M==="")},innerHTML:g,"aria-hidden":"true"}),e("div",{"aria-live":"polite",role:"status",class:"searchable-select-results-status"})):e("div",{class:"select-container"},e("button",{class:"select-input",ref:t=>this.customSelectElement=t,id:this.inputId,"aria-label":`${h}, ${this.getLabelFromValue(M)||f}${y?", required":""}`,"aria-describedby":B,"aria-invalid":H,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-owns":l,"aria-controls":l,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,onClick:this.handleClick,onMouseDown:this.handleMouseDown,onKeyDown:this.handleKeyDown},e("ic-typography",{variant:"body",class:{"value-text":true,placeholder:this.getLabelFromValue(M)===undefined}},e("p",null,this.getLabelFromValue(M)||f)),e("div",{class:"select-input-end"},M&&z&&e("div",{class:"divider"}),e("span",{class:{"expand-icon":true,"expand-icon-open":this.open,"expand-icon-filled":!(M==null||M==="")},innerHTML:g,"aria-hidden":"true"}))),M&&z&&e("ic-button",{id:"clear-button","aria-label":"Clear selection",class:"clear-button",innerHTML:w,onClick:this.handleClear,onFocus:this.handleClearButtonFocus,onBlur:this.handleClearButtonBlur,size:t?"small":"default",variant:"icon",appearance:this.clearButtonFocused?m.Light:m.Dark}))),!b()&&e("ic-menu",{class:{"no-results":this.noOptions!==null&&this.searchable},ref:t=>this.menu=t,inputEl:k?this.searchableSelectElement:this.customSelectElement,inputLabel:h,anchorEl:this.anchorEl,small:t,menuId:l,open:this.open,options:k?this.filteredOptions:c,value:M,fullWidth:a,onMenuStateChange:this.handleMenuChange,onMenuOptionSelect:this.handleCustomSelectChange,onMenuKeyPress:this.handleMenuKeyPress,onUngroupedOptionsSet:this.setUngroupedOptions,parentEl:this.host}),p(this.validationStatus,this.disabled)&&e("ic-input-validation",{class:{"menu-open":this.open},ariaLiveMode:"polite",status:L,message:C,for:this.inputId})))}static get delegatesFocus(){return true}get host(){return a(this)}static get watchers(){return{options:["watchOptionsHandler"],debounce:["debounceChangedHandler"],value:["valueChangedHandler"]}}};k.style=x;export{k as ic_select};
2
- //# sourceMappingURL=p-ce96a494.entry.js.map