@aurodesignsystem-dev/auro-formkit 0.0.0-pr1413.2 → 0.0.0-pr1420.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (231) hide show
  1. package/package.json +32 -31
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -66
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +0 -2
  4. package/components/bibtemplate/dist/headerVersion.d.ts +0 -2
  5. package/components/bibtemplate/dist/iconVersion.d.ts +0 -2
  6. package/components/bibtemplate/dist/index.d.ts +0 -2
  7. package/components/bibtemplate/dist/index.js +0 -395
  8. package/components/bibtemplate/dist/registered.js +0 -395
  9. package/components/bibtemplate/dist/styles/color-css.d.ts +0 -2
  10. package/components/bibtemplate/dist/styles/style-css.d.ts +0 -2
  11. package/components/bibtemplate/dist/styles/tokens-css.d.ts +0 -2
  12. package/components/checkbox/demo/api.md +0 -489
  13. package/components/checkbox/demo/api.min.js +0 -2133
  14. package/components/checkbox/demo/index.md +0 -55
  15. package/components/checkbox/demo/index.min.js +0 -2108
  16. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  17. package/components/checkbox/demo/readme.md +0 -142
  18. package/components/checkbox/dist/auro-checkbox-group.d.ts +0 -176
  19. package/components/checkbox/dist/auro-checkbox.d.ts +0 -209
  20. package/components/checkbox/dist/index.d.ts +0 -3
  21. package/components/checkbox/dist/index.js +0 -2057
  22. package/components/checkbox/dist/registered.js +0 -2058
  23. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +0 -2
  24. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +0 -2
  25. package/components/checkbox/dist/styles/color-css.d.ts +0 -2
  26. package/components/checkbox/dist/styles/colorGroup-css.d.ts +0 -2
  27. package/components/checkbox/dist/styles/tokens-css.d.ts +0 -2
  28. package/components/combobox/demo/api.md +0 -2287
  29. package/components/combobox/demo/api.min.js +0 -17800
  30. package/components/combobox/demo/index.md +0 -196
  31. package/components/combobox/demo/index.min.js +0 -17705
  32. package/components/combobox/demo/keyboardBehavior.md +0 -281
  33. package/components/combobox/demo/readme.md +0 -158
  34. package/components/combobox/dist/auro-combobox.d.ts +0 -566
  35. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +0 -8
  36. package/components/combobox/dist/index.d.ts +0 -2
  37. package/components/combobox/dist/index.js +0 -15604
  38. package/components/combobox/dist/registered.js +0 -15606
  39. package/components/combobox/dist/styles/emphasized/style-css.d.ts +0 -2
  40. package/components/combobox/dist/styles/snowflake/style-css.d.ts +0 -2
  41. package/components/combobox/dist/styles/style-css.d.ts +0 -2
  42. package/components/counter/demo/api.md +0 -1285
  43. package/components/counter/demo/api.min.js +0 -8112
  44. package/components/counter/demo/index.md +0 -92
  45. package/components/counter/demo/index.min.js +0 -8093
  46. package/components/counter/demo/keyboardBehavior.md +0 -127
  47. package/components/counter/demo/readme.md +0 -161
  48. package/components/counter/dist/auro-counter-button.d.ts +0 -14
  49. package/components/counter/dist/auro-counter-group.d.ts +0 -390
  50. package/components/counter/dist/auro-counter-wrapper.d.ts +0 -17
  51. package/components/counter/dist/auro-counter.d.ts +0 -136
  52. package/components/counter/dist/buttonVersion.d.ts +0 -2
  53. package/components/counter/dist/iconVersion.d.ts +0 -2
  54. package/components/counter/dist/index.d.ts +0 -3
  55. package/components/counter/dist/index.js +0 -8015
  56. package/components/counter/dist/keyboardStrategy.d.ts +0 -4
  57. package/components/counter/dist/registered.js +0 -8016
  58. package/components/counter/dist/styles/color-css.d.ts +0 -2
  59. package/components/counter/dist/styles/counter-button-color-css.d.ts +0 -2
  60. package/components/counter/dist/styles/counter-button-css.d.ts +0 -2
  61. package/components/counter/dist/styles/counter-group-css.d.ts +0 -2
  62. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +0 -2
  63. package/components/counter/dist/styles/counter-wrapper-css.d.ts +0 -2
  64. package/components/counter/dist/styles/shapeSize-css.d.ts +0 -2
  65. package/components/counter/dist/styles/style-css.d.ts +0 -2
  66. package/components/counter/dist/styles/tokens-css.d.ts +0 -2
  67. package/components/datepicker/demo/api.md +0 -1824
  68. package/components/datepicker/demo/api.min.js +0 -24510
  69. package/components/datepicker/demo/index.md +0 -158
  70. package/components/datepicker/demo/index.min.js +0 -24231
  71. package/components/datepicker/demo/keyboardBehavior.md +0 -24
  72. package/components/datepicker/demo/readme.md +0 -137
  73. package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -169
  74. package/components/datepicker/dist/auro-calendar-month.d.ts +0 -20
  75. package/components/datepicker/dist/auro-calendar.d.ts +0 -173
  76. package/components/datepicker/dist/auro-datepicker.d.ts +0 -715
  77. package/components/datepicker/dist/buttonVersion.d.ts +0 -2
  78. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +0 -1
  79. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  80. package/components/datepicker/dist/index.d.ts +0 -2
  81. package/components/datepicker/dist/index.js +0 -24146
  82. package/components/datepicker/dist/popoverVersion.d.ts +0 -2
  83. package/components/datepicker/dist/registered.js +0 -24146
  84. package/components/datepicker/dist/styles/classic/color-css.d.ts +0 -2
  85. package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
  86. package/components/datepicker/dist/styles/color-calendar-css.d.ts +0 -2
  87. package/components/datepicker/dist/styles/color-cell-css.d.ts +0 -2
  88. package/components/datepicker/dist/styles/color-css.d.ts +0 -2
  89. package/components/datepicker/dist/styles/color-month-css.d.ts +0 -2
  90. package/components/datepicker/dist/styles/shapeSize-css.d.ts +0 -2
  91. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +0 -2
  92. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +0 -2
  93. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +0 -2
  94. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +0 -2
  95. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +0 -2
  96. package/components/datepicker/dist/styles/style-css.d.ts +0 -2
  97. package/components/datepicker/dist/styles/tokens-css.d.ts +0 -2
  98. package/components/datepicker/dist/utilities.d.ts +0 -78
  99. package/components/datepicker/dist/utilitiesCalendar.d.ts +0 -38
  100. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +0 -50
  101. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +0 -5
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -60
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +0 -1
  104. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +0 -57
  105. package/components/dropdown/demo/api.md +0 -1358
  106. package/components/dropdown/demo/api.min.js +0 -4894
  107. package/components/dropdown/demo/index.md +0 -283
  108. package/components/dropdown/demo/index.min.js +0 -4829
  109. package/components/dropdown/demo/keyboardBehavior.md +0 -77
  110. package/components/dropdown/demo/readme.md +0 -160
  111. package/components/dropdown/dist/auro-dropdown.d.ts +0 -482
  112. package/components/dropdown/dist/auro-dropdownBib.d.ts +0 -128
  113. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +0 -7
  114. package/components/dropdown/dist/iconVersion.d.ts +0 -2
  115. package/components/dropdown/dist/index.d.ts +0 -2
  116. package/components/dropdown/dist/index.js +0 -4722
  117. package/components/dropdown/dist/registered.js +0 -4722
  118. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +0 -2
  119. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +0 -2
  120. package/components/dropdown/dist/styles/classic/color-css.d.ts +0 -2
  121. package/components/dropdown/dist/styles/classic/style-css.d.ts +0 -2
  122. package/components/dropdown/dist/styles/color-css.d.ts +0 -2
  123. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +0 -2
  124. package/components/dropdown/dist/styles/shapeSize-css.d.ts +0 -2
  125. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +0 -2
  126. package/components/dropdown/dist/styles/style-css.d.ts +0 -2
  127. package/components/dropdown/dist/styles/tokens-css.d.ts +0 -2
  128. package/components/form/demo/api.md +0 -319
  129. package/components/form/demo/api.min.js +0 -70505
  130. package/components/form/demo/index.md +0 -128
  131. package/components/form/demo/index.min.js +0 -70505
  132. package/components/form/demo/keyboardBehavior.md +0 -0
  133. package/components/form/demo/readme.md +0 -145
  134. package/components/form/dist/auro-form.d.ts +0 -280
  135. package/components/form/dist/index.d.ts +0 -2
  136. package/components/form/dist/index.js +0 -718
  137. package/components/form/dist/registered.d.ts +0 -1
  138. package/components/form/dist/registered.js +0 -718
  139. package/components/form/dist/styles/style-css.d.ts +0 -2
  140. package/components/helptext/dist/auro-helptext.d.ts +0 -69
  141. package/components/helptext/dist/index.d.ts +0 -2
  142. package/components/helptext/dist/index.js +0 -231
  143. package/components/helptext/dist/registered.js +0 -231
  144. package/components/helptext/dist/styles/color-css.d.ts +0 -2
  145. package/components/helptext/dist/styles/style-css.d.ts +0 -2
  146. package/components/helptext/dist/styles/tokens-css.d.ts +0 -2
  147. package/components/input/demo/api.md +0 -1397
  148. package/components/input/demo/api.min.js +0 -7460
  149. package/components/input/demo/index.md +0 -161
  150. package/components/input/demo/index.min.js +0 -7380
  151. package/components/input/demo/keyboardBehavior.md +0 -0
  152. package/components/input/demo/readme.md +0 -134
  153. package/components/input/dist/auro-input.d.ts +0 -206
  154. package/components/input/dist/base-input.d.ts +0 -629
  155. package/components/input/dist/buttonVersion.d.ts +0 -2
  156. package/components/input/dist/i18n.d.ts +0 -18
  157. package/components/input/dist/iconVersion.d.ts +0 -2
  158. package/components/input/dist/index.d.ts +0 -2
  159. package/components/input/dist/index.js +0 -7292
  160. package/components/input/dist/registered.js +0 -7292
  161. package/components/input/dist/styles/classic/color-css.d.ts +0 -2
  162. package/components/input/dist/styles/classic/style-css.d.ts +0 -2
  163. package/components/input/dist/styles/color-css.d.ts +0 -2
  164. package/components/input/dist/styles/default/borders-css.d.ts +0 -2
  165. package/components/input/dist/styles/default/color-css.d.ts +0 -2
  166. package/components/input/dist/styles/default/mixins-css.d.ts +0 -2
  167. package/components/input/dist/styles/default/notificationIcons-css.d.ts +0 -2
  168. package/components/input/dist/styles/default/style-css.d.ts +0 -2
  169. package/components/input/dist/styles/emphasized/color-css.d.ts +0 -2
  170. package/components/input/dist/styles/emphasized/style-css.d.ts +0 -2
  171. package/components/input/dist/styles/mixins-css.d.ts +0 -2
  172. package/components/input/dist/styles/shapeSize-css.d.ts +0 -2
  173. package/components/input/dist/styles/snowflake/style-css.d.ts +0 -2
  174. package/components/input/dist/styles/style-css.d.ts +0 -2
  175. package/components/input/dist/styles/tokens-css.d.ts +0 -2
  176. package/components/input/dist/utilities.d.ts +0 -25
  177. package/components/layoutElement/dist/auroElement.d.ts +0 -40
  178. package/components/layoutElement/dist/index.d.ts +0 -2
  179. package/components/layoutElement/dist/index.js +0 -107
  180. package/components/layoutElement/dist/registered.js +0 -107
  181. package/components/menu/demo/api.md +0 -1200
  182. package/components/menu/demo/api.min.js +0 -2413
  183. package/components/menu/demo/index.md +0 -72
  184. package/components/menu/demo/index.min.js +0 -2306
  185. package/components/menu/demo/keyboardBehavior.md +0 -0
  186. package/components/menu/demo/readme.md +0 -145
  187. package/components/menu/dist/auro-menu-utils.d.ts +0 -34
  188. package/components/menu/dist/auro-menu.context.d.ts +0 -239
  189. package/components/menu/dist/auro-menu.d.ts +0 -316
  190. package/components/menu/dist/auro-menuoption.d.ts +0 -210
  191. package/components/menu/dist/iconVersion.d.ts +0 -2
  192. package/components/menu/dist/index.d.ts +0 -4
  193. package/components/menu/dist/index.js +0 -2269
  194. package/components/menu/dist/registered.js +0 -2217
  195. package/components/menu/dist/styles/default/color-menu-css.d.ts +0 -2
  196. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +0 -2
  197. package/components/menu/dist/styles/default/style-menu-css.d.ts +0 -2
  198. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +0 -2
  199. package/components/menu/dist/styles/default/tokens-css.d.ts +0 -2
  200. package/components/radio/demo/api.md +0 -675
  201. package/components/radio/demo/api.min.js +0 -2210
  202. package/components/radio/demo/index.md +0 -73
  203. package/components/radio/demo/index.min.js +0 -2167
  204. package/components/radio/demo/keyboardBehavior.md +0 -0
  205. package/components/radio/demo/readme.md +0 -141
  206. package/components/radio/dist/auro-radio-group.d.ts +0 -250
  207. package/components/radio/dist/auro-radio.d.ts +0 -180
  208. package/components/radio/dist/index.d.ts +0 -3
  209. package/components/radio/dist/index.js +0 -2116
  210. package/components/radio/dist/registered.js +0 -2117
  211. package/components/radio/dist/styles/auro-radio-group-css.d.ts +0 -2
  212. package/components/radio/dist/styles/color-css.d.ts +0 -2
  213. package/components/radio/dist/styles/groupColor-css.d.ts +0 -2
  214. package/components/radio/dist/styles/style-css.d.ts +0 -2
  215. package/components/radio/dist/styles/tokens-css.d.ts +0 -2
  216. package/components/select/demo/api.md +0 -2378
  217. package/components/select/demo/api.min.js +0 -10400
  218. package/components/select/demo/index.md +0 -355
  219. package/components/select/demo/index.min.js +0 -10307
  220. package/components/select/demo/keyboardBehavior.md +0 -246
  221. package/components/select/demo/readme.md +0 -148
  222. package/components/select/dist/auro-select.d.ts +0 -545
  223. package/components/select/dist/index.d.ts +0 -2
  224. package/components/select/dist/index.js +0 -8218
  225. package/components/select/dist/registered.js +0 -8218
  226. package/components/select/dist/selectKeyboardStrategy.d.ts +0 -11
  227. package/components/select/dist/styles/emphasized/color-css.d.ts +0 -2
  228. package/components/select/dist/styles/shapeSize-css.d.ts +0 -2
  229. package/components/select/dist/styles/style-css.d.ts +0 -2
  230. package/components/select/dist/styles/tokens-css.d.ts +0 -2
  231. package/custom-elements.json +0 -18768
