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

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