@ukic/web-components 2.29.0 → 2.30.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (223) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/ic-alert.cjs.entry.js +1 -1
  3. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +43 -20
  5. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ic-checkbox.cjs.entry.js +2 -2
  7. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  8. package/dist/cjs/ic-input-label_2.cjs.entry.js +5 -4
  9. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-navigation-group.cjs.entry.js +1 -1
  11. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-page-header.cjs.entry.js +4 -4
  13. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  14. package/dist/cjs/ic-popover-menu.cjs.entry.js +20 -18
  15. package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
  17. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  18. package/dist/cjs/ic-search-bar.cjs.entry.js +15 -28
  19. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  20. package/dist/cjs/ic-select.cjs.entry.js +6 -6
  21. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  22. package/dist/cjs/ic-switch.cjs.entry.js +1 -1
  23. package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
  24. package/dist/cjs/ic-tab-context.cjs.entry.js +68 -145
  25. package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
  26. package/dist/cjs/ic-tab-panel.cjs.entry.js +5 -13
  27. package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
  28. package/dist/cjs/ic-tab.cjs.entry.js +9 -10
  29. package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
  30. package/dist/cjs/ic-text-field.cjs.entry.js +2 -2
  31. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  32. package/dist/cjs/ic-typography.cjs.entry.js +3 -1
  33. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  34. package/dist/cjs/loader.cjs.js +1 -1
  35. package/dist/collection/components/ic-alert/ic-alert.css +7 -0
  36. package/dist/collection/components/ic-alert/ic-alert.js +1 -1
  37. package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
  38. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +44 -19
  39. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
  40. package/dist/collection/components/ic-checkbox/ic-checkbox.css +5 -0
  41. package/dist/collection/components/ic-checkbox/ic-checkbox.js +1 -1
  42. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  43. package/dist/collection/components/ic-input-label/ic-input-label.css +1 -0
  44. package/dist/collection/components/ic-input-label/ic-input-label.js +22 -3
  45. package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
  46. package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js +30 -0
  47. package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js.map +1 -1
  48. package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +1 -1
  49. package/dist/collection/components/ic-page-header/ic-page-header.css +5 -2
  50. package/dist/collection/components/ic-page-header/ic-page-header.js +3 -3
  51. package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
  52. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +47 -18
  53. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
  54. package/dist/collection/components/ic-radio-group/ic-radio-group.js +1 -1
  55. package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
  56. package/dist/collection/components/ic-search-bar/ic-search-bar.css +1 -0
  57. package/dist/collection/components/ic-search-bar/ic-search-bar.js +14 -27
  58. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  59. package/dist/collection/components/ic-select/ic-select.css +1 -0
  60. package/dist/collection/components/ic-select/ic-select.js +5 -5
  61. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  62. package/dist/collection/components/ic-switch/ic-switch.css +5 -0
  63. package/dist/collection/components/ic-tab/ic-tab.js +9 -10
  64. package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
  65. package/dist/collection/components/ic-tab-context/ic-tab-context.js +68 -145
  66. package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
  67. package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js +2 -2
  68. package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js.map +1 -1
  69. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +5 -73
  70. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
  71. package/dist/collection/components/ic-text-field/ic-text-field.css +1 -0
  72. package/dist/collection/components/ic-text-field/ic-text-field.js +1 -1
  73. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  74. package/dist/collection/components/ic-typography/ic-typography.js +3 -1
  75. package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
  76. package/dist/components/ic-alert2.js +1 -1
  77. package/dist/components/ic-alert2.js.map +1 -1
  78. package/dist/components/ic-breadcrumb-group.js +45 -21
  79. package/dist/components/ic-breadcrumb-group.js.map +1 -1
  80. package/dist/components/ic-checkbox.js +2 -2
  81. package/dist/components/ic-checkbox.js.map +1 -1
  82. package/dist/components/ic-input-label2.js +6 -4
  83. package/dist/components/ic-input-label2.js.map +1 -1
  84. package/dist/components/ic-navigation-group.js +1 -1
  85. package/dist/components/ic-navigation-group.js.map +1 -1
  86. package/dist/components/ic-page-header.js +4 -4
  87. package/dist/components/ic-page-header.js.map +1 -1
  88. package/dist/components/ic-popover-menu.js +22 -19
  89. package/dist/components/ic-popover-menu.js.map +1 -1
  90. package/dist/components/ic-radio-group.js +1 -1
  91. package/dist/components/ic-radio-group.js.map +1 -1
  92. package/dist/components/ic-search-bar.js +15 -28
  93. package/dist/components/ic-search-bar.js.map +1 -1
  94. package/dist/components/ic-select.js +6 -6
  95. package/dist/components/ic-select.js.map +1 -1
  96. package/dist/components/ic-switch.js +1 -1
  97. package/dist/components/ic-switch.js.map +1 -1
  98. package/dist/components/ic-tab-context.js +68 -145
  99. package/dist/components/ic-tab-context.js.map +1 -1
  100. package/dist/components/ic-tab-panel.js +6 -17
  101. package/dist/components/ic-tab-panel.js.map +1 -1
  102. package/dist/components/ic-tab.js +9 -10
  103. package/dist/components/ic-tab.js.map +1 -1
  104. package/dist/components/ic-text-field2.js +2 -2
  105. package/dist/components/ic-text-field2.js.map +1 -1
  106. package/dist/components/ic-typography2.js +3 -1
  107. package/dist/components/ic-typography2.js.map +1 -1
  108. package/dist/core/core.esm.js +1 -1
  109. package/dist/core/core.esm.js.map +1 -1
  110. package/dist/core/{p-4b89890b.entry.js → p-22ef3303.entry.js} +2 -2
  111. package/dist/core/p-22ef3303.entry.js.map +1 -0
  112. package/dist/core/{p-227f6a41.entry.js → p-2889cc17.entry.js} +2 -2
  113. package/dist/core/p-2889cc17.entry.js.map +1 -0
  114. package/dist/core/p-570f1930.entry.js +2 -0
  115. package/dist/core/p-570f1930.entry.js.map +1 -0
  116. package/dist/core/p-72b350bc.entry.js +2 -0
  117. package/dist/core/p-72b350bc.entry.js.map +1 -0
  118. package/dist/core/p-7591805d.entry.js +2 -0
  119. package/dist/core/p-7591805d.entry.js.map +1 -0
  120. package/dist/core/p-81deed36.entry.js +2 -0
  121. package/dist/core/p-81deed36.entry.js.map +1 -0
  122. package/dist/core/p-85f30b1c.entry.js +2 -0
  123. package/dist/core/p-85f30b1c.entry.js.map +1 -0
  124. package/dist/core/p-94d5aa77.entry.js +2 -0
  125. package/dist/core/p-94d5aa77.entry.js.map +1 -0
  126. package/dist/core/p-9df32798.entry.js +2 -0
  127. package/dist/core/p-9df32798.entry.js.map +1 -0
  128. package/dist/core/{p-dcd475cc.entry.js → p-b4da66f0.entry.js} +2 -2
  129. package/dist/core/p-b4da66f0.entry.js.map +1 -0
  130. package/dist/core/p-cbd4caf5.entry.js +2 -0
  131. package/dist/core/p-cbd4caf5.entry.js.map +1 -0
  132. package/dist/core/p-d638d75d.entry.js +2 -0
  133. package/dist/core/p-d638d75d.entry.js.map +1 -0
  134. package/dist/core/p-da5098db.entry.js +2 -0
  135. package/dist/core/p-da5098db.entry.js.map +1 -0
  136. package/dist/core/{p-ed2b2bd7.entry.js → p-dd4ef67f.entry.js} +2 -2
  137. package/dist/core/{p-ed2b2bd7.entry.js.map → p-dd4ef67f.entry.js.map} +1 -1
  138. package/dist/core/{p-3f2d4108.entry.js → p-de0afa78.entry.js} +2 -2
  139. package/dist/core/p-de0afa78.entry.js.map +1 -0
  140. package/dist/core/p-ea58ae1d.entry.js +2 -0
  141. package/dist/core/p-ea58ae1d.entry.js.map +1 -0
  142. package/dist/esm/core.js +1 -1
  143. package/dist/esm/ic-alert.entry.js +1 -1
  144. package/dist/esm/ic-alert.entry.js.map +1 -1
  145. package/dist/esm/ic-breadcrumb-group.entry.js +43 -20
  146. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
  147. package/dist/esm/ic-checkbox.entry.js +2 -2
  148. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  149. package/dist/esm/ic-input-label_2.entry.js +5 -4
  150. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  151. package/dist/esm/ic-navigation-group.entry.js +1 -1
  152. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  153. package/dist/esm/ic-page-header.entry.js +4 -4
  154. package/dist/esm/ic-page-header.entry.js.map +1 -1
  155. package/dist/esm/ic-popover-menu.entry.js +20 -18
  156. package/dist/esm/ic-popover-menu.entry.js.map +1 -1
  157. package/dist/esm/ic-radio-group.entry.js +1 -1
  158. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  159. package/dist/esm/ic-search-bar.entry.js +15 -28
  160. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  161. package/dist/esm/ic-select.entry.js +6 -6
  162. package/dist/esm/ic-select.entry.js.map +1 -1
  163. package/dist/esm/ic-switch.entry.js +1 -1
  164. package/dist/esm/ic-switch.entry.js.map +1 -1
  165. package/dist/esm/ic-tab-context.entry.js +68 -145
  166. package/dist/esm/ic-tab-context.entry.js.map +1 -1
  167. package/dist/esm/ic-tab-panel.entry.js +5 -13
  168. package/dist/esm/ic-tab-panel.entry.js.map +1 -1
  169. package/dist/esm/ic-tab.entry.js +9 -10
  170. package/dist/esm/ic-tab.entry.js.map +1 -1
  171. package/dist/esm/ic-text-field.entry.js +2 -2
  172. package/dist/esm/ic-text-field.entry.js.map +1 -1
  173. package/dist/esm/ic-typography.entry.js +3 -1
  174. package/dist/esm/ic-typography.entry.js.map +1 -1
  175. package/dist/esm/loader.js +1 -1
  176. package/dist/types/components/ic-alert/ic-alert.d.ts +1 -1
  177. package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +1 -0
  178. package/dist/types/components/ic-input-label/ic-input-label.d.ts +4 -0
  179. package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +2 -2
  180. package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +9 -6
  181. package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +0 -12
  182. package/dist/types/components.d.ts +14 -5
  183. package/hydrate/index.js +191 -262
  184. package/package.json +2 -2
  185. package/vscode-data.json +5 -1
  186. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.e2e.js +0 -343
  187. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.e2e.js.map +0 -1
  188. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js +0 -1106
  189. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js.map +0 -1
  190. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.e2e.js +0 -49
  191. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.e2e.js.map +0 -1
  192. package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js +0 -65
  193. package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js.map +0 -1
  194. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js +0 -109
  195. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js.map +0 -1
  196. package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js +0 -39
  197. package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js.map +0 -1
  198. package/dist/core/p-093600a2.entry.js +0 -2
  199. package/dist/core/p-093600a2.entry.js.map +0 -1
  200. package/dist/core/p-227f6a41.entry.js.map +0 -1
  201. package/dist/core/p-3f2d4108.entry.js.map +0 -1
  202. package/dist/core/p-4562904d.entry.js +0 -2
  203. package/dist/core/p-4562904d.entry.js.map +0 -1
  204. package/dist/core/p-4b89890b.entry.js.map +0 -1
  205. package/dist/core/p-60746e10.entry.js +0 -2
  206. package/dist/core/p-60746e10.entry.js.map +0 -1
  207. package/dist/core/p-7c2b59fe.entry.js +0 -2
  208. package/dist/core/p-7c2b59fe.entry.js.map +0 -1
  209. package/dist/core/p-9e15d0e1.entry.js +0 -2
  210. package/dist/core/p-9e15d0e1.entry.js.map +0 -1
  211. package/dist/core/p-aeb001d7.entry.js +0 -2
  212. package/dist/core/p-aeb001d7.entry.js.map +0 -1
  213. package/dist/core/p-cb14349b.entry.js +0 -2
  214. package/dist/core/p-cb14349b.entry.js.map +0 -1
  215. package/dist/core/p-d3750771.entry.js +0 -2
  216. package/dist/core/p-d3750771.entry.js.map +0 -1
  217. package/dist/core/p-db52d416.entry.js +0 -2
  218. package/dist/core/p-db52d416.entry.js.map +0 -1
  219. package/dist/core/p-dcd475cc.entry.js.map +0 -1
  220. package/dist/core/p-e735d773.entry.js +0 -2
  221. package/dist/core/p-e735d773.entry.js.map +0 -1
  222. package/dist/core/p-e8fa0095.entry.js +0 -2
  223. package/dist/core/p-e8fa0095.entry.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icTextFieldCss","inputIds","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","TextField","this","inheritedAttributes","hostMutationObserver","getMaxLengthExceeded","value","numChars","length","type","minValueUnattained","Number","min","maxValueExceeded","max","maxLength","maxLengthExceeded","getMaxCharactersReached","maxCharactersReached","maxCharacters","maxCharactersError","onInput","ev","target","icInput","emit","onBlur","minCharactersUnattained","minCharacters","icBlur","onFocus","icFocus","hasStatus","status","disabled","handleFormReset","initialValue","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","addedNodes","removedNodes","includes","el","getAttribute","checkSlotInChildMutations","forceUpdate","undefined","inputId","debounceChanged","icChange","debounceEvent","debounce","watchValueHandler","newValue","inputEl","connectedCallback","disconnectedCallback","removeFormResetListener","_a","disconnect","componentWillLoad","inheritAttributes","readonly","addFormResetListener","removeDisabledFalse","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","validationInlineInternal","getValidationText","validationText","MutationObserver","observe","attributes","childList","handleKeyDown","icKeydown","event","setFocus","focus","render","name","required","size","small","placeholder","helperText","rows","resize","validationStatus","validationInline","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","currentStatus","IcInformationStatus","Warning","Error","currentValidationText","maxLengthMessage","maxNumChars","messageAriaLive","showStatusText","Success","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","disabledText","showLeftIcon","querySelector","invalid","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","ariaActiveDescendant","ariaExpanded","ariaOwns","autocomplete","autocapitalize","autoFocus","role","maxlength","minlength","isSlotUsed","isEmptyString","message","ariaLiveMode","variant","hidden"],"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"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field\n */\n display: block;\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\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 padding-right: var(--ic-space-xxxs);\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 forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\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;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\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 private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\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 * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: 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 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 * 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 * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\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 * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\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 label for the input.\n */\n @Prop() label!: string;\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: string | number = undefined;\n\n /**\n * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n */\n @Prop() maxCharacters: number = 0;\n\n /**\n * The count of characters in the field. Will display a warning if the bound is reached.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The text to display as the validation message when the maximum length is exceeded.\n */\n @Prop() maxLengthMessage: string = \"Maximum length exceeded\";\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: string | number = undefined;\n\n /**\n * The minimum number of characters that can be entered in the field.\n */\n @Prop() minCharacters: number = 0;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: 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 * The size of the text field component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\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 * @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 * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\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 * @internal If `true`, the validation will display inline.\n */\n @Prop() validationInlineInternal: boolean = false;\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 * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\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 removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /**\n * Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\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 maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const currentStatus =\n maxLengthExceeded ||\n maxValueExceeded ||\n minValueUnattained ||\n minCharactersUnattained ||\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? this.maxLengthMessage\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded ||\n maxCharactersError ||\n maxValueExceeded ||\n minValueUnattained ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\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 size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {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\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !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={placeholder ? placeholder : \"\"}\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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\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 maxCharactersError ||\n minCharactersUnattained ||\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline) ||\n validationInlineInternal\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"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{r as e,c as t,h as o,H as i,g as n}from"./p-6b5e91e2.js";import{I as a}from"./p-26b7b18f.js";const s='/*! 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:not[hidden]{display:block}:host(.ic-tab-panel-light){color:white}';const r=class{constructor(o){e(this,o);this.tabPanelCreated=t(this,"tabPanelCreated",7);this.tabPanelRemoved=t(this,"tabPanelRemoved",7);this.appearance="dark";this.contextId="default"}connectedCallback(){this.tabPanelCreated.emit(this.el)}disconnectedCallback(){var e;(e=document.querySelector(`ic-tab-context[context-id=${this.contextId}]`))===null||e===void 0?void 0:e.tabRemovedHandler()}render(){return o(i,{class:{"ic-tab-panel-light":this.appearance===a.Light},role:"tabpanel"},o("div",null,o("slot",null)))}get el(){return n(this)}};r.style=s;export{r as ic_tab_panel};
