@aurodesignsystem-dev/auro-formkit 0.0.0-pr1503.4 → 0.0.0-pr1503.5
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.
- package/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/accessibility.md +1 -1
- package/components/checkbox/demo/customize.html +1 -2
- package/components/checkbox/demo/customize.min.js +23 -8
- package/components/checkbox/demo/getting-started.min.js +23 -8
- package/components/checkbox/demo/index.min.js +23 -8
- package/components/checkbox/dist/index.js +23 -8
- package/components/checkbox/dist/registered.js +23 -8
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/accessibility.md +1 -1
- package/components/combobox/demo/api.md +2 -2
- package/components/combobox/demo/customize.html +1 -2
- package/components/combobox/demo/customize.md +166 -142
- package/components/combobox/demo/customize.min.js +2515 -2316
- package/components/combobox/demo/getting-started.min.js +2515 -2312
- package/components/combobox/demo/index.md +2 -1
- package/components/combobox/demo/index.min.js +2515 -2312
- package/components/combobox/demo/keyboard-behavior.md +3 -146
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/demo/why-combobox.md +2 -2
- package/components/combobox/dist/auro-combobox.d.ts +49 -15
- package/components/combobox/dist/index.js +1462 -753
- package/components/combobox/dist/registered.js +1462 -753
- package/components/counter/demo/customize.min.js +188 -244
- package/components/counter/demo/index.min.js +188 -244
- package/components/counter/dist/auro-counter.d.ts +0 -8
- package/components/counter/dist/index.js +188 -244
- package/components/counter/dist/registered.js +188 -244
- package/components/datepicker/demo/accessibility.md +20 -10
- package/components/datepicker/demo/api.md +65 -62
- package/components/datepicker/demo/customize.md +180 -40
- package/components/datepicker/demo/customize.min.js +1690 -777
- package/components/datepicker/demo/getting-started.md +118 -2
- package/components/datepicker/demo/index.min.js +1690 -759
- package/components/datepicker/demo/keyboard-behavior.md +3 -3
- package/components/datepicker/demo/voiceover.md +4 -4
- package/components/datepicker/demo/why-datepicker.md +2 -2
- package/components/datepicker/dist/{src/auro-calendar-cell.d.ts → auro-calendar-cell.d.ts} +48 -3
- package/components/datepicker/dist/{src/auro-calendar.d.ts → auro-calendar.d.ts} +188 -10
- package/components/datepicker/dist/{src/auro-datepicker.d.ts → auro-datepicker.d.ts} +89 -6
- package/components/datepicker/dist/blackoutUtils.d.ts +43 -0
- package/components/datepicker/dist/index.js +1690 -759
- package/components/datepicker/dist/registered.js +1690 -759
- package/components/dropdown/demo/customize.html +3 -0
- package/components/dropdown/demo/customize.min.js +142 -208
- package/components/dropdown/demo/getting-started.min.js +131 -207
- package/components/dropdown/demo/index.min.js +131 -207
- package/components/dropdown/dist/auro-dropdown.d.ts +17 -1
- package/components/dropdown/dist/index.js +131 -207
- package/components/dropdown/dist/registered.js +131 -207
- package/components/form/demo/api.md +3 -3
- package/components/form/demo/customize.html +6 -6
- package/components/form/demo/customize.md +535 -135
- package/components/form/demo/customize.min.js +6307 -4378
- package/components/form/demo/getting-started.md +344 -96
- package/components/form/demo/getting-started.min.js +6255 -4378
- package/components/form/demo/index.min.js +6206 -4378
- package/components/form/demo/registerDemoDeps.min.js +5827 -4333
- package/components/form/dist/auro-form.d.ts +128 -10
- package/components/form/dist/index.js +377 -43
- package/components/form/dist/registered.js +377 -43
- package/components/input/demo/accessibility.md +1 -1
- package/components/input/demo/api.md +58 -57
- package/components/input/demo/customize.html +1 -2
- package/components/input/demo/customize.md +62 -61
- package/components/input/demo/customize.min.js +396 -275
- package/components/input/demo/getting-started.min.js +396 -275
- package/components/input/demo/index.min.js +396 -275
- package/components/input/dist/auro-input.d.ts +1 -1
- package/components/input/dist/base-input.d.ts +60 -81
- package/components/input/dist/index.js +409 -276
- package/components/input/dist/registered.js +396 -275
- package/components/input/dist/utilities.d.ts +10 -1
- package/components/menu/demo/accessibility.md +9 -4
- package/components/menu/demo/api.md +48 -45
- package/components/menu/demo/css-only.md +26 -19
- package/components/menu/demo/customize.md +307 -75
- package/components/menu/demo/design.md +1 -1
- package/components/menu/demo/getting-started.md +144 -7
- package/components/menu/demo/index.min.js +961 -1341
- package/components/menu/demo/keyboard-behavior.md +83 -4
- package/components/menu/demo/voiceover.md +21 -14
- package/components/menu/demo/why-menu.md +8 -9
- package/components/menu/dist/auro-menu-utils.d.ts +19 -0
- package/components/menu/dist/auro-menu.d.ts +97 -116
- package/components/menu/dist/auro-menuoption.d.ts +39 -133
- package/components/menu/dist/index.js +823 -1309
- package/components/menu/dist/registered.js +835 -1309
- package/components/radio/demo/accessibility.md +1 -1
- package/components/radio/demo/customize.min.js +23 -8
- package/components/radio/demo/getting-started.min.js +23 -8
- package/components/radio/demo/index.min.js +23 -8
- package/components/radio/dist/index.js +23 -8
- package/components/radio/dist/registered.js +23 -8
- package/components/select/demo/accessibility.md +6 -1
- package/components/select/demo/api.md +3 -2
- package/components/select/demo/customize.html +1 -2
- package/components/select/demo/customize.md +210 -5
- package/components/select/demo/customize.min.js +1613 -1854
- package/components/select/demo/design.md +10 -10
- package/components/select/demo/getting-started.md +1 -1
- package/components/select/demo/getting-started.min.js +1617 -1903
- package/components/select/demo/index.md +2 -2
- package/components/select/demo/index.min.js +1613 -1854
- package/components/select/demo/keyboard-behavior.md +81 -54
- package/components/select/demo/voiceover.md +28 -15
- package/components/select/dist/auro-select.d.ts +70 -12
- package/components/select/dist/index.js +580 -315
- package/components/select/dist/registered.js +580 -315
- package/components/select/dist/selectUtils.d.ts +24 -0
- package/custom-elements.json +8071 -7919
- package/package.json +7 -3
- package/components/checkbox/demo/customize.js +0 -22
- package/components/checkbox/demo/demo-support.js +0 -1
- package/components/checkbox/demo/getting-started.js +0 -22
- package/components/checkbox/demo/index.js +0 -8
- package/components/checkbox/demo/styles.scss +0 -1
- package/components/combobox/demo/customize.js +0 -24
- package/components/combobox/demo/demo-support.js +0 -1
- package/components/combobox/demo/getting-started.js +0 -21
- package/components/combobox/demo/index.js +0 -23
- package/components/combobox/demo/styles.scss +0 -1
- package/components/counter/demo/customize.js +0 -21
- package/components/counter/demo/demo-support.js +0 -1
- package/components/counter/demo/index.js +0 -21
- package/components/counter/demo/styles.scss +0 -1
- package/components/datepicker/demo/customize.js +0 -19
- package/components/datepicker/demo/demo-support.js +0 -1
- package/components/datepicker/demo/index.js +0 -23
- package/components/datepicker/demo/styles.scss +0 -1
- package/components/dropdown/demo/customize.js +0 -9
- package/components/dropdown/demo/demo-support.js +0 -1
- package/components/dropdown/demo/getting-started.js +0 -9
- package/components/dropdown/demo/index.js +0 -16
- package/components/dropdown/demo/styles.scss +0 -1
- package/components/form/demo/customize.js +0 -9
- package/components/form/demo/demo-support.js +0 -1
- package/components/form/demo/getting-started.js +0 -9
- package/components/form/demo/index.js +0 -5
- package/components/form/demo/registerDemoDeps.js +0 -23
- package/components/form/demo/styles.scss +0 -1
- package/components/input/demo/customize.js +0 -25
- package/components/input/demo/demo-support.js +0 -1
- package/components/input/demo/getting-started.js +0 -8
- package/components/input/demo/index.js +0 -8
- package/components/input/demo/styles.css +0 -974
- package/components/input/demo/styles.scss +0 -1
- package/components/menu/demo/demo-support.js +0 -1
- package/components/menu/demo/index.js +0 -25
- package/components/menu/demo/styles.scss +0 -1
- package/components/menu/dist/auro-menu.context.d.ts +0 -238
- package/components/radio/demo/customize.js +0 -22
- package/components/radio/demo/demo-support.js +0 -1
- package/components/radio/demo/getting-started.js +0 -24
- package/components/radio/demo/index.js +0 -8
- package/components/radio/demo/styles.scss +0 -1
- package/components/select/demo/customize.js +0 -11
- package/components/select/demo/demo-support.js +0 -1
- package/components/select/demo/getting-started.js +0 -26
- package/components/select/demo/index.js +0 -11
- package/components/select/demo/styles.scss +0 -1
- /package/components/counter/dist/styles/{counter-wrapper-color-css.d.ts → counter-group-color-css.d.ts} +0 -0
- /package/components/datepicker/dist/{src/auro-calendar-month.d.ts → auro-calendar-month.d.ts} +0 -0
- /package/components/datepicker/dist/{src/buttonVersion.d.ts → buttonVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/datepickerKeyboardStrategy.d.ts → datepickerKeyboardStrategy.d.ts} +0 -0
- /package/components/datepicker/dist/{src/iconVersion.d.ts → iconVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/index.d.ts → index.d.ts} +0 -0
- /package/components/datepicker/dist/{src/popoverVersion.d.ts → popoverVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/classic/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/classic/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/shapeSize-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/snowflake/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/snowflake/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/tokens-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/utilities.d.ts → utilities.d.ts} +0 -0
- /package/components/datepicker/dist/{src/utilitiesCalendar.d.ts → utilitiesCalendar.d.ts} +0 -0
- /package/components/datepicker/dist/{src/utilitiesCalendarRender.d.ts → utilitiesCalendarRender.d.ts} +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/day.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
|
@@ -3,34 +3,34 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$2=globalThis,e$
|
|
6
|
+
const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)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$4&&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$3("string"==typeof t?t:t+"",void 0,s$3),i$5=(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$3(o,t,s$3)},S$1=(s,o)=>{if(e$4)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$4?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
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
-
*/const{is:i$
|
|
12
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=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$4(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$3(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$2(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
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const t$1=globalThis,i$
|
|
19
|
+
const t$1=globalThis,i$3=t=>t,s$2=t$1.trustedTypes,e$2=s$2?s$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r=`<${n$1}>`,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$2?e$2.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$2?s$2.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$1)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$3(t).nextSibling;i$3(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
20
|
|
|
21
21
|
/**
|
|
22
22
|
* @license
|
|
23
23
|
* Copyright 2017 Google LLC
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
-
*/const s$
|
|
25
|
+
*/const s$1=globalThis;let i$2 = 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$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.2");
|
|
26
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-default-weight, );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-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-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-lg-weight, );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-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-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-sm-weight, );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-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-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-xs-weight, );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-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-2xs-weight, );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)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-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);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));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-xs-weight, 300);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));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-2xs-weight, 300);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));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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);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));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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)}`;
|
|
27
|
+
var styleCss$1 = i$5`: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-default-weight, );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-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-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-lg-weight, );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-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-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-sm-weight, );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-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-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-xs-weight, );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-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-2xs-weight, );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)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-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);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));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-xs-weight, 300);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));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-2xs-weight, 300);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));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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);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));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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
28
|
|
|
29
|
-
var colorCss$1 = i$
|
|
29
|
+
var colorCss$1 = i$5`: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
30
|
|
|
31
|
-
var tokensCss = i$
|
|
31
|
+
var tokensCss = i$5`: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
32
|
|
|
33
|
-
class AuroElement extends i$
|
|
33
|
+
class AuroElement extends i$2 {
|
|
34
34
|
static get properties() {
|
|
35
35
|
return {
|
|
36
36
|
|
|
@@ -134,753 +134,6 @@ class AuroElement extends i$3 {
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
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
|
-
/* eslint-disable */
|
|
171
|
-
|
|
172
|
-
class MenuService {
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* PROPERTIES AND GETTERS
|
|
176
|
-
*/
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Gets the list of registered menu options.
|
|
180
|
-
* @returns {AuroMenuOption[]}
|
|
181
|
-
*/
|
|
182
|
-
get menuOptions() {
|
|
183
|
-
return this._menuOptions;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Gets the currently highlighted option.
|
|
188
|
-
* @returns {AuroMenuOption|null}
|
|
189
|
-
*/
|
|
190
|
-
get highlightedOption() {
|
|
191
|
-
return this._menuOptions[this.highlightedIndex] || null;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* Gets the current value(s) of the selected option(s).
|
|
196
|
-
* @returns {string|string[]|undefined}
|
|
197
|
-
*/
|
|
198
|
-
get currentValue() {
|
|
199
|
-
const values = (this.selectedOptions || []).map(option => option.value);
|
|
200
|
-
return this.multiSelect ? values : values[0];
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Gets the label(s) of the currently selected option(s).
|
|
205
|
-
* @returns {string}
|
|
206
|
-
*/
|
|
207
|
-
get currentLabel() {
|
|
208
|
-
const labels = (this.selectedOptions || []).map(option => option.textContent);
|
|
209
|
-
return this.multiSelect ? labels.join(", ") : labels[0] || '';
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* Gets the string representation of the current value(s).
|
|
214
|
-
* For multi-select, this is a JSON stringified array.
|
|
215
|
-
* @returns {string|undefined}
|
|
216
|
-
*/
|
|
217
|
-
get stringValue() {
|
|
218
|
-
const { currentValue } = this;
|
|
219
|
-
|
|
220
|
-
if (Array.isArray(currentValue)) {
|
|
221
|
-
if (currentValue.length > 0) {
|
|
222
|
-
return JSON.stringify(currentValue);
|
|
223
|
-
}
|
|
224
|
-
return undefined;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
if (typeof currentValue === 'string') {
|
|
228
|
-
if (currentValue.length > 0) {
|
|
229
|
-
return currentValue;
|
|
230
|
-
}
|
|
231
|
-
return undefined;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
// Future: handle other types here (e.g., number, object, etc.)
|
|
235
|
-
return undefined;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Gets the key(s) of the currently selected option(s).
|
|
240
|
-
* @returns {string|string[]|undefined}
|
|
241
|
-
*/
|
|
242
|
-
get currentKeys() {
|
|
243
|
-
const keys = (this.selectedOptions || []).map(option => option.key);
|
|
244
|
-
return this.multiSelect ? keys : keys[0];
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/**
|
|
248
|
-
* CONSTRUCTOR
|
|
249
|
-
*/
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Creates a new MenuService instance.
|
|
253
|
-
* @param {Object} options - The options object.
|
|
254
|
-
* @param {AuroMenu} options.host - The host element that this service will control. Required.
|
|
255
|
-
* @throws {Error} If the host is not provided.
|
|
256
|
-
*/
|
|
257
|
-
constructor({ host } = {}) {
|
|
258
|
-
|
|
259
|
-
// Ensure a host was passed
|
|
260
|
-
if (!host) {
|
|
261
|
-
throw new Error("MenuService requires a host element.");
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
// Attach the service to the host
|
|
265
|
-
this.host = host;
|
|
266
|
-
this.host.addController(this);
|
|
267
|
-
|
|
268
|
-
// Set default properties
|
|
269
|
-
this.size = undefined;
|
|
270
|
-
this.shape = undefined;
|
|
271
|
-
this.noCheckmark = undefined;
|
|
272
|
-
this.disabled = undefined;
|
|
273
|
-
this.matchWord = undefined;
|
|
274
|
-
this.multiSelect = undefined;
|
|
275
|
-
this.allowDeselect = undefined;
|
|
276
|
-
this.selectAllMatchingOptions = undefined;
|
|
277
|
-
|
|
278
|
-
this.highlightedIndex = -1;
|
|
279
|
-
|
|
280
|
-
this._menuOptions = [];
|
|
281
|
-
this._subscribers = [];
|
|
282
|
-
this.internalUpdateInProgress = false;
|
|
283
|
-
this.selectedOptions = [];
|
|
284
|
-
this._pendingValue = null;
|
|
285
|
-
this._pendingRetryScheduled = false;
|
|
286
|
-
this._pendingRetryCount = 0;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* PROPERTY SYNCING
|
|
291
|
-
*/
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* Handles host updates.
|
|
295
|
-
* This is a lit reactive lifecycle method.
|
|
296
|
-
* This comes from the Lit controller interface provided by adding this service as a controller to the host.
|
|
297
|
-
* See constructor for `this.host.addController(this)`
|
|
298
|
-
* You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
|
|
299
|
-
*/
|
|
300
|
-
hostUpdated() {
|
|
301
|
-
|
|
302
|
-
// Reset selection if multiSelect mode changes
|
|
303
|
-
if (this.host.multiSelect !== this.multiSelect) {
|
|
304
|
-
this.selectedOptions = [];
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
// Update properties on host update
|
|
308
|
-
this.setProperties({
|
|
309
|
-
size: this.host.size,
|
|
310
|
-
shape: this.host.shape,
|
|
311
|
-
noCheckmark: this.host.noCheckmark,
|
|
312
|
-
disabled: this.host.disabled,
|
|
313
|
-
matchWord: this.host.matchWord,
|
|
314
|
-
multiSelect: this.host.multiSelect,
|
|
315
|
-
allowDeselect: this.host.allowDeselect,
|
|
316
|
-
selectAllMatchingOptions: this.host.selectAllMatchingOptions
|
|
317
|
-
});
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
/**
|
|
321
|
-
* Handles host disconnection and memory cleanup.
|
|
322
|
-
*/
|
|
323
|
-
hostDisconnected() {
|
|
324
|
-
this._subscribers = [];
|
|
325
|
-
this._menuOptions = [];
|
|
326
|
-
this._pendingValue = null;
|
|
327
|
-
this._pendingRetryScheduled = false;
|
|
328
|
-
this._pendingRetryCount = 0;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* Sets a property value if it exists on the instance and the value has changed.
|
|
333
|
-
* @param {string} property
|
|
334
|
-
* @param {any} value
|
|
335
|
-
*/
|
|
336
|
-
setProperty(property, value) {
|
|
337
|
-
|
|
338
|
-
// Only update if we are tracking the property in this service
|
|
339
|
-
if (this.hasOwnProperty(property)) {
|
|
340
|
-
|
|
341
|
-
// Check if the value has changed
|
|
342
|
-
const valueChanged = this[property] !== value;
|
|
343
|
-
|
|
344
|
-
// Update and notify if changed
|
|
345
|
-
if (valueChanged) {
|
|
346
|
-
this[property] = value;
|
|
347
|
-
this.notify({ property, value });
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
/**
|
|
353
|
-
* Sets multiple properties on the instance.
|
|
354
|
-
* @param {Object} properties - Key-value pairs of properties to set.
|
|
355
|
-
*/
|
|
356
|
-
setProperties(properties) {
|
|
357
|
-
for (const [key, value] of Object.entries(properties)) {
|
|
358
|
-
this.setProperty(key, value);
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
/**
|
|
363
|
-
* MENU OPTION HIGHLIGHTING
|
|
364
|
-
*/
|
|
365
|
-
|
|
366
|
-
/**
|
|
367
|
-
* Highlights the next active option in the menu.
|
|
368
|
-
*/
|
|
369
|
-
highlightNext() {
|
|
370
|
-
this.moveHighlightedOption("next");
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* Highlights the previous active option in the menu.
|
|
375
|
-
*/
|
|
376
|
-
highlightPrevious() {
|
|
377
|
-
this.moveHighlightedOption("previous");
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
/**
|
|
381
|
-
* Moves the highlighted option in the specified direction.
|
|
382
|
-
* @param {string} direction - The direction to move the highlight ("next" or "previous").
|
|
383
|
-
*/
|
|
384
|
-
moveHighlightedOption(direction) {
|
|
385
|
-
|
|
386
|
-
// Get the active options
|
|
387
|
-
const activeOptions = this._menuOptions.filter(option => option.isActive);
|
|
388
|
-
|
|
389
|
-
// Get the currently active option
|
|
390
|
-
const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
|
|
391
|
-
|
|
392
|
-
// Determine the new index based on the currently active option and direction
|
|
393
|
-
let newIndex = currentActiveOption
|
|
394
|
-
? direction === "previous"
|
|
395
|
-
? activeOptions.indexOf(currentActiveOption) - 1
|
|
396
|
-
: activeOptions.indexOf(currentActiveOption) + 1
|
|
397
|
-
: direction === "previous"
|
|
398
|
-
? activeOptions.length - 1
|
|
399
|
-
: 0;
|
|
400
|
-
|
|
401
|
-
// Wrap around the index if needed
|
|
402
|
-
newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
|
|
403
|
-
|
|
404
|
-
// Get the new active option and set it as highlighted
|
|
405
|
-
const newActiveOption = activeOptions[newIndex];
|
|
406
|
-
this.setHighlightedOption(newActiveOption);
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
/**
|
|
410
|
-
* Sets the highlighted index to the specified option.
|
|
411
|
-
* @param {AuroMenuOption} option - The option to highlight.
|
|
412
|
-
*/
|
|
413
|
-
setHighlightedOption(option) {
|
|
414
|
-
|
|
415
|
-
if (!option) return;
|
|
416
|
-
|
|
417
|
-
// Get the index of the option to highlight
|
|
418
|
-
const index = this._menuOptions.indexOf(option);
|
|
419
|
-
|
|
420
|
-
// Update highlighted index
|
|
421
|
-
this.highlightedIndex = index;
|
|
422
|
-
|
|
423
|
-
// Notify subscribers of highlight change
|
|
424
|
-
this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
|
|
425
|
-
|
|
426
|
-
// Dispatch the change event
|
|
427
|
-
this.dispatchChangeEvent('auroMenu-activatedOption', option);
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
/**
|
|
431
|
-
* Sets the highlighted option to the option at the specified index if it exists.
|
|
432
|
-
* @param {number} index
|
|
433
|
-
*/
|
|
434
|
-
setHighlightedIndex(index) {
|
|
435
|
-
const option = this._menuOptions[index] || null;
|
|
436
|
-
this.setHighlightedOption(option);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/**
|
|
440
|
-
* Selects the currently highlighted option.
|
|
441
|
-
*/
|
|
442
|
-
selectHighlightedOption() {
|
|
443
|
-
if (this.highlightedOption) {
|
|
444
|
-
this.toggleOption(this.highlightedOption);
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
/**
|
|
449
|
-
* SELECTION AND DESELECTION METHODS
|
|
450
|
-
*/
|
|
451
|
-
|
|
452
|
-
/**
|
|
453
|
-
* Selects one or more options in a batch operation
|
|
454
|
-
* @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
|
|
455
|
-
*/
|
|
456
|
-
selectOptions(options) {
|
|
457
|
-
let optionsToSelect = Array.isArray(options) ? options : [options];
|
|
458
|
-
|
|
459
|
-
// Filter out options that are inactive
|
|
460
|
-
optionsToSelect = optionsToSelect.filter(option => option.isActive);
|
|
461
|
-
|
|
462
|
-
if (!optionsToSelect.length) return;
|
|
463
|
-
|
|
464
|
-
if (this.multiSelect) {
|
|
465
|
-
this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
|
|
466
|
-
} else {
|
|
467
|
-
// In single select mode, only take the last option
|
|
468
|
-
this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
this.stageUpdate();
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
/**
|
|
475
|
-
* Deselects one or more options in a batch operation
|
|
476
|
-
* @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
|
|
477
|
-
*/
|
|
478
|
-
deselectOptions(options) {
|
|
479
|
-
const optionsToDeselect = Array.isArray(options) ? options : [options];
|
|
480
|
-
|
|
481
|
-
if (!optionsToDeselect.length) return;
|
|
482
|
-
|
|
483
|
-
// Check if deselection should be prevented
|
|
484
|
-
const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
|
|
485
|
-
const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
|
|
486
|
-
|
|
487
|
-
// Prevent deselecting the only selected option if not allowed
|
|
488
|
-
if (shouldPreventDeselect && isOnlySelectedOption) {
|
|
489
|
-
optionsToDeselect.forEach(option => {
|
|
490
|
-
option.selected = true;
|
|
491
|
-
});
|
|
492
|
-
this.dispatchChangeEvent('auroMenu-deselectPrevented', {
|
|
493
|
-
values: optionsToDeselect
|
|
494
|
-
});
|
|
495
|
-
return;
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
const optionsSet = new Set(optionsToDeselect);
|
|
499
|
-
const previousCount = this.selectedOptions.length;
|
|
500
|
-
this.selectedOptions = (this.selectedOptions || [])
|
|
501
|
-
.filter(opt => !optionsSet.has(opt));
|
|
502
|
-
|
|
503
|
-
if (this.selectedOptions.length < previousCount) {
|
|
504
|
-
this.stageUpdate();
|
|
505
|
-
}
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
/**
|
|
509
|
-
* Selects a single option.
|
|
510
|
-
* @param {AuroMenuOption} option
|
|
511
|
-
*/
|
|
512
|
-
selectOption(option) {
|
|
513
|
-
this.selectOptions(option);
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
/**
|
|
517
|
-
* Deselects a single option.
|
|
518
|
-
* @param {AuroMenuOption} option
|
|
519
|
-
*/
|
|
520
|
-
deselectOption(option) {
|
|
521
|
-
this.deselectOptions(option);
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
/**
|
|
525
|
-
* Toggles the selection state of a single option.
|
|
526
|
-
* @param {AuroMenuOption} option
|
|
527
|
-
*/
|
|
528
|
-
toggleOption(option) {
|
|
529
|
-
if (option.selected) {
|
|
530
|
-
this.deselectOption(option);
|
|
531
|
-
} else {
|
|
532
|
-
this.selectOption(option);
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
/**
|
|
537
|
-
* Selects options based on their value(s) when compared to a passed value or values.
|
|
538
|
-
* Value or values are normalized to an array of strings that can be matched to option keys.
|
|
539
|
-
* @param {string|number|Array<string|number>} value - The value(s) to select.
|
|
540
|
-
*/
|
|
541
|
-
selectByValue(value) {
|
|
542
|
-
const isEmptyValue = value === undefined ||
|
|
543
|
-
value === null ||
|
|
544
|
-
(Array.isArray(value) && value.length === 0) ||
|
|
545
|
-
(typeof value === 'string' && value.trim() === '');
|
|
546
|
-
|
|
547
|
-
// Early exit for invalid/empty values
|
|
548
|
-
if (isEmptyValue) {
|
|
549
|
-
this.selectedOptions.forEach(opt => opt.selected = false);
|
|
550
|
-
this.selectedOptions = [];
|
|
551
|
-
return;
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
// If an internal update cycle is still in progress, defer value application
|
|
555
|
-
// rather than dropping it.
|
|
556
|
-
if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
|
|
557
|
-
this.queuePendingValue(value);
|
|
558
|
-
return;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
// Normalize values to array of strings
|
|
562
|
-
const normalizedValues = this._getNormalizedValues(value);
|
|
563
|
-
|
|
564
|
-
// Validate for single-select mode
|
|
565
|
-
let validatedValues = normalizedValues;
|
|
566
|
-
if (normalizedValues.length > 1 && !this.multiSelect) {
|
|
567
|
-
console.warn("MenuService - Multiple values provided for single-select menu. Only the first value will be selected.");
|
|
568
|
-
validatedValues = [normalizedValues[0]];
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
if (this._menuOptions.length === 0) {
|
|
572
|
-
this.queuePendingValue(value);
|
|
573
|
-
return;
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
// Find matching options by comparing available options to validated values
|
|
577
|
-
const trackedKeys = new Set();
|
|
578
|
-
const optionsToSelect = this._menuOptions.filter(option => {
|
|
579
|
-
const passesFilter = validatedValues.includes(option.key);
|
|
580
|
-
const alreadyTracked = trackedKeys.has(option.key);
|
|
581
|
-
const isActive = option.isActive;
|
|
582
|
-
|
|
583
|
-
trackedKeys.add(option.key);
|
|
584
|
-
|
|
585
|
-
// Include the option in the options to be selected if it passes the filter check and
|
|
586
|
-
// either hasn't been tracked yet or selectAllMatchingOptions is true
|
|
587
|
-
return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
|
|
588
|
-
});
|
|
589
|
-
|
|
590
|
-
// Handle no matches: clear existing selection, but do not dispatch an intermediate
|
|
591
|
-
// undefined value that can overwrite the host value in parent components.
|
|
592
|
-
if (!optionsToSelect.length) {
|
|
593
|
-
const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
|
|
594
|
-
|
|
595
|
-
if (hasUnresolvedKeys) {
|
|
596
|
-
this.queuePendingValue(value);
|
|
597
|
-
return;
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
this.clearPendingValue();
|
|
601
|
-
|
|
602
|
-
if (this.selectedOptions.length > 0) {
|
|
603
|
-
this.selectedOptions = [];
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
// Always notify so the host resets any stale invalid value, even when
|
|
607
|
-
// selectedOptions was already empty (e.g. double-clicking set-invalid).
|
|
608
|
-
this.stageUpdate({ reason: 'no-match' });
|
|
609
|
-
|
|
610
|
-
// Dispatch failure event if no matches found
|
|
611
|
-
if (validatedValues.length) {
|
|
612
|
-
this.dispatchChangeEvent('auroMenu-selectValueFailure', {
|
|
613
|
-
message: 'No matching options found for the provided value(s).',
|
|
614
|
-
values: validatedValues
|
|
615
|
-
});
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
return;
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
this.clearPendingValue();
|
|
622
|
-
|
|
623
|
-
if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
|
|
624
|
-
return;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
// Apply programmatic selection as a single transaction and emit one final state.
|
|
628
|
-
this.selectedOptions = optionsToSelect;
|
|
629
|
-
this.stageUpdate();
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
/**
|
|
633
|
-
* Queues a pending value and schedules a bounded retry.
|
|
634
|
-
* @param {string|number|Array<string|number>} value - The value to retry.
|
|
635
|
-
*/
|
|
636
|
-
queuePendingValue(value) {
|
|
637
|
-
this._pendingValue = value;
|
|
638
|
-
|
|
639
|
-
if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
|
|
640
|
-
return;
|
|
641
|
-
}
|
|
642
|
-
|
|
643
|
-
this._pendingRetryScheduled = true;
|
|
644
|
-
this._pendingRetryCount += 1;
|
|
645
|
-
|
|
646
|
-
setTimeout(() => {
|
|
647
|
-
this._pendingRetryScheduled = false;
|
|
648
|
-
|
|
649
|
-
if (this._pendingValue == null) {
|
|
650
|
-
return;
|
|
651
|
-
}
|
|
652
|
-
|
|
653
|
-
const pendingValue = this._pendingValue;
|
|
654
|
-
this.selectByValue(pendingValue);
|
|
655
|
-
}, 0);
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
/**
|
|
659
|
-
* Clears pending retry state.
|
|
660
|
-
*/
|
|
661
|
-
clearPendingValue() {
|
|
662
|
-
this._pendingValue = null;
|
|
663
|
-
this._pendingRetryScheduled = false;
|
|
664
|
-
this._pendingRetryCount = 0;
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
/**
|
|
668
|
-
* Resets the selected options to an empty array.
|
|
669
|
-
*/
|
|
670
|
-
reset() {
|
|
671
|
-
const previousOptions = [...this.selectedOptions];
|
|
672
|
-
previousOptions.forEach(opt => opt.selected = false);
|
|
673
|
-
this.selectedOptions = [];
|
|
674
|
-
|
|
675
|
-
// Single update after clearing all
|
|
676
|
-
if (previousOptions.length) {
|
|
677
|
-
this.stageUpdate();
|
|
678
|
-
}
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
/**
|
|
682
|
-
* SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
|
|
683
|
-
*/
|
|
684
|
-
|
|
685
|
-
/**
|
|
686
|
-
* Subscribes a callback to menu service events.
|
|
687
|
-
* @param {Function} callback - The callback to invoke on events.
|
|
688
|
-
*/
|
|
689
|
-
subscribe(callback) {
|
|
690
|
-
this._subscribers.push(callback);
|
|
691
|
-
}
|
|
692
|
-
|
|
693
|
-
/**
|
|
694
|
-
* Remove a previously subscribed callback from menu service events.
|
|
695
|
-
* @param {Function} callback
|
|
696
|
-
*/
|
|
697
|
-
unsubscribe(callback) {
|
|
698
|
-
this._subscribers = this._subscribers.filter(cb => cb !== callback);
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
/**
|
|
702
|
-
* Stages an update to notify subscribers of state and value changes.
|
|
703
|
-
*/
|
|
704
|
-
stageUpdate(meta = {}) {
|
|
705
|
-
this.notifyStateChange(meta);
|
|
706
|
-
this.notifyValueChange(meta);
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
/**
|
|
710
|
-
* Notifies subscribers of a menu service event.
|
|
711
|
-
* All notifications are sent to all subscribers.
|
|
712
|
-
* @param {string} event - The event to send to subscribers.
|
|
713
|
-
*/
|
|
714
|
-
notify(event) {
|
|
715
|
-
this._subscribers.forEach(callback => callback(event));
|
|
716
|
-
}
|
|
717
|
-
|
|
718
|
-
/**
|
|
719
|
-
* Notifies subscribers of a state change (selected options has changed).
|
|
720
|
-
*/
|
|
721
|
-
notifyStateChange(meta = {}) {
|
|
722
|
-
this.notify({
|
|
723
|
-
type: 'stateChange',
|
|
724
|
-
selectedOptions: this.selectedOptions,
|
|
725
|
-
...meta
|
|
726
|
-
});
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
/**
|
|
730
|
-
* Notifies subscribers of a value change (current value has changed).
|
|
731
|
-
*/
|
|
732
|
-
notifyValueChange(meta = {}) {
|
|
733
|
-
|
|
734
|
-
// Prepare details for the event
|
|
735
|
-
const details = {
|
|
736
|
-
value: this.currentValue,
|
|
737
|
-
stringValue: this.stringValue,
|
|
738
|
-
keys: this.currentKeys,
|
|
739
|
-
options: this.selectedOptions,
|
|
740
|
-
label: this.currentLabel
|
|
741
|
-
};
|
|
742
|
-
|
|
743
|
-
// If only one option is selected, include its index
|
|
744
|
-
if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
|
|
745
|
-
|
|
746
|
-
this.notify({
|
|
747
|
-
type: 'valueChange',
|
|
748
|
-
...meta,
|
|
749
|
-
...details
|
|
750
|
-
});
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
/**
|
|
754
|
-
* Dispatches a custom event from the host element.
|
|
755
|
-
* @param {string} eventName
|
|
756
|
-
* @param {any} detail
|
|
757
|
-
*/
|
|
758
|
-
dispatchChangeEvent(eventName, detail) {
|
|
759
|
-
this.host.dispatchEvent(new CustomEvent(eventName, {
|
|
760
|
-
bubbles: true,
|
|
761
|
-
cancelable: false,
|
|
762
|
-
composed: true,
|
|
763
|
-
detail
|
|
764
|
-
}));
|
|
765
|
-
}
|
|
766
|
-
|
|
767
|
-
/**
|
|
768
|
-
* MENU OPTION MANAGEMENT METHODS
|
|
769
|
-
*/
|
|
770
|
-
|
|
771
|
-
/**
|
|
772
|
-
* Adds a menu option to the service's list.
|
|
773
|
-
* @param {AuroMenuOption} option - the option to track
|
|
774
|
-
*/
|
|
775
|
-
addMenuOption(option) {
|
|
776
|
-
this._menuOptions.push(option);
|
|
777
|
-
this.notify({ type: 'optionsChange', options: this._menuOptions });
|
|
778
|
-
|
|
779
|
-
if (this._pendingValue != null) {
|
|
780
|
-
this.queuePendingValue(this._pendingValue);
|
|
781
|
-
}
|
|
782
|
-
}
|
|
783
|
-
|
|
784
|
-
/**
|
|
785
|
-
* Removes a menu option from the service's list.
|
|
786
|
-
* @param {AuroMenuOption} option - the option to remove
|
|
787
|
-
*/
|
|
788
|
-
removeMenuOption(option) {
|
|
789
|
-
this._menuOptions = this._menuOptions.filter(opt => opt !== option);
|
|
790
|
-
this.notify({ type: 'optionsChange', options: this._menuOptions });
|
|
791
|
-
|
|
792
|
-
if (this._menuOptions.length === 0) {
|
|
793
|
-
this.clearPendingValue();
|
|
794
|
-
}
|
|
795
|
-
}
|
|
796
|
-
|
|
797
|
-
/**
|
|
798
|
-
* UTILITIES
|
|
799
|
-
*/
|
|
800
|
-
|
|
801
|
-
/**
|
|
802
|
-
* Normalizes a value or array of values into an array of strings for option selection.
|
|
803
|
-
* This function ensures that input values are consistently formatted for matching menu options.
|
|
804
|
-
*
|
|
805
|
-
* @param {string|number|Array<string|number>} value - The value(s) to normalize.
|
|
806
|
-
* @returns {Array<string>} An array of string values suitable for option matching.
|
|
807
|
-
* @throws {Error} If any value is not a string or number.
|
|
808
|
-
*/
|
|
809
|
-
_getNormalizedValues(value) {
|
|
810
|
-
let values = value;
|
|
811
|
-
|
|
812
|
-
// Handle JSON string and single value string input
|
|
813
|
-
if (!Array.isArray(values) && typeof values === 'string') {
|
|
814
|
-
|
|
815
|
-
// Attempt to parse as JSON array
|
|
816
|
-
try {
|
|
817
|
-
|
|
818
|
-
// Normalize single quotes to double quotes for JSON parsing
|
|
819
|
-
// This will not handle complex cases but will cover basic usage
|
|
820
|
-
const parseValue = values.replace(/'([^']*?)'/g, '"$1"');
|
|
821
|
-
|
|
822
|
-
// Attempt parse
|
|
823
|
-
const parsed = JSON.parse(parseValue);
|
|
824
|
-
|
|
825
|
-
// Ensure parsed value is an array
|
|
826
|
-
if (!Array.isArray(parsed)) throw new Error('Not an array');
|
|
827
|
-
|
|
828
|
-
// Set values to parsed array
|
|
829
|
-
values = parsed;
|
|
830
|
-
} catch (err) {
|
|
831
|
-
|
|
832
|
-
// If parsing fails, treat as single value
|
|
833
|
-
values = [value];
|
|
834
|
-
}
|
|
835
|
-
}
|
|
836
|
-
|
|
837
|
-
// Handle a single number being passed
|
|
838
|
-
if (typeof values === 'number') {
|
|
839
|
-
values = [String(values)];
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
// Coerce each value to string and validate types
|
|
843
|
-
values.forEach((val, index) => {
|
|
844
|
-
|
|
845
|
-
// Throw an error for invalid value types
|
|
846
|
-
if (typeof val !== 'string' && typeof val !== 'number') {
|
|
847
|
-
throw new Error('Value contains invalid value type. Supported types are string and number.');
|
|
848
|
-
}
|
|
849
|
-
|
|
850
|
-
// Convert numbers to strings for consistency
|
|
851
|
-
if (typeof val === 'number') {
|
|
852
|
-
values[index] = String(val);
|
|
853
|
-
}
|
|
854
|
-
});
|
|
855
|
-
|
|
856
|
-
// Return the resulting array of string values
|
|
857
|
-
return values;
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
/**
|
|
861
|
-
* Returns whether two arrays of options contain the same elements.
|
|
862
|
-
* @param {AuroMenuOption[]} arr1 - First array of options.
|
|
863
|
-
* @param {AuroMenuOption[]} arr2 - Second array of options.
|
|
864
|
-
* @returns {boolean} True if arrays match, false otherwise.
|
|
865
|
-
*/
|
|
866
|
-
optionsArraysMatch(arr1, arr2) {
|
|
867
|
-
if (arr1.length !== arr2.length) return false;
|
|
868
|
-
|
|
869
|
-
const set1 = new Set(arr1);
|
|
870
|
-
const set2 = new Set(arr2);
|
|
871
|
-
|
|
872
|
-
for (let item of set1) {
|
|
873
|
-
if (!set2.has(item)) {
|
|
874
|
-
return false;
|
|
875
|
-
}
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
return true;
|
|
879
|
-
}
|
|
880
|
-
}
|
|
881
|
-
|
|
882
|
-
const MenuContext = n$1('menu-context');
|
|
883
|
-
|
|
884
137
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
885
138
|
// See LICENSE in the project root for license information.
|
|
886
139
|
|
|
@@ -968,6 +221,44 @@ class AuroLibraryRuntimeUtils {
|
|
|
968
221
|
// See LICENSE in the project root for license information.
|
|
969
222
|
|
|
970
223
|
|
|
224
|
+
/**
|
|
225
|
+
* Serializes a multi-select value array back into the String `value` property.
|
|
226
|
+
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
227
|
+
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
228
|
+
* @private
|
|
229
|
+
* @param {Array<string>|undefined} values - The selected values.
|
|
230
|
+
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
231
|
+
*/
|
|
232
|
+
function serializeMultiSelectValue(values) {
|
|
233
|
+
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Validates if an option can be interacted with.
|
|
238
|
+
* @private
|
|
239
|
+
* @param {HTMLElement} option - The option to check.
|
|
240
|
+
* @returns {boolean} True if option is interactive.
|
|
241
|
+
*/
|
|
242
|
+
function isOptionInteractive(option) {
|
|
243
|
+
return !option.hasAttribute('hidden') &&
|
|
244
|
+
!option.hasAttribute('disabled') &&
|
|
245
|
+
!option.hasAttribute('static');
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* Validates if an option may be selected by matching a programmatic value.
|
|
250
|
+
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
251
|
+
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
252
|
+
* valid programmatic selection. Only disabled and static options — which are
|
|
253
|
+
* never selectable — are rejected.
|
|
254
|
+
* @param {HTMLElement} option - The option to check.
|
|
255
|
+
* @returns {boolean} True if option can be selected by value.
|
|
256
|
+
*/
|
|
257
|
+
function isSelectableByValue(option) {
|
|
258
|
+
return !option.hasAttribute('disabled') &&
|
|
259
|
+
!option.hasAttribute('static');
|
|
260
|
+
}
|
|
261
|
+
|
|
971
262
|
/**
|
|
972
263
|
* Helper method to dispatch custom events.
|
|
973
264
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -1001,7 +292,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
1001
292
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1002
293
|
*/const e=e$1(class extends i$1{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}});
|
|
1003
294
|
|
|
1004
|
-
/* eslint-disable no-underscore-dangle */
|
|
295
|
+
/* eslint-disable no-underscore-dangle, no-magic-numbers, max-lines, no-extra-parens, max-depth */
|
|
1005
296
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1006
297
|
// See LICENSE in the project root for license information.
|
|
1007
298
|
|
|
@@ -1015,16 +306,12 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
1015
306
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
1016
307
|
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
1017
308
|
* @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
|
|
1018
|
-
* @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
|
|
1019
309
|
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
1020
310
|
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
1021
311
|
* @slot loadingText - Text to show while loading attribute is set
|
|
1022
312
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
1023
313
|
* @slot - Slot for insertion of menu options.
|
|
1024
314
|
*/
|
|
1025
|
-
|
|
1026
|
-
/* eslint-disable max-lines */
|
|
1027
|
-
|
|
1028
315
|
class AuroMenu extends AuroElement {
|
|
1029
316
|
|
|
1030
317
|
constructor() {
|
|
@@ -1042,6 +329,8 @@ class AuroMenu extends AuroElement {
|
|
|
1042
329
|
*/
|
|
1043
330
|
this.size = "sm";
|
|
1044
331
|
|
|
332
|
+
// Value of the selected options
|
|
333
|
+
this.value = undefined;
|
|
1045
334
|
// Currently selected option
|
|
1046
335
|
this.optionSelected = undefined;
|
|
1047
336
|
// String used for highlighting/filtering
|
|
@@ -1054,13 +343,24 @@ class AuroMenu extends AuroElement {
|
|
|
1054
343
|
this.loading = false;
|
|
1055
344
|
// Multi-select mode
|
|
1056
345
|
this.multiSelect = false;
|
|
1057
|
-
// Allow deselecting of menu options
|
|
1058
|
-
this.allowDeselect = false;
|
|
1059
|
-
// Select all matching options when setting value in multi-select mode
|
|
1060
|
-
this.selectAllMatchingOptions = false;
|
|
1061
346
|
|
|
1062
347
|
// Event Bindings
|
|
1063
348
|
|
|
349
|
+
/**
|
|
350
|
+
* @private
|
|
351
|
+
*/
|
|
352
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
353
|
+
|
|
354
|
+
/**
|
|
355
|
+
* @private
|
|
356
|
+
*/
|
|
357
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* @private
|
|
361
|
+
*/
|
|
362
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
363
|
+
|
|
1064
364
|
/**
|
|
1065
365
|
* @private
|
|
1066
366
|
*/
|
|
@@ -1087,14 +387,6 @@ class AuroMenu extends AuroElement {
|
|
|
1087
387
|
return {
|
|
1088
388
|
...super.properties,
|
|
1089
389
|
|
|
1090
|
-
/**
|
|
1091
|
-
* Allows deselecting an already selected option when clicked again in single-select mode.
|
|
1092
|
-
*/
|
|
1093
|
-
allowDeselect: {
|
|
1094
|
-
type: Boolean,
|
|
1095
|
-
reflect: true,
|
|
1096
|
-
},
|
|
1097
|
-
|
|
1098
390
|
/**
|
|
1099
391
|
* When true, the entire menu and all options are disabled.
|
|
1100
392
|
*/
|
|
@@ -1103,20 +395,6 @@ class AuroMenu extends AuroElement {
|
|
|
1103
395
|
reflect: true
|
|
1104
396
|
},
|
|
1105
397
|
|
|
1106
|
-
/**
|
|
1107
|
-
* Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
1108
|
-
*/
|
|
1109
|
-
hasLoadingPlaceholder: {
|
|
1110
|
-
type: Boolean
|
|
1111
|
-
},
|
|
1112
|
-
|
|
1113
|
-
/**
|
|
1114
|
-
* @private
|
|
1115
|
-
*/
|
|
1116
|
-
layout: {
|
|
1117
|
-
type: String
|
|
1118
|
-
},
|
|
1119
|
-
|
|
1120
398
|
/**
|
|
1121
399
|
* Indent level for submenus.
|
|
1122
400
|
* @private
|
|
@@ -1163,60 +441,26 @@ class AuroMenu extends AuroElement {
|
|
|
1163
441
|
|
|
1164
442
|
/**
|
|
1165
443
|
* Specifies the current active menuOption.
|
|
444
|
+
* @readonly
|
|
1166
445
|
*/
|
|
1167
446
|
optionActive: {
|
|
1168
447
|
type: Object,
|
|
1169
|
-
attribute:
|
|
448
|
+
attribute: false
|
|
1170
449
|
},
|
|
1171
450
|
|
|
1172
451
|
/**
|
|
1173
|
-
*
|
|
452
|
+
* The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
|
|
453
|
+
* @readonly
|
|
1174
454
|
*/
|
|
1175
455
|
optionSelected: {
|
|
1176
456
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
1177
|
-
type: Object
|
|
1178
|
-
},
|
|
1179
|
-
|
|
1180
|
-
/**
|
|
1181
|
-
* Available menu options.
|
|
1182
|
-
* @readonly
|
|
1183
|
-
*/
|
|
1184
|
-
options: {
|
|
1185
|
-
type: Array,
|
|
1186
|
-
reflect: false,
|
|
457
|
+
type: Object,
|
|
1187
458
|
attribute: false
|
|
1188
459
|
},
|
|
1189
460
|
|
|
1190
|
-
/**
|
|
1191
|
-
* Sets the size of the menu.
|
|
1192
|
-
* @type {'sm' | 'md'}
|
|
1193
|
-
* @default 'sm'
|
|
1194
|
-
*/
|
|
1195
|
-
size: {
|
|
1196
|
-
type: String,
|
|
1197
|
-
reflect: true
|
|
1198
|
-
},
|
|
1199
|
-
|
|
1200
|
-
/**
|
|
1201
|
-
* When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
|
|
1202
|
-
*/
|
|
1203
|
-
selectAllMatchingOptions: {
|
|
1204
|
-
type: Boolean,
|
|
1205
|
-
reflect: true,
|
|
1206
|
-
},
|
|
1207
|
-
|
|
1208
|
-
/**
|
|
1209
|
-
* Sets the shape of the menu.
|
|
1210
|
-
* @type {'box' | 'round'}
|
|
1211
|
-
* @default 'box'
|
|
1212
|
-
*/
|
|
1213
|
-
shape: {
|
|
1214
|
-
type: String,
|
|
1215
|
-
reflect: true
|
|
1216
|
-
},
|
|
1217
|
-
|
|
1218
461
|
/**
|
|
1219
462
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
463
|
+
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
1220
464
|
*/
|
|
1221
465
|
value: {
|
|
1222
466
|
type: String,
|
|
@@ -1234,40 +478,9 @@ class AuroMenu extends AuroElement {
|
|
|
1234
478
|
];
|
|
1235
479
|
}
|
|
1236
480
|
|
|
1237
|
-
/**
|
|
1238
|
-
* @readonly
|
|
1239
|
-
* @returns {string} - Returns the label of the currently selected option(s).
|
|
1240
|
-
*/
|
|
1241
|
-
get currentLabel() {
|
|
1242
|
-
return this.menuService.currentLabel;
|
|
1243
|
-
};
|
|
1244
|
-
|
|
1245
|
-
/**
|
|
1246
|
-
* @readonly
|
|
1247
|
-
* @returns {Array<HTMLElement>} - Returns the array of available menu options.
|
|
1248
|
-
* @deprecated Use `options` property instead.
|
|
1249
|
-
*/
|
|
1250
|
-
get items() {
|
|
1251
|
-
return this.options;
|
|
1252
|
-
}
|
|
1253
|
-
|
|
1254
|
-
/**
|
|
1255
|
-
* @returns {number} - Returns the index of the currently active option.
|
|
1256
|
-
*/
|
|
1257
|
-
get index() {
|
|
1258
|
-
return this._index;
|
|
1259
|
-
}
|
|
1260
|
-
|
|
1261
|
-
/**
|
|
1262
|
-
* @param {number} value - Sets the index of the currently active option.
|
|
1263
|
-
*/
|
|
1264
|
-
set index(value) {
|
|
1265
|
-
this.menuService.setHighlightedIndex(value);
|
|
1266
|
-
}
|
|
1267
|
-
|
|
1268
481
|
/**
|
|
1269
482
|
* This will register this element with the browser.
|
|
1270
|
-
* @param {string} [name="auro-menu"] - The name of
|
|
483
|
+
* @param {string} [name="auro-menu"] - The name of element that you want to register to.
|
|
1271
484
|
*
|
|
1272
485
|
* @example
|
|
1273
486
|
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
@@ -1278,126 +491,116 @@ class AuroMenu extends AuroElement {
|
|
|
1278
491
|
}
|
|
1279
492
|
|
|
1280
493
|
/**
|
|
1281
|
-
*
|
|
1282
|
-
*
|
|
1283
|
-
|
|
1284
|
-
|
|
494
|
+
* @readonly
|
|
495
|
+
* @returns {Array<HTMLElement>} - Returns the array of available menu options.
|
|
496
|
+
*/
|
|
497
|
+
get options() {
|
|
498
|
+
return this.items;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* @returns {number} - Returns the index of the currently active option.
|
|
1285
503
|
*/
|
|
1286
|
-
get
|
|
1287
|
-
return this.
|
|
504
|
+
get index() {
|
|
505
|
+
return this._index;
|
|
1288
506
|
}
|
|
1289
507
|
|
|
1290
508
|
/**
|
|
1291
|
-
*
|
|
1292
|
-
* @private
|
|
1293
|
-
* @returns {Object}
|
|
509
|
+
* @param {number} value - Sets the index of the currently active option.
|
|
1294
510
|
*/
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
size: this.size,
|
|
1298
|
-
shape: this.shape,
|
|
1299
|
-
noCheckmark: this.nocheckmark,
|
|
1300
|
-
disabled: this.disabled
|
|
1301
|
-
};
|
|
511
|
+
set index(value) {
|
|
512
|
+
this.updateActiveOption(value);
|
|
1302
513
|
}
|
|
1303
514
|
|
|
1304
515
|
/**
|
|
1305
|
-
*
|
|
1306
|
-
*
|
|
1307
|
-
* @protected
|
|
516
|
+
* Gets the currently selected options as an array.
|
|
517
|
+
* @returns {Array<HTMLElement>}
|
|
1308
518
|
*/
|
|
1309
|
-
|
|
1310
|
-
if (this.
|
|
1311
|
-
|
|
1312
|
-
this.menuService = this.parentElement.menuService;
|
|
1313
|
-
this._contextProvider = this.parentElement._contextProvider;
|
|
1314
|
-
return;
|
|
519
|
+
get selectedOptions() {
|
|
520
|
+
if (!this.optionSelected) {
|
|
521
|
+
return [];
|
|
1315
522
|
}
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
this.
|
|
1320
|
-
this._contextProvider = new i$2(this, {
|
|
1321
|
-
context: MenuContext,
|
|
1322
|
-
initialValue: this.menuService
|
|
1323
|
-
});
|
|
523
|
+
if (Array.isArray(this.optionSelected)) {
|
|
524
|
+
return this.optionSelected;
|
|
525
|
+
}
|
|
526
|
+
return [this.optionSelected];
|
|
1324
527
|
}
|
|
1325
528
|
|
|
1326
529
|
/**
|
|
1327
|
-
*
|
|
1328
|
-
* @
|
|
530
|
+
* Gets the first selected option, or null if none.
|
|
531
|
+
* @returns {HTMLElement|null}
|
|
1329
532
|
*/
|
|
1330
|
-
|
|
1331
|
-
this.
|
|
533
|
+
get selectedOption() {
|
|
534
|
+
const opts = this.selectedOptions;
|
|
535
|
+
return opts.length > 0 ? opts[0] : null;
|
|
1332
536
|
}
|
|
1333
537
|
|
|
1334
538
|
/**
|
|
1335
|
-
*
|
|
1336
|
-
* @
|
|
1337
|
-
* @protected
|
|
539
|
+
* @readonly
|
|
540
|
+
* @returns {string} - Returns the label of the currently selected option(s).
|
|
1338
541
|
*/
|
|
1339
|
-
|
|
1340
|
-
if (this.
|
|
1341
|
-
|
|
1342
|
-
this.value = value;
|
|
1343
|
-
|
|
1344
|
-
setTimeout(() => {
|
|
1345
|
-
this.internalUpdateInProgress = false;
|
|
1346
|
-
});
|
|
542
|
+
get currentLabel() {
|
|
543
|
+
if (!this.optionSelected) {
|
|
544
|
+
return '';
|
|
1347
545
|
}
|
|
546
|
+
if (Array.isArray(this.optionSelected)) {
|
|
547
|
+
return this.optionSelected.map((opt) => opt.textContent).join(', ');
|
|
548
|
+
}
|
|
549
|
+
return this.optionSelected.textContent || '';
|
|
1348
550
|
}
|
|
1349
551
|
|
|
1350
552
|
/**
|
|
1351
|
-
*
|
|
1352
|
-
*
|
|
1353
|
-
* @
|
|
553
|
+
* Formatted value based on `multiSelect` state.
|
|
554
|
+
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
555
|
+
* @private
|
|
556
|
+
* @returns {String|Array<String>}
|
|
1354
557
|
*/
|
|
1355
|
-
|
|
1356
|
-
if (
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
|
|
1360
|
-
const newValue = event.stringValue;
|
|
1361
|
-
|
|
1362
|
-
// Check if the option or value has actually changed
|
|
1363
|
-
if (this.optionSelected !== newOption || this.stringValue !== newValue) {
|
|
1364
|
-
this.optionSelected = newOption;
|
|
1365
|
-
this.setInternalValue(newValue);
|
|
558
|
+
get formattedValue() {
|
|
559
|
+
if (this.multiSelect) {
|
|
560
|
+
if (!this.value) {
|
|
561
|
+
return undefined;
|
|
1366
562
|
}
|
|
1367
|
-
|
|
1368
|
-
//
|
|
1369
|
-
this.
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
563
|
+
// Defensive: `value` is declared as String, but consumers may assign arrays or other
|
|
564
|
+
// types programmatically. Normalize without throwing so render/update never hard-crashes.
|
|
565
|
+
if (Array.isArray(this.value)) {
|
|
566
|
+
return this.value;
|
|
567
|
+
}
|
|
568
|
+
if (typeof this.value !== 'string') {
|
|
569
|
+
return [String(this.value)];
|
|
570
|
+
}
|
|
571
|
+
if (this.value.startsWith("[")) {
|
|
572
|
+
// Malformed JSON (e.g. a literal string that happens to start with "[") falls back
|
|
573
|
+
// to a single-item array rather than throwing during render.
|
|
574
|
+
try {
|
|
575
|
+
// any valid JSON starting with `[` ALWAYS parses to an array
|
|
576
|
+
return JSON.parse(this.value);
|
|
577
|
+
} catch {
|
|
578
|
+
return [this.value];
|
|
1382
579
|
}
|
|
1383
|
-
}
|
|
580
|
+
}
|
|
581
|
+
return [this.value];
|
|
1384
582
|
}
|
|
583
|
+
return this.value;
|
|
1385
584
|
}
|
|
1386
585
|
|
|
1387
586
|
/**
|
|
1388
|
-
*
|
|
1389
|
-
* @
|
|
587
|
+
* Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
|
|
588
|
+
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
589
|
+
* @public
|
|
1390
590
|
*/
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
591
|
+
selectByValue(value) {
|
|
592
|
+
const isEmpty = value === undefined ||
|
|
593
|
+
value === null ||
|
|
594
|
+
(Array.isArray(value) && value.length === 0) ||
|
|
595
|
+
(typeof value === 'string' && value.trim() === '');
|
|
1394
596
|
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
597
|
+
if (isEmpty) {
|
|
598
|
+
this.clearSelection();
|
|
599
|
+
return;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
// `value` is a String property; stringify arrays so attribute reflection and `formattedValue` parsing stay correct.
|
|
603
|
+
this.value = Array.isArray(value) ? JSON.stringify(value) : value;
|
|
1401
604
|
}
|
|
1402
605
|
|
|
1403
606
|
// Lifecycle Methods
|
|
@@ -1405,9 +608,7 @@ class AuroMenu extends AuroElement {
|
|
|
1405
608
|
connectedCallback() {
|
|
1406
609
|
super.connectedCallback();
|
|
1407
610
|
|
|
1408
|
-
this.
|
|
1409
|
-
|
|
1410
|
-
// this.addEventListener('keydown', this.handleKeyDown);
|
|
611
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
1411
612
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
1412
613
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
1413
614
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -1415,7 +616,7 @@ class AuroMenu extends AuroElement {
|
|
|
1415
616
|
}
|
|
1416
617
|
|
|
1417
618
|
disconnectedCallback() {
|
|
1418
|
-
|
|
619
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
1419
620
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
1420
621
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
1421
622
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -1430,25 +631,140 @@ class AuroMenu extends AuroElement {
|
|
|
1430
631
|
this.initializeMenu();
|
|
1431
632
|
}
|
|
1432
633
|
|
|
634
|
+
/**
|
|
635
|
+
* Sets an attribute that matches the default tag name if the tag name is not the default.
|
|
636
|
+
* @param {string} tagName - The tag name to set as an attribute.
|
|
637
|
+
* @private
|
|
638
|
+
*/
|
|
639
|
+
setTagAttribute(tagName) {
|
|
640
|
+
if (this.tagName.toLowerCase() !== tagName) {
|
|
641
|
+
this.setAttribute(tagName, true);
|
|
642
|
+
}
|
|
643
|
+
}
|
|
1433
644
|
|
|
645
|
+
// eslint-disable-next-line complexity
|
|
1434
646
|
updated(changedProperties) {
|
|
1435
647
|
super.updated(changedProperties);
|
|
1436
648
|
|
|
1437
|
-
//
|
|
1438
|
-
//
|
|
1439
|
-
//
|
|
1440
|
-
//
|
|
1441
|
-
//
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
this.menuService.selectByValue(this.value);
|
|
649
|
+
// Single source of truth for 'auroMenu-selectedOption'. Selection handlers
|
|
650
|
+
// mutate optionSelected and let Lit's update cycle dispatch here; the prior
|
|
651
|
+
// .value comparison missed multi-select array changes and combined with the
|
|
652
|
+
// explicit calls in handleDeselectState/makeSelection produced 2-3 duplicate
|
|
653
|
+
// events per selection.
|
|
654
|
+
if (changedProperties.has('optionSelected')) {
|
|
655
|
+
this.notifySelectionChange();
|
|
1445
656
|
}
|
|
1446
657
|
|
|
1447
|
-
//
|
|
1448
|
-
if (changedProperties.has('
|
|
1449
|
-
this.
|
|
658
|
+
// Reset selection if multiSelect mode changes
|
|
659
|
+
if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
|
|
660
|
+
this.clearSelection();
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
if (changedProperties.has("value")) {
|
|
664
|
+
// Ensure items are populated before matching. `firstUpdated` normally initializes them,
|
|
665
|
+
// but a `value` change can arrive before slotted options are appended (e.g. parent sets
|
|
666
|
+
// value before children render). Without this guard, matching against an empty `items`
|
|
667
|
+
// would falsely dispatch `auroMenu-selectValueFailure` for valid initial values.
|
|
668
|
+
if (!this.items) {
|
|
669
|
+
this.initItems();
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
673
|
+
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
674
|
+
// cycle to avoid firing option custom events twice on the same selection.
|
|
675
|
+
let valueReconciled = false;
|
|
676
|
+
|
|
677
|
+
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
678
|
+
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
679
|
+
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
680
|
+
this.clearSelection();
|
|
681
|
+
} else {
|
|
682
|
+
let newSelected = null;
|
|
683
|
+
|
|
684
|
+
if (this.multiSelect) {
|
|
685
|
+
// In multiselect mode, this.value should be an array of strings.
|
|
686
|
+
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
687
|
+
// and calling `.includes` on undefined would throw during reconciliation.
|
|
688
|
+
const valueArray = this.formattedValue || [];
|
|
689
|
+
const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
|
|
690
|
+
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
691
|
+
|
|
692
|
+
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
693
|
+
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
694
|
+
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
695
|
+
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
696
|
+
// matching item yet are preserved so async preselection still works once options render.
|
|
697
|
+
const rejectedValues = this.items
|
|
698
|
+
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
699
|
+
: [];
|
|
700
|
+
if (rejectedValues.length > 0) {
|
|
701
|
+
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
702
|
+
this.value = serializeMultiSelectValue(reconciled);
|
|
703
|
+
valueReconciled = true;
|
|
704
|
+
}
|
|
705
|
+
} else {
|
|
706
|
+
// In single-select mode, this.value should be a string. Reject
|
|
707
|
+
// disabled/static options so a programmatic value pointing at a
|
|
708
|
+
// non-selectable option falls through to the no-match path below
|
|
709
|
+
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
710
|
+
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
711
|
+
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
712
|
+
// still a valid programmatic selection.
|
|
713
|
+
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
714
|
+
|
|
715
|
+
if (matchingOption) {
|
|
716
|
+
newSelected = matchingOption;
|
|
717
|
+
this._index = this.items.indexOf(matchingOption);
|
|
718
|
+
} else {
|
|
719
|
+
// If no matching option found, reset selection
|
|
720
|
+
newSelected = undefined;
|
|
721
|
+
this._index = -1;
|
|
722
|
+
}
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
// If no matching options were found in either mode
|
|
726
|
+
if (!newSelected || (Array.isArray(newSelected) && newSelected.length === 0)) {
|
|
727
|
+
// Defer failure when no options are loaded yet (async pattern: parent sets
|
|
728
|
+
// value before slotted options render). handleSlotChange re-runs matching
|
|
729
|
+
// once items arrive. Without this guard, a valid preselected value gets
|
|
730
|
+
// cleared by the failure listener before options ever exist to match against.
|
|
731
|
+
const hasItemsToMatch = this.items && this.items.length > 0;
|
|
732
|
+
if (hasItemsToMatch) {
|
|
733
|
+
// Clear state BEFORE dispatching so synchronous listeners (e.g. auro-select's
|
|
734
|
+
// updateDisplayedValue) read fresh `optionSelected` rather than the stale prior
|
|
735
|
+
// selection and re-render the old label.
|
|
736
|
+
if (this.optionSelected !== undefined) {
|
|
737
|
+
this.optionSelected = undefined;
|
|
738
|
+
}
|
|
739
|
+
this._index = -1;
|
|
740
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
741
|
+
}
|
|
742
|
+
} else if (!this.selectionEquals(this.optionSelected, newSelected)) {
|
|
743
|
+
this.optionSelected = newSelected;
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
// Update UI state
|
|
748
|
+
this.updateItemsState(new Map([
|
|
749
|
+
[
|
|
750
|
+
'optionSelected',
|
|
751
|
+
true
|
|
752
|
+
]
|
|
753
|
+
]));
|
|
754
|
+
|
|
755
|
+
// Notify of changes. Skip when reconciliation just reassigned `value`: the
|
|
756
|
+
// follow-on update cycle re-runs this branch and fires the events exactly once.
|
|
757
|
+
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
758
|
+
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
759
|
+
selected.forEach((opt) => {
|
|
760
|
+
if (opt.hasAttribute('event')) {
|
|
761
|
+
this.handleCustomEvent(opt);
|
|
762
|
+
}
|
|
763
|
+
});
|
|
764
|
+
}
|
|
1450
765
|
}
|
|
1451
766
|
|
|
767
|
+
// Process all other UI updates
|
|
1452
768
|
if (changedProperties.has('multiSelect') && this.rootMenu) {
|
|
1453
769
|
if (this.multiSelect) {
|
|
1454
770
|
this.setAttribute('aria-multiselectable', 'true');
|
|
@@ -1456,30 +772,129 @@ class AuroMenu extends AuroElement {
|
|
|
1456
772
|
this.removeAttribute('aria-multiselectable');
|
|
1457
773
|
}
|
|
1458
774
|
}
|
|
775
|
+
|
|
776
|
+
this.updateItemsState(changedProperties);
|
|
1459
777
|
}
|
|
1460
778
|
|
|
1461
779
|
/**
|
|
1462
|
-
*
|
|
1463
|
-
* @param {string} tagName - The tag name to set as an attribute.
|
|
780
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
1464
781
|
* @private
|
|
782
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
1465
783
|
*/
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
784
|
+
updateItemsState(changedProperties) {
|
|
785
|
+
// Handle loading state changes
|
|
786
|
+
if (changedProperties.has('loading')) {
|
|
787
|
+
this.setAttribute("aria-busy", this.loading);
|
|
788
|
+
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
789
|
+
loading: this.loading,
|
|
790
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
791
|
+
});
|
|
1469
792
|
}
|
|
1470
|
-
}
|
|
1471
793
|
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
794
|
+
if (!this.items) {
|
|
795
|
+
return;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
// Handle noCheckmark propagation to all menus and options.
|
|
799
|
+
// Propagate in both directions so toggling back to false also clears nested elements
|
|
800
|
+
// (otherwise nested menus/options would stay stuck in no-checkmark mode).
|
|
801
|
+
if (changedProperties.has('noCheckmark')) {
|
|
802
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => {
|
|
803
|
+
element.noCheckmark = this.noCheckmark;
|
|
804
|
+
});
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
// Handle layout propagation to all menus and options.
|
|
808
|
+
// Skip elements that had size/shape set by the author (marked in initItems);
|
|
809
|
+
// explicit per-option overrides must survive menu-level propagation.
|
|
810
|
+
const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
|
|
811
|
+
[
|
|
812
|
+
'size',
|
|
813
|
+
'shape'
|
|
814
|
+
].forEach((prop) => {
|
|
815
|
+
if (changedProperties.has(prop)) {
|
|
816
|
+
const explicitKey = prop === 'size' ? '_explicitSize' : '_explicitShape';
|
|
817
|
+
propagationTargets.forEach((el) => {
|
|
818
|
+
if (el[explicitKey]) {
|
|
819
|
+
return;
|
|
820
|
+
}
|
|
821
|
+
el.setAttribute(prop, this[prop]);
|
|
822
|
+
});
|
|
823
|
+
}
|
|
824
|
+
});
|
|
825
|
+
|
|
826
|
+
// Regex for matchWord if needed
|
|
827
|
+
let regexWord = null;
|
|
828
|
+
|
|
829
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
830
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
831
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
// Handle direct item updates
|
|
835
|
+
this.items.forEach((option) => {
|
|
836
|
+
// Update selection if option or value changed
|
|
837
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
838
|
+
const isSelected = this.isOptionSelected(option);
|
|
839
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
840
|
+
|
|
841
|
+
// Add/remove selected attribute based on state
|
|
842
|
+
if (isSelected) {
|
|
843
|
+
option.setAttribute('selected', '');
|
|
844
|
+
} else {
|
|
845
|
+
option.removeAttribute('selected');
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
// Update text highlighting if matchWord changed
|
|
850
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
851
|
+
isOptionInteractive(option) && !option.hasAttribute('persistent')) {
|
|
852
|
+
// Create nested spacers
|
|
853
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
854
|
+
|
|
855
|
+
const displayValueEl = option.querySelector('[slot="displayValue"]');
|
|
856
|
+
if (displayValueEl) {
|
|
857
|
+
option.removeChild(displayValueEl);
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
// Build highlighted content via DOM APIs rather than innerHTML so any
|
|
861
|
+
// `<`, `>`, or `&` in the option text renders literally (prevents XSS).
|
|
862
|
+
const originalText = option.textContent;
|
|
863
|
+
option.textContent = '';
|
|
864
|
+
|
|
865
|
+
nested.forEach(() => {
|
|
866
|
+
const spacer = document.createElement('span');
|
|
867
|
+
spacer.className = 'nestingSpacer';
|
|
868
|
+
option.appendChild(spacer);
|
|
869
|
+
});
|
|
870
|
+
|
|
871
|
+
const matches = [...originalText.matchAll(regexWord)];
|
|
872
|
+
let lastIndex = 0;
|
|
873
|
+
matches.forEach((match) => {
|
|
874
|
+
const [matchText] = match;
|
|
875
|
+
if (match.index > lastIndex) {
|
|
876
|
+
option.appendChild(document.createTextNode(originalText.slice(lastIndex, match.index)));
|
|
877
|
+
}
|
|
878
|
+
const strong = document.createElement('strong');
|
|
879
|
+
strong.textContent = matchText;
|
|
880
|
+
option.appendChild(strong);
|
|
881
|
+
lastIndex = match.index + matchText.length;
|
|
882
|
+
});
|
|
883
|
+
if (lastIndex < originalText.length) {
|
|
884
|
+
option.appendChild(document.createTextNode(originalText.slice(lastIndex)));
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
if (displayValueEl) {
|
|
888
|
+
option.append(displayValueEl);
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
// Update disabled state
|
|
893
|
+
if (changedProperties.has('disabled')) {
|
|
894
|
+
option.disabled = this.disabled;
|
|
895
|
+
}
|
|
1482
896
|
});
|
|
897
|
+
|
|
1483
898
|
}
|
|
1484
899
|
|
|
1485
900
|
// Init Methods
|
|
@@ -1489,6 +904,7 @@ class AuroMenu extends AuroElement {
|
|
|
1489
904
|
* @private
|
|
1490
905
|
*/
|
|
1491
906
|
initializeMenu() {
|
|
907
|
+
this.initItems();
|
|
1492
908
|
if (this.rootMenu) {
|
|
1493
909
|
this.setAttribute('role', 'listbox');
|
|
1494
910
|
this.setAttribute('root', '');
|
|
@@ -1498,15 +914,111 @@ class AuroMenu extends AuroElement {
|
|
|
1498
914
|
}
|
|
1499
915
|
}
|
|
1500
916
|
|
|
917
|
+
// Must run for nested menus too — sets level, role="group", and aria-label="submenu" based on parent.
|
|
1501
918
|
this.handleNestedMenus(this);
|
|
1502
919
|
}
|
|
1503
920
|
|
|
1504
921
|
/**
|
|
1505
|
-
*
|
|
1506
|
-
* @
|
|
922
|
+
* Initializes menu items and their attributes.
|
|
923
|
+
* @private
|
|
1507
924
|
*/
|
|
1508
|
-
|
|
1509
|
-
this.
|
|
925
|
+
initItems() {
|
|
926
|
+
const found = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
927
|
+
this.items = found.length > 0 ? found : undefined;
|
|
928
|
+
|
|
929
|
+
// Record whether each propagation target had an author-set size/shape attribute
|
|
930
|
+
// BEFORE menu has had a chance to propagate. Marker is set once per element so a
|
|
931
|
+
// later menu-driven setAttribute doesn't re-flag the element as "explicit".
|
|
932
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((el) => {
|
|
933
|
+
if (el._explicitSize === undefined) {
|
|
934
|
+
el._explicitSize = el.hasAttribute('size');
|
|
935
|
+
}
|
|
936
|
+
if (el._explicitShape === undefined) {
|
|
937
|
+
el._explicitShape = el.hasAttribute('shape');
|
|
938
|
+
}
|
|
939
|
+
});
|
|
940
|
+
|
|
941
|
+
if (this.noCheckmark) {
|
|
942
|
+
this.updateItemsState(new Map([
|
|
943
|
+
[
|
|
944
|
+
'noCheckmark',
|
|
945
|
+
true
|
|
946
|
+
]
|
|
947
|
+
]));
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
|
|
951
|
+
detail: {
|
|
952
|
+
options: this.items
|
|
953
|
+
}
|
|
954
|
+
}));
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
// Logic Methods
|
|
958
|
+
|
|
959
|
+
/**
|
|
960
|
+
* Updates menu state when an option is selected.
|
|
961
|
+
* @private
|
|
962
|
+
* @param {HTMLElement} option - The option element to select.
|
|
963
|
+
*/
|
|
964
|
+
handleSelectState(option) {
|
|
965
|
+
if (this.multiSelect) {
|
|
966
|
+
const currentValue = this.formattedValue || [];
|
|
967
|
+
const currentSelected = this.optionSelected || [];
|
|
968
|
+
|
|
969
|
+
if (!currentValue.includes(option.value)) {
|
|
970
|
+
this.value = serializeMultiSelectValue([
|
|
971
|
+
...currentValue,
|
|
972
|
+
option.value
|
|
973
|
+
]);
|
|
974
|
+
}
|
|
975
|
+
if (!currentSelected.includes(option)) {
|
|
976
|
+
this.optionSelected = [
|
|
977
|
+
...currentSelected,
|
|
978
|
+
option
|
|
979
|
+
];
|
|
980
|
+
}
|
|
981
|
+
} else {
|
|
982
|
+
this.value = option.value;
|
|
983
|
+
this.optionSelected = option;
|
|
984
|
+
}
|
|
985
|
+
|
|
986
|
+
this._index = this.items.indexOf(option);
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
/**
|
|
990
|
+
* Deselects a menu option and updates related state.
|
|
991
|
+
* @private
|
|
992
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
993
|
+
*/
|
|
994
|
+
handleDeselectState(option) {
|
|
995
|
+
if (this.multiSelect) {
|
|
996
|
+
// Remove this option from array; an empty result collapses `value` to undefined.
|
|
997
|
+
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
998
|
+
this.value = serializeMultiSelectValue(newFormattedValue);
|
|
999
|
+
|
|
1000
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
1001
|
+
if (this.optionSelected.length === 0) {
|
|
1002
|
+
this.optionSelected = undefined;
|
|
1003
|
+
}
|
|
1004
|
+
} else {
|
|
1005
|
+
// For single-select: Back to undefined when deselected
|
|
1006
|
+
this.value = undefined;
|
|
1007
|
+
this.optionSelected = undefined;
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
// Update the index tracking
|
|
1011
|
+
this._index = this.items.indexOf(option);
|
|
1012
|
+
|
|
1013
|
+
// Update UI to reflect changes
|
|
1014
|
+
this.updateItemsState(new Map([
|
|
1015
|
+
[
|
|
1016
|
+
'optionSelected',
|
|
1017
|
+
true
|
|
1018
|
+
]
|
|
1019
|
+
]));
|
|
1020
|
+
|
|
1021
|
+
// Notification happens via updated() when optionSelected changes above.
|
|
1510
1022
|
}
|
|
1511
1023
|
|
|
1512
1024
|
/**
|
|
@@ -1525,7 +1037,23 @@ class AuroMenu extends AuroElement {
|
|
|
1525
1037
|
* @public
|
|
1526
1038
|
*/
|
|
1527
1039
|
reset() {
|
|
1528
|
-
|
|
1040
|
+
// Reset to undefined - initial state
|
|
1041
|
+
this.value = undefined;
|
|
1042
|
+
this.optionSelected = undefined;
|
|
1043
|
+
this._index = -1;
|
|
1044
|
+
|
|
1045
|
+
// Clear active option state so a follow-up open/navigation starts fresh
|
|
1046
|
+
// rather than reusing a stale reference from before the reset.
|
|
1047
|
+
this.items?.forEach((item) => item.classList.remove('active'));
|
|
1048
|
+
this.optionActive = undefined;
|
|
1049
|
+
|
|
1050
|
+
// Reset UI state
|
|
1051
|
+
this.updateItemsState(new Map([
|
|
1052
|
+
[
|
|
1053
|
+
'optionSelected',
|
|
1054
|
+
true
|
|
1055
|
+
]
|
|
1056
|
+
]));
|
|
1529
1057
|
|
|
1530
1058
|
// Dispatch reset event
|
|
1531
1059
|
dispatchMenuEvent(this, 'auroMenu-selectValueReset');
|
|
@@ -1537,6 +1065,14 @@ class AuroMenu extends AuroElement {
|
|
|
1537
1065
|
* @param {HTMLElement} menu - Root menu element.
|
|
1538
1066
|
*/
|
|
1539
1067
|
handleNestedMenus(menu) {
|
|
1068
|
+
// Slot changes can fire on a menu mid-teardown (e.g. while a parent menu
|
|
1069
|
+
// is removing children to rebuild its content). In that window the menu
|
|
1070
|
+
// is detached and parentElement is null. Skip — handleNestedMenus will
|
|
1071
|
+
// run again when the menu is reattached.
|
|
1072
|
+
if (!menu.parentElement) {
|
|
1073
|
+
return;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1540
1076
|
menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
|
|
1541
1077
|
|
|
1542
1078
|
if (menu.level > 0) {
|
|
@@ -1554,16 +1090,121 @@ class AuroMenu extends AuroElement {
|
|
|
1554
1090
|
});
|
|
1555
1091
|
}
|
|
1556
1092
|
|
|
1093
|
+
// Event Handlers
|
|
1094
|
+
|
|
1557
1095
|
/**
|
|
1558
|
-
*
|
|
1559
|
-
* @
|
|
1560
|
-
* @protected
|
|
1096
|
+
* Makes a selection based on the current index.
|
|
1097
|
+
* @private
|
|
1561
1098
|
*/
|
|
1562
|
-
|
|
1563
|
-
if (
|
|
1564
|
-
this.
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1099
|
+
makeSelection() {
|
|
1100
|
+
if (!this.items) {
|
|
1101
|
+
this.initItems();
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
// Get currently selected menu option based on index
|
|
1105
|
+
const option = this.items ? this.items[this._index] : undefined;
|
|
1106
|
+
|
|
1107
|
+
// Return early if option is not interactive
|
|
1108
|
+
if (!option || !isOptionInteractive(option)) {
|
|
1109
|
+
return;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
// Handle custom events first
|
|
1113
|
+
if (option.hasAttribute('event')) {
|
|
1114
|
+
this.handleCustomEvent(option);
|
|
1115
|
+
return;
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
if (this.multiSelect) {
|
|
1119
|
+
// In multiselect, toggle individual selections
|
|
1120
|
+
this.toggleOption(option);
|
|
1121
|
+
// In single select, only handle selection of new options
|
|
1122
|
+
} else if (!this.isOptionSelected(option)) {
|
|
1123
|
+
this.clearSelection();
|
|
1124
|
+
this.handleSelectState(option);
|
|
1125
|
+
} else {
|
|
1126
|
+
// Re-selecting the already-selected option in single-select doesn't change
|
|
1127
|
+
// state, so updated() won't fire. Notify explicitly so consumers (e.g.
|
|
1128
|
+
// auro-select closing its dropdown on Enter) still get the event.
|
|
1129
|
+
this.notifySelectionChange();
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
/**
|
|
1134
|
+
* Toggle the selection state of the menuoption.
|
|
1135
|
+
* @private
|
|
1136
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
1137
|
+
*/
|
|
1138
|
+
toggleOption(option) {
|
|
1139
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
1140
|
+
|
|
1141
|
+
if (isCurrentlySelected) {
|
|
1142
|
+
this.handleDeselectState(option);
|
|
1143
|
+
} else if (option.value === undefined || option.value === '') {
|
|
1144
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
1145
|
+
} else {
|
|
1146
|
+
this.handleSelectState(option);
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
/**
|
|
1151
|
+
* Handles keyboard navigation and selection.
|
|
1152
|
+
* @private
|
|
1153
|
+
* @param {KeyboardEvent} event - The keydown event.
|
|
1154
|
+
*/
|
|
1155
|
+
handleKeyDown(event) {
|
|
1156
|
+
switch (event.key) {
|
|
1157
|
+
case "ArrowDown":
|
|
1158
|
+
event.preventDefault();
|
|
1159
|
+
this.navigateOptions('down');
|
|
1160
|
+
break;
|
|
1161
|
+
case "ArrowUp":
|
|
1162
|
+
event.preventDefault();
|
|
1163
|
+
this.navigateOptions('up');
|
|
1164
|
+
break;
|
|
1165
|
+
case "Tab":
|
|
1166
|
+
// Do not preventDefault on Tab so focus can move out of the menu (a11y: avoid trapping keyboard users).
|
|
1167
|
+
this.makeSelection();
|
|
1168
|
+
break;
|
|
1169
|
+
case "Enter":
|
|
1170
|
+
event.preventDefault();
|
|
1171
|
+
this.makeSelection();
|
|
1172
|
+
break;
|
|
1173
|
+
}
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
/**
|
|
1177
|
+
* Handles option selection via click events from menuoptions.
|
|
1178
|
+
* @private
|
|
1179
|
+
* @param {CustomEvent} event - The auroMenuOption-click event.
|
|
1180
|
+
*/
|
|
1181
|
+
handleMouseSelect(event) {
|
|
1182
|
+
if (!this.rootMenu || this.disabled) {
|
|
1183
|
+
return;
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1186
|
+
const option = event.detail;
|
|
1187
|
+
if (option && this.items) {
|
|
1188
|
+
const idx = this.items.indexOf(option);
|
|
1189
|
+
if (idx >= 0) {
|
|
1190
|
+
this._index = idx;
|
|
1191
|
+
this.makeSelection();
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
/**
|
|
1197
|
+
* Handles option hover events.
|
|
1198
|
+
* @private
|
|
1199
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
1200
|
+
*/
|
|
1201
|
+
handleOptionHover(event) {
|
|
1202
|
+
const option = event.detail;
|
|
1203
|
+
if (this.items) {
|
|
1204
|
+
const idx = this.items.indexOf(option);
|
|
1205
|
+
if (idx >= 0) {
|
|
1206
|
+
this.updateActiveOption(idx);
|
|
1207
|
+
}
|
|
1567
1208
|
}
|
|
1568
1209
|
}
|
|
1569
1210
|
|
|
@@ -1572,9 +1213,91 @@ class AuroMenu extends AuroElement {
|
|
|
1572
1213
|
* @private
|
|
1573
1214
|
*/
|
|
1574
1215
|
handleSlotChange() {
|
|
1575
|
-
if (this.
|
|
1576
|
-
this.
|
|
1216
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
1217
|
+
this.rootMenu = false;
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
// Nested menus must also reinitialize so items, level, role="group", and aria-label refresh on content changes.
|
|
1221
|
+
// Root-specific attributes (listbox/root/aria-multiselectable) remain gated by `rootMenu` inside initializeMenu.
|
|
1222
|
+
this.initializeMenu();
|
|
1223
|
+
|
|
1224
|
+
// When options arrive after `value` was set (async option load), re-run matching
|
|
1225
|
+
// against the now-populated items. The earlier updated('value') call deferred
|
|
1226
|
+
// the failure dispatch because items were empty; this triggers the match now.
|
|
1227
|
+
const hasPendingValue = this.value !== undefined &&
|
|
1228
|
+
this.value !== null &&
|
|
1229
|
+
!(typeof this.value === 'string' && this.value.trim() === '');
|
|
1230
|
+
if (hasPendingValue && this.items && this.items.length > 0 && this.optionSelected === undefined) {
|
|
1231
|
+
this.requestUpdate('value', undefined);
|
|
1232
|
+
}
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
/**
|
|
1236
|
+
* Navigates through options using keyboard.
|
|
1237
|
+
* @param {string} direction - 'up' or 'down'.
|
|
1238
|
+
*/
|
|
1239
|
+
navigateOptions(direction) {
|
|
1240
|
+
// Return early if no items exist
|
|
1241
|
+
if (!this.items || !this.items.length) {
|
|
1242
|
+
return;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
let newIndex = this._index;
|
|
1246
|
+
if (newIndex === -1 && direction === 'up') {
|
|
1247
|
+
newIndex = this.items.length;
|
|
1248
|
+
}
|
|
1249
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
1250
|
+
const maxIterations = this.items.length;
|
|
1251
|
+
let iterations = 0;
|
|
1252
|
+
let foundInteractiveOption = false;
|
|
1253
|
+
|
|
1254
|
+
do {
|
|
1255
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
1256
|
+
iterations += 1;
|
|
1257
|
+
|
|
1258
|
+
// Check if current option is interactive
|
|
1259
|
+
const currentOption = this.items[newIndex];
|
|
1260
|
+
if (isOptionInteractive(currentOption)) {
|
|
1261
|
+
foundInteractiveOption = true;
|
|
1262
|
+
break;
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
// Break if all options were checked
|
|
1266
|
+
if (iterations >= maxIterations) {
|
|
1267
|
+
break;
|
|
1268
|
+
}
|
|
1269
|
+
} while (iterations < maxIterations);
|
|
1270
|
+
|
|
1271
|
+
// Update only if an interactive option was found
|
|
1272
|
+
if (foundInteractiveOption) {
|
|
1273
|
+
this.updateActiveOption(newIndex);
|
|
1274
|
+
}
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
/**
|
|
1278
|
+
* Updates the active option state and dispatches events.
|
|
1279
|
+
* Accepts either a numeric index or an HTMLElement option.
|
|
1280
|
+
* @param {number|HTMLElement} indexOrOption - Index of the option or the option element to make active.
|
|
1281
|
+
*/
|
|
1282
|
+
updateActiveOption(indexOrOption) {
|
|
1283
|
+
let idx = -1;
|
|
1284
|
+
|
|
1285
|
+
if (typeof indexOrOption === 'number') {
|
|
1286
|
+
idx = indexOrOption;
|
|
1287
|
+
} else {
|
|
1288
|
+
idx = this.items ? this.items.indexOf(indexOrOption) : -1;
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
if (!this.items || !this.items[idx]) {
|
|
1292
|
+
return;
|
|
1577
1293
|
}
|
|
1294
|
+
|
|
1295
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
1296
|
+
this.items[idx].classList.add('active');
|
|
1297
|
+
this.optionActive = this.items[idx];
|
|
1298
|
+
this._index = idx;
|
|
1299
|
+
|
|
1300
|
+
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[idx]);
|
|
1578
1301
|
}
|
|
1579
1302
|
|
|
1580
1303
|
/**
|
|
@@ -1584,8 +1307,8 @@ class AuroMenu extends AuroElement {
|
|
|
1584
1307
|
*/
|
|
1585
1308
|
handleCustomEvent(option) {
|
|
1586
1309
|
const eventName = option.getAttribute('event');
|
|
1587
|
-
dispatchMenuEvent(this, eventName);
|
|
1588
|
-
dispatchMenuEvent(this, 'auroMenu-customEventFired');
|
|
1310
|
+
dispatchMenuEvent(this, eventName, { option });
|
|
1311
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired', { option });
|
|
1589
1312
|
}
|
|
1590
1313
|
|
|
1591
1314
|
/**
|
|
@@ -1593,14 +1316,33 @@ class AuroMenu extends AuroElement {
|
|
|
1593
1316
|
* @param {any} source - The source that triggers this event.
|
|
1594
1317
|
* @private
|
|
1595
1318
|
*/
|
|
1596
|
-
notifySelectionChange(
|
|
1597
|
-
dispatchMenuEvent(this, 'auroMenu-selectedOption', {
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1319
|
+
notifySelectionChange(source = undefined) {
|
|
1320
|
+
dispatchMenuEvent(this, 'auroMenu-selectedOption', { source });
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
/**
|
|
1324
|
+
* @private
|
|
1325
|
+
* @param {any} current - Current selection.
|
|
1326
|
+
* @param {any} next - New selection to compare.
|
|
1327
|
+
* @returns {boolean} Whether the selections are equal.
|
|
1328
|
+
*/
|
|
1329
|
+
selectionEquals(current, next) {
|
|
1330
|
+
if (current === next) {
|
|
1331
|
+
return true;
|
|
1332
|
+
}
|
|
1333
|
+
if (!current || !next) {
|
|
1334
|
+
return false;
|
|
1335
|
+
}
|
|
1336
|
+
if (Array.isArray(current) && Array.isArray(next)) {
|
|
1337
|
+
if (current.length !== next.length) {
|
|
1338
|
+
return false;
|
|
1339
|
+
}
|
|
1340
|
+
// Compare as sets — selection order may differ from DOM order after value-driven
|
|
1341
|
+
// reconciliation, but the selected set is what matters for change detection.
|
|
1342
|
+
const nextSet = new Set(next);
|
|
1343
|
+
return current.every((item) => nextSet.has(item));
|
|
1344
|
+
}
|
|
1345
|
+
return false;
|
|
1604
1346
|
}
|
|
1605
1347
|
|
|
1606
1348
|
/**
|
|
@@ -1615,7 +1357,6 @@ class AuroMenu extends AuroElement {
|
|
|
1615
1357
|
}
|
|
1616
1358
|
|
|
1617
1359
|
if (this.multiSelect) {
|
|
1618
|
-
// In multi-select mode, check if the option is in the selected array
|
|
1619
1360
|
return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
|
|
1620
1361
|
}
|
|
1621
1362
|
|
|
@@ -1680,9 +1421,9 @@ class AuroMenu extends AuroElement {
|
|
|
1680
1421
|
*/
|
|
1681
1422
|
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(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);
|
|
1682
1423
|
|
|
1683
|
-
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-default-weight, );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-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-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-lg-weight, );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-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-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-sm-weight, );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-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-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-xs-weight, );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-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-2xs-weight, );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)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-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);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));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-xs-weight, 300);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));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-2xs-weight, 300);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));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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);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));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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}`;
|
|
1424
|
+
var styleCss = i$5`.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-default-weight, );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-default-emphasized{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-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-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-lg-weight, );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-lg-emphasized{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-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-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-sm-weight, );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-sm-emphasized{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-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-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-xs-weight, );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-xs-emphasized{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-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-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-2xs-weight, );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)}.body-2xs-emphasized{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-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-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);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));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-xs-weight, 300);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));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.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);font-weight:var(--wcss-heading-2xs-weight, 300);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));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.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);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));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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);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));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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);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));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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}`;
|
|
1684
1425
|
|
|
1685
|
-
var colorCss = i$
|
|
1426
|
+
var colorCss = i$5`: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)}}`;
|
|
1686
1427
|
|
|
1687
1428
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1688
1429
|
// See LICENSE in the project root for license information.
|
|
@@ -1730,10 +1471,10 @@ class AuroDependencyVersioning {
|
|
|
1730
1471
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1731
1472
|
*/const o=o=>o??A;
|
|
1732
1473
|
|
|
1733
|
-
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$
|
|
1734
|
-
`;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$
|
|
1735
|
-
`;var M=i$
|
|
1736
|
-
`;var _=i$
|
|
1474
|
+
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$2{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$5`: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}
|
|
1475
|
+
`;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$5`.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}
|
|
1476
|
+
`;var M=i$5`: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)}
|
|
1477
|
+
`;var _=i$5`: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)}
|
|
1737
1478
|
`;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`
|
|
1738
1479
|
<div class="componentWrapper">
|
|
1739
1480
|
<div
|
|
@@ -1768,40 +1509,16 @@ let menuOptionIdCounter = 0;
|
|
|
1768
1509
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
1769
1510
|
* @customElement auro-menuoption
|
|
1770
1511
|
*
|
|
1512
|
+
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
1771
1513
|
* @slot default - The default slot for the menu option text.
|
|
1772
1514
|
*
|
|
1773
1515
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
1516
|
+
* @event auroMenuOption-click - Notifies that this option has been clicked.
|
|
1774
1517
|
*/
|
|
1775
1518
|
class AuroMenuOption extends AuroElement {
|
|
1776
|
-
|
|
1777
|
-
/**
|
|
1778
|
-
* This will register this element with the browser.
|
|
1779
|
-
* @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
|
|
1780
|
-
*
|
|
1781
|
-
* @example
|
|
1782
|
-
* AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
|
|
1783
|
-
*
|
|
1784
|
-
*/
|
|
1785
|
-
static register(name = "auro-menuoption") {
|
|
1786
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
1787
|
-
}
|
|
1788
|
-
|
|
1789
|
-
/**
|
|
1790
|
-
* Returns whether the menu option is currently active and selectable.
|
|
1791
|
-
* An option is considered active if it is not hidden, not disabled, and not static.
|
|
1792
|
-
* @returns {boolean} True if the option is active, false otherwise.
|
|
1793
|
-
*/
|
|
1794
|
-
get isActive() {
|
|
1795
|
-
return !this.hasAttribute('hidden') &&
|
|
1796
|
-
!this.disabled &&
|
|
1797
|
-
!this.hasAttribute('static');
|
|
1798
|
-
}
|
|
1799
|
-
|
|
1800
1519
|
constructor() {
|
|
1801
1520
|
super();
|
|
1802
1521
|
|
|
1803
|
-
this.bindEvents();
|
|
1804
|
-
|
|
1805
1522
|
/**
|
|
1806
1523
|
* @private
|
|
1807
1524
|
*/
|
|
@@ -1822,83 +1539,62 @@ class AuroMenuOption extends AuroElement {
|
|
|
1822
1539
|
this.noCheckmark = false;
|
|
1823
1540
|
this.disabled = false;
|
|
1824
1541
|
this.noMatch = false;
|
|
1542
|
+
this.persistent = false;
|
|
1825
1543
|
|
|
1826
1544
|
/**
|
|
1827
1545
|
* @private
|
|
1828
1546
|
*/
|
|
1829
|
-
this.
|
|
1830
|
-
|
|
1831
|
-
// Initialize context-related properties
|
|
1832
|
-
this.menuService = null;
|
|
1833
|
-
this.unsubscribe = null;
|
|
1547
|
+
this.tabIndex = -1;
|
|
1834
1548
|
|
|
1835
1549
|
/**
|
|
1836
1550
|
* @private
|
|
1837
1551
|
*/
|
|
1838
|
-
this.
|
|
1552
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1553
|
+
|
|
1554
|
+
this.addEventListener('click', this.handleClick.bind(this));
|
|
1839
1555
|
}
|
|
1840
1556
|
|
|
1841
1557
|
static get properties() {
|
|
1842
1558
|
return {
|
|
1843
1559
|
...super.properties,
|
|
1844
|
-
|
|
1845
|
-
/**
|
|
1846
|
-
* When true, disables the menu option.
|
|
1847
|
-
*/
|
|
1848
|
-
disabled: {
|
|
1560
|
+
noCheckmark: {
|
|
1849
1561
|
type: Boolean,
|
|
1850
1562
|
reflect: true
|
|
1851
1563
|
},
|
|
1852
1564
|
|
|
1853
1565
|
/**
|
|
1854
|
-
*
|
|
1566
|
+
* **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
|
|
1567
|
+
*
|
|
1568
|
+
* @deprecated Use the `value` attribute on `auro-menu` instead.
|
|
1855
1569
|
*/
|
|
1856
|
-
|
|
1857
|
-
type:
|
|
1570
|
+
selected: {
|
|
1571
|
+
type: Boolean,
|
|
1858
1572
|
reflect: true
|
|
1859
1573
|
},
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
*/
|
|
1864
|
-
layout: {
|
|
1865
|
-
type: String
|
|
1574
|
+
disabled: {
|
|
1575
|
+
type: Boolean,
|
|
1576
|
+
reflect: true
|
|
1866
1577
|
},
|
|
1867
|
-
|
|
1868
|
-
/**
|
|
1869
|
-
* 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.
|
|
1870
|
-
*/
|
|
1871
|
-
key: {
|
|
1578
|
+
value: {
|
|
1872
1579
|
type: String,
|
|
1873
1580
|
reflect: true
|
|
1874
1581
|
},
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
*/
|
|
1879
|
-
menuService: {
|
|
1880
|
-
type: Object,
|
|
1881
|
-
state: true
|
|
1582
|
+
tabIndex: {
|
|
1583
|
+
type: Number,
|
|
1584
|
+
reflect: true
|
|
1882
1585
|
},
|
|
1883
1586
|
|
|
1884
1587
|
/**
|
|
1885
1588
|
* @private
|
|
1886
1589
|
*/
|
|
1887
|
-
|
|
1590
|
+
event: {
|
|
1888
1591
|
type: String,
|
|
1889
|
-
state: true
|
|
1890
|
-
},
|
|
1891
|
-
|
|
1892
|
-
/**
|
|
1893
|
-
* @private
|
|
1894
|
-
*/
|
|
1895
|
-
noCheckmark: {
|
|
1896
|
-
type: Boolean,
|
|
1897
1592
|
reflect: true
|
|
1898
1593
|
},
|
|
1899
1594
|
|
|
1900
1595
|
/**
|
|
1901
|
-
* When true, marks this option as the "no matching results" placeholder shown by combobox
|
|
1596
|
+
* When true, marks this option as the "no matching results" placeholder shown by combobox
|
|
1597
|
+
* when the user's input does not match any available options.
|
|
1902
1598
|
*/
|
|
1903
1599
|
noMatch: {
|
|
1904
1600
|
type: Boolean,
|
|
@@ -1906,29 +1602,11 @@ class AuroMenuOption extends AuroElement {
|
|
|
1906
1602
|
attribute: 'nomatch'
|
|
1907
1603
|
},
|
|
1908
1604
|
|
|
1909
|
-
/**
|
|
1910
|
-
|
|
1911
|
-
*/
|
|
1912
|
-
selected: {
|
|
1605
|
+
/** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
|
|
1606
|
+
persistent: {
|
|
1913
1607
|
type: Boolean,
|
|
1914
1608
|
reflect: true
|
|
1915
1609
|
},
|
|
1916
|
-
|
|
1917
|
-
/**
|
|
1918
|
-
* Specifies the tab index of the menu option.
|
|
1919
|
-
*/
|
|
1920
|
-
tabIndex: {
|
|
1921
|
-
type: Number,
|
|
1922
|
-
reflect: true
|
|
1923
|
-
},
|
|
1924
|
-
|
|
1925
|
-
/**
|
|
1926
|
-
* Specifies the value to be sent to a server.
|
|
1927
|
-
*/
|
|
1928
|
-
value: {
|
|
1929
|
-
type: String,
|
|
1930
|
-
reflect: true
|
|
1931
|
-
},
|
|
1932
1610
|
};
|
|
1933
1611
|
}
|
|
1934
1612
|
|
|
@@ -1940,41 +1618,48 @@ class AuroMenuOption extends AuroElement {
|
|
|
1940
1618
|
];
|
|
1941
1619
|
}
|
|
1942
1620
|
|
|
1621
|
+
/**
|
|
1622
|
+
* This will register this element with the browser.
|
|
1623
|
+
* @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
|
|
1624
|
+
*
|
|
1625
|
+
* @example
|
|
1626
|
+
* AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
|
|
1627
|
+
*
|
|
1628
|
+
*/
|
|
1629
|
+
static register(name = "auro-menuoption") {
|
|
1630
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
/**
|
|
1634
|
+
* Returns whether the menu option is currently active and selectable.
|
|
1635
|
+
* @returns {boolean}
|
|
1636
|
+
*/
|
|
1637
|
+
get isActive() {
|
|
1638
|
+
return !this.hasAttribute('hidden') &&
|
|
1639
|
+
!this.disabled &&
|
|
1640
|
+
!this.hasAttribute('static');
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1943
1643
|
connectedCallback() {
|
|
1944
1644
|
super.connectedCallback();
|
|
1945
1645
|
|
|
1946
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
1947
|
-
// Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
|
|
1948
1646
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
1949
|
-
|
|
1950
|
-
// Set up context consumption in connectedCallback
|
|
1951
|
-
this._contextConsumer = new s$2(this, {
|
|
1952
|
-
context: MenuContext,
|
|
1953
|
-
callback: this.attachTo.bind(this),
|
|
1954
|
-
subscribe: true
|
|
1955
|
-
});
|
|
1956
|
-
|
|
1957
|
-
// Establish the key property as early as possible.
|
|
1958
|
-
// When a framework (e.g. Svelte) inserts the element into the DOM before
|
|
1959
|
-
// setting its `value` property, both `getAttribute('value')` and
|
|
1960
|
-
// `getAttribute('key')` return null here. Setting `this.key = null`
|
|
1961
|
-
// would block the fallback in `updated()` that assigns key from the
|
|
1962
|
-
// value property (the guard checked `=== undefined`). Only assign key
|
|
1963
|
-
// if at least one source attribute is actually present so that the
|
|
1964
|
-
// `updated()` fallback can run when the value property arrives later.
|
|
1965
|
-
const valueAttr = this.getAttribute('value');
|
|
1966
|
-
const keyAttr = this.getAttribute('key');
|
|
1967
|
-
const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
|
|
1968
|
-
if (resolvedKey !== null) {
|
|
1969
|
-
this.key = resolvedKey;
|
|
1970
|
-
}
|
|
1971
1647
|
}
|
|
1972
1648
|
|
|
1973
1649
|
firstUpdated() {
|
|
1974
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
1975
1650
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
1976
1651
|
|
|
1977
|
-
//
|
|
1652
|
+
// firstUpdated can fire on an option that was detached before the first
|
|
1653
|
+
// render completed (e.g. dynamic-menu rebuilds clear and repopulate the
|
|
1654
|
+
// menu mid-cycle). parentElement is null in that case — fall back to
|
|
1655
|
+
// defaults; the next render after re-attachment will pick up real values.
|
|
1656
|
+
if (!this.hasAttribute('size')) {
|
|
1657
|
+
this.size = this.parentElement ? this.parentElement.getAttribute('size') || 'sm' : 'sm';
|
|
1658
|
+
}
|
|
1659
|
+
if (!this.hasAttribute('shape')) {
|
|
1660
|
+
this.shape = this.parentElement ? this.parentElement.getAttribute('shape') || 'box' : 'box';
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1978
1663
|
if (!this.id) {
|
|
1979
1664
|
menuOptionIdCounter += 1;
|
|
1980
1665
|
this.id = `menuoption-${menuOptionIdCounter}`;
|
|
@@ -1996,16 +1681,8 @@ class AuroMenuOption extends AuroElement {
|
|
|
1996
1681
|
updated(changedProperties) {
|
|
1997
1682
|
super.updated(changedProperties);
|
|
1998
1683
|
|
|
1999
|
-
// Update aria-selected attribute if selected changed
|
|
2000
1684
|
if (changedProperties.has('selected')) {
|
|
2001
|
-
|
|
2002
|
-
// Update aria-selected attribute
|
|
2003
1685
|
this.setAttribute('aria-selected', this.selected.toString());
|
|
2004
|
-
|
|
2005
|
-
// Update menu service selection state if this isn't an internal update
|
|
2006
|
-
if (this.internalUpdateInProgress !== true && this.menuService) {
|
|
2007
|
-
this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
|
|
2008
|
-
}
|
|
2009
1686
|
}
|
|
2010
1687
|
|
|
2011
1688
|
if (changedProperties.has('disabled')) {
|
|
@@ -2015,231 +1692,48 @@ class AuroMenuOption extends AuroElement {
|
|
|
2015
1692
|
this.removeAttribute('aria-disabled');
|
|
2016
1693
|
}
|
|
2017
1694
|
}
|
|
2018
|
-
|
|
2019
|
-
if (changedProperties.has('active')) {
|
|
2020
|
-
this.updateActiveClasses();
|
|
2021
|
-
}
|
|
2022
|
-
|
|
2023
|
-
// Update text highlight if matchWord changed
|
|
2024
|
-
if (changedProperties.has('matchWord')) {
|
|
2025
|
-
this.updateTextHighlight();
|
|
2026
|
-
}
|
|
2027
|
-
|
|
2028
|
-
// Set the key to be the passed value if no key is provided.
|
|
2029
|
-
// Loose equality (== null) is intentional: it catches both null AND
|
|
2030
|
-
// undefined. When a framework (e.g. Svelte, React) inserts the element
|
|
2031
|
-
// before setting its value property, connectedCallback skips key
|
|
2032
|
-
// assignment because both attributes are null at that point. The Lit
|
|
2033
|
-
// property default for `key` is undefined (not null), so strict
|
|
2034
|
-
// === null would miss the case and the fallback would never run.
|
|
2035
|
-
if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
|
|
2036
|
-
this.key = this.value;
|
|
2037
|
-
}
|
|
2038
|
-
}
|
|
2039
|
-
|
|
2040
|
-
disconnectedCallback() {
|
|
2041
|
-
if (this.menuService) {
|
|
2042
|
-
this.menuService.unsubscribe(this.handleMenuChange);
|
|
2043
|
-
this.menuService.removeMenuOption(this);
|
|
2044
|
-
}
|
|
2045
1695
|
}
|
|
2046
1696
|
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
* This function enables click and mouse enter events to trigger selection and highlighting logic.
|
|
2050
|
-
*/
|
|
2051
|
-
bindEvents() {
|
|
2052
|
-
this.addEventListener('click', this.handleClick.bind(this));
|
|
2053
|
-
this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
|
|
2054
|
-
}
|
|
2055
|
-
|
|
2056
|
-
/**
|
|
2057
|
-
* Attaches this menu option to a menu service and subscribes to its events.
|
|
2058
|
-
* This method enables the option to participate in menu selection and highlighting logic.
|
|
2059
|
-
* @param {Object} service - The menu service instance to attach to.
|
|
2060
|
-
*/
|
|
2061
|
-
attachTo(service) {
|
|
2062
|
-
if (!service) {
|
|
2063
|
-
return;
|
|
2064
|
-
}
|
|
2065
|
-
this.menuService = service;
|
|
2066
|
-
this.menuService.addMenuOption(this);
|
|
2067
|
-
this.menuService.subscribe(this.handleMenuChange);
|
|
1697
|
+
handleMenuChange() {
|
|
1698
|
+
// no-op: menu owns state in the distributed architecture
|
|
2068
1699
|
}
|
|
2069
1700
|
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
* This function synchronizes the option's properties and selection/highlight state with menu events.
|
|
2073
|
-
* @param {Object} event - The event object from the menu service.
|
|
2074
|
-
*/
|
|
2075
|
-
handleMenuChange(event) {
|
|
2076
|
-
|
|
2077
|
-
// Ignore events without a type or property
|
|
2078
|
-
if (!event || (!event.type && !event.property)) {
|
|
2079
|
-
return;
|
|
2080
|
-
}
|
|
2081
|
-
|
|
2082
|
-
// Update reactive properties based on event type
|
|
2083
|
-
if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
|
|
2084
|
-
this[event.property] = event.value;
|
|
2085
|
-
}
|
|
2086
|
-
|
|
2087
|
-
// Handle highlight changes
|
|
2088
|
-
if (event.type === 'highlightChange') {
|
|
2089
|
-
const isActive = event.option === this;
|
|
2090
|
-
this.active = isActive;
|
|
2091
|
-
this.updateActiveClasses();
|
|
2092
|
-
}
|
|
2093
|
-
|
|
2094
|
-
if (event.type === 'stateChange') {
|
|
2095
|
-
const isSelected = event.selectedOptions.includes(this);
|
|
2096
|
-
this.setInternalSelected(isSelected);
|
|
2097
|
-
}
|
|
1701
|
+
setSelected(value) {
|
|
1702
|
+
this.selected = value;
|
|
2098
1703
|
}
|
|
2099
1704
|
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
this.internalUpdateInProgress = true;
|
|
2107
|
-
this.selected = isSelected;
|
|
2108
|
-
|
|
2109
|
-
// Fire custom event if selected
|
|
2110
|
-
if (isSelected) {
|
|
2111
|
-
this.handleCustomEvent();
|
|
1705
|
+
updateActive(active) {
|
|
1706
|
+
this.active = active;
|
|
1707
|
+
if (active) {
|
|
1708
|
+
this.classList.add('active');
|
|
1709
|
+
} else {
|
|
1710
|
+
this.classList.remove('active');
|
|
2112
1711
|
}
|
|
2113
|
-
|
|
2114
|
-
setTimeout(() => {
|
|
2115
|
-
this.internalUpdateInProgress = false;
|
|
2116
|
-
}, 0);
|
|
2117
|
-
}
|
|
2118
|
-
|
|
2119
|
-
/**
|
|
2120
|
-
* Sets the selected state of the menu option.
|
|
2121
|
-
* This function updates whether the option is currently selected.
|
|
2122
|
-
* @param {boolean} isSelected - Whether the option should be marked as selected.
|
|
2123
|
-
* @deprecated Simply modify the `selected` property directly instead.
|
|
2124
|
-
*/
|
|
2125
|
-
setSelected(isSelected) {
|
|
2126
|
-
this.selected = isSelected;
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
|
-
/**
|
|
2130
|
-
* Updates the active state and visual highlighting of the menu option.
|
|
2131
|
-
* This function toggles the option's active status and applies or removes the active CSS class.
|
|
2132
|
-
* @param {boolean} isActive - Whether the option should be marked as active.
|
|
2133
|
-
* @deprecated Simply modify the `active` property directly instead.
|
|
2134
|
-
*/
|
|
2135
|
-
updateActive(isActive) {
|
|
2136
|
-
|
|
2137
|
-
// Set active state
|
|
2138
|
-
this.active = isActive;
|
|
2139
|
-
this.updateActiveClasses();
|
|
2140
|
-
}
|
|
2141
|
-
|
|
2142
|
-
/**
|
|
2143
|
-
* Updates the CSS class for the menu option based on its active state.
|
|
2144
|
-
* This function adds or removes the 'active' class to visually indicate the option's active status.
|
|
2145
|
-
* @private
|
|
2146
|
-
*/
|
|
2147
|
-
updateActiveClasses() {
|
|
2148
|
-
// Update class based on active state
|
|
2149
|
-
if (this.active) this.classList.add('active');
|
|
2150
|
-
else this.classList.remove('active');
|
|
2151
1712
|
}
|
|
2152
1713
|
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
* Updates the visual highlighting of text within the menu option based on the current match word.
|
|
2156
|
-
* This function highlights matching text segments and manages nested spacers for display formatting.
|
|
2157
|
-
* @private
|
|
2158
|
-
*/
|
|
2159
|
-
updateTextHighlight() {
|
|
2160
|
-
|
|
2161
|
-
// Regex for matchWord if needed
|
|
2162
|
-
let regexWord = null;
|
|
2163
|
-
|
|
2164
|
-
if (this.matchWord && this.matchWord.length) {
|
|
2165
|
-
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
2166
|
-
regexWord = new RegExp(escapedWord, 'giu');
|
|
2167
|
-
}
|
|
2168
|
-
|
|
2169
|
-
// Update text highlighting if matchWord changed
|
|
2170
|
-
if (regexWord &&
|
|
2171
|
-
this.isActive && !this.hasAttribute('persistent')) {
|
|
2172
|
-
const nested = this.querySelectorAll('.nestingSpacer');
|
|
2173
|
-
|
|
2174
|
-
const displayValueEl = this.querySelector('[slot="displayValue"]');
|
|
2175
|
-
if (displayValueEl) {
|
|
2176
|
-
this.removeChild(displayValueEl);
|
|
2177
|
-
}
|
|
2178
|
-
|
|
2179
|
-
// Create nested spacers
|
|
2180
|
-
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
2181
|
-
|
|
2182
|
-
// Update with spacers and matchWord
|
|
2183
|
-
this.innerHTML = nestingSpacerBundle +
|
|
2184
|
-
this.textContent.replace(
|
|
2185
|
-
regexWord,
|
|
2186
|
-
(match) => `<strong>${match}</strong>`
|
|
2187
|
-
);
|
|
2188
|
-
if (displayValueEl) {
|
|
2189
|
-
this.append(displayValueEl);
|
|
2190
|
-
}
|
|
2191
|
-
}
|
|
1714
|
+
attachTo() {
|
|
1715
|
+
// no-op: menu owns state in the distributed architecture
|
|
2192
1716
|
}
|
|
2193
1717
|
|
|
2194
1718
|
/**
|
|
2195
|
-
* Handles click events on the menu option
|
|
2196
|
-
* This function dispatches a click event and updates selection if the option is not disabled.
|
|
1719
|
+
* Handles click events on the menu option.
|
|
2197
1720
|
* @private
|
|
2198
1721
|
*/
|
|
2199
1722
|
handleClick() {
|
|
2200
|
-
if (!this.disabled && !this.menuService?.disabled) {
|
|
2201
|
-
this.dispatchClickEvent();
|
|
2202
|
-
this.selected = !this.selected;
|
|
2203
|
-
}
|
|
2204
|
-
}
|
|
2205
|
-
|
|
2206
|
-
/**
|
|
2207
|
-
* Handles mouse enter events to highlight the menu option.
|
|
2208
|
-
* This function updates the menu service to set this option as the currently highlighted item if not disabled.
|
|
2209
|
-
* @private
|
|
2210
|
-
*/
|
|
2211
|
-
handleMouseEnter() {
|
|
2212
1723
|
if (!this.disabled) {
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
if (this.event) {
|
|
2224
|
-
dispatchMenuEvent(this, this.event, { option: this });
|
|
2225
|
-
dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
|
|
1724
|
+
// Pure event emitter: the parent menu owns selection state and will
|
|
1725
|
+
// update `selected` via setSelected(). Toggling here desyncs the option
|
|
1726
|
+
// UI from auro-menu.optionSelected (e.g. single-select re-click on the
|
|
1727
|
+
// already-selected option would flip the option off while the menu keeps it on).
|
|
1728
|
+
this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
|
|
1729
|
+
bubbles: true,
|
|
1730
|
+
cancelable: false,
|
|
1731
|
+
composed: true,
|
|
1732
|
+
detail: this
|
|
1733
|
+
}));
|
|
2226
1734
|
}
|
|
2227
1735
|
}
|
|
2228
1736
|
|
|
2229
|
-
/**
|
|
2230
|
-
* Dispatches a click event for this menu option.
|
|
2231
|
-
* This function notifies listeners that the option has been clicked.
|
|
2232
|
-
* @private
|
|
2233
|
-
*/
|
|
2234
|
-
dispatchClickEvent() {
|
|
2235
|
-
this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
|
|
2236
|
-
bubbles: true,
|
|
2237
|
-
cancelable: false,
|
|
2238
|
-
composed: true,
|
|
2239
|
-
detail: this
|
|
2240
|
-
}));
|
|
2241
|
-
}
|
|
2242
|
-
|
|
2243
1737
|
/**
|
|
2244
1738
|
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
2245
1739
|
*
|
|
@@ -2279,14 +1773,111 @@ class AuroMenuOption extends AuroElement {
|
|
|
2279
1773
|
return u$1`
|
|
2280
1774
|
<div class="${classes}">
|
|
2281
1775
|
${this.selected && !this.noCheckmark
|
|
2282
|
-
|
|
2283
|
-
|
|
1776
|
+
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1777
|
+
: undefined}
|
|
2284
1778
|
<slot></slot>
|
|
2285
1779
|
</div>
|
|
2286
1780
|
`;
|
|
2287
1781
|
}
|
|
2288
1782
|
}
|
|
2289
1783
|
|
|
1784
|
+
function auroMenuLoadingExample() {
|
|
1785
|
+
document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
|
|
1786
|
+
document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
|
|
1787
|
+
});
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
function updateMatch() {
|
|
1791
|
+
let matchWordMenu = document.querySelector('#matchWordMenu');
|
|
1792
|
+
|
|
1793
|
+
matchWordMenu.matchWord = matchWordInput.value;
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
function auroMenuMatchWordExample() {
|
|
1797
|
+
let matchWordInput = document.querySelector('#matchWordInput');
|
|
1798
|
+
|
|
1799
|
+
matchWordInput.addEventListener('keyup', updateMatch);
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
function auroMenuResetExample() {
|
|
1803
|
+
const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
|
|
1804
|
+
const resetExampleElem = document.querySelector('#resetExample');
|
|
1805
|
+
|
|
1806
|
+
if (resetExampleElem && resetExampleBtnElem) {
|
|
1807
|
+
resetExampleBtnElem.addEventListener('click', () => {
|
|
1808
|
+
resetExampleElem.reset();
|
|
1809
|
+
});
|
|
1810
|
+
}
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1813
|
+
function auroMenuEventAttributeExample() {
|
|
1814
|
+
const menu = document.querySelector('#eventAttrExample');
|
|
1815
|
+
const output = document.querySelector('#eventAttrOutput');
|
|
1816
|
+
|
|
1817
|
+
menu.addEventListener('auroMenu-customEventFired', (evt) => {
|
|
1818
|
+
const eventName = evt.detail.option.getAttribute('event');
|
|
1819
|
+
output.textContent = `${eventName} (from "${evt.detail.option.textContent}")`;
|
|
1820
|
+
});
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
function auroMenuEventsExample() {
|
|
1824
|
+
const menu = document.querySelector('#eventsExampleMenu');
|
|
1825
|
+
const log = document.querySelector('#eventsExampleLog');
|
|
1826
|
+
const resetBtn = document.querySelector('#eventsExampleReset');
|
|
1827
|
+
const badValueBtn = document.querySelector('#eventsExampleBadValue');
|
|
1828
|
+
const clearBtn = document.querySelector('#eventsExampleClearLog');
|
|
1829
|
+
|
|
1830
|
+
let entries = [];
|
|
1831
|
+
const write = (name, detail) => {
|
|
1832
|
+
const label = detail && detail.tagName ? detail.tagName.toLowerCase() : JSON.stringify(detail);
|
|
1833
|
+
entries.unshift(`${name}: ${label}`);
|
|
1834
|
+
log.textContent = entries.slice(0, 10).join('\n');
|
|
1835
|
+
};
|
|
1836
|
+
|
|
1837
|
+
menu.addEventListener('auroMenu-selectedOption', () => {
|
|
1838
|
+
write('auroMenu-selectedOption', menu.optionSelected);
|
|
1839
|
+
});
|
|
1840
|
+
menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
1841
|
+
write('auroMenu-activatedOption', evt.detail);
|
|
1842
|
+
});
|
|
1843
|
+
menu.addEventListener('auroMenu-optionsChange', (evt) => {
|
|
1844
|
+
write('auroMenu-optionsChange', { count: (evt.detail.options || []).length });
|
|
1845
|
+
});
|
|
1846
|
+
menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
1847
|
+
write('auroMenu-selectValueReset', { value: menu.value });
|
|
1848
|
+
});
|
|
1849
|
+
menu.addEventListener('auroMenu-selectValueFailure', (evt) => {
|
|
1850
|
+
write('auroMenu-selectValueFailure', evt.detail);
|
|
1851
|
+
});
|
|
1852
|
+
|
|
1853
|
+
resetBtn.addEventListener('click', () => menu.reset());
|
|
1854
|
+
badValueBtn.addEventListener('click', () => menu.selectByValue('nonexistent'));
|
|
1855
|
+
clearBtn.addEventListener('click', () => {
|
|
1856
|
+
entries = [];
|
|
1857
|
+
log.textContent = '(interact with the menu above)';
|
|
1858
|
+
});
|
|
1859
|
+
}
|
|
1860
|
+
|
|
1861
|
+
function auroMenuPersistentExample() {
|
|
1862
|
+
const input = document.querySelector('#persistentExampleInput');
|
|
1863
|
+
const menu = document.querySelector('#persistentExampleMenu');
|
|
1864
|
+
|
|
1865
|
+
input.addEventListener('keyup', () => {
|
|
1866
|
+
menu.matchWord = input.value;
|
|
1867
|
+
});
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
function auroMenuSelectByValueExample() {
|
|
1871
|
+
const menu = document.querySelector('#selectByValueMenu');
|
|
1872
|
+
const stopsBtn = document.querySelector('#selectByValueStops');
|
|
1873
|
+
const durationBtn = document.querySelector('#selectByValueDuration');
|
|
1874
|
+
const clearBtn = document.querySelector('#selectByValueClear');
|
|
1875
|
+
|
|
1876
|
+
stopsBtn.addEventListener('click', () => menu.selectByValue('stops'));
|
|
1877
|
+
durationBtn.addEventListener('click', () => menu.selectByValue('duration'));
|
|
1878
|
+
clearBtn.addEventListener('click', () => menu.selectByValue(undefined));
|
|
1879
|
+
}
|
|
1880
|
+
|
|
2290
1881
|
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
2291
1882
|
|
|
2292
1883
|
|
|
@@ -2295,7 +1886,36 @@ AuroMenuOption.register();
|
|
|
2295
1886
|
AuroMenu.register('custom-menu');
|
|
2296
1887
|
AuroMenuOption.register('custom-menuoption');
|
|
2297
1888
|
|
|
2298
|
-
|
|
1889
|
+
const examples = [
|
|
1890
|
+
auroMenuLoadingExample,
|
|
1891
|
+
auroMenuMatchWordExample,
|
|
1892
|
+
auroMenuResetExample,
|
|
1893
|
+
auroMenuEventAttributeExample,
|
|
1894
|
+
auroMenuEventsExample,
|
|
1895
|
+
auroMenuPersistentExample,
|
|
1896
|
+
auroMenuSelectByValueExample
|
|
1897
|
+
];
|
|
1898
|
+
|
|
1899
|
+
function initExamples(pending, initCount) {
|
|
1900
|
+
pending = pending || examples.slice();
|
|
1901
|
+
initCount = initCount || 0;
|
|
1902
|
+
const stillPending = [];
|
|
1903
|
+
|
|
1904
|
+
for (const fn of pending) {
|
|
1905
|
+
try {
|
|
1906
|
+
fn();
|
|
1907
|
+
} catch {
|
|
1908
|
+
stillPending.push(fn);
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
if (stillPending.length && initCount <= 20) {
|
|
1913
|
+
setTimeout(() => {
|
|
1914
|
+
initExamples(stillPending, initCount + 1);
|
|
1915
|
+
}, 100);
|
|
1916
|
+
}
|
|
2299
1917
|
}
|
|
2300
1918
|
|
|
1919
|
+
initExamples();
|
|
1920
|
+
|
|
2301
1921
|
export { initExamples };
|