@@ -1,2217 +0,0 @@
1
- import { css, LitElement, html } from 'lit';
2
- import { ContextConsumer, createContext, ContextProvider } from '@lit/context';
3
- import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
4
- import { classMap } from 'lit/directives/class-map.js';
5
- import { ifDefined } from 'lit/directives/if-defined.js';
6
-
7
- var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{display:block;line-height:0;overflow-y:auto}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
8
-
9
- var colorCss$1 = css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
10
-
11
- var tokensCss = css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
12
-
13
- class AuroElement extends LitElement {
14
- static get properties() {
15
- return {
16
-
17
- /**
18
- * Defines the language of an element.
19
- * @default {'default'}
20
- */
21
- layout: {
22
- type: String,
23
- attribute: "layout",
24
- reflect: true
25
- },
26
-
27
- shape: {
28
- type: String,
29
- attribute: "shape",
30
- reflect: true
31
- },
32
-
33
- size: {
34
- type: String,
35
- attribute: "size",
36
- reflect: true
37
- },
38
-
39
- onDark: {
40
- type: Boolean,
41
- attribute: "ondark",
42
- reflect: true
43
- }
44
- };
45
- }
46
-
47
- /**
48
- * Returns true if the element has focus.
49
- * @private
50
- * @returns {boolean} - Returns true if the element has focus.
51
- */
52
- get componentHasFocus() {
53
- return this.matches(':focus') || this.matches(':focus-within');
54
- }
55
-
56
- resetShapeClasses() {
57
- const wrapper = this.shadowRoot.querySelector('.wrapper');
58
-
59
- if (wrapper) {
60
- wrapper.classList.forEach((className) => {
61
- if (className.startsWith('shape-')) {
62
- wrapper.classList.remove(className);
63
- }
64
- });
65
-
66
- if (this.shape && this.size) {
67
- wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
68
- } else {
69
- wrapper.classList.add('shape-none');
70
- }
71
- }
72
-
73
- }
74
-
75
- resetLayoutClasses() {
76
- if (this.layout) {
77
- const wrapper = this.shadowRoot.querySelector('.wrapper');
78
-
79
- if (wrapper) {
80
- wrapper.classList.forEach((className) => {
81
- if (className.startsWith('layout-')) {
82
- wrapper.classList.remove(className);
83
- }
84
- });
85
-
86
- wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
87
- }
88
- }
89
- }
90
-
91
- updateComponentArchitecture() {
92
- this.resetLayoutClasses();
93
- this.resetShapeClasses();
94
- }
95
-
96
- updated(changedProperties) {
97
- if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
98
- this.updateComponentArchitecture();
99
- }
100
- }
101
-
102
- // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
103
- // This will catch if an invalid layout value is passed in and render the default layout if so.
104
- render() {
105
- try {
106
- return this.renderLayout();
107
- } catch (error) {
108
- // failed to get the defined layout
109
- console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
110
-
111
- // fallback to the default layout
112
- return this.getLayout('default');
113
- }
114
- }
115
- }
116
-
117
- var styleCss = css`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;height:var(--ds-size-400, 2rem);padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
118
-
119
- var colorCss = css`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
120
-
121
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
122
- // See LICENSE in the project root for license information.
123
-
124
- // ---------------------------------------------------------------------
125
-
126
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
127
-
128
- class AuroLibraryRuntimeUtils {
129
-
130
- /* eslint-disable jsdoc/require-param */
131
-
132
- /**
133
- * This will register a new custom element with the browser.
134
- * @param {String} name - The name of the custom element.
135
- * @param {Object} componentClass - The class to register as a custom element.
136
- * @returns {void}
137
- */
138
- registerComponent(name, componentClass) {
139
- if (!customElements.get(name)) {
140
- customElements.define(name, class extends componentClass {});
141
- }
142
- }
143
-
144
- /**
145
- * Finds and returns the closest HTML Element based on a selector.
146
- * @returns {void}
147
- */
148
- closestElement(
149
- selector, // selector like in .closest()
150
- base = this, // extra functionality to skip a parent
151
- __Closest = (el, found = el && el.closest(selector)) =>
152
- !el || el === document || el === window
153
- ? null // standard .closest() returns null for non-found selectors also
154
- : found
155
- ? found // found a selector INside this element
156
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
157
- ) {
158
- return __Closest(base);
159
- }
160
- /* eslint-enable jsdoc/require-param */
161
-
162
- /**
163
- * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
164
- * @param {Object} elem - The element to check.
165
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
166
- * @returns {void}
167
- */
168
- handleComponentTagRename(elem, tagName) {
169
- const tag = tagName.toLowerCase();
170
- const elemTag = elem.tagName.toLowerCase();
171
-
172
- if (elemTag !== tag) {
173
- elem.setAttribute(tag, true);
174
- }
175
- }
176
-
177
- /**
178
- * Validates if an element is a specific Auro component.
179
- * @param {Object} elem - The element to validate.
180
- * @param {String} tagName - The name of the Auro component to check against.
181
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
182
- */
183
- elementMatch(elem, tagName) {
184
- const tag = tagName.toLowerCase();
185
- const elemTag = elem.tagName.toLowerCase();
186
-
187
- return elemTag === tag || elem.hasAttribute(tag);
188
- }
189
-
190
- /**
191
- * Gets the text content of a named slot.
192
- * @returns {String}
193
- * @private
194
- */
195
- getSlotText(elem, name) {
196
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
197
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
198
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
199
-
200
- return text || null;
201
- }
202
- }
203
-
204
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
205
- // See LICENSE in the project root for license information.
206
-
207
-
208
- class AuroDependencyVersioning {
209
-
210
- /**
211
- * Generates a unique string to be used for child auro element naming.
212
- * @private
213
- * @param {string} baseName - Defines the first part of the unique element name.
214
- * @param {string} version - Version of the component that will be appended to the baseName.
215
- * @returns {string} - Unique string to be used for naming.
216
- */
217
- generateElementName(baseName, version) {
218
- let result = baseName;
219
-
220
- result += '-';
221
- result += version.replace(/[.]/g, '_');
222
-
223
- return result;
224
- }
225
-
226
- /**
227
- * Generates a unique string to be used for child auro element naming.
228
- * @param {string} baseName - Defines the first part of the unique element name.
229
- * @param {string} version - Version of the component that will be appended to the baseName.
230
- * @returns {string} - Unique string to be used for naming.
231
- */
232
- generateTag(baseName, version, tagClass) {
233
- const elementName = this.generateElementName(baseName, version);
234
- const tag = literal`${unsafeStatic(elementName)}`;
235
-
236
- if (!customElements.get(elementName)) {
237
- customElements.define(elementName, class extends tagClass {});
238
- }
239
-
240
- return tag;
241
- }
242
- }
243
-
244
- class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends LitElement{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
245
- `;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
246
- `;var y=css`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
247
- `;var x=css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
248
- `;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return html`
249
- <div class="componentWrapper">
250
- <div
251
- class="${classMap({svgWrapper:true})}"
252
- title="${ifDefined(this.title||void 0)}">
253
- <span aria-hidden="${ifDefined(this.ariaHidden||true)}" part="svg">
254
- ${this.customSvg?html`
255
- <slot name="svg"></slot>
256
- `:html`
257
- ${this.svg}
258
- `}
259
- </span>
260
- </div>
261
-
262
- <div class="${classMap(t)}" part="label">
263
- <slot></slot>
264
- </div>
265
- </div>
266
- `}}
267
-
268
- var iconVersion = '9.1.2';
269
-
270
- var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
271
-
272
- // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
273
- // See LICENSE in the project root for license information.
274
-
275
-
276
- /**
277
- * Helper method to dispatch custom events.
278
- * @param {HTMLElement} element - Element to dispatch event from.
279
- * @param {string} eventName - Name of the event to dispatch.
280
- * @param {Object} [detail] - Optional detail object to include with the event.
281
- */
282
- function dispatchMenuEvent(element, eventName, detail = null) {
283
- const eventConfig = {
284
- bubbles: true,
285
- cancelable: false,
286
- composed: true
287
- };
288
-
289
- if (detail !== null) {
290
- eventConfig.detail = detail;
291
- }
292
-
293
- element.dispatchEvent(new CustomEvent(eventName, eventConfig));
294
- }
295
-
296
- // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
297
- // See LICENSE in the project root for license information.
298
-
299
-
300
- let menuOptionIdCounter = 0;
301
-
302
- /**
303
- * The `auro-menuoption` element provides users a way to define a menu option.
304
- * @customElement auro-menuoption
305
- *
306
- * @slot default - The default slot for the menu option text.
307
- *
308
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
309
- */
310
- class AuroMenuOption extends AuroElement {
311
-
312
- /**
313
- * This will register this element with the browser.
314
- * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
315
- *
316
- * @example
317
- * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
318
- *
319
- */
320
- static register(name = "auro-menuoption") {
321
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
322
- }
323
-
324
- /**
325
- * Returns whether the menu option is currently active and selectable.
326
- * An option is considered active if it is not hidden, not disabled, and not static.
327
- * @returns {boolean} True if the option is active, false otherwise.
328
- */
329
- get isActive() {
330
- return !this.hasAttribute('hidden') &&
331
- !this.disabled &&
332
- !this.hasAttribute('static');
333
- }
334
-
335
- constructor() {
336
- super();
337
-
338
- this.bindEvents();
339
-
340
- /**
341
- * @private
342
- */
343
- this.shape = undefined;
344
-
345
- /**
346
- * @private
347
- */
348
- this.size = undefined;
349
-
350
- /**
351
- * Generate unique names for dependency components.
352
- */
353
- const versioning = new AuroDependencyVersioning();
354
- this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, _);
355
-
356
- this.selected = false;
357
- this.noCheckmark = false;
358
- this.disabled = false;
359
-
360
- /**
361
- * @private
362
- */
363
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
364
-
365
- // Initialize context-related properties
366
- this.menuService = null;
367
- this.unsubscribe = null;
368
-
369
- /**
370
- * @private
371
- */
372
- this.handleMenuChange = this.handleMenuChange.bind(this);
373
- }
374
-
375
- static get properties() {
376
- return {
377
- ...super.properties,
378
-
379
- /**
380
- * When true, disables the menu option.
381
- */
382
- disabled: {
383
- type: Boolean,
384
- reflect: true
385
- },
386
-
387
- /**
388
- * @private
389
- */
390
- event: {
391
- type: String,
392
- reflect: true
393
- },
394
-
395
- /**
396
- * @private
397
- */
398
- layout: {
399
- type: String
400
- },
401
-
402
- /**
403
- * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
404
- */
405
- key: {
406
- type: String,
407
- reflect: true
408
- },
409
-
410
- /**
411
- * @private
412
- */
413
- menuService: {
414
- type: Object,
415
- state: true
416
- },
417
-
418
- /**
419
- * @private
420
- */
421
- matchWord: {
422
- type: String,
423
- state: true
424
- },
425
-
426
- /**
427
- * @private
428
- */
429
- noCheckmark: {
430
- type: Boolean,
431
- reflect: true
432
- },
433
-
434
- /**
435
- * Specifies that an option is selected.
436
- */
437
- selected: {
438
- type: Boolean,
439
- reflect: true
440
- },
441
-
442
- /**
443
- * Specifies the tab index of the menu option.
444
- */
445
- tabIndex: {
446
- type: Number,
447
- reflect: true
448
- },
449
-
450
- /**
451
- * Specifies the value to be sent to a server.
452
- */
453
- value: {
454
- type: String,
455
- reflect: true
456
- },
457
- };
458
- }
459
-
460
- static get styles() {
461
- return [
462
- styleCss,
463
- colorCss,
464
- tokensCss
465
- ];
466
- }
467
-
468
- connectedCallback() {
469
- super.connectedCallback();
470
-
471
- // Add the tag name as an attribute if it is different than the component name
472
- // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
473
- this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
474
-
475
- // Set up context consumption in connectedCallback
476
- this._contextConsumer = new ContextConsumer(this, {
477
- context: MenuContext,
478
- callback: this.attachTo.bind(this),
479
- subscribe: true
480
- });
481
-
482
- // Establish the key property as early as possible.
483
- // When a framework (e.g. Svelte) inserts the element into the DOM before
484
- // setting its `value` property, both `getAttribute('value')` and
485
- // `getAttribute('key')` return null here. Setting `this.key = null`
486
- // would block the fallback in `updated()` that assigns key from the
487
- // value property (the guard checked `=== undefined`). Only assign key
488
- // if at least one source attribute is actually present so that the
489
- // `updated()` fallback can run when the value property arrives later.
490
- const valueAttr = this.getAttribute('value');
491
- const keyAttr = this.getAttribute('key');
492
- const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
493
- if (resolvedKey !== null) {
494
- this.key = resolvedKey;
495
- }
496
- }
497
-
498
- firstUpdated() {
499
- // Add the tag name as an attribute if it is different than the component name
500
- this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
501
-
502
- // Generate unique ID if not already set (required for aria-activedescendant)
503
- if (!this.id) {
504
- menuOptionIdCounter += 1;
505
- this.id = `menuoption-${menuOptionIdCounter}`;
506
- }
507
-
508
- this.setAttribute('role', 'option');
509
- this.setAttribute('aria-selected', 'false');
510
-
511
- this.addEventListener('mouseover', () => {
512
- this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
513
- bubbles: true,
514
- cancelable: false,
515
- composed: true,
516
- detail: this
517
- }));
518
- });
519
- }
520
-
521
- updated(changedProperties) {
522
- super.updated(changedProperties);
523
-
524
- // Update aria-selected attribute if selected changed
525
- if (changedProperties.has('selected')) {
526
-
527
- // Update aria-selected attribute
528
- this.setAttribute('aria-selected', this.selected.toString());
529
-
530
- // Update menu service selection state if this isn't an internal update
531
- if (this.internalUpdateInProgress !== true) {
532
- this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
533
- }
534
- }
535
-
536
- if (changedProperties.has('active')) {
537
- this.updateActiveClasses();
538
- }
539
-
540
- // Update text highlight if matchWord changed
541
- if (changedProperties.has('matchWord')) {
542
- this.updateTextHighlight();
543
- }
544
-
545
- // Set the key to be the passed value if no key is provided.
546
- // Loose equality (== null) is intentional: it catches both null AND
547
- // undefined. When a framework (e.g. Svelte, React) inserts the element
548
- // before setting its value property, connectedCallback skips key
549
- // assignment because both attributes are null at that point. The Lit
550
- // property default for `key` is undefined (not null), so strict
551
- // === null would miss the case and the fallback would never run.
552
- if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
553
- this.key = this.value;
554
- }
555
- }
556
-
557
- disconnectedCallback() {
558
- if (this.menuService) {
559
- this.menuService.unsubscribe(this.handleMenuChange);
560
- this.menuService.removeMenuOption(this);
561
- }
562
- }
563
-
564
- /**
565
- * Sets up event listeners for user interaction with the menu option.
566
- * This function enables click and mouse enter events to trigger selection and highlighting logic.
567
- */
568
- bindEvents() {
569
- this.addEventListener('click', this.handleClick.bind(this));
570
- this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
571
- }
572
-
573
- /**
574
- * Attaches this menu option to a menu service and subscribes to its events.
575
- * This method enables the option to participate in menu selection and highlighting logic.
576
- * @param {Object} service - The menu service instance to attach to.
577
- */
578
- attachTo(service) {
579
- if (!service) {
580
- return;
581
- }
582
- this.menuService = service;
583
- this.menuService.addMenuOption(this);
584
- this.menuService.subscribe(this.handleMenuChange);
585
- }
586
-
587
- /**
588
- * Handles changes from the menu service and updates the option's state.
589
- * This function synchronizes the option's properties and selection/highlight state with menu events.
590
- * @param {Object} event - The event object from the menu service.
591
- */
592
- handleMenuChange(event) {
593
-
594
- // Ignore events without a type or property
595
- if (!event || (!event.type && !event.property)) {
596
- return;
597
- }
598
-
599
- // Update reactive properties based on event type
600
- if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
601
- this[event.property] = event.value;
602
- }
603
-
604
- // Handle highlight changes
605
- if (event.type === 'highlightChange') {
606
- const isActive = event.option === this;
607
- this.active = isActive;
608
- this.updateActiveClasses();
609
- }
610
-
611
- if (event.type === 'stateChange') {
612
- const isSelected = event.selectedOptions.includes(this);
613
- this.setInternalSelected(isSelected);
614
- }
615
- }
616
-
617
- /**
618
- * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
619
- * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
620
- * @param {boolean} isSelected - Whether the option should be marked as selected.
621
- */
622
- setInternalSelected(isSelected) {
623
- this.internalUpdateInProgress = true;
624
- this.selected = isSelected;
625
-
626
- // Fire custom event if selected
627
- if (isSelected) {
628
- this.handleCustomEvent();
629
- }
630
-
631
- setTimeout(() => {
632
- this.internalUpdateInProgress = false;
633
- }, 0);
634
- }
635
-
636
- /**
637
- * Sets the selected state of the menu option.
638
- * This function updates whether the option is currently selected.
639
- * @param {boolean} isSelected - Whether the option should be marked as selected.
640
- * @deprecated Simply modify the `selected` property directly instead.
641
- */
642
- setSelected(isSelected) {
643
- this.selected = isSelected;
644
- }
645
-
646
- /**
647
- * Updates the active state and visual highlighting of the menu option.
648
- * This function toggles the option's active status and applies or removes the active CSS class.
649
- * @param {boolean} isActive - Whether the option should be marked as active.
650
- * @deprecated Simply modify the `active` property directly instead.
651
- */
652
- updateActive(isActive) {
653
-
654
- // Set active state
655
- this.active = isActive;
656
- this.updateActiveClasses();
657
- }
658
-
659
- /**
660
- * Updates the CSS class for the menu option based on its active state.
661
- * This function adds or removes the 'active' class to visually indicate the option's active status.
662
- * @private
663
- */
664
- updateActiveClasses() {
665
- // Update class based on active state
666
- if (this.active) this.classList.add('active');
667
- else this.classList.remove('active');
668
- }
669
-
670
-
671
- /**
672
- * Updates the visual highlighting of text within the menu option based on the current match word.
673
- * This function highlights matching text segments and manages nested spacers for display formatting.
674
- * @private
675
- */
676
- updateTextHighlight() {
677
-
678
- // Regex for matchWord if needed
679
- let regexWord = null;
680
-
681
- if (this.matchWord && this.matchWord.length) {
682
- const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
683
- regexWord = new RegExp(escapedWord, 'giu');
684
- }
685
-
686
- // Update text highlighting if matchWord changed
687
- if (regexWord &&
688
- this.isActive && !this.hasAttribute('persistent')) {
689
- const nested = this.querySelectorAll('.nestingSpacer');
690
-
691
- const displayValueEl = this.querySelector('[slot="displayValue"]');
692
- if (displayValueEl) {
693
- this.removeChild(displayValueEl);
694
- }
695
-
696
- // Create nested spacers
697
- const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
698
-
699
- // Update with spacers and matchWord
700
- this.innerHTML = nestingSpacerBundle +
701
- this.textContent.replace(
702
- regexWord,
703
- (match) => `<strong>${match}</strong>`
704
- );
705
- if (displayValueEl) {
706
- this.append(displayValueEl);
707
- }
708
- }
709
- }
710
-
711
- /**
712
- * Handles click events on the menu option, toggling its selected state.
713
- * This function dispatches a click event and updates selection if the option is not disabled.
714
- * @private
715
- */
716
- handleClick() {
717
- if (!this.disabled) {
718
- this.dispatchClickEvent();
719
- this.selected = !this.selected;
720
- }
721
- }
722
-
723
- /**
724
- * Handles mouse enter events to highlight the menu option.
725
- * This function updates the menu service to set this option as the currently highlighted item if not disabled.
726
- * @private
727
- */
728
- handleMouseEnter() {
729
- if (!this.disabled) {
730
- this.menuService.setHighlightedOption(this);
731
- }
732
- }
733
-
734
- /**
735
- * Dispatches custom events defined for this menu option.
736
- * This function notifies listeners when a custom event is triggered by the option.
737
- * @private
738
- */
739
- handleCustomEvent() {
740
- if (this.event) {
741
- dispatchMenuEvent(this, this.event, { option: this });
742
- dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
743
- }
744
- }
745
-
746
- /**
747
- * Dispatches a click event for this menu option.
748
- * This function notifies listeners that the option has been clicked.
749
- * @private
750
- */
751
- dispatchClickEvent() {
752
- this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
753
- bubbles: true,
754
- cancelable: false,
755
- composed: true,
756
- detail: this
757
- }));
758
- }
759
-
760
- /**
761
- * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
762
- *
763
- * @private
764
- * @param {string} svgContent - The SVG content to be embedded.
765
- * @returns {Element} The HTML element containing the SVG icon.
766
- */
767
- generateIconHtml(svgContent) {
768
- const dom = new DOMParser().parseFromString(svgContent, 'text/html');
769
- const svg = dom.body.firstChild;
770
-
771
- svg.setAttribute('slot', 'svg');
772
-
773
- return html$1`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
774
- }
775
-
776
- /**
777
- * Logic to determine the layout of the component.
778
- * @protected
779
- * @returns {void}
780
- */
781
- renderLayout() {
782
-
783
- const fontClassMap = {
784
- xs: 'body-sm',
785
- sm: 'body-default',
786
- md: 'body-default',
787
- lg: 'body-lg',
788
- xl: 'body-lg'
789
- };
790
-
791
- const classes = classMap({
792
- 'wrapper': true,
793
- [this.size ? fontClassMap[this.size] : 'body-sm']: true,
794
- });
795
-
796
- return html$1`
797
- <div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
798
- ${this.selected && !this.noCheckmark
799
- ? this.generateIconHtml(checkmarkIcon.svg)
800
- : undefined}
801
- <slot></slot>
802
- </div>
803
- `;
804
- }
805
- }
806
-
807
- /* eslint-disable */
808
-
809
- class MenuService {
810
-
811
- /**
812
- * PROPERTIES AND GETTERS
813
- */
814
-
815
- /**
816
- * Gets the list of registered menu options.
817
- * @returns {AuroMenuOption[]}
818
- */
819
- get menuOptions() {
820
- return this._menuOptions;
821
- }
822
-
823
- /**
824
- * Gets the currently highlighted option.
825
- * @returns {AuroMenuOption|null}
826
- */
827
- get highlightedOption() {
828
- return this._menuOptions[this.highlightedIndex] || null;
829
- }
830
-
831
- /**
832
- * Gets the current value(s) of the selected option(s).
833
- * @returns {string|string[]|undefined}
834
- */
835
- get currentValue() {
836
- const values = (this.selectedOptions || []).map(option => option.value);
837
- return this.multiSelect ? values : values[0];
838
- }
839
-
840
- /**
841
- * Gets the label(s) of the currently selected option(s).
842
- * @returns {string}
843
- */
844
- get currentLabel() {
845
- const labels = (this.selectedOptions || []).map(option => option.textContent);
846
- return this.multiSelect ? labels.join(", ") : labels[0] || '';
847
- }
848
-
849
- /**
850
- * Gets the string representation of the current value(s).
851
- * For multi-select, this is a JSON stringified array.
852
- * @returns {string|undefined}
853
- */
854
- get stringValue() {
855
- const { currentValue } = this;
856
-
857
- if (Array.isArray(currentValue)) {
858
- if (currentValue.length > 0) {
859
- return JSON.stringify(currentValue);
860
- }
861
- return undefined;
862
- }
863
-
864
- if (typeof currentValue === 'string') {
865
- if (currentValue.length > 0) {
866
- return currentValue;
867
- }
868
- return undefined;
869
- }
870
-
871
- // Future: handle other types here (e.g., number, object, etc.)
872
- return undefined;
873
- }
874
-
875
- /**
876
- * Gets the key(s) of the currently selected option(s).
877
- * @returns {string|string[]|undefined}
878
- */
879
- get currentKeys() {
880
- const keys = (this.selectedOptions || []).map(option => option.key);
881
- return this.multiSelect ? keys : keys[0];
882
- }
883
-
884
- /**
885
- * CONSTRUCTOR
886
- */
887
-
888
- /**
889
- * Creates a new MenuService instance.
890
- * @param {Object} options - The options object.
891
- * @param {AuroMenu} options.host - The host element that this service will control. Required.
892
- * @throws {Error} If the host is not provided.
893
- */
894
- constructor({ host } = {}) {
895
-
896
- // Ensure a host was passed
897
- if (!host) {
898
- throw new Error("MenuService requires a host element.");
899
- }
900
-
901
- // Attach the service to the host
902
- this.host = host;
903
- this.host.addController(this);
904
-
905
- // Set default properties
906
- this.size = undefined;
907
- this.shape = undefined;
908
- this.noCheckmark = undefined;
909
- this.disabled = undefined;
910
- this.matchWord = undefined;
911
- this.multiSelect = undefined;
912
- this.allowDeselect = undefined;
913
- this.selectAllMatchingOptions = undefined;
914
-
915
- this.highlightedIndex = -1;
916
-
917
- this._menuOptions = [];
918
- this._subscribers = [];
919
- this.internalUpdateInProgress = false;
920
- this.selectedOptions = [];
921
- this._pendingValue = null;
922
- this._pendingRetryScheduled = false;
923
- this._pendingRetryCount = 0;
924
- }
925
-
926
- /**
927
- * PROPERTY SYNCING
928
- */
929
-
930
- /**
931
- * Handles host updates.
932
- * This is a lit reactive lifecycle method.
933
- * This comes from the Lit controller interface provided by adding this service as a controller to the host.
934
- * See constructor for `this.host.addController(this)`
935
- * You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
936
- */
937
- hostUpdated() {
938
-
939
- // Reset selection if multiSelect mode changes
940
- if (this.host.multiSelect !== this.multiSelect) {
941
- this.selectedOptions = [];
942
- }
943
-
944
- // Update properties on host update
945
- this.setProperties({
946
- size: this.host.size,
947
- shape: this.host.shape,
948
- noCheckmark: this.host.noCheckmark,
949
- disabled: this.host.disabled,
950
- matchWord: this.host.matchWord,
951
- multiSelect: this.host.multiSelect,
952
- allowDeselect: this.host.allowDeselect,
953
- selectAllMatchingOptions: this.host.selectAllMatchingOptions
954
- });
955
- }
956
-
957
- /**
958
- * Handles host disconnection and memory cleanup.
959
- */
960
- hostDisconnected() {
961
- this._subscribers = [];
962
- this._menuOptions = [];
963
- this._pendingValue = null;
964
- this._pendingRetryScheduled = false;
965
- this._pendingRetryCount = 0;
966
- }
967
-
968
- /**
969
- * Sets a property value if it exists on the instance and the value has changed.
970
- * @param {string} property
971
- * @param {any} value
972
- */
973
- setProperty(property, value) {
974
-
975
- // Only update if we are tracking the property in this service
976
- if (this.hasOwnProperty(property)) {
977
-
978
- // Check if the value has changed
979
- const valueChanged = this[property] !== value;
980
-
981
- // Update and notify if changed
982
- if (valueChanged) {
983
- this[property] = value;
984
- this.notify({ property, value });
985
- }
986
- }
987
- }
988
-
989
- /**
990
- * Sets multiple properties on the instance.
991
- * @param {Object} properties - Key-value pairs of properties to set.
992
- */
993
- setProperties(properties) {
994
- for (const [key, value] of Object.entries(properties)) {
995
- this.setProperty(key, value);
996
- }
997
- }
998
-
999
- /**
1000
- * MENU OPTION HIGHLIGHTING
1001
- */
1002
-
1003
- /**
1004
- * Highlights the next active option in the menu.
1005
- */
1006
- highlightNext() {
1007
- this.moveHighlightedOption("next");
1008
- }
1009
-
1010
- /**
1011
- * Highlights the previous active option in the menu.
1012
- */
1013
- highlightPrevious() {
1014
- this.moveHighlightedOption("previous");
1015
- }
1016
-
1017
- /**
1018
- * Moves the highlighted option in the specified direction.
1019
- * @param {string} direction - The direction to move the highlight ("next" or "previous").
1020
- */
1021
- moveHighlightedOption(direction) {
1022
-
1023
- // Get the active options
1024
- const activeOptions = this._menuOptions.filter(option => option.isActive);
1025
-
1026
- // Get the currently active option
1027
- const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
1028
-
1029
- // Determine the new index based on the currently active option and direction
1030
- let newIndex = currentActiveOption
1031
- ? direction === "previous"
1032
- ? activeOptions.indexOf(currentActiveOption) - 1
1033
- : activeOptions.indexOf(currentActiveOption) + 1
1034
- : direction === "previous"
1035
- ? activeOptions.length - 1
1036
- : 0;
1037
-
1038
- // Wrap around the index if needed
1039
- newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
1040
-
1041
- // Get the new active option and set it as highlighted
1042
- const newActiveOption = activeOptions[newIndex];
1043
- this.setHighlightedOption(newActiveOption);
1044
- }
1045
-
1046
- /**
1047
- * Sets the highlighted index to the specified option.
1048
- * @param {AuroMenuOption} option - The option to highlight.
1049
- */
1050
- setHighlightedOption(option) {
1051
-
1052
- if (!option) return;
1053
-
1054
- // Get the index of the option to highlight
1055
- const index = this._menuOptions.indexOf(option);
1056
-
1057
- // Update highlighted index
1058
- this.highlightedIndex = index;
1059
-
1060
- // Notify subscribers of highlight change
1061
- this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
1062
-
1063
- // Dispatch the change event
1064
- this.dispatchChangeEvent('auroMenu-activatedOption', option);
1065
- }
1066
-
1067
- /**
1068
- * Sets the highlighted option to the option at the specified index if it exists.
1069
- * @param {number} index
1070
- */
1071
- setHighlightedIndex(index) {
1072
- const option = this._menuOptions[index] || null;
1073
- this.setHighlightedOption(option);
1074
- }
1075
-
1076
- /**
1077
- * Selects the currently highlighted option.
1078
- */
1079
- selectHighlightedOption() {
1080
- if (this.highlightedOption) {
1081
- this.toggleOption(this.highlightedOption);
1082
- }
1083
- }
1084
-
1085
- /**
1086
- * SELECTION AND DESELECTION METHODS
1087
- */
1088
-
1089
- /**
1090
- * Selects one or more options in a batch operation
1091
- * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
1092
- */
1093
- selectOptions(options) {
1094
- let optionsToSelect = Array.isArray(options) ? options : [options];
1095
-
1096
- // Filter out options that are inactive
1097
- optionsToSelect = optionsToSelect.filter(option => option.isActive);
1098
-
1099
- if (!optionsToSelect.length) return;
1100
-
1101
- if (this.multiSelect) {
1102
- this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
1103
- } else {
1104
- // In single select mode, only take the last option
1105
- this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
1106
- }
1107
-
1108
- this.stageUpdate();
1109
- }
1110
-
1111
- /**
1112
- * Deselects one or more options in a batch operation
1113
- * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
1114
- */
1115
- deselectOptions(options) {
1116
- const optionsToDeselect = Array.isArray(options) ? options : [options];
1117
-
1118
- if (!optionsToDeselect.length) return;
1119
-
1120
- // Check if deselection should be prevented
1121
- const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
1122
- const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
1123
-
1124
- // Prevent deselecting the only selected option if not allowed
1125
- if (shouldPreventDeselect && isOnlySelectedOption) return;
1126
-
1127
- const optionsSet = new Set(optionsToDeselect);
1128
- this.selectedOptions = (this.selectedOptions || [])
1129
- .filter(opt => !optionsSet.has(opt));
1130
-
1131
- this.stageUpdate();
1132
- }
1133
-
1134
- /**
1135
- * Selects a single option.
1136
- * @param {AuroMenuOption} option
1137
- */
1138
- selectOption(option) {
1139
- this.selectOptions(option);
1140
- }
1141
-
1142
- /**
1143
- * Deselects a single option.
1144
- * @param {AuroMenuOption} option
1145
- */
1146
- deselectOption(option) {
1147
- this.deselectOptions(option);
1148
- }
1149
-
1150
- /**
1151
- * Toggles the selection state of a single option.
1152
- * @param {AuroMenuOption} option
1153
- */
1154
- toggleOption(option) {
1155
- if (option.selected) {
1156
- this.deselectOption(option);
1157
- } else {
1158
- this.selectOption(option);
1159
- }
1160
- }
1161
-
1162
- /**
1163
- * Selects options based on their value(s) when compared to a passed value or values.
1164
- * Value or values are normalized to an array of strings that can be matched to option keys.
1165
- * @param {string|number|Array<string|number>} value - The value(s) to select.
1166
- */
1167
- selectByValue(value) {
1168
- const isEmptyValue = value === undefined ||
1169
- value === null ||
1170
- (Array.isArray(value) && value.length === 0) ||
1171
- (typeof value === 'string' && value.trim() === '');
1172
-
1173
- // Early exit for invalid/empty values
1174
- if (isEmptyValue) {
1175
- return;
1176
- }
1177
-
1178
- // If an internal update cycle is still in progress, defer value application
1179
- // rather than dropping it.
1180
- if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
1181
- this.queuePendingValue(value);
1182
- return;
1183
- }
1184
-
1185
- // Normalize values to array of strings
1186
- const normalizedValues = this._getNormalizedValues(value);
1187
-
1188
- // Validate for single-select mode
1189
- let validatedValues = normalizedValues;
1190
- if (normalizedValues.length > 1 && !this.multiSelect) {
1191
- console.warn("MenuService - Multiple values provided for single-select menu. Only the first value will be selected.");
1192
- validatedValues = [normalizedValues[0]];
1193
- }
1194
-
1195
- if (this._menuOptions.length === 0) {
1196
- this.queuePendingValue(value);
1197
- return;
1198
- }
1199
-
1200
- // Find matching options by comparing available options to validated values
1201
- const trackedKeys = new Set();
1202
- const optionsToSelect = this._menuOptions.filter(option => {
1203
- const passesFilter = validatedValues.includes(option.key);
1204
- const alreadyTracked = trackedKeys.has(option.key);
1205
- const isActive = option.isActive;
1206
-
1207
- trackedKeys.add(option.key);
1208
-
1209
- // Include the option in the options to be selected if it passes the filter check and
1210
- // either hasn't been tracked yet or selectAllMatchingOptions is true
1211
- return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
1212
- });
1213
-
1214
- // Handle no matches: clear existing selection, but do not dispatch an intermediate
1215
- // undefined value that can overwrite the host value in parent components.
1216
- if (!optionsToSelect.length) {
1217
- const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
1218
-
1219
- if (hasUnresolvedKeys) {
1220
- this.queuePendingValue(value);
1221
- return;
1222
- }
1223
-
1224
- this.clearPendingValue();
1225
-
1226
- if (this.selectedOptions.length > 0) {
1227
- this.selectedOptions = [];
1228
- }
1229
-
1230
- // Always notify so the host resets any stale invalid value, even when
1231
- // selectedOptions was already empty (e.g. double-clicking set-invalid).
1232
- this.stageUpdate({ reason: 'no-match' });
1233
-
1234
- // Dispatch failure event if no matches found
1235
- if (validatedValues.length) {
1236
- this.dispatchChangeEvent('auroMenu-selectValueFailure', {
1237
- message: 'No matching options found for the provided value(s).',
1238
- values: validatedValues
1239
- });
1240
- }
1241
-
1242
- return;
1243
- }
1244
-
1245
- this.clearPendingValue();
1246
-
1247
- if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
1248
- return;
1249
- }
1250
-
1251
- // Apply programmatic selection as a single transaction and emit one final state.
1252
- this.selectedOptions = optionsToSelect;
1253
- this.stageUpdate();
1254
- }
1255
-
1256
- /**
1257
- * Queues a pending value and schedules a bounded retry.
1258
- * @param {string|number|Array<string|number>} value - The value to retry.
1259
- */
1260
- queuePendingValue(value) {
1261
- this._pendingValue = value;
1262
-
1263
- if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
1264
- return;
1265
- }
1266
-
1267
- this._pendingRetryScheduled = true;
1268
- this._pendingRetryCount += 1;
1269
-
1270
- setTimeout(() => {
1271
- this._pendingRetryScheduled = false;
1272
-
1273
- if (this._pendingValue == null) {
1274
- return;
1275
- }
1276
-
1277
- const pendingValue = this._pendingValue;
1278
- this.selectByValue(pendingValue);
1279
- }, 0);
1280
- }
1281
-
1282
- /**
1283
- * Clears pending retry state.
1284
- */
1285
- clearPendingValue() {
1286
- this._pendingValue = null;
1287
- this._pendingRetryScheduled = false;
1288
- this._pendingRetryCount = 0;
1289
- }
1290
-
1291
- /**
1292
- * Resets the selected options to an empty array.
1293
- */
1294
- reset() {
1295
- const previousOptions = [...this.selectedOptions];
1296
- this.selectedOptions = [];
1297
-
1298
- // Single update after clearing all
1299
- if (previousOptions.length) {
1300
- this.stageUpdate();
1301
- }
1302
- }
1303
-
1304
- /**
1305
- * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
1306
- */
1307
-
1308
- /**
1309
- * Subscribes a callback to menu service events.
1310
- * @param {Function} callback - The callback to invoke on events.
1311
- */
1312
- subscribe(callback) {
1313
- this._subscribers.push(callback);
1314
- }
1315
-
1316
- /**
1317
- * Remove a previously subscribed callback from menu service events.
1318
- * @param {Function} callback
1319
- */
1320
- unsubscribe(callback) {
1321
- this._subscribers = this._subscribers.filter(cb => cb !== callback);
1322
- }
1323
-
1324
- /**
1325
- * Stages an update to notify subscribers of state and value changes.
1326
- */
1327
- stageUpdate(meta = {}) {
1328
- this.notifyStateChange(meta);
1329
- this.notifyValueChange(meta);
1330
- }
1331
-
1332
- /**
1333
- * Notifies subscribers of a menu service event.
1334
- * All notifications are sent to all subscribers.
1335
- * @param {string} event - The event to send to subscribers.
1336
- */
1337
- notify(event) {
1338
- this._subscribers.forEach(callback => callback(event));
1339
- }
1340
-
1341
- /**
1342
- * Notifies subscribers of a state change (selected options has changed).
1343
- */
1344
- notifyStateChange(meta = {}) {
1345
- this.notify({
1346
- type: 'stateChange',
1347
- selectedOptions: this.selectedOptions,
1348
- ...meta
1349
- });
1350
- }
1351
-
1352
- /**
1353
- * Notifies subscribers of a value change (current value has changed).
1354
- */
1355
- notifyValueChange(meta = {}) {
1356
-
1357
- // Prepare details for the event
1358
- const details = {
1359
- value: this.currentValue,
1360
- stringValue: this.stringValue,
1361
- keys: this.currentKeys,
1362
- options: this.selectedOptions,
1363
- label: this.currentLabel
1364
- };
1365
-
1366
- // If only one option is selected, include its index
1367
- if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
1368
-
1369
- this.notify({
1370
- type: 'valueChange',
1371
- ...meta,
1372
- ...details
1373
- });
1374
- }
1375
-
1376
- /**
1377
- * Dispatches a custom event from the host element.
1378
- * @param {string} eventName
1379
- * @param {any} detail
1380
- */
1381
- dispatchChangeEvent(eventName, detail) {
1382
- this.host.dispatchEvent(new CustomEvent(eventName, {
1383
- bubbles: true,
1384
- cancelable: false,
1385
- composed: true,
1386
- detail
1387
- }));
1388
- }
1389
-
1390
- /**
1391
- * MENU OPTION MANAGEMENT METHODS
1392
- */
1393
-
1394
- /**
1395
- * Adds a menu option to the service's list.
1396
- * @param {AuroMenuOption} option - the option to track
1397
- */
1398
- addMenuOption(option) {
1399
- this._menuOptions.push(option);
1400
- this.notify({ type: 'optionsChange', options: this._menuOptions });
1401
-
1402
- if (this._pendingValue != null) {
1403
- this.queuePendingValue(this._pendingValue);
1404
- }
1405
- }
1406
-
1407
- /**
1408
- * Removes a menu option from the service's list.
1409
- * @param {AuroMenuOption} option - the option to remove
1410
- */
1411
- removeMenuOption(option) {
1412
- this._menuOptions = this._menuOptions.filter(opt => opt !== option);
1413
- this.notify({ type: 'optionsChange', options: this._menuOptions });
1414
-
1415
- if (this._menuOptions.length === 0) {
1416
- this.clearPendingValue();
1417
- }
1418
- }
1419
-
1420
- /**
1421
- * UTILITIES
1422
- */
1423
-
1424
- /**
1425
- * Normalizes a value or array of values into an array of strings for option selection.
1426
- * This function ensures that input values are consistently formatted for matching menu options.
1427
- *
1428
- * @param {string|number|Array<string|number>} value - The value(s) to normalize.
1429
- * @returns {Array<string>} An array of string values suitable for option matching.
1430
- * @throws {Error} If any value is not a string or number.
1431
- */
1432
- _getNormalizedValues(value) {
1433
- let values = value;
1434
-
1435
- // Handle JSON string and single value string input
1436
- if (!Array.isArray(values) && typeof values === 'string') {
1437
-
1438
- // Attempt to parse as JSON array
1439
- try {
1440
-
1441
- // Normalize single quotes to double quotes for JSON parsing
1442
- // This will not handle complex cases but will cover basic usage
1443
- const parseValue = values.replace(/'([^']*?)'/g, '"$1"');
1444
-
1445
- // Attempt parse
1446
- const parsed = JSON.parse(parseValue);
1447
-
1448
- // Ensure parsed value is an array
1449
- if (!Array.isArray(parsed)) throw new Error('Not an array');
1450
-
1451
- // Set values to parsed array
1452
- values = parsed;
1453
- } catch (err) {
1454
-
1455
- // If parsing fails, treat as single value
1456
- values = [value];
1457
- }
1458
- }
1459
-
1460
- // Handle a single number being passed
1461
- if (typeof values === 'number') {
1462
- values = [String(values)];
1463
- }
1464
-
1465
- // Coerce each value to string and validate types
1466
- values.forEach((val, index) => {
1467
-
1468
- // Throw an error for invalid value types
1469
- if (typeof val !== 'string' && typeof val !== 'number') {
1470
- throw new Error('Value contains invalid value type. Supported types are string and number.');
1471
- }
1472
-
1473
- // Convert numbers to strings for consistency
1474
- if (typeof val === 'number') {
1475
- values[index] = String(val);
1476
- }
1477
- });
1478
-
1479
- // Return the resulting array of string values
1480
- return values;
1481
- }
1482
-
1483
- /**
1484
- * Returns whether two arrays of options contain the same elements.
1485
- * @param {AuroMenuOption[]} arr1 - First array of options.
1486
- * @param {AuroMenuOption[]} arr2 - Second array of options.
1487
- * @returns {boolean} True if arrays match, false otherwise.
1488
- */
1489
- optionsArraysMatch(arr1, arr2) {
1490
- if (arr1.length !== arr2.length) return false;
1491
-
1492
- const set1 = new Set(arr1);
1493
- const set2 = new Set(arr2);
1494
-
1495
- for (let item of set1) {
1496
- if (!set2.has(item)) {
1497
- return false;
1498
- }
1499
- }
1500
-
1501
- return true;
1502
- }
1503
- }
1504
-
1505
- const MenuContext = createContext('menu-context');
1506
-
1507
- /* eslint-disable no-underscore-dangle */
1508
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1509
- // See LICENSE in the project root for license information.
1510
-
1511
-
1512
-
1513
- /**
1514
- * The `auro-menu` element provides users a way to select from a list of options.
1515
- * @customElement auro-menu
1516
- *
1517
- * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
1518
- * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
1519
- * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
1520
- * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
1521
- * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
1522
- * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
1523
- * @slot loadingText - Text to show while loading attribute is set
1524
- * @slot loadingIcon - Icon to show while loading attribute is set
1525
- * @slot - Slot for insertion of menu options.
1526
- */
1527
-
1528
- /* eslint-disable max-lines */
1529
-
1530
- class AuroMenu extends AuroElement {
1531
-
1532
- constructor() {
1533
- super();
1534
-
1535
- // State properties (reactive)
1536
-
1537
- /**
1538
- * @private
1539
- */
1540
- this.shape = "box";
1541
-
1542
- /**
1543
- * @private
1544
- */
1545
- this.size = "sm";
1546
-
1547
- // Value of the selected options
1548
- this.value = undefined;
1549
- // Currently selected option
1550
- this.optionSelected = undefined;
1551
- // String used for highlighting/filtering
1552
- this.matchWord = undefined;
1553
- // Hide the checkmark icon on selected options
1554
- this.noCheckmark = false;
1555
- // Currently active option
1556
- this.optionActive = undefined;
1557
- // Loading state
1558
- this.loading = false;
1559
- // Multi-select mode
1560
- this.multiSelect = false;
1561
- // Allow deselecting of menu options
1562
- this.allowDeselect = false;
1563
- // Select all matching options when setting value in multi-select mode
1564
- this.selectAllMatchingOptions = false;
1565
-
1566
- // Event Bindings
1567
-
1568
- // /**
1569
- // * @private
1570
- // */
1571
- // this.handleKeyDown = this.handleKeyDown.bind(this);
1572
-
1573
-
1574
- /**
1575
- * @private
1576
- */
1577
- this.handleSlotChange = this.handleSlotChange.bind(this);
1578
-
1579
- // Instance properties (non-reactive)
1580
-
1581
- /**
1582
- * @private
1583
- */
1584
- Object.assign(this, {
1585
- // Root-level menu (true) or a nested submenu (false)
1586
- rootMenu: true,
1587
- // Currently focused/active menu item index
1588
- _index: -1,
1589
- // Nested menu spacer
1590
- nestingSpacer: '<span class="nestingSpacer"></span>',
1591
- // Loading indicator for slot elements
1592
- loadingSlots: null,
1593
- });
1594
- }
1595
-
1596
- static get properties() {
1597
- return {
1598
- ...super.properties,
1599
-
1600
- /**
1601
- * Allows deselecting an already selected option when clicked again in single-select mode.
1602
- */
1603
- allowDeselect: {
1604
- type: Boolean,
1605
- reflect: true,
1606
- },
1607
-
1608
- /**
1609
- * When true, the entire menu and all options are disabled.
1610
- */
1611
- disabled: {
1612
- type: Boolean,
1613
- reflect: true
1614
- },
1615
-
1616
- /**
1617
- * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
1618
- */
1619
- hasLoadingPlaceholder: {
1620
- type: Boolean
1621
- },
1622
-
1623
- /**
1624
- * @private
1625
- */
1626
- layout: {
1627
- type: String
1628
- },
1629
-
1630
- /**
1631
- * Indent level for submenus.
1632
- * @private
1633
- */
1634
- level: {
1635
- type: Number,
1636
- reflect: false,
1637
- attribute: false
1638
- },
1639
-
1640
- /**
1641
- * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
1642
- */
1643
- loading: {
1644
- type: Boolean,
1645
- reflect: true
1646
- },
1647
-
1648
- /**
1649
- * Specifies a string used to highlight matched string parts in options.
1650
- */
1651
- matchWord: {
1652
- type: String,
1653
- attribute: 'matchword'
1654
- },
1655
-
1656
- /**
1657
- * When true, the selected option can be multiple options.
1658
- */
1659
- multiSelect: {
1660
- type: Boolean,
1661
- reflect: true,
1662
- attribute: 'multiselect'
1663
- },
1664
-
1665
- /**
1666
- * When true, selected option will not show the checkmark.
1667
- */
1668
- noCheckmark: {
1669
- type: Boolean,
1670
- reflect: true,
1671
- attribute: 'nocheckmark'
1672
- },
1673
-
1674
- /**
1675
- * Specifies the current active menuOption.
1676
- */
1677
- optionActive: {
1678
- type: Object,
1679
- attribute: 'optionactive'
1680
- },
1681
-
1682
- /**
1683
- * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
1684
- */
1685
- optionSelected: {
1686
- // Allow HTMLElement, HTMLElement[] arrays and undefined
1687
- type: Object
1688
- },
1689
-
1690
- /**
1691
- * Available menu options.
1692
- * @readonly
1693
- */
1694
- options: {
1695
- type: Array,
1696
- reflect: false,
1697
- attribute: false
1698
- },
1699
-
1700
- /**
1701
- * Sets the size of the menu.
1702
- * @type {'sm' | 'md'}
1703
- * @default 'sm'
1704
- */
1705
- size: {
1706
- type: String,
1707
- reflect: true
1708
- },
1709
-
1710
- /**
1711
- * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
1712
- */
1713
- selectAllMatchingOptions: {
1714
- type: Boolean,
1715
- reflect: true,
1716
- },
1717
-
1718
- /**
1719
- * Sets the shape of the menu.
1720
- * @type {'box' | 'round'}
1721
- * @default 'box'
1722
- */
1723
- shape: {
1724
- type: String,
1725
- reflect: true
1726
- },
1727
-
1728
- /**
1729
- * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
1730
- */
1731
- value: {
1732
- type: String,
1733
- reflect: true,
1734
- attribute: 'value'
1735
- }
1736
- };
1737
- }
1738
-
1739
- static get styles() {
1740
- return [
1741
- styleCss$1,
1742
- colorCss$1,
1743
- tokensCss
1744
- ];
1745
- }
1746
-
1747
- /**
1748
- * @readonly
1749
- * @returns {string} - Returns the label of the currently selected option(s).
1750
- */
1751
- get currentLabel() {
1752
- return this.menuService.currentLabel;
1753
- };
1754
-
1755
- /**
1756
- * @readonly
1757
- * @returns {Array<HTMLElement>} - Returns the array of available menu options.
1758
- * @deprecated Use `options` property instead.
1759
- */
1760
- get items() {
1761
- return this.options;
1762
- }
1763
-
1764
- /**
1765
- * @returns {number} - Returns the index of the currently active option.
1766
- */
1767
- get index() {
1768
- return this._index;
1769
- }
1770
-
1771
- /**
1772
- * @param {number} value - Sets the index of the currently active option.
1773
- */
1774
- set index(value) {
1775
- this.menuService.setHighlightedIndex(value);
1776
- }
1777
-
1778
- /**
1779
- * This will register this element with the browser.
1780
- * @param {string} [name="auro-menu"] - The name of the element that you want to register.
1781
- *
1782
- * @example
1783
- * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
1784
- *
1785
- */
1786
- static register(name = "auro-menu") {
1787
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
1788
- }
1789
-
1790
- /**
1791
- * Formatted value based on `multiSelect` state.
1792
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
1793
- * @private
1794
- * @returns {String|Array<String>}
1795
- */
1796
- get formattedValue() {
1797
- return this.menuService.currentValue;
1798
- }
1799
-
1800
- /**
1801
- * Gets the current property values for the menu service.
1802
- * @private
1803
- * @returns {Object}
1804
- */
1805
- get propertyValues() {
1806
- return {
1807
- size: this.size,
1808
- shape: this.shape,
1809
- noCheckmark: this.nocheckmark,
1810
- disabled: this.disabled
1811
- };
1812
- }
1813
-
1814
- /**
1815
- * Provides the menu context to child components.
1816
- * Initializes the MenuService and subscribes to menu changes.
1817
- * @protected
1818
- */
1819
- provideContext() {
1820
- if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
1821
- this.rootMenu = false;
1822
- this.menuService = this.parentElement.menuService;
1823
- this._contextProvider = this.parentElement._contextProvider;
1824
- return;
1825
- }
1826
-
1827
- this.menuService = new MenuService({host: this});
1828
- this.menuService.setProperties(this.propertyValues);
1829
- this.menuService.subscribe(this.handleMenuChange.bind(this));
1830
- this._contextProvider = new ContextProvider(this, {
1831
- context: MenuContext,
1832
- initialValue: this.menuService
1833
- });
1834
- }
1835
-
1836
- /**
1837
- * Updates the currently active option in the menu.
1838
- * @param {HTMLElement} option - The option to set as active.
1839
- */
1840
- updateActiveOption(option) {
1841
- this.menuService.setHighlightedOption(option);
1842
- }
1843
-
1844
- /**
1845
- * Sets the internal value and manages update state.
1846
- * @param {String|Array<String>} value - The value to set.
1847
- * @protected
1848
- */
1849
- setInternalValue(value) {
1850
- if (this.value !== value) {
1851
- this.internalUpdateInProgress = true;
1852
- this.value = value;
1853
-
1854
- setTimeout(() => {
1855
- this.internalUpdateInProgress = false;
1856
- });
1857
- }
1858
- }
1859
-
1860
- /**
1861
- * Handles changes from the menu service and updates component state.
1862
- * @param {Object} event - The event object from the menu service.
1863
- * @protected
1864
- */
1865
- handleMenuChange(event) {
1866
- if (event.type === 'valueChange') {
1867
-
1868
- // New option is array value or first option with fallback to undefined for empty array in all cases
1869
- const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
1870
- const newValue = event.stringValue;
1871
-
1872
- // Check if the option or value has actually changed
1873
- if (this.optionSelected !== newOption || this.stringValue !== newValue) {
1874
- this.optionSelected = newOption;
1875
- this.setInternalValue(newValue);
1876
- }
1877
-
1878
- // Notify components of selection change
1879
- this.notifySelectionChange(event);
1880
- }
1881
-
1882
- if (event.type === 'highlightChange') {
1883
- this.optionActive = event.option;
1884
- this._index = event.index;
1885
- }
1886
-
1887
- if (event.type === 'optionsChange') {
1888
- this.options = event.options;
1889
- this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
1890
- detail: {
1891
- options: event.options
1892
- }
1893
- }));
1894
- }
1895
- }
1896
-
1897
- /**
1898
- * Gets the currently selected options.
1899
- * @returns {Array<HTMLElement>}
1900
- */
1901
- get selectedOptions() {
1902
- return this.menuService ? this.menuService.selectedOptions : [];
1903
- }
1904
-
1905
- /**
1906
- * Gets the first selected option, or null if none.
1907
- * @returns {HTMLElement|null}
1908
- */
1909
- get selectedOption() {
1910
- return this.menuService ? this.menuService.selectedOptions[0] : null;
1911
- }
1912
-
1913
- // Lifecycle Methods
1914
-
1915
- connectedCallback() {
1916
- super.connectedCallback();
1917
-
1918
- this.provideContext();
1919
-
1920
- // this.addEventListener('keydown', this.handleKeyDown);
1921
- this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
1922
- this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
1923
- this.addEventListener('slotchange', this.handleSlotChange);
1924
- this.setTagAttribute("auro-menu");
1925
- }
1926
-
1927
- disconnectedCallback() {
1928
- // this.removeEventListener('keydown', this.handleKeyDown);
1929
- this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
1930
- this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
1931
- this.removeEventListener('slotchange', this.handleSlotChange);
1932
-
1933
- super.disconnectedCallback();
1934
- }
1935
-
1936
- firstUpdated() {
1937
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
1938
-
1939
- this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
1940
- this.initializeMenu();
1941
- }
1942
-
1943
-
1944
- updated(changedProperties) {
1945
- super.updated(changedProperties);
1946
-
1947
- // Apply value selection synchronously so that static-HTML fixtures
1948
- // resolve within a single update cycle. The refactored selectByValue
1949
- // no longer calls reset() first, so the destructive intermediate-event
1950
- // cascade that originally required deferral is eliminated. If option
1951
- // keys are not yet resolved (framework mount-order race), selectByValue
1952
- // queues a bounded retry automatically via queuePendingValue.
1953
- if (changedProperties.has('value') && !this.internalUpdateInProgress) {
1954
- this.menuService.selectByValue(this.value);
1955
- }
1956
-
1957
- // Handle loading state changes
1958
- if (changedProperties.has('loading')) {
1959
- this.setLoadingState(this.loading);
1960
- }
1961
-
1962
- if (changedProperties.has('multiSelect') && this.rootMenu) {
1963
- if (this.multiSelect) {
1964
- this.setAttribute('aria-multiselectable', 'true');
1965
- } else {
1966
- this.removeAttribute('aria-multiselectable');
1967
- }
1968
- }
1969
- }
1970
-
1971
- /**
1972
- * Sets an attribute that matches the default tag name if the tag name is not the default.
1973
- * @param {string} tagName - The tag name to set as an attribute.
1974
- * @private
1975
- */
1976
- setTagAttribute(tagName) {
1977
- if (this.tagName.toLowerCase() !== tagName) {
1978
- this.setAttribute(tagName, true);
1979
- }
1980
- }
1981
-
1982
- /**
1983
- * Sets the loading state and dispatches a loading change event.
1984
- * @param {boolean} isLoading - Whether the menu is loading.
1985
- * @protected
1986
- */
1987
- setLoadingState(isLoading) {
1988
- this.setAttribute("aria-busy", isLoading);
1989
- dispatchMenuEvent(this, "auroMenu-loadingChange", {
1990
- loading: isLoading,
1991
- hasLoadingPlaceholder: this.hasLoadingPlaceholder
1992
- });
1993
- }
1994
-
1995
- // Init Methods
1996
-
1997
- /**
1998
- * Initializes the menu's state and structure.
1999
- * @private
2000
- */
2001
- initializeMenu() {
2002
- if (this.rootMenu) {
2003
- this.setAttribute('role', 'listbox');
2004
- this.setAttribute('root', '');
2005
-
2006
- if (this.multiSelect) {
2007
- this.setAttribute('aria-multiselectable', 'true');
2008
- }
2009
- }
2010
-
2011
- this.handleNestedMenus(this);
2012
- }
2013
-
2014
- /**
2015
- * Selects the currently highlighted option.
2016
- * @protected
2017
- */
2018
- makeSelection() {
2019
- this.menuService.selectHighlightedOption();
2020
- }
2021
-
2022
- /**
2023
- * Resets all options to their default state.
2024
- * @private
2025
- */
2026
- clearSelection() {
2027
- this.optionSelected = undefined;
2028
- this.value = undefined;
2029
- this._index = -1;
2030
- }
2031
-
2032
- /**
2033
- * Resets the menu to its initial state.
2034
- * This is the only way to return value to undefined.
2035
- * @public
2036
- */
2037
- reset() {
2038
- this.menuService.reset();
2039
-
2040
- // Dispatch reset event
2041
- dispatchMenuEvent(this, 'auroMenu-selectValueReset');
2042
- }
2043
-
2044
- /**
2045
- * Handles nested menu structure.
2046
- * @private
2047
- * @param {HTMLElement} menu - Root menu element.
2048
- */
2049
- handleNestedMenus(menu) {
2050
- menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
2051
-
2052
- if (menu.level > 0) {
2053
- menu.setAttribute('role', 'group');
2054
- menu.removeAttribute("root");
2055
- if (!menu.hasAttribute('aria-label')) {
2056
- menu.setAttribute('aria-label', 'submenu');
2057
- }
2058
- }
2059
-
2060
- const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
2061
- options.forEach((option) => {
2062
- const regex = new RegExp(this.nestingSpacer, "gu");
2063
- option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
2064
- });
2065
- }
2066
-
2067
- // Event Handlers
2068
-
2069
- // /**
2070
- // * Handles keyboard navigation.
2071
- // * @private
2072
- // * @param {KeyboardEvent} event - Event object from the browser.
2073
- // */
2074
- // handleKeyDown(event) {
2075
- // // Update to Chris keyboard handler
2076
- // // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
2077
- // event.preventDefault();
2078
- // switch (event.key) {
2079
- // case "ArrowDown":
2080
- // console.warn("ArrowDown key is pressed and heard from menu");
2081
- // this.menuService.highlightNext();
2082
- // break;
2083
- // case "ArrowUp":
2084
- // console.warn("ArrowUp key is pressed and heard from menu");
2085
- // this.menuService.highlightPrevious();
2086
- // break;
2087
- // case "Tab":
2088
- // case "Enter":
2089
- // this.menuService.selectHighlightedOption();
2090
- // // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
2091
- // break;
2092
- // default:
2093
- // break;
2094
- // }
2095
- // }
2096
-
2097
- /**
2098
- * Navigates the menu options in the specified direction.
2099
- * @param {'up'|'down'} direction - The direction to navigate.
2100
- * @protected
2101
- */
2102
- navigateOptions(direction) {
2103
- if (direction === 'up') {
2104
- this.menuService.highlightPrevious();
2105
- } else if (direction === 'down') {
2106
- this.menuService.highlightNext();
2107
- }
2108
- }
2109
-
2110
- /**
2111
- * Handles slot change events.
2112
- * @private
2113
- */
2114
- handleSlotChange() {
2115
- if (this.rootMenu) {
2116
- this.initializeMenu();
2117
- }
2118
- }
2119
-
2120
- /**
2121
- * Handles custom events defined on options.
2122
- * @private
2123
- * @param {HTMLElement} option - Option with custom event.
2124
- */
2125
- handleCustomEvent(option) {
2126
- const eventName = option.getAttribute('event');
2127
- dispatchMenuEvent(this, eventName);
2128
- dispatchMenuEvent(this, 'auroMenu-customEventFired');
2129
- }
2130
-
2131
- /**
2132
- * Notifies selection change to parent components.
2133
- * @param {any} source - The source that triggers this event.
2134
- * @private
2135
- */
2136
- notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
2137
- dispatchMenuEvent(this, 'auroMenu-selectedOption', {
2138
- value,
2139
- stringValue,
2140
- keys,
2141
- options,
2142
- reason
2143
- });
2144
- }
2145
-
2146
- /**
2147
- * Checks if an option is currently selected.
2148
- * @private
2149
- * @param {HTMLElement} option - The option to check.
2150
- * @returns {boolean}
2151
- */
2152
- isOptionSelected(option) {
2153
- if (!this.optionSelected) {
2154
- return false;
2155
- }
2156
-
2157
- if (this.multiSelect) {
2158
- // In multi-select mode, check if the option is in the selected array
2159
- return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
2160
- }
2161
-
2162
- return this.optionSelected === option;
2163
- }
2164
-
2165
- /**
2166
- * Getter for loading placeholder state.
2167
- * @returns {boolean} - True if loading slots are present and non-empty.
2168
- */
2169
- get hasLoadingPlaceholder() {
2170
- return this.loadingSlots && this.loadingSlots.length > 0;
2171
- }
2172
-
2173
- /**
2174
- * Getter for wrapper classes based on size.
2175
- * @returns {Object} - Class map for the wrapper element.
2176
- * @private
2177
- */
2178
- get wrapperClasses() {
2179
- return classMap({
2180
- 'menuWrapper': true,
2181
- [this.size]: true,
2182
- });
2183
- }
2184
-
2185
- /**
2186
- * Logic to determine the layout of the component.
2187
- * @protected
2188
- * @returns {void}
2189
- */
2190
- renderLayout() {
2191
- if (this.loading) {
2192
- return html`
2193
- <div class="${this.wrapperClasses}">
2194
- <auro-menuoption
2195
- disabled
2196
- loadingplaceholder
2197
- class="${this.hasLoadingPlaceholder ? "" : "empty"}"
2198
- >
2199
- <div>
2200
- <slot name="loadingIcon" class="body-lg"></slot>
2201
- <slot name="loadingText"></slot>
2202
- </div>
2203
- </auro-menuoption>
2204
- </div>
2205
- `;
2206
- }
2207
-
2208
- return html`
2209
- <div class="${this.wrapperClasses}">
2210
- <slot @slotchange=${this.handleSlotChange}></slot>
2211
- </div>
2212
- `;
2213
- }
2214
- }
2215
-
2216
- AuroMenu.register();
2217
- AuroMenuOption.register();