2
+ //# sourceMappingURL=p-9df32798.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icTabPanelCss","TabPanel","connectedCallback","this","tabPanelCreated","emit","el","disconnectedCallback","_a","document","querySelector","contextId","tabRemovedHandler","render","h","Host","class","appearance","IcThemeForegroundEnum","Light","role"],"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host:not[hidden] {\n display: block;\n}\n\n:host(.ic-tab-panel-light) {\n color: white;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() el: HTMLIcTabPanelElement;\n\n /**\n * @internal The appearance of the tabs, e.g dark, or light.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /**\n * @deprecated This is no longer required.\n * The context id is passed down from `ic-tab-context`\n */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * @internal Emitted when a tab panel is dynamically created.\n */\n @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n /**\n * @internal Emitted when a tab panel is unmounted.\n */\n @Event() tabPanelRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabPanelCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n document\n .querySelector<HTMLIcTabContextElement>(\n `ic-tab-context[context-id=${this.contextId}]`\n )\n ?.tabRemovedHandler();\n }\n\n render() {\n return (\n <Host\n class={{\n \"ic-tab-panel-light\": this.appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,26E,MCmBTC,EAAQ,M,2IAM+B,O,eAMJ,S,CAY9C,iBAAAC,GACEC,KAAKC,gBAAgBC,KAAKF,KAAKG,G,CAGjC,oBAAAC,G,OACEC,EAAAC,SACGC,cACC,6BAA6BP,KAAKQ,iBACnC,MAAAH,SAAA,SAAAA,EACCI,mB,CAGN,MAAAC,GACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,qBAAsBb,KAAKc,aAAeC,EAAsBC,OAElEC,KAAK,YAELN,EAAA,WACEA,EAAA,c"}
@@ -1,2 +1,2 @@
1
- import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{A as n,d as a}from"./p-fef9e8c9.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.closeMenu=(t=false)=>{var e;this.open=false;if(t){(e=this.anchorEl)===null||e===void 0?void 0:e.focus()}this.icPopoverClosed.emit()};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector("ul");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=a(this.submenuId)?1:0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.hasSubMenu&&t.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("div",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("div",null,i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"}))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu","aria-owns":a(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false,"aria-controls":a(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
2
- //# sourceMappingURL=p-dcd475cc.entry.js.map
1
+ import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{A as n,d as a}from"./p-fef9e8c9.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector("ul");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.hasSubMenu&&t.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":t.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(t=false){var e;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(t)}else{if(t){(e=this.anchorEl)===null||e===void 0?void 0:e.focus()}this.icPopoverClosed.emit()}}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("div",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("div",null,i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"}))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
2
+ //# sourceMappingURL=p-b4da66f0.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","undefined","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","open","initPopperJS","popperInstance","createPopper","anchorEl","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","hasSubMenu","label","closeMenu","handleSubmenuChange","childEl","submenuTriggerFor","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","setFocusToAnchor","icPopoverClosed","emit","render","h","Host","class","menu","tabindex","ref","onClick","slot","viewBox","fill","xmlns","d","variant","role"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n color: var(--ic-color-tertiary-text);\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel: number = 1;\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(\n ev: CustomEvent<{\n label: string;\n hasSubMenu: boolean;\n }>\n ): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /**\n * @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(setFocusToAnchor = false): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit();\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{r as i,h as t,H as e,g as o}from"./p-6b5e91e2.js";import{D as s,b as n,e as a,z as r}from"./p-fef9e8c9.js";import{C as h}from"./p-3b185c32.js";import"./p-26b7b18f.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}:host{display:block}:host(.in-side-menu){border-bottom:var(--ic-border-width) solid var(--ic-architectural-200);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none;white-space:nowrap}:host(.in-side-menu) .navigation-group{height:2.5rem;width:100%;text-align:left}:host(.in-side-menu) .navigation-group .ic-typography-label{width:11.875rem}:host(.in-side-menu) .navigation-group-side-menu{color:var(--ic-action-default);justify-content:flex-start;padding:0 var(--ic-space-md) 0 var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-action-default);justify-content:flex-start;padding-left:var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;height:0.45em;left:0.75em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);outline:none;cursor:pointer}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:var(--ic-z-index-navigation-item);transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu:hover,:host(.in-side-menu) .navigation-group-side-menu:active,:host(.in-side-menu) .navigation-group-side-menu:focus{background-color:var(--ic-architectural-20);color:var(--ic-action-default);cursor:auto;box-shadow:none;outline:none}:host(.in-side-menu) .navigation-group-side-menu:focus{outline:var(--ic-hc-focus-outline)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover);color:var(--ic-action-default);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-default)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{color:var(--ic-action-default);box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline)}:host .navigation-group-dropdown{background-color:var(--ic-architectural-20);border-bottom:var(--ic-border-default);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);z-index:calc(var(--ic-z-index-navigation-item) - 1)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:16.5rem}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg);height:var(--ic-space-lg);width:var(--ic-space-lg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto) !important;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .link,:host(.navigation-group-side-nav) ::slotted(a){height:var(--navigation-child-items-height, auto)}:host(.collapsed) .grouped-links-wrapper{height:0;transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .navigation-group{height:var(--navigation-group-height);width:var(--navigation-group-width);justify-content:var(--navigation-group-justify-content);padding-right:var(--navigation-group-expand-toggle-padding)}:host(.navigation-group-side-nav) .navigation-group:hover,:host(.navigation-group-side-nav) .navigation-group:active,:host(.navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left);white-space:nowrap}';const u=class{constructor(e){i(this,e);this.allGroupedNavigationItems=[];this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS=100;this.IC_NAVIGATION_ITEM="ic-navigation-item";this.mouseGate=false;this.nodeName="IC-NAVIGATION-GROUP";this.GROUPED_LINKS_WRAPPER_CLASS=".grouped-links-wrapper";this.sideNavExpandHandler=i=>{this.isSideNavExpanded=i.detail.sideNavExpanded;const t=this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);if(!t)return;if(this.isSideNavExpanded){if(this.expanded&&this.expandedNavItemsHeight){this.setGroupedLinksElementHeight(t,this.expandedNavItemsHeight)}else if(this.expanded){setTimeout((()=>{this.expandedNavItemsHeight=this.getNavigationChildItemsHeight();this.setGroupedLinksElementHeight(t,this.expandedNavItemsHeight)}),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}}else{if(this.expanded&&this.collapsedNavItemsHeight){this.setGroupedLinksElementHeight(t,this.collapsedNavItemsHeight)}else if(this.expanded){setTimeout((()=>{this.collapsedNavItemsHeight=this.getNavigationChildItemsHeight();this.setGroupedLinksElementHeight(t,this.collapsedNavItemsHeight)}),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}}};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||s.L)}};this.setGroupedNavItemTabIndex=i=>{this.el.querySelectorAll(this.IC_NAVIGATION_ITEM).forEach((t=>{const e=t.shadowRoot.querySelector("a")||t.querySelector("a");if(e){e.setAttribute("tabindex",i)}}))};this.toggleGroupedLinkWrapperHeight=(i,t)=>{if(!i)return;if(t){if(this.isSideNavExpanded){this.setGroupedLinksElementHeight(i,this.expandedNavItemsHeight)}else{this.setGroupedLinksElementHeight(i,this.collapsedNavItemsHeight)}this.setGroupedNavItemTabIndex("0")}else{i.style.setProperty("--navigation-child-items-height","0");this.setGroupedNavItemTabIndex("-1")}};this.toggleExpanded=()=>{this.expanded=!this.expanded;const i=this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);this.toggleGroupedLinkWrapperHeight(i,this.expanded)};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{const t=i.relatedTarget;if(!this.el.contains(t)){this.hideDropdown()}};this.handleTopNavKeydown=i=>{if(i.key===" "||i.key==="Enter"){this.toggleDropdown()}else if(!this.inTopNavSideMenu&&i.key==="Escape"){this.hideDropdown()}};this.handleKeydown=i=>{if(i.key==="Enter"||i.key===" "||i.key==="Escape"){switch(this.navigationType){case"top":this.handleTopNavKeydown(i);break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}}};this.handleMouseLeave=i=>{const t=i.relatedTarget;this.mouseGate=false;if(!this.el.contains(t)&&t!==this.dropdown&&document.activeElement!==this.el&&!this.el.contains(document.activeElement)&&(t===null||t===void 0?void 0:t.nodeName)===this.nodeName&&this.dropdownOpen===true){this.mouseGate=true;this.hideDropdown()}else if(!this.el.contains(t)&&t!==this.dropdown&&!this.el.contains(document.activeElement)){this.mouseGate=false;setTimeout((()=>{this.dropdownOpen?this.hideDropdown():null}),500)}};this.handleMouseEnter=i=>{const t=i.relatedTarget;document.addEventListener("keydown",this.handleKeydown);if((t===null||t===void 0?void 0:t.nodeName)===this.nodeName&&this.mouseGate===true){this.showDropdown()}else if(this.dropdownOpen===false&&t!==null&&this.mouseGate===false){this.mouseGate=true;setTimeout((()=>{this.mouseGate&&this.showDropdown()}),500)}};this.renderDropdownGroupedLinks=()=>t("div",{class:{["navigation-group-dropdown"]:!this.inTopNavSideMenu,["navigation-group-dropdown-side-menu"]:this.inTopNavSideMenu,["selected"]:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:null,ref:i=>this.dropdown=i},t("nav",{class:{["navigation-group-dropdown-items"]:!this.inTopNavSideMenu}},t("ul",null,t("slot",null))));this.renderGroupedLinks=()=>t("ul",{class:"grouped-links-wrapper"},t("slot",null));this.getNavigationChildItemsHeight=()=>{let i=0;this.allGroupedNavigationItems.forEach((t=>{i+=t.offsetHeight}));return`${i}px`};this.setInitialGroupedLinksWrapperHeight=()=>{const i=this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);if(!i)return;if(!this.isSideNavExpanded&&!this.collapsedNavItemsHeight&&this.expanded){this.collapsedNavItemsHeight=this.getNavigationChildItemsHeight();this.setGroupedLinksElementHeight(i,this.collapsedNavItemsHeight)}if(this.isSideNavExpanded&&this.expanded){this.expandedNavItemsHeight=this.getNavigationChildItemsHeight();this.setGroupedLinksElementHeight(i,this.expandedNavItemsHeight)}};this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return this.renderDropdownGroupedLinks()}if(this.navigationType!=="top"){return this.renderGroupedLinks()}return null};this.deviceSize=s.XL;this.dropdownOpen=false;this.expanded=true;this.focusStyle=n();this.inTopNavSideMenu=false;this.navigationType=undefined;this.parentEl=undefined;this.expandable=false;this.label=undefined}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}componentWillLoad(){this.deviceSize=a();const{navType:i,parent:t}=r(this.el);this.navigationType=i;this.parentEl=t;if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler);if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}}componentDidLoad(){this.allGroupedNavigationItems=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}childBlurHandler(){this.hideDropdown()}navItemClickHandler(){this.hideDropdown()}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.groupEl){this.groupEl.focus()}}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}showDropdown(){if(!this.dropdownOpen){this.toggleDropdown()}}hideDropdown(){document.removeEventListener("keydown",this.handleKeydown);if(this.dropdownOpen){this.toggleDropdown()}}setGroupedLinksElementHeight(i,t){i.style.setProperty("--navigation-child-items-height",t)}render(){const{label:i,dropdownOpen:o,inTopNavSideMenu:s,expandable:n}=this;return t(e,{class:{["in-side-menu"]:s,expanded:this.expanded,collapsed:!this.expanded,["navigation-group-side-nav"]:this.navigationType==="side"},role:"listitem"},t("button",{onMouseEnter:!s&&this.navigationType==="top"&&this.handleMouseEnter,onMouseLeave:this.navigationType==="top"&&this.handleMouseLeave,tabindex:s&&!n?"-1":"0",onBlur:this.handleBlur,onClick:n?this.handleClick:null,onKeyDown:this.handleKeydown,class:{["navigation-group"]:true,[this.focusStyle]:!s,["navigation-group-side-menu"]:s&&!n,["navigation-group-side-menu-collapsed"]:s&&n&&!o,["navigation-group-side-menu-expanded"]:s&&n&&o,["selected"]:o&&!s},ref:i=>this.groupEl=i,"aria-expanded":`${o||this.expanded}`,"aria-haspopup":`${!s&&this.navigationType==="top"}`},t("ic-typography",{variant:this.navigationType==="side"?"caption":"label"},i),this.navigationType==="side"&&n&&t("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":this.expanded},innerHTML:h})),this.renderNavigationItems())}static get delegatesFocus(){return true}get el(){return o(this)}};u.style=d;export{u as ic_navigation_group};
2
+ //# sourceMappingURL=p-cbd4caf5.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icNavigationGroupCss","NavigationGroup","this","allGroupedNavigationItems","DYNAMIC_GROUPED_LINKS_HEIGHT_MS","IC_NAVIGATION_ITEM","mouseGate","nodeName","GROUPED_LINKS_WRAPPER_CLASS","sideNavExpandHandler","event","isSideNavExpanded","detail","sideNavExpanded","linkWrapper","el","shadowRoot","querySelector","expanded","expandedNavItemsHeight","setGroupedLinksElementHeight","setTimeout","getNavigationChildItemsHeight","collapsedNavItemsHeight","topNavResizedHandler","size","deviceSize","inTopNavSideMenu","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","setGroupedNavItemTabIndex","tabIndexValue","querySelectorAll","forEach","navigationItem","navItem","setAttribute","toggleGroupedLinkWrapperHeight","wrapper","style","setProperty","toggleExpanded","handleClick","ev","navigationType","toggleDropdown","handleBlur","target","relatedTarget","contains","hideDropdown","handleTopNavKeydown","key","handleKeydown","preventDefault","handleMouseLeave","relTarget","dropdown","document","activeElement","dropdownOpen","handleMouseEnter","addEventListener","showDropdown","renderDropdownGroupedLinks","h","class","onMouseLeave","ref","renderGroupedLinks","navigationChildItemsHeight","offsetHeight","setInitialGroupedLinksWrapperHeight","renderNavigationItems","expandable","XL","getThemeForegroundColor","disconnectedCallback","removeEventListener","componentWillLoad","getCurrentDeviceSize","navType","parent","getNavItemParentDetails","componentDidLoad","Array","from","childBlurHandler","navItemClickHandler","themeChangeHandler","theme","focusStyle","mode","setFocus","groupEl","focus","groupedNavItemWrapper","height","render","label","Host","collapsed","role","onMouseEnter","tabindex","onBlur","onClick","onKeyDown","variant","innerHTML","chevronIcon"],"sources":["src/components/ic-navigation-group/ic-navigation-group.css?tag=ic-navigation-group&encapsulation=shadow","src/components/ic-navigation-group/ic-navigation-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation group item\n */\n\n:host {\n display: block;\n}\n\n:host(.in-side-menu) {\n border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);\n padding: var(--ic-space-md) 0;\n}\n\n:host .navigation-group {\n height: 100%;\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n transition: var(--ic-easing-transition-slow);\n position: relative;\n background: none;\n border: none;\n white-space: nowrap;\n}\n\n:host(.in-side-menu) .navigation-group {\n height: 2.5rem;\n width: 100%;\n text-align: left;\n}\n\n:host(.in-side-menu) .navigation-group .ic-typography-label {\n width: 11.875rem;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu {\n color: var(--ic-action-default);\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) 0 var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed,\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n color: var(--ic-action-default);\n justify-content: flex-start;\n padding-left: var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n border-style: solid;\n border-width: 0.125em 0.125em 0 0;\n content: \"\";\n display: inline-block;\n height: 0.45em;\n left: 0.75em;\n position: relative;\n top: -0.1em;\n transform: rotate(135deg);\n vertical-align: top;\n width: 0.45em;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n top: 0.15em;\n transform: rotate(-45deg);\n}\n\n:host .navigation-group:hover,\n:host .navigation-group:active,\n:host .selected {\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-primary-text);\n outline: none;\n cursor: pointer;\n}\n\n:host(:not(.in-side-menu)) .navigation-group:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n z-index: var(--ic-z-index-navigation-item);\n transition: box-shadow var(--ic-easing-transition-fast);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:hover,\n:host(.in-side-menu) .navigation-group-side-menu:active,\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n background-color: var(--ic-architectural-20);\n color: var(--ic-action-default);\n cursor: auto;\n box-shadow: none;\n outline: none;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n color: var(--ic-action-default);\n cursor: pointer;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n color: var(--ic-action-default);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus {\n color: var(--ic-action-default);\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .navigation-group-dropdown {\n background-color: var(--ic-architectural-20);\n border-bottom: var(--ic-border-default);\n position: absolute;\n left: 0;\n right: 0;\n padding: var(--ic-space-xs) var(--ic-space-md);\n box-shadow: 0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);\n z-index: calc(var(--ic-z-index-navigation-item) - 1);\n}\n\n:host .navigation-group-dropdown-items-list {\n list-style: none;\n display: flex;\n flex-flow: column wrap;\n align-content: flex-start;\n padding-left: var(--ic-space-md);\n max-height: 16.5rem;\n}\n\n:host .chevron-toggle-icon-wrapper {\n display: flex;\n align-items: center;\n}\n\n:host .chevron-toggle-icon-wrapper svg {\n transform: rotate(90deg);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host .chevron-toggle-icon-closed svg {\n transform: rotate(-90deg);\n}\n\n:host(.expanded) .grouped-links-wrapper {\n height: var(--navigation-child-items-height, auto) !important;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.navigation-group-side-nav) .link,\n:host(.navigation-group-side-nav) ::slotted(a) {\n height: var(--navigation-child-items-height, auto);\n}\n\n:host(.collapsed) .grouped-links-wrapper {\n height: 0;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.navigation-group-side-nav) .navigation-group {\n height: var(--navigation-group-height);\n width: var(--navigation-group-width);\n justify-content: var(--navigation-group-justify-content);\n padding-right: var(--navigation-group-expand-toggle-padding);\n}\n\n:host(.navigation-group-side-nav) .navigation-group:hover,\n:host(.navigation-group-side-nav) .navigation-group:active,\n:host(.navigation-group-side-nav) .selected {\n background-color: var(--navigation-group-hover);\n color: var(--navigation-group-text-hover);\n}\n\n:host(.navigation-group-side-nav) .navigation-group:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background: none;\n}\n\n:host(.navigation-group-side-nav) .ic-typography-caption {\n position: var(--navigation-group-title-position);\n left: var(--navigation-group-title-position-left);\n white-space: nowrap;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Listen,\n h,\n Method,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n@Component({\n tag: \"ic-navigation-group\",\n styleUrl: \"ic-navigation-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationGroup {\n private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n private collapsedNavItemsHeight: string;\n private dropdown: HTMLElement;\n private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n private expandedNavItemsHeight: string;\n private groupEl: HTMLElement;\n private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n private isSideNavExpanded: boolean;\n private mouseGate: boolean = false;\n private nodeName = \"IC-NAVIGATION-GROUP\";\n private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n @Element() el: HTMLIcNavigationGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownOpen: boolean = false;\n @State() expanded: boolean = true;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement;\n\n /**\n * If `true`, the group will be expandable in the side menu.\n */\n @Prop() expandable: boolean = false;\n\n /**\n * The label to display on the group.\n */\n @Prop() label: string;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n }\n\n componentDidLoad(): void {\n this.allGroupedNavigationItems = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n /**\n * debounce is required as the incorrect height was retrieved instantly after\n * componentDidLoad is invoked.\n */\n setTimeout(\n () => this.setInitialGroupedLinksWrapperHeight(),\n this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n );\n }\n\n @Listen(\"childBlur\")\n childBlurHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.focusStyle = theme.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.groupEl) {\n this.groupEl.focus();\n }\n }\n\n private sideNavExpandHandler = (event?: CustomEvent): void => {\n this.isSideNavExpanded = event.detail.sideNavExpanded;\n const linkWrapper = this.el.shadowRoot.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (this.isSideNavExpanded) {\n if (this.expanded && this.expandedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n } else {\n if (this.expanded && this.collapsedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n }\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint || DEVICE_SIZES.L);\n }\n };\n\n private toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n }\n\n private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n this.el\n .querySelectorAll(this.IC_NAVIGATION_ITEM)\n .forEach((navigationItem) => {\n const navItem =\n navigationItem.shadowRoot.querySelector(\"a\") ||\n navigationItem.querySelector(\"a\");\n if (navItem) {\n navItem.setAttribute(\"tabindex\", tabIndexValue);\n }\n });\n };\n\n private toggleGroupedLinkWrapperHeight = (\n wrapper: HTMLElement,\n expanded: boolean\n ) => {\n if (!wrapper) return;\n\n if (expanded) {\n if (this.isSideNavExpanded) {\n this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n } else {\n this.setGroupedLinksElementHeight(\n wrapper,\n this.collapsedNavItemsHeight\n );\n }\n this.setGroupedNavItemTabIndex(\"0\");\n } else {\n wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n this.setGroupedNavItemTabIndex(\"-1\");\n }\n };\n\n private toggleExpanded = () => {\n this.expanded = !this.expanded;\n const linkWrapper = this.el.shadowRoot.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n };\n\n private showDropdown() {\n if (!this.dropdownOpen) {\n this.toggleDropdown();\n }\n }\n\n private hideDropdown() {\n document.removeEventListener(\"keydown\", this.handleKeydown);\n if (this.dropdownOpen) {\n this.toggleDropdown();\n }\n }\n\n private handleClick = (ev: MouseEvent) => {\n if (this.navigationType === \"top\" && ev.detail) {\n this.toggleDropdown();\n } else {\n this.toggleExpanded();\n }\n };\n\n private handleBlur = (ev: FocusEvent) => {\n const target = ev.relatedTarget as HTMLElement;\n if (!this.el.contains(target)) {\n this.hideDropdown();\n }\n };\n\n private handleTopNavKeydown = (ev: KeyboardEvent) => {\n if (ev.key === \" \" || ev.key === \"Enter\") {\n this.toggleDropdown();\n } else if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n this.hideDropdown();\n }\n };\n\n private handleKeydown = (ev: KeyboardEvent) => {\n if (ev.key === \"Enter\" || ev.key === \" \" || ev.key === \"Escape\") {\n switch (this.navigationType) {\n case \"top\":\n this.handleTopNavKeydown(ev as KeyboardEvent);\n break;\n case \"side\":\n this.toggleExpanded();\n ev.preventDefault();\n break;\n default:\n this.toggleExpanded();\n break;\n }\n }\n };\n\n private handleMouseLeave = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement;\n\n this.mouseGate = false;\n\n if (\n !this.el.contains(relTarget) &&\n relTarget !== this.dropdown &&\n document.activeElement !== this.el &&\n !this.el.contains(document.activeElement) &&\n relTarget?.nodeName === this.nodeName &&\n this.dropdownOpen === true\n ) {\n this.mouseGate = true;\n this.hideDropdown();\n } else if (\n !this.el.contains(relTarget) &&\n relTarget !== this.dropdown &&\n !this.el.contains(document.activeElement)\n ) {\n this.mouseGate = false;\n setTimeout(() => {\n this.dropdownOpen ? this.hideDropdown() : null;\n }, 500);\n }\n };\n\n private handleMouseEnter = (ev: MouseEvent) => {\n const relTarget = ev.relatedTarget as HTMLElement;\n document.addEventListener(\"keydown\", this.handleKeydown);\n\n if (relTarget?.nodeName === this.nodeName && this.mouseGate === true) {\n this.showDropdown();\n } else if (\n this.dropdownOpen === false &&\n relTarget !== null &&\n this.mouseGate === false\n ) {\n this.mouseGate = true;\n setTimeout(() => {\n this.mouseGate && this.showDropdown();\n }, 500);\n }\n };\n\n private renderDropdownGroupedLinks = (): HTMLDivElement => (\n <div\n class={{\n [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n }}\n onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : null}\n ref={(el) => (this.dropdown = el)}\n >\n <nav\n class={{\n [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n }}\n >\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </div>\n );\n\n private renderGroupedLinks = (): HTMLDivElement => (\n <ul class=\"grouped-links-wrapper\">\n <slot></slot>\n </ul>\n );\n\n /**\n * Gets the total height of navigation links to improve\n * smoothness of expand/collapse animations\n */\n private getNavigationChildItemsHeight = (): string => {\n let navigationChildItemsHeight = 0;\n this.allGroupedNavigationItems.forEach((navItem) => {\n navigationChildItemsHeight += navItem.offsetHeight;\n });\n\n return `${navigationChildItemsHeight}px`;\n };\n\n private setInitialGroupedLinksWrapperHeight = () => {\n const linkWrapper = this.el.shadowRoot.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (\n !this.isSideNavExpanded &&\n !this.collapsedNavItemsHeight &&\n this.expanded\n ) {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }\n\n if (this.isSideNavExpanded && this.expanded) {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }\n };\n\n private renderNavigationItems = (): HTMLDivElement | null => {\n if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n return this.renderDropdownGroupedLinks();\n }\n\n if (this.navigationType !== \"top\") {\n return this.renderGroupedLinks();\n }\n\n return null;\n };\n\n private setGroupedLinksElementHeight(\n groupedNavItemWrapper: HTMLElement,\n height: string\n ) {\n groupedNavItemWrapper.style.setProperty(\n \"--navigation-child-items-height\",\n height\n );\n }\n\n render() {\n const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n return (\n <Host\n class={{\n [\"in-side-menu\"]: inTopNavSideMenu,\n expanded: this.expanded,\n collapsed: !this.expanded,\n [\"navigation-group-side-nav\"]: this.navigationType === \"side\",\n }}\n role=\"listitem\"\n >\n <button\n onMouseEnter={\n !inTopNavSideMenu &&\n this.navigationType === \"top\" &&\n this.handleMouseEnter\n }\n onMouseLeave={this.navigationType === \"top\" && this.handleMouseLeave}\n tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n onBlur={this.handleBlur}\n onClick={expandable ? this.handleClick : null}\n onKeyDown={this.handleKeydown}\n class={{\n [\"navigation-group\"]: true,\n [this.focusStyle]: !inTopNavSideMenu,\n [\"navigation-group-side-menu\"]: inTopNavSideMenu && !expandable,\n [\"navigation-group-side-menu-collapsed\"]:\n inTopNavSideMenu && expandable && !dropdownOpen,\n [\"navigation-group-side-menu-expanded\"]:\n inTopNavSideMenu && expandable && dropdownOpen,\n [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n }}\n ref={(el) => (this.groupEl = el)}\n aria-expanded={`${dropdownOpen || this.expanded}`}\n aria-haspopup={`${\n !inTopNavSideMenu && this.navigationType === \"top\"\n }`}\n >\n <ic-typography\n variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n >\n {label}\n </ic-typography>\n {this.navigationType === \"side\" && expandable && (\n <div\n class={{\n \"chevron-toggle-icon-wrapper\": true,\n \"chevron-toggle-icon-closed\": this.expanded,\n }}\n innerHTML={chevronIcon}\n ></div>\n )}\n </button>\n {this.renderNavigationItems()}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{r as e,c as i,h as t,H as a,g as o}from"./p-6b5e91e2.js";import{k as r,m as c,a as n,n as s,d,p as l,q as h,i as m}from"./p-fef9e8c9.js";import"./p-26b7b18f.js";const b='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}: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);align-items:center}: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:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.small) .checkbox,:host(.small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.large) .checkbox,:host(.large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) 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:var(--ic-architectural-white);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-no-alpha);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-no-alpha);border:0.125rem solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) 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;flex-shrink:0}:host(.small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}:host(.small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.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 p=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.displayIndeterminate=this.nativeIndeterminateBehaviour?false:this.indeterminate&&this.checked;this.icCheck.emit();this.checkboxChecked.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked};this.additionalFieldDisplay="static";this.checked=false;this.initiallyChecked=this.checked;this.disabled=false;this.dynamicText="This selection requires additional answers";this.form=undefined;this.formaction=undefined;this.formenctype=undefined;this.formmethod=undefined;this.formnovalidate=undefined;this.formtarget=undefined;this.groupLabel=undefined;this.indeterminate=false;this.displayIndeterminate=this.indeterminate;this.label=undefined;this.name=undefined;this.nativeIndeterminateBehaviour=false;this.size=undefined;this.small=false;this.value=undefined;this.hideLabel=false}watchIndeterminateHandler(){this.displayIndeterminate=this.nativeIndeterminateBehaviour?this.indeterminate:this.indeterminate&&this.checked}componentWillLoad(){r(this.disabled,this.el);c(this.el,this.handleFormReset);const e=this.el.parentElement;if(e){if(!this.name)this.name=e.name;this.groupLabel=e.label}}componentDidLoad(){n([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.el.querySelector("ic-text-field");if(!this.checked){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}else if(this.additionalFieldContainer){this.additionalFieldContainer.style.display=!this.checked?"none":"flex"}}disconnectedCallback(){s(this.el,this.handleFormReset)}async setFocus(){var e;(e=this.el.shadowRoot.querySelector(".checkbox"))===null||e===void 0?void 0:e.focus()}render(){const{additionalFieldDisplay:e,checked:i,disabled:o,dynamicText:r,el:c,form:n,formaction:s,formenctype:b,formmethod:p,formnovalidate:u,formtarget:v,displayIndeterminate:f,groupLabel:g,label:k,name:x,size:y,small:w,value:z}=this;const j=`ic-checkbox-${d(k)||z}-${g}`.replace(/ /g,"-");const C=c.parentElement.size;i?l(true,c,x,i&&z,o):h(c);return t(a,{class:{disabled:o,small:w,[`${y||C}`]:true}},t("div",{class:"container"},f&&t("div",{class:"indeterminate-symbol"}),!f&&i&&t("svg",{class:"checkmark",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"})),t("input",{role:"checkbox",class:{checkbox:true,checked:i,indeterminate:f},type:"checkbox",name:x,id:j,value:z,disabled:o?true:null,checked:i,indeterminate:f,onClick:this.handleClick,form:n,formaction:s,formenctype:b,formmethod:p,formnovalidate:u,formtarget:v,"aria-label":this.hideLabel?this.label:undefined}),!this.hideLabel&&t("ic-typography",{class:"checkbox-label",variant:"body"},t("label",{htmlFor:j},k))),m(c,"additional-field")&&t("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},e==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,e==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text","aria-live":"polite"},r)),t("div",{class:{"additional-field-wrapper":e==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get el(){return o(this)}static get watchers(){return{indeterminate:["watchIndeterminateHandler"]}}};p.style=b;export{p as ic_checkbox};
2
+ //# sourceMappingURL=p-d638d75d.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icCheckboxCss","Checkbox","this","handleClick","checked","displayIndeterminate","nativeIndeterminateBehaviour","indeterminate","icCheck","emit","checkboxChecked","handleFormReset","initiallyChecked","watchIndeterminateHandler","componentWillLoad","removeDisabledFalse","disabled","el","addFormResetListener","checkboxGroup","parentElement","name","groupLabel","label","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","value","componentDidRender","additionalFieldDisplay","textfield","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","disconnectedCallback","removeFormResetListener","setFocus","_a","shadowRoot","focus","render","dynamicText","form","formaction","formenctype","formmethod","formnovalidate","formtarget","size","small","id","isPropDefined","replace","parentElementSize","renderHiddenInput","removeHiddenInput","h","Host","class","viewBox","xmlns","d","role","checkbox","type","onClick","hideLabel","undefined","variant","htmlFor","isSlotUsed","ref"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.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 align-items: center;\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: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.small) .checkbox,\n:host(.small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.large) .checkbox,\n:host(.large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-border-width) 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: var(--ic-architectural-white);\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-no-alpha);\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-no-alpha);\n border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-border-width) 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-border-width) 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 flex-shrink: 0;\n}\n\n:host(.small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\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 Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the checkbox will be set to the checked state.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop({ mutable: true }) groupLabel: string;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n @State() displayIndeterminate = this.indeterminate;\n\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? this.indeterminate\n : this.indeterminate && this.checked;\n }\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop({ mutable: true }) name: string;\n\n /**\n * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n */\n @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop() size?: IcSizes;\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * The value for the checkbox.\n */\n @Prop() value!: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel = false;\n\n /**\n * @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 componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\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 componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? false\n : this.indeterminate && this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n displayIndeterminate,\n groupLabel,\n label,\n name,\n size,\n small,\n value,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) || value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n disabled,\n small,\n [`${size || parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n {!displayIndeterminate && checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={this.handleClick}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{r as t,c as i,h as s,H as e,g as h}from"./p-6b5e91e2.js";import{I as a}from"./p-26b7b18f.js";import{B as n,C as o,E as r,k as l,a as c,s as u,p as d}from"./p-fef9e8c9.js";const f=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>\n</svg>\n`;const b=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>\n</svg>`;const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.search){--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}';let m=0;const v=class{constructor(s){t(this,s);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icInput=i(this,"icInput",7);this.icInputBlur=i(this,"icInputBlur",7);this.icInputFocus=i(this,"icInputFocus",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icMenuChange=i(this,"icMenuChange",7);this.icClearBlur=i(this,"icClearBlur",7);this.icRetryLoad=i(this,"icRetryLoad",7);this.icSubmitSearch=i(this,"icSubmitSearch",7);this.icSubmitSearchBlur=i(this,"icSubmitSearchBlur",7);this.icSearchBarBlur=i(this,"icSearchBarBlur",7);this.icSearchBarFocus=i(this,"icSearchBarFocus",7);this.assistiveHintEl=null;this.hasTimedOut=false;this.inputId=`ic-search-bar-input-${m++}`;this.menuCloseFromMenuChangeEvent=false;this.menuId=`${this.inputId}-menu`;this.preLoad=true;this.preventSubmit=false;this.prevNoOption=false;this.retryButtonClick=false;this.truncateValue=false;this.handleClear=t=>{const i=t;const s=t;if(s.type==="click"||i.code==="Enter"||i.code==="Space"){this.value="";this.inputEl.value="";this.loading=false;clearTimeout(this.timeoutTimer);this.filteredOptions=this.options;this.el.setFocus();this.icClear.emit();t.preventDefault();this.preventSubmit=true}};this.onInput=t=>{this.value=t.target.value;const i=[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}];if(this.options.length>0){this.setMenuChange(true);this.preLoad=false;if(this.disableFilter===false){const t=n(this.options,false,this.value,"anywhere",this.labelField);this.filteredOptions=t.length>0?t:i}}if(!this.showClearButton){this.handleShowClearButton(true)}this.debounceAriaLiveUpdate()};this.onInputBlur=t=>{const i=t.target.value;const s=t.relatedTarget;this.icInputBlur.emit({value:i,relatedTarget:s})};this.onInputFocus=t=>{const i=t.target.value;this.icInputFocus.emit({value:i});this.handleShowClearButton(true)};this.handleClearBlur=t=>{const i=t.relatedTarget;this.icClearBlur.emit({relatedTarget:i});this.clearButtonFocused=false};this.handleSubmitSearchBlur=t=>{const i=t.relatedTarget;this.icSubmitSearchBlur.emit({relatedTarget:i});this.searchSubmitFocused=false};this.handleMouseDown=t=>{t.preventDefault()};this.handleSubmitSearchFocus=()=>{this.searchSubmitFocused=true};this.handleSubmitSearch=()=>{this.highlightedValue&&(this.value=this.highlightedValue);this.highlightedValue=undefined;this.icSubmitSearch.emit({value:this.value});const t=this.el.closest("FORM");if(this.searchSubmitButton&&!!t&&!this.preventSubmit){o(t,this.searchSubmitButton)}};this.handleSubmitSearchKeyDown=t=>{if(t.key===" "){t.preventDefault();this.handleSubmitSearch()}};this.handleRetry=t=>{this.retryViaKeyPress=t.detail.keyPressed==="Enter";this.icRetryLoad.emit({value:t.detail.value});this.triggerLoading();this.retryButtonClick=true};this.triggerLoading=()=>{const t=[{[this.labelField]:this.loadingLabel,[this.valueField]:"",loading:true}];if(this.filteredOptions!==t)this.filteredOptions=t;if(this.timeout){this.timeoutTimer=window.setTimeout((()=>{this.filteredOptions=[{[this.labelField]:this.loadingErrorLabel,[this.valueField]:"",timedOut:true}]}),this.timeout)}};this.handleOptionSelect=t=>{if(t.detail.label===this.emptyOptionListText){this.el.setFocus();return}this.value=t.detail.value;this.icOptionSelect.emit({value:this.value})};this.handleMenuOptionHighlight=t=>{var i;const s=(i=t.detail.optionId)===null||i===void 0?void 0:i.replace(`${this.menuId}-`,"");s&&(this.highlightedValue=s);if(t.detail.optionId){this.ariaActiveDescendant=t.detail.optionId}else{this.ariaActiveDescendant=undefined}};this.handleMenuChange=t=>{this.setMenuChange(t.detail.open);if(!t.detail.open){this.handleMenuCloseFromMenuChange(true);if(t.detail.focusInput===undefined||t.detail.focusInput){this.el.setFocus()}}};this.setMenuChange=t=>{if(this.open!==t){this.open=t;this.icMenuChange.emit({open:t})}};this.handleHostFocus=()=>{if(this.options&&this.value&&!this.menuCloseFromMenuChangeEvent){this.setMenuChange(true)}this.handleTruncateValue(false);this.icSearchBarFocus.emit()};this.handleHostBlur=t=>{const i=t.relatedTarget;if(this.open&&this.options&&i!==this.menu&&!this.retryViaKeyPress&&!this.retryButtonClick){this.setMenuChange(false)}if(this.retryButtonClick||this.retryViaKeyPress){this.inputEl.setFocus()}this.handleShowClearButton(false);this.handleMenuCloseFromMenuChange(false);this.handleTruncateValue(true);this.icSearchBarBlur.emit({relatedTarget:i,value:this.value});this.retryViaKeyPress=false;this.retryButtonClick=false};this.handleShowClearButton=t=>{this.showClearButton=t};this.handleFocusClearButton=()=>{this.clearButtonFocused=true};this.handleMenuCloseFromMenuChange=t=>{this.menuCloseFromMenuChangeEvent=t};this.handleTruncateValue=t=>{this.truncateValue=t};this.renderAssistiveHintEl=()=>{var t,i;const s=(i=(t=this.el.shadowRoot.querySelector("ic-text-field"))===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`#${this.inputId}`);if(s&&Object.keys(s).length>0&&this.hasOptionsOrFilterDisabled()){this.assistiveHintEl=document.createElement("span");this.assistiveHintEl.innerText=this.hintText;this.assistiveHintEl.id=`${this.inputId}-assistive-hint`;this.assistiveHintEl.style.display="none";if(s.after!==undefined){s.after(this.assistiveHintEl)}}};this.updateSearchResultAriaLive=()=>{const t=this.el.shadowRoot.querySelector(".search-results-status");if(t){if(!this.open||this.value===""||this.value.length<this.charactersUntilSuggestion){t.innerText=""}else if(this.hasOptionsOrFilterDisabled()&&this.filteredOptions.length>0&&this.open&&!this.filteredOptions[0].loading){if(this.hadNoOptions()){t.innerText=this.emptyOptionListText}else{t.innerText=`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}}}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableFilter;this.hadNoOptions=()=>this.filteredOptions.length===1&&this.filteredOptions[0][this.labelField]===this.emptyOptionListText&&this.searchMode==="navigation";this.isSubmitDisabled=()=>{const t=this.value===undefined||this.value===null||this.value==="";const i=this.value.length<this.charactersUntilSuggestion;return t||i||this.disabled||this.hadNoOptions()||this.hasTimedOut||this.loading};this.highlightFirstOptionAfterNoResults=()=>{if(this.prevNoOption&&this.menu&&!this.hasTimedOut){this.menu.handleSetFirstOption();this.prevNoOption=false}const t=this.filteredOptions.find((t=>t[this.labelField]===this.emptyOptionListText||t[this.labelField]===this.loadingErrorLabel||t[this.labelField]===this.loadingLabel));if(t){this.prevNoOption=true}};this.ariaActiveDescendant=undefined;this.clearButtonFocused=false;this.highlightedValue=undefined;this.open=false;this.searchSubmitFocused=false;this.showClearButton=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.charactersUntilSuggestion=2;this.disabled=false;this.disableFilter=false;this.debounce=0;this.emptyOptionListText="No results found";this.focusOnLoad=false;this.fullWidth=false;this.helperText="";this.hideLabel=false;this.hintText="When autocomplete results are available use the up and down arrows to choose and press enter to select";this.label=undefined;this.labelField="label";this.loading=false;this.loadingErrorLabel="Loading Error";this.loadingLabel="Loading...";this.name=this.inputId;this.placeholder="Search";this.readonly=false;this.required=false;this.searchMode="navigation";this.size="default";this.small=false;this.spellcheck=false;this.timeout=undefined;this.valueField="value";this.filteredOptions=[];this.options=[];this.value=""}loadingHandler(t){if(t&&!this.hasTimedOut){this.preLoad=false;this.triggerLoading()}}filteredOptionsHandler(t){this.hasTimedOut=t.some((t=>t.timedOut))}watchOptionsHandler(t){if(this.disableFilter&&!this.hasTimedOut){this.loading=false;clearTimeout(this.timeoutTimer);if(t.length>0){this.filteredOptions=t}else{if(this.hadNoOptions()){return}this.setMenuChange(true);!this.preLoad&&(this.filteredOptions=[{[this.labelField]:this.emptyOptionListText,[this.valueField]:""}]);this.preLoad=true}}this.debounceAriaLiveUpdate()}watchValueHandler(t){if(this.inputEl&&this.options&&!!r(t,this.options,this.valueField,this.labelField)){this.inputEl.value=r(t,this.options,this.valueField,this.labelField)}else if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}}disconnectedCallback(){if(this.assistiveHintEl){this.assistiveHintEl.remove()}}componentWillLoad(){this.watchValueHandler(this.value);l(this.disabled,this.el);if(this.small){this.size="small"}}componentDidLoad(){if(this.focusOnLoad){this.el.setFocus()}if(this.hasOptionsOrFilterDisabled()){this.renderAssistiveHintEl();if(this.disableFilter){this.filteredOptions=this.options}}c([{prop:this.label,propName:"label"}],"Search Bar");if(this.inputEl!==undefined){this.anchorEl=this.inputEl.shadowRoot.querySelector("ic-input-component-container")}}componentWillRender(){this.highlightFirstOptionAfterNoResults()}handleKeyDown(t){const i=t.detail.event;if(this.menu&&this.open){this.menu.handleKeyboardOpen(i)}}handleKeyUp(t){if(t.key==="Enter"){if(this.preventSubmit||this.isSubmitDisabled()){return}this.handleSubmitSearch();this.setMenuChange(false)}if(t.key==="Escape"){this.setMenuChange(false)}if(this.preventSubmit){this.preventSubmit=false}}async setFocus(){this.retryViaKeyPress=false;this.retryButtonClick=false;if(this.inputEl){this.inputEl.setFocus()}}debounceAriaLiveUpdate(){clearTimeout(this.debounceAriaLive);this.debounceAriaLive=window.setTimeout((()=>{this.updateSearchResultAriaLive()}),500)}render(){const{inputId:t,name:i,label:h,required:n,small:o,size:l,placeholder:c,helperText:p,disabled:m,value:v,readonly:g,spellcheck:w,fullWidth:y,options:x,open:k,hideLabel:L,menuId:z,ariaActiveDescendant:C,truncateValue:B,autofocus:M,autocapitalize:S,autocomplete:T,filteredOptions:F}=this;const O=g||m;const H=u(t,p!=="",false).trim();let I;if(H!==""&&this.hasOptionsOrFilterDisabled()){I=`${H} ${this.inputId}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){I=`${this.inputId}-assistive-hint`}else if(H!==""){I=H}else{I=undefined}const $=!!v&&this.hasOptionsOrFilterDisabled();const E=$&&k&&F.length>0;const D=E&&v.length>=this.charactersUntilSuggestion;const j=r(v,x,this.valueField,this.labelField);d(true,this.el,i,v,O);return s(e,{class:{search:true,fullwidth:y,disabled:m,small:l==="small"},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},s("ic-text-field",{ref:t=>this.inputEl=t,inputId:t,label:h,helperText:p,required:n,disabled:O&&!g,readonly:g,size:l,hideLabel:L,fullWidth:y,name:i,truncateValue:B,value:x&&!!j?j:v,placeholder:c,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":L?h:"","aria-describedby":I,"aria-owns":D?z:undefined,"aria-controls":D?z:undefined,"aria-haspopup":x.length>0?"listbox":undefined,ariaExpanded:x.length>0?`${E}`:undefined,ariaActiveDescendant:C,"aria-autocomplete":$?"list":undefined,role:x.length>0?"combobox":undefined,autocomplete:T,autocapitalize:S,autoFocus:M,spellcheck:w,inputmode:"search",debounce:this.debounce},s("div",{class:{"clear-button-container":true,"clear-button-visible":v&&!O&&this.showClearButton},slot:"clear-button"},s("ic-button",{id:"clear-button",class:"clear-button","aria-label":"Clear",innerHTML:f,onClick:this.handleClear,onMouseDown:this.handleMouseDown,size:l,onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"submit",variant:"icon",appearance:this.clearButtonFocused?a.Light:a.Dark}),s("div",{class:"divider"})),s("div",{class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()},slot:"search-submit-button"},s("ic-button",{id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{["search-submit-button"]:true,["search-submit-button-small"]:!!o},disabled:this.isSubmitDisabled(),innerHTML:b,size:l,onClick:this.handleSubmitSearch,onMouseDown:this.handleMouseDown,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,onKeyDown:this.handleSubmitSearchKeyDown,type:"submit",variant:"icon",appearance:this.searchSubmitFocused?a.Light:a.Default})),s("div",{class:{"menu-container":true,fullwidth:y},slot:"menu"},D&&s("ic-menu",{class:{"no-results":this.hadNoOptions()||F.length===1&&(F[0][this.labelField]===this.loadingLabel||F[0][this.labelField]===this.loadingErrorLabel)},activationType:"manual",anchorEl:this.anchorEl,autoFocusOnSelected:false,searchMode:this.searchMode,inputEl:this.inputEl,inputLabel:h,ref:t=>this.menu=t,small:l==="small",fullWidth:y,menuId:z,open:!!D,options:F,onMenuOptionSelect:this.handleOptionSelect,onMenuStateChange:this.handleMenuChange,onMenuOptionId:this.handleMenuOptionHighlight,onRetryButtonClicked:this.handleRetry,parentEl:this.el,value:v,labelField:this.labelField,valueField:this.valueField}))),s("div",{"aria-live":"polite",role:"status",class:"search-results-status"}))}static get delegatesFocus(){return true}get el(){return h(this)}static get watchers(){return{loading:["loadingHandler"],filteredOptions:["filteredOptionsHandler"],options:["watchOptionsHandler"],value:["watchValueHandler"]}}};v.style=p;export{v as ic_search_bar};
2
+ //# sourceMappingURL=p-da5098db.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","removeDisabledFalse","small","size","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","search","fullwidth","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","searchIcon","Default","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.search) {\n --divider-height: 1.5rem;\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n}\n\n:host(.search.small) {\n --divider-height: 1rem;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus,\n.clear-button:active * {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n","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 IcThemeForegroundEnum,\n IcMenuOption,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLIcTextFieldElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: 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 number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n */\n @Prop() charactersUntilSuggestion: number = 2;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n */\n @Prop() disableFilter?: boolean = 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 /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * If `true`, the search bar will be focused when component loaded.\n */\n @Prop() focusOnLoad?: boolean = false;\n\n /**\n * Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The hint text for the hidden assistive description element.\n */\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * The label for the search bar.\n */\n @Prop() label!: string;\n\n /**\n * The custom name for the label field to correspond with the IcMenuOption type.\n */\n @Prop() labelField?: string = \"label\";\n\n /**\n * Trigger loading state when fetching options asynchronously\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /**\n * Change the message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /**\n * Change the message displayed whilst the options are being loaded externally.\n */\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to display.\n */\n @Prop() placeholder?: string = \"Search\";\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * If `true`, the search bar will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n */\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /**\n * The size of the search bar component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If `true`, the value of the search will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If using external filtering, set a timeout for when loading takes too long.\n */\n @Prop() timeout?: number;\n\n /**\n * The custom name for the value field to correspond with the IcMenuOption type.\n */\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /**\n * The suggested search options.\n */\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /**\n * The value of the search input.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\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\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.\n */\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.\n */\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * Emitted when the 'retry loading' button is clicked\n */\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.small) {\n this.size = \"small\";\n }\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n if (this.inputEl !== undefined) {\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined || ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick || this.retryViaKeyPress) {\n this.inputEl.setFocus();\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open ||\n this.value === \"\" ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined || this.value === null || this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet ||\n valueLengthLess ||\n this.disabled ||\n this.hadNoOptions() ||\n this.hasTimedOut ||\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText ||\n filteredOption[this.labelField] === this.loadingErrorLabel ||\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n\n const labelValue = getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n );\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n search: true,\n fullwidth: fullWidth,\n disabled,\n small: size === \"small\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledMode && !readonly}\n readonly={readonly}\n size={size}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={options && !!labelValue ? labelValue : value}\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={menuRendered ? menuId : undefined}\n aria-controls={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={options.length > 0 ? `${menuOpen}` : undefined}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={options.length > 0 ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n debounce={this.debounce}\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\":\n this.hadNoOptions() ||\n (filteredOptions.length === 1 &&\n (filteredOptions[0][this.labelField] ===\n this.loadingLabel ||\n filteredOptions[0][this.labelField] ===\n this.loadingErrorLabel)),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={size === \"small\"}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}