@aurodesignsystem-dev/auro-formkit 0.0.0-pr1503.2 → 0.0.0-pr1505.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +2 -2
- package/components/checkbox/demo/getting-started.min.js +2 -2
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/customize.md +7 -3
- package/components/combobox/demo/customize.min.js +1450 -1662
- package/components/combobox/demo/getting-started.min.js +1450 -1662
- package/components/combobox/demo/index.min.js +1450 -1662
- package/components/combobox/dist/auro-combobox.d.ts +5 -0
- package/components/combobox/dist/index.js +504 -141
- package/components/combobox/dist/registered.js +504 -141
- package/components/counter/demo/customize.min.js +3 -3
- package/components/counter/demo/index.min.js +3 -3
- package/components/counter/dist/index.js +3 -3
- package/components/counter/dist/registered.js +3 -3
- package/components/datepicker/demo/api.md +2 -0
- package/components/datepicker/demo/customize.md +195 -33
- package/components/datepicker/demo/customize.min.js +145 -60
- package/components/datepicker/demo/index.min.js +137 -59
- package/components/datepicker/dist/index.js +137 -59
- package/components/datepicker/dist/registered.js +137 -59
- package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -0
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +2209 -2237
- package/components/form/demo/getting-started.min.js +2209 -2237
- package/components/form/demo/index.min.js +2209 -2237
- package/components/form/demo/registerDemoDeps.min.js +2207 -2235
- package/components/input/demo/customize.md +56 -55
- package/components/input/demo/customize.min.js +131 -56
- package/components/input/demo/getting-started.min.js +131 -56
- package/components/input/demo/index.md +2 -2
- package/components/input/demo/index.min.js +131 -56
- package/components/input/dist/base-input.d.ts +16 -0
- package/components/input/dist/index.js +131 -56
- package/components/input/dist/registered.js +131 -56
- package/components/menu/demo/api.md +41 -45
- package/components/menu/demo/customize.md +0 -28
- package/components/menu/demo/index.min.js +779 -1354
- package/components/menu/dist/auro-menu.d.ts +95 -110
- package/components/menu/dist/auro-menuoption.d.ts +32 -138
- package/components/menu/dist/index.js +753 -1308
- package/components/menu/dist/registered.js +765 -1308
- package/components/radio/demo/customize.min.js +2 -2
- package/components/radio/demo/getting-started.min.js +2 -2
- package/components/radio/demo/index.min.js +2 -2
- package/components/radio/dist/index.js +2 -2
- package/components/radio/dist/registered.js +2 -2
- package/components/select/demo/customize.md +7 -3
- package/components/select/demo/customize.min.js +1072 -1616
- package/components/select/demo/getting-started.min.js +1072 -1616
- package/components/select/demo/index.min.js +1072 -1616
- package/components/select/dist/index.js +46 -15
- package/components/select/dist/registered.js +46 -15
- package/components/select/dist/selectUtils.d.ts +12 -0
- package/custom-elements.json +384 -1022
- package/package.json +1 -3
- package/components/menu/dist/auro-menu.context.d.ts +0 -238
|
@@ -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,18 @@ class AuroLibraryRuntimeUtils {
|
|
|
968
221
|
// See LICENSE in the project root for license information.
|
|
969
222
|
|
|
970
223
|
|
|
224
|
+
/**
|
|
225
|
+
* Validates if an option can be interacted with.
|
|
226
|
+
* @private
|
|
227
|
+
* @param {HTMLElement} option - The option to check.
|
|
228
|
+
* @returns {boolean} True if option is interactive.
|
|
229
|
+
*/
|
|
230
|
+
function isOptionInteractive(option) {
|
|
231
|
+
return !option.hasAttribute('hidden') &&
|
|
232
|
+
!option.hasAttribute('disabled') &&
|
|
233
|
+
!option.hasAttribute('static');
|
|
234
|
+
}
|
|
235
|
+
|
|
971
236
|
/**
|
|
972
237
|
* Helper method to dispatch custom events.
|
|
973
238
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -1001,7 +266,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
1001
266
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1002
267
|
*/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
268
|
|
|
1004
|
-
/* eslint-disable no-underscore-dangle */
|
|
269
|
+
/* eslint-disable no-underscore-dangle, no-magic-numbers, max-lines, no-extra-parens, max-depth */
|
|
1005
270
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1006
271
|
// See LICENSE in the project root for license information.
|
|
1007
272
|
|
|
@@ -1015,16 +280,12 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
1015
280
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
1016
281
|
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
1017
282
|
* @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
283
|
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
1020
284
|
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
1021
285
|
* @slot loadingText - Text to show while loading attribute is set
|
|
1022
286
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
1023
287
|
* @slot - Slot for insertion of menu options.
|
|
1024
288
|
*/
|
|
1025
|
-
|
|
1026
|
-
/* eslint-disable max-lines */
|
|
1027
|
-
|
|
1028
289
|
class AuroMenu extends AuroElement {
|
|
1029
290
|
|
|
1030
291
|
constructor() {
|
|
@@ -1042,6 +303,8 @@ class AuroMenu extends AuroElement {
|
|
|
1042
303
|
*/
|
|
1043
304
|
this.size = "sm";
|
|
1044
305
|
|
|
306
|
+
// Value of the selected options
|
|
307
|
+
this.value = undefined;
|
|
1045
308
|
// Currently selected option
|
|
1046
309
|
this.optionSelected = undefined;
|
|
1047
310
|
// String used for highlighting/filtering
|
|
@@ -1054,13 +317,24 @@ class AuroMenu extends AuroElement {
|
|
|
1054
317
|
this.loading = false;
|
|
1055
318
|
// Multi-select mode
|
|
1056
319
|
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
320
|
|
|
1062
321
|
// Event Bindings
|
|
1063
322
|
|
|
323
|
+
/**
|
|
324
|
+
* @private
|
|
325
|
+
*/
|
|
326
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
327
|
+
|
|
328
|
+
/**
|
|
329
|
+
* @private
|
|
330
|
+
*/
|
|
331
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
332
|
+
|
|
333
|
+
/**
|
|
334
|
+
* @private
|
|
335
|
+
*/
|
|
336
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
337
|
+
|
|
1064
338
|
/**
|
|
1065
339
|
* @private
|
|
1066
340
|
*/
|
|
@@ -1087,14 +361,6 @@ class AuroMenu extends AuroElement {
|
|
|
1087
361
|
return {
|
|
1088
362
|
...super.properties,
|
|
1089
363
|
|
|
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
364
|
/**
|
|
1099
365
|
* When true, the entire menu and all options are disabled.
|
|
1100
366
|
*/
|
|
@@ -1103,20 +369,6 @@ class AuroMenu extends AuroElement {
|
|
|
1103
369
|
reflect: true
|
|
1104
370
|
},
|
|
1105
371
|
|
|
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
372
|
/**
|
|
1121
373
|
* Indent level for submenus.
|
|
1122
374
|
* @private
|
|
@@ -1177,44 +429,6 @@ class AuroMenu extends AuroElement {
|
|
|
1177
429
|
type: Object
|
|
1178
430
|
},
|
|
1179
431
|
|
|
1180
|
-
/**
|
|
1181
|
-
* Available menu options.
|
|
1182
|
-
* @readonly
|
|
1183
|
-
*/
|
|
1184
|
-
options: {
|
|
1185
|
-
type: Array,
|
|
1186
|
-
reflect: false,
|
|
1187
|
-
attribute: false
|
|
1188
|
-
},
|
|
1189
|
-
|
|
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
432
|
/**
|
|
1219
433
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
1220
434
|
*/
|
|
@@ -1230,44 +444,13 @@ class AuroMenu extends AuroElement {
|
|
|
1230
444
|
return [
|
|
1231
445
|
styleCss$1,
|
|
1232
446
|
colorCss$1,
|
|
1233
|
-
tokensCss
|
|
1234
|
-
];
|
|
1235
|
-
}
|
|
1236
|
-
|
|
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);
|
|
447
|
+
tokensCss
|
|
448
|
+
];
|
|
1266
449
|
}
|
|
1267
450
|
|
|
1268
451
|
/**
|
|
1269
452
|
* This will register this element with the browser.
|
|
1270
|
-
* @param {string} [name="auro-menu"] - The name of
|
|
453
|
+
* @param {string} [name="auro-menu"] - The name of element that you want to register to.
|
|
1271
454
|
*
|
|
1272
455
|
* @example
|
|
1273
456
|
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
@@ -1278,126 +461,116 @@ class AuroMenu extends AuroElement {
|
|
|
1278
461
|
}
|
|
1279
462
|
|
|
1280
463
|
/**
|
|
1281
|
-
*
|
|
1282
|
-
*
|
|
1283
|
-
* @private
|
|
1284
|
-
* @returns {String|Array<String>}
|
|
464
|
+
* @readonly
|
|
465
|
+
* @returns {Array<HTMLElement>} - Returns the array of available menu options.
|
|
1285
466
|
*/
|
|
1286
|
-
get
|
|
1287
|
-
return this.
|
|
467
|
+
get options() {
|
|
468
|
+
return this.items;
|
|
1288
469
|
}
|
|
1289
470
|
|
|
1290
471
|
/**
|
|
1291
|
-
*
|
|
1292
|
-
* @private
|
|
1293
|
-
* @returns {Object}
|
|
472
|
+
* @returns {number} - Returns the index of the currently active option.
|
|
1294
473
|
*/
|
|
1295
|
-
get
|
|
1296
|
-
return
|
|
1297
|
-
size: this.size,
|
|
1298
|
-
shape: this.shape,
|
|
1299
|
-
noCheckmark: this.nocheckmark,
|
|
1300
|
-
disabled: this.disabled
|
|
1301
|
-
};
|
|
474
|
+
get index() {
|
|
475
|
+
return this._index;
|
|
1302
476
|
}
|
|
1303
477
|
|
|
1304
478
|
/**
|
|
1305
|
-
*
|
|
1306
|
-
* Initializes the MenuService and subscribes to menu changes.
|
|
1307
|
-
* @protected
|
|
479
|
+
* @param {number} value - Sets the index of the currently active option.
|
|
1308
480
|
*/
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
this.rootMenu = false;
|
|
1312
|
-
this.menuService = this.parentElement.menuService;
|
|
1313
|
-
this._contextProvider = this.parentElement._contextProvider;
|
|
1314
|
-
return;
|
|
1315
|
-
}
|
|
1316
|
-
|
|
1317
|
-
this.menuService = new MenuService({host: this});
|
|
1318
|
-
this.menuService.setProperties(this.propertyValues);
|
|
1319
|
-
this.menuService.subscribe(this.handleMenuChange.bind(this));
|
|
1320
|
-
this._contextProvider = new i$2(this, {
|
|
1321
|
-
context: MenuContext,
|
|
1322
|
-
initialValue: this.menuService
|
|
1323
|
-
});
|
|
481
|
+
set index(value) {
|
|
482
|
+
this.updateActiveOption(value);
|
|
1324
483
|
}
|
|
1325
484
|
|
|
1326
485
|
/**
|
|
1327
|
-
*
|
|
1328
|
-
* @
|
|
486
|
+
* Gets the currently selected options as an array.
|
|
487
|
+
* @returns {Array<HTMLElement>}
|
|
1329
488
|
*/
|
|
1330
|
-
|
|
1331
|
-
this.
|
|
489
|
+
get selectedOptions() {
|
|
490
|
+
if (!this.optionSelected) {
|
|
491
|
+
return [];
|
|
492
|
+
}
|
|
493
|
+
if (Array.isArray(this.optionSelected)) {
|
|
494
|
+
return this.optionSelected;
|
|
495
|
+
}
|
|
496
|
+
return [this.optionSelected];
|
|
1332
497
|
}
|
|
1333
498
|
|
|
1334
499
|
/**
|
|
1335
|
-
*
|
|
1336
|
-
* @
|
|
1337
|
-
* @protected
|
|
500
|
+
* Gets the first selected option, or null if none.
|
|
501
|
+
* @returns {HTMLElement|null}
|
|
1338
502
|
*/
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
this.value = value;
|
|
1343
|
-
|
|
1344
|
-
setTimeout(() => {
|
|
1345
|
-
this.internalUpdateInProgress = false;
|
|
1346
|
-
});
|
|
1347
|
-
}
|
|
503
|
+
get selectedOption() {
|
|
504
|
+
const opts = this.selectedOptions;
|
|
505
|
+
return opts.length > 0 ? opts[0] : null;
|
|
1348
506
|
}
|
|
1349
507
|
|
|
1350
508
|
/**
|
|
1351
|
-
*
|
|
1352
|
-
* @
|
|
1353
|
-
* @protected
|
|
509
|
+
* @readonly
|
|
510
|
+
* @returns {string} - Returns the label of the currently selected option(s).
|
|
1354
511
|
*/
|
|
1355
|
-
|
|
1356
|
-
if (
|
|
1357
|
-
|
|
1358
|
-
// New option is array value or first option with fallback to undefined for empty array in all cases
|
|
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);
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
|
-
// Notify components of selection change
|
|
1369
|
-
this.notifySelectionChange(event);
|
|
1370
|
-
}
|
|
1371
|
-
|
|
1372
|
-
if (event.type === 'highlightChange') {
|
|
1373
|
-
this.optionActive = event.option;
|
|
1374
|
-
this._index = event.index;
|
|
512
|
+
get currentLabel() {
|
|
513
|
+
if (!this.optionSelected) {
|
|
514
|
+
return '';
|
|
1375
515
|
}
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
this.options = event.options;
|
|
1379
|
-
this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
|
|
1380
|
-
detail: {
|
|
1381
|
-
options: event.options
|
|
1382
|
-
}
|
|
1383
|
-
}));
|
|
516
|
+
if (Array.isArray(this.optionSelected)) {
|
|
517
|
+
return this.optionSelected.map((opt) => opt.textContent).join(', ');
|
|
1384
518
|
}
|
|
519
|
+
return this.optionSelected.textContent || '';
|
|
1385
520
|
}
|
|
1386
521
|
|
|
1387
522
|
/**
|
|
1388
|
-
*
|
|
1389
|
-
*
|
|
523
|
+
* Formatted value based on `multiSelect` state.
|
|
524
|
+
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
525
|
+
* @private
|
|
526
|
+
* @returns {String|Array<String>}
|
|
1390
527
|
*/
|
|
1391
|
-
get
|
|
1392
|
-
|
|
528
|
+
get formattedValue() {
|
|
529
|
+
if (this.multiSelect) {
|
|
530
|
+
if (!this.value) {
|
|
531
|
+
return undefined;
|
|
532
|
+
}
|
|
533
|
+
// Defensive: `value` is declared as String, but consumers may assign arrays or other
|
|
534
|
+
// types programmatically. Normalize without throwing so render/update never hard-crashes.
|
|
535
|
+
if (Array.isArray(this.value)) {
|
|
536
|
+
return this.value;
|
|
537
|
+
}
|
|
538
|
+
if (typeof this.value !== 'string') {
|
|
539
|
+
return [String(this.value)];
|
|
540
|
+
}
|
|
541
|
+
if (this.value.startsWith("[")) {
|
|
542
|
+
// Malformed JSON (e.g. a literal string that happens to start with "[") falls back
|
|
543
|
+
// to a single-item array rather than throwing during render.
|
|
544
|
+
try {
|
|
545
|
+
const parsed = JSON.parse(this.value);
|
|
546
|
+
return Array.isArray(parsed) ? parsed : [this.value];
|
|
547
|
+
} catch {
|
|
548
|
+
return [this.value];
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
return [this.value];
|
|
552
|
+
}
|
|
553
|
+
return this.value;
|
|
1393
554
|
}
|
|
1394
555
|
|
|
1395
556
|
/**
|
|
1396
|
-
*
|
|
1397
|
-
* @
|
|
557
|
+
* Selects options by value.
|
|
558
|
+
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
559
|
+
* @public
|
|
1398
560
|
*/
|
|
1399
|
-
|
|
1400
|
-
|
|
561
|
+
selectByValue(value) {
|
|
562
|
+
const isEmpty = value === undefined ||
|
|
563
|
+
value === null ||
|
|
564
|
+
(Array.isArray(value) && value.length === 0) ||
|
|
565
|
+
(typeof value === 'string' && value.trim() === '');
|
|
566
|
+
|
|
567
|
+
if (isEmpty) {
|
|
568
|
+
this.clearSelection();
|
|
569
|
+
return;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
// `value` is a String property; stringify arrays so attribute reflection and `formattedValue` parsing stay correct.
|
|
573
|
+
this.value = Array.isArray(value) ? JSON.stringify(value) : value;
|
|
1401
574
|
}
|
|
1402
575
|
|
|
1403
576
|
// Lifecycle Methods
|
|
@@ -1405,9 +578,7 @@ class AuroMenu extends AuroElement {
|
|
|
1405
578
|
connectedCallback() {
|
|
1406
579
|
super.connectedCallback();
|
|
1407
580
|
|
|
1408
|
-
this.
|
|
1409
|
-
|
|
1410
|
-
// this.addEventListener('keydown', this.handleKeyDown);
|
|
581
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
1411
582
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
1412
583
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
1413
584
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -1415,7 +586,7 @@ class AuroMenu extends AuroElement {
|
|
|
1415
586
|
}
|
|
1416
587
|
|
|
1417
588
|
disconnectedCallback() {
|
|
1418
|
-
|
|
589
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
1419
590
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
1420
591
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
1421
592
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -1430,25 +601,114 @@ class AuroMenu extends AuroElement {
|
|
|
1430
601
|
this.initializeMenu();
|
|
1431
602
|
}
|
|
1432
603
|
|
|
604
|
+
/**
|
|
605
|
+
* Sets an attribute that matches the default tag name if the tag name is not the default.
|
|
606
|
+
* @param {string} tagName - The tag name to set as an attribute.
|
|
607
|
+
* @private
|
|
608
|
+
*/
|
|
609
|
+
setTagAttribute(tagName) {
|
|
610
|
+
if (this.tagName.toLowerCase() !== tagName) {
|
|
611
|
+
this.setAttribute(tagName, true);
|
|
612
|
+
}
|
|
613
|
+
}
|
|
1433
614
|
|
|
615
|
+
// eslint-disable-next-line complexity
|
|
1434
616
|
updated(changedProperties) {
|
|
1435
617
|
super.updated(changedProperties);
|
|
1436
618
|
|
|
1437
|
-
//
|
|
1438
|
-
//
|
|
1439
|
-
//
|
|
1440
|
-
//
|
|
1441
|
-
//
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
this.menuService.selectByValue(this.value);
|
|
619
|
+
// Single source of truth for 'auroMenu-selectedOption'. Selection handlers
|
|
620
|
+
// mutate optionSelected and let Lit's update cycle dispatch here; the prior
|
|
621
|
+
// .value comparison missed multi-select array changes and combined with the
|
|
622
|
+
// explicit calls in handleDeselectState/makeSelection produced 2-3 duplicate
|
|
623
|
+
// events per selection.
|
|
624
|
+
if (changedProperties.has('optionSelected')) {
|
|
625
|
+
this.notifySelectionChange();
|
|
1445
626
|
}
|
|
1446
627
|
|
|
1447
|
-
//
|
|
1448
|
-
if (changedProperties.has('
|
|
1449
|
-
this.
|
|
628
|
+
// Reset selection if multiSelect mode changes
|
|
629
|
+
if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
|
|
630
|
+
this.clearSelection();
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
if (changedProperties.has("value")) {
|
|
634
|
+
// Ensure items are populated before matching. `firstUpdated` normally initializes them,
|
|
635
|
+
// but a `value` change can arrive before slotted options are appended (e.g. parent sets
|
|
636
|
+
// value before children render). Without this guard, matching against an empty `items`
|
|
637
|
+
// would falsely dispatch `auroMenu-selectValueFailure` for valid initial values.
|
|
638
|
+
if (!this.items) {
|
|
639
|
+
this.initItems();
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
643
|
+
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
644
|
+
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
645
|
+
this.clearSelection();
|
|
646
|
+
} else {
|
|
647
|
+
let newSelected = null;
|
|
648
|
+
|
|
649
|
+
if (this.multiSelect) {
|
|
650
|
+
// In multiselect mode, this.value should be an array of strings.
|
|
651
|
+
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
652
|
+
// and calling `.includes` on undefined would throw during reconciliation.
|
|
653
|
+
const valueArray = this.formattedValue || [];
|
|
654
|
+
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
655
|
+
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
656
|
+
} else {
|
|
657
|
+
// In single-select mode, this.value should be a string
|
|
658
|
+
const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
|
|
659
|
+
|
|
660
|
+
if (matchingOption) {
|
|
661
|
+
newSelected = matchingOption;
|
|
662
|
+
this._index = this.items.indexOf(matchingOption);
|
|
663
|
+
} else {
|
|
664
|
+
// If no matching option found, reset selection
|
|
665
|
+
newSelected = undefined;
|
|
666
|
+
this._index = -1;
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
// If no matching options were found in either mode
|
|
671
|
+
if (!newSelected || (Array.isArray(newSelected) && newSelected.length === 0)) {
|
|
672
|
+
// Defer failure when no options are loaded yet (async pattern: parent sets
|
|
673
|
+
// value before slotted options render). handleSlotChange re-runs matching
|
|
674
|
+
// once items arrive. Without this guard, a valid preselected value gets
|
|
675
|
+
// cleared by the failure listener before options ever exist to match against.
|
|
676
|
+
const hasItemsToMatch = this.items && this.items.length > 0;
|
|
677
|
+
if (hasItemsToMatch) {
|
|
678
|
+
// Clear state BEFORE dispatching so synchronous listeners (e.g. auro-select's
|
|
679
|
+
// updateDisplayedValue) read fresh `optionSelected` rather than the stale prior
|
|
680
|
+
// selection and re-render the old label.
|
|
681
|
+
if (this.optionSelected !== undefined) {
|
|
682
|
+
this.optionSelected = undefined;
|
|
683
|
+
}
|
|
684
|
+
this._index = -1;
|
|
685
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
686
|
+
}
|
|
687
|
+
} else if (!this.selectionEquals(this.optionSelected, newSelected)) {
|
|
688
|
+
this.optionSelected = newSelected;
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
// Update UI state
|
|
693
|
+
this.updateItemsState(new Map([
|
|
694
|
+
[
|
|
695
|
+
'optionSelected',
|
|
696
|
+
true
|
|
697
|
+
]
|
|
698
|
+
]));
|
|
699
|
+
|
|
700
|
+
// Notify of changes
|
|
701
|
+
if (this.optionSelected !== undefined) {
|
|
702
|
+
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
703
|
+
selected.forEach((opt) => {
|
|
704
|
+
if (opt.hasAttribute('event')) {
|
|
705
|
+
this.handleCustomEvent(opt);
|
|
706
|
+
}
|
|
707
|
+
});
|
|
708
|
+
}
|
|
1450
709
|
}
|
|
1451
710
|
|
|
711
|
+
// Process all other UI updates
|
|
1452
712
|
if (changedProperties.has('multiSelect') && this.rootMenu) {
|
|
1453
713
|
if (this.multiSelect) {
|
|
1454
714
|
this.setAttribute('aria-multiselectable', 'true');
|
|
@@ -1456,30 +716,129 @@ class AuroMenu extends AuroElement {
|
|
|
1456
716
|
this.removeAttribute('aria-multiselectable');
|
|
1457
717
|
}
|
|
1458
718
|
}
|
|
719
|
+
|
|
720
|
+
this.updateItemsState(changedProperties);
|
|
1459
721
|
}
|
|
1460
722
|
|
|
1461
723
|
/**
|
|
1462
|
-
*
|
|
1463
|
-
* @param {string} tagName - The tag name to set as an attribute.
|
|
724
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
1464
725
|
* @private
|
|
726
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
1465
727
|
*/
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
728
|
+
updateItemsState(changedProperties) {
|
|
729
|
+
// Handle loading state changes
|
|
730
|
+
if (changedProperties.has('loading')) {
|
|
731
|
+
this.setAttribute("aria-busy", this.loading);
|
|
732
|
+
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
733
|
+
loading: this.loading,
|
|
734
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
735
|
+
});
|
|
1469
736
|
}
|
|
1470
|
-
}
|
|
1471
737
|
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
738
|
+
if (!this.items) {
|
|
739
|
+
return;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
// Handle noCheckmark propagation to all menus and options.
|
|
743
|
+
// Propagate in both directions so toggling back to false also clears nested elements
|
|
744
|
+
// (otherwise nested menus/options would stay stuck in no-checkmark mode).
|
|
745
|
+
if (changedProperties.has('noCheckmark')) {
|
|
746
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => {
|
|
747
|
+
element.noCheckmark = this.noCheckmark;
|
|
748
|
+
});
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
// Handle layout propagation to all menus and options.
|
|
752
|
+
// Skip elements that had size/shape set by the author (marked in initItems);
|
|
753
|
+
// explicit per-option overrides must survive menu-level propagation.
|
|
754
|
+
const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
|
|
755
|
+
[
|
|
756
|
+
'size',
|
|
757
|
+
'shape'
|
|
758
|
+
].forEach((prop) => {
|
|
759
|
+
if (changedProperties.has(prop)) {
|
|
760
|
+
const explicitKey = prop === 'size' ? '_explicitSize' : '_explicitShape';
|
|
761
|
+
propagationTargets.forEach((el) => {
|
|
762
|
+
if (el[explicitKey]) {
|
|
763
|
+
return;
|
|
764
|
+
}
|
|
765
|
+
el.setAttribute(prop, this[prop]);
|
|
766
|
+
});
|
|
767
|
+
}
|
|
768
|
+
});
|
|
769
|
+
|
|
770
|
+
// Regex for matchWord if needed
|
|
771
|
+
let regexWord = null;
|
|
772
|
+
|
|
773
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
774
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
775
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
// Handle direct item updates
|
|
779
|
+
this.items.forEach((option) => {
|
|
780
|
+
// Update selection if option or value changed
|
|
781
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
782
|
+
const isSelected = this.isOptionSelected(option);
|
|
783
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
784
|
+
|
|
785
|
+
// Add/remove selected attribute based on state
|
|
786
|
+
if (isSelected) {
|
|
787
|
+
option.setAttribute('selected', '');
|
|
788
|
+
} else {
|
|
789
|
+
option.removeAttribute('selected');
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
// Update text highlighting if matchWord changed
|
|
794
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
795
|
+
isOptionInteractive(option) && !option.hasAttribute('persistent')) {
|
|
796
|
+
// Create nested spacers
|
|
797
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
798
|
+
|
|
799
|
+
const displayValueEl = option.querySelector('[slot="displayValue"]');
|
|
800
|
+
if (displayValueEl) {
|
|
801
|
+
option.removeChild(displayValueEl);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
// Build highlighted content via DOM APIs rather than innerHTML so any
|
|
805
|
+
// `<`, `>`, or `&` in the option text renders literally (prevents XSS).
|
|
806
|
+
const originalText = option.textContent;
|
|
807
|
+
option.textContent = '';
|
|
808
|
+
|
|
809
|
+
nested.forEach(() => {
|
|
810
|
+
const spacer = document.createElement('span');
|
|
811
|
+
spacer.className = 'nestingSpacer';
|
|
812
|
+
option.appendChild(spacer);
|
|
813
|
+
});
|
|
814
|
+
|
|
815
|
+
const matches = [...originalText.matchAll(regexWord)];
|
|
816
|
+
let lastIndex = 0;
|
|
817
|
+
matches.forEach((match) => {
|
|
818
|
+
const [matchText] = match;
|
|
819
|
+
if (match.index > lastIndex) {
|
|
820
|
+
option.appendChild(document.createTextNode(originalText.slice(lastIndex, match.index)));
|
|
821
|
+
}
|
|
822
|
+
const strong = document.createElement('strong');
|
|
823
|
+
strong.textContent = matchText;
|
|
824
|
+
option.appendChild(strong);
|
|
825
|
+
lastIndex = match.index + matchText.length;
|
|
826
|
+
});
|
|
827
|
+
if (lastIndex < originalText.length) {
|
|
828
|
+
option.appendChild(document.createTextNode(originalText.slice(lastIndex)));
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
if (displayValueEl) {
|
|
832
|
+
option.append(displayValueEl);
|
|
833
|
+
}
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
// Update disabled state
|
|
837
|
+
if (changedProperties.has('disabled')) {
|
|
838
|
+
option.disabled = this.disabled;
|
|
839
|
+
}
|
|
1482
840
|
});
|
|
841
|
+
|
|
1483
842
|
}
|
|
1484
843
|
|
|
1485
844
|
// Init Methods
|
|
@@ -1489,6 +848,7 @@ class AuroMenu extends AuroElement {
|
|
|
1489
848
|
* @private
|
|
1490
849
|
*/
|
|
1491
850
|
initializeMenu() {
|
|
851
|
+
this.initItems();
|
|
1492
852
|
if (this.rootMenu) {
|
|
1493
853
|
this.setAttribute('role', 'listbox');
|
|
1494
854
|
this.setAttribute('root', '');
|
|
@@ -1498,15 +858,117 @@ class AuroMenu extends AuroElement {
|
|
|
1498
858
|
}
|
|
1499
859
|
}
|
|
1500
860
|
|
|
861
|
+
// Must run for nested menus too — sets level, role="group", and aria-label="submenu" based on parent.
|
|
1501
862
|
this.handleNestedMenus(this);
|
|
1502
863
|
}
|
|
1503
864
|
|
|
1504
865
|
/**
|
|
1505
|
-
*
|
|
1506
|
-
* @
|
|
866
|
+
* Initializes menu items and their attributes.
|
|
867
|
+
* @private
|
|
1507
868
|
*/
|
|
1508
|
-
|
|
1509
|
-
this.
|
|
869
|
+
initItems() {
|
|
870
|
+
const found = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
871
|
+
this.items = found.length > 0 ? found : undefined;
|
|
872
|
+
|
|
873
|
+
// Record whether each propagation target had an author-set size/shape attribute
|
|
874
|
+
// BEFORE menu has had a chance to propagate. Marker is set once per element so a
|
|
875
|
+
// later menu-driven setAttribute doesn't re-flag the element as "explicit".
|
|
876
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((el) => {
|
|
877
|
+
if (el._explicitSize === undefined) {
|
|
878
|
+
el._explicitSize = el.hasAttribute('size');
|
|
879
|
+
}
|
|
880
|
+
if (el._explicitShape === undefined) {
|
|
881
|
+
el._explicitShape = el.hasAttribute('shape');
|
|
882
|
+
}
|
|
883
|
+
});
|
|
884
|
+
|
|
885
|
+
if (this.noCheckmark) {
|
|
886
|
+
this.updateItemsState(new Map([
|
|
887
|
+
[
|
|
888
|
+
'noCheckmark',
|
|
889
|
+
true
|
|
890
|
+
]
|
|
891
|
+
]));
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
|
|
895
|
+
detail: {
|
|
896
|
+
options: this.items
|
|
897
|
+
}
|
|
898
|
+
}));
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
// Logic Methods
|
|
902
|
+
|
|
903
|
+
/**
|
|
904
|
+
* Updates menu state when an option is selected.
|
|
905
|
+
* @private
|
|
906
|
+
* @param {HTMLElement} option - The option element to select.
|
|
907
|
+
*/
|
|
908
|
+
handleSelectState(option) {
|
|
909
|
+
if (this.multiSelect) {
|
|
910
|
+
const currentValue = this.formattedValue || [];
|
|
911
|
+
const currentSelected = this.optionSelected || [];
|
|
912
|
+
|
|
913
|
+
if (!currentValue.includes(option.value)) {
|
|
914
|
+
this.value = JSON.stringify([
|
|
915
|
+
...currentValue,
|
|
916
|
+
option.value
|
|
917
|
+
]);
|
|
918
|
+
}
|
|
919
|
+
if (!currentSelected.includes(option)) {
|
|
920
|
+
this.optionSelected = [
|
|
921
|
+
...currentSelected,
|
|
922
|
+
option
|
|
923
|
+
];
|
|
924
|
+
}
|
|
925
|
+
} else {
|
|
926
|
+
this.value = option.value;
|
|
927
|
+
this.optionSelected = option;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
this._index = this.items.indexOf(option);
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
/**
|
|
934
|
+
* Deselects a menu option and updates related state.
|
|
935
|
+
* @private
|
|
936
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
937
|
+
*/
|
|
938
|
+
handleDeselectState(option) {
|
|
939
|
+
if (this.multiSelect) {
|
|
940
|
+
// Remove this option from array
|
|
941
|
+
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
942
|
+
|
|
943
|
+
// If array is empty after removal, set back to undefined
|
|
944
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
945
|
+
this.value = undefined;
|
|
946
|
+
} else {
|
|
947
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
951
|
+
if (this.optionSelected.length === 0) {
|
|
952
|
+
this.optionSelected = undefined;
|
|
953
|
+
}
|
|
954
|
+
} else {
|
|
955
|
+
// For single-select: Back to undefined when deselected
|
|
956
|
+
this.value = undefined;
|
|
957
|
+
this.optionSelected = undefined;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
// Update the index tracking
|
|
961
|
+
this._index = this.items.indexOf(option);
|
|
962
|
+
|
|
963
|
+
// Update UI to reflect changes
|
|
964
|
+
this.updateItemsState(new Map([
|
|
965
|
+
[
|
|
966
|
+
'optionSelected',
|
|
967
|
+
true
|
|
968
|
+
]
|
|
969
|
+
]));
|
|
970
|
+
|
|
971
|
+
// Notification happens via updated() when optionSelected changes above.
|
|
1510
972
|
}
|
|
1511
973
|
|
|
1512
974
|
/**
|
|
@@ -1525,7 +987,18 @@ class AuroMenu extends AuroElement {
|
|
|
1525
987
|
* @public
|
|
1526
988
|
*/
|
|
1527
989
|
reset() {
|
|
1528
|
-
|
|
990
|
+
// Reset to undefined - initial state
|
|
991
|
+
this.value = undefined;
|
|
992
|
+
this.optionSelected = undefined;
|
|
993
|
+
this._index = -1;
|
|
994
|
+
|
|
995
|
+
// Reset UI state
|
|
996
|
+
this.updateItemsState(new Map([
|
|
997
|
+
[
|
|
998
|
+
'optionSelected',
|
|
999
|
+
true
|
|
1000
|
+
]
|
|
1001
|
+
]));
|
|
1529
1002
|
|
|
1530
1003
|
// Dispatch reset event
|
|
1531
1004
|
dispatchMenuEvent(this, 'auroMenu-selectValueReset');
|
|
@@ -1537,6 +1010,14 @@ class AuroMenu extends AuroElement {
|
|
|
1537
1010
|
* @param {HTMLElement} menu - Root menu element.
|
|
1538
1011
|
*/
|
|
1539
1012
|
handleNestedMenus(menu) {
|
|
1013
|
+
// Slot changes can fire on a menu mid-teardown (e.g. while a parent menu
|
|
1014
|
+
// is removing children to rebuild its content). In that window the menu
|
|
1015
|
+
// is detached and parentElement is null. Skip — handleNestedMenus will
|
|
1016
|
+
// run again when the menu is reattached.
|
|
1017
|
+
if (!menu.parentElement) {
|
|
1018
|
+
return;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1540
1021
|
menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
|
|
1541
1022
|
|
|
1542
1023
|
if (menu.level > 0) {
|
|
@@ -1547,34 +1028,221 @@ class AuroMenu extends AuroElement {
|
|
|
1547
1028
|
}
|
|
1548
1029
|
}
|
|
1549
1030
|
|
|
1550
|
-
const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
1551
|
-
options.forEach((option) => {
|
|
1552
|
-
const regex = new RegExp(this.nestingSpacer, "gu");
|
|
1553
|
-
option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
|
|
1554
|
-
});
|
|
1031
|
+
const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
1032
|
+
options.forEach((option) => {
|
|
1033
|
+
const regex = new RegExp(this.nestingSpacer, "gu");
|
|
1034
|
+
option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
|
|
1035
|
+
});
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
// Event Handlers
|
|
1039
|
+
|
|
1040
|
+
/**
|
|
1041
|
+
* Makes a selection based on the current index.
|
|
1042
|
+
* @private
|
|
1043
|
+
*/
|
|
1044
|
+
makeSelection() {
|
|
1045
|
+
if (!this.items) {
|
|
1046
|
+
this.initItems();
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
// Get currently selected menu option based on index
|
|
1050
|
+
const option = this.items ? this.items[this._index] : undefined;
|
|
1051
|
+
|
|
1052
|
+
// Return early if option is not interactive
|
|
1053
|
+
if (!option || !isOptionInteractive(option)) {
|
|
1054
|
+
return;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
// Handle custom events first
|
|
1058
|
+
if (option.hasAttribute('event')) {
|
|
1059
|
+
this.handleCustomEvent(option);
|
|
1060
|
+
return;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
if (this.multiSelect) {
|
|
1064
|
+
// In multiselect, toggle individual selections
|
|
1065
|
+
this.toggleOption(option);
|
|
1066
|
+
// In single select, only handle selection of new options
|
|
1067
|
+
} else if (!this.isOptionSelected(option)) {
|
|
1068
|
+
this.clearSelection();
|
|
1069
|
+
this.handleSelectState(option);
|
|
1070
|
+
} else {
|
|
1071
|
+
// Re-selecting the already-selected option in single-select doesn't change
|
|
1072
|
+
// state, so updated() won't fire. Notify explicitly so consumers (e.g.
|
|
1073
|
+
// auro-select closing its dropdown on Enter) still get the event.
|
|
1074
|
+
this.notifySelectionChange();
|
|
1075
|
+
}
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/**
|
|
1079
|
+
* Toggle the selection state of the menuoption.
|
|
1080
|
+
* @private
|
|
1081
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
1082
|
+
*/
|
|
1083
|
+
toggleOption(option) {
|
|
1084
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
1085
|
+
|
|
1086
|
+
if (isCurrentlySelected) {
|
|
1087
|
+
this.handleDeselectState(option);
|
|
1088
|
+
} else if (option.value === undefined || option.value === '') {
|
|
1089
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
1090
|
+
} else {
|
|
1091
|
+
this.handleSelectState(option);
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
/**
|
|
1096
|
+
* Handles keyboard navigation and selection.
|
|
1097
|
+
* @private
|
|
1098
|
+
* @param {KeyboardEvent} event - The keydown event.
|
|
1099
|
+
*/
|
|
1100
|
+
handleKeyDown(event) {
|
|
1101
|
+
switch (event.key) {
|
|
1102
|
+
case "ArrowDown":
|
|
1103
|
+
event.preventDefault();
|
|
1104
|
+
this.navigateOptions('down');
|
|
1105
|
+
break;
|
|
1106
|
+
case "ArrowUp":
|
|
1107
|
+
event.preventDefault();
|
|
1108
|
+
this.navigateOptions('up');
|
|
1109
|
+
break;
|
|
1110
|
+
case "Tab":
|
|
1111
|
+
// Do not preventDefault on Tab so focus can move out of the menu (a11y: avoid trapping keyboard users).
|
|
1112
|
+
this.makeSelection();
|
|
1113
|
+
break;
|
|
1114
|
+
case "Enter":
|
|
1115
|
+
event.preventDefault();
|
|
1116
|
+
this.makeSelection();
|
|
1117
|
+
break;
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
/**
|
|
1122
|
+
* Handles option selection via click events from menuoptions.
|
|
1123
|
+
* @private
|
|
1124
|
+
* @param {CustomEvent} event - The auroMenuOption-click event.
|
|
1125
|
+
*/
|
|
1126
|
+
handleMouseSelect(event) {
|
|
1127
|
+
if (!this.rootMenu || this.disabled) {
|
|
1128
|
+
return;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
const option = event.detail;
|
|
1132
|
+
if (option && this.items) {
|
|
1133
|
+
const idx = this.items.indexOf(option);
|
|
1134
|
+
if (idx >= 0) {
|
|
1135
|
+
this._index = idx;
|
|
1136
|
+
this.makeSelection();
|
|
1137
|
+
}
|
|
1138
|
+
}
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
/**
|
|
1142
|
+
* Handles option hover events.
|
|
1143
|
+
* @private
|
|
1144
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
1145
|
+
*/
|
|
1146
|
+
handleOptionHover(event) {
|
|
1147
|
+
const option = event.detail;
|
|
1148
|
+
if (this.items) {
|
|
1149
|
+
const idx = this.items.indexOf(option);
|
|
1150
|
+
if (idx >= 0) {
|
|
1151
|
+
this.updateActiveOption(idx);
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
/**
|
|
1157
|
+
* Handles slot change events.
|
|
1158
|
+
* @private
|
|
1159
|
+
*/
|
|
1160
|
+
handleSlotChange() {
|
|
1161
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
1162
|
+
this.rootMenu = false;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
// Nested menus must also reinitialize so items, level, role="group", and aria-label refresh on content changes.
|
|
1166
|
+
// Root-specific attributes (listbox/root/aria-multiselectable) remain gated by `rootMenu` inside initializeMenu.
|
|
1167
|
+
this.initializeMenu();
|
|
1168
|
+
|
|
1169
|
+
// When options arrive after `value` was set (async option load), re-run matching
|
|
1170
|
+
// against the now-populated items. The earlier updated('value') call deferred
|
|
1171
|
+
// the failure dispatch because items were empty; this triggers the match now.
|
|
1172
|
+
const hasPendingValue = this.value !== undefined &&
|
|
1173
|
+
this.value !== null &&
|
|
1174
|
+
!(typeof this.value === 'string' && this.value.trim() === '');
|
|
1175
|
+
if (hasPendingValue && this.items && this.items.length > 0 && this.optionSelected === undefined) {
|
|
1176
|
+
this.requestUpdate('value', undefined);
|
|
1177
|
+
}
|
|
1555
1178
|
}
|
|
1556
1179
|
|
|
1557
1180
|
/**
|
|
1558
|
-
* Navigates
|
|
1559
|
-
* @param {
|
|
1560
|
-
* @protected
|
|
1181
|
+
* Navigates through options using keyboard.
|
|
1182
|
+
* @param {string} direction - 'up' or 'down'.
|
|
1561
1183
|
*/
|
|
1562
1184
|
navigateOptions(direction) {
|
|
1563
|
-
if
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1185
|
+
// Return early if no items exist
|
|
1186
|
+
if (!this.items || !this.items.length) {
|
|
1187
|
+
return;
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
let newIndex = this._index;
|
|
1191
|
+
if (newIndex === -1 && direction === 'up') {
|
|
1192
|
+
newIndex = this.items.length;
|
|
1193
|
+
}
|
|
1194
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
1195
|
+
const maxIterations = this.items.length;
|
|
1196
|
+
let iterations = 0;
|
|
1197
|
+
let foundInteractiveOption = false;
|
|
1198
|
+
|
|
1199
|
+
do {
|
|
1200
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
1201
|
+
iterations += 1;
|
|
1202
|
+
|
|
1203
|
+
// Check if current option is interactive
|
|
1204
|
+
const currentOption = this.items[newIndex];
|
|
1205
|
+
if (isOptionInteractive(currentOption)) {
|
|
1206
|
+
foundInteractiveOption = true;
|
|
1207
|
+
break;
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
// Break if all options were checked
|
|
1211
|
+
if (iterations >= maxIterations) {
|
|
1212
|
+
break;
|
|
1213
|
+
}
|
|
1214
|
+
} while (iterations < maxIterations);
|
|
1215
|
+
|
|
1216
|
+
// Update only if an interactive option was found
|
|
1217
|
+
if (foundInteractiveOption) {
|
|
1218
|
+
this.updateActiveOption(newIndex);
|
|
1567
1219
|
}
|
|
1568
1220
|
}
|
|
1569
1221
|
|
|
1570
1222
|
/**
|
|
1571
|
-
*
|
|
1572
|
-
*
|
|
1223
|
+
* Updates the active option state and dispatches events.
|
|
1224
|
+
* Accepts either a numeric index or an HTMLElement option.
|
|
1225
|
+
* @param {number|HTMLElement} indexOrOption - Index of the option or the option element to make active.
|
|
1573
1226
|
*/
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1227
|
+
updateActiveOption(indexOrOption) {
|
|
1228
|
+
let idx = -1;
|
|
1229
|
+
|
|
1230
|
+
if (typeof indexOrOption === 'number') {
|
|
1231
|
+
idx = indexOrOption;
|
|
1232
|
+
} else {
|
|
1233
|
+
idx = this.items ? this.items.indexOf(indexOrOption) : -1;
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
if (!this.items || !this.items[idx]) {
|
|
1237
|
+
return;
|
|
1577
1238
|
}
|
|
1239
|
+
|
|
1240
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
1241
|
+
this.items[idx].classList.add('active');
|
|
1242
|
+
this.optionActive = this.items[idx];
|
|
1243
|
+
this._index = idx;
|
|
1244
|
+
|
|
1245
|
+
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[idx]);
|
|
1578
1246
|
}
|
|
1579
1247
|
|
|
1580
1248
|
/**
|
|
@@ -1584,8 +1252,8 @@ class AuroMenu extends AuroElement {
|
|
|
1584
1252
|
*/
|
|
1585
1253
|
handleCustomEvent(option) {
|
|
1586
1254
|
const eventName = option.getAttribute('event');
|
|
1587
|
-
dispatchMenuEvent(this, eventName);
|
|
1588
|
-
dispatchMenuEvent(this, 'auroMenu-customEventFired');
|
|
1255
|
+
dispatchMenuEvent(this, eventName, { option });
|
|
1256
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired', { option });
|
|
1589
1257
|
}
|
|
1590
1258
|
|
|
1591
1259
|
/**
|
|
@@ -1593,14 +1261,33 @@ class AuroMenu extends AuroElement {
|
|
|
1593
1261
|
* @param {any} source - The source that triggers this event.
|
|
1594
1262
|
* @private
|
|
1595
1263
|
*/
|
|
1596
|
-
notifySelectionChange(
|
|
1597
|
-
dispatchMenuEvent(this, 'auroMenu-selectedOption', {
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1264
|
+
notifySelectionChange(source = undefined) {
|
|
1265
|
+
dispatchMenuEvent(this, 'auroMenu-selectedOption', { source });
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
/**
|
|
1269
|
+
* @private
|
|
1270
|
+
* @param {any} current - Current selection.
|
|
1271
|
+
* @param {any} next - New selection to compare.
|
|
1272
|
+
* @returns {boolean} Whether the selections are equal.
|
|
1273
|
+
*/
|
|
1274
|
+
selectionEquals(current, next) {
|
|
1275
|
+
if (current === next) {
|
|
1276
|
+
return true;
|
|
1277
|
+
}
|
|
1278
|
+
if (!current || !next) {
|
|
1279
|
+
return false;
|
|
1280
|
+
}
|
|
1281
|
+
if (Array.isArray(current) && Array.isArray(next)) {
|
|
1282
|
+
if (current.length !== next.length) {
|
|
1283
|
+
return false;
|
|
1284
|
+
}
|
|
1285
|
+
// Compare as sets — selection order may differ from DOM order after value-driven
|
|
1286
|
+
// reconciliation, but the selected set is what matters for change detection.
|
|
1287
|
+
const nextSet = new Set(next);
|
|
1288
|
+
return current.every((item) => nextSet.has(item));
|
|
1289
|
+
}
|
|
1290
|
+
return false;
|
|
1604
1291
|
}
|
|
1605
1292
|
|
|
1606
1293
|
/**
|
|
@@ -1615,7 +1302,6 @@ class AuroMenu extends AuroElement {
|
|
|
1615
1302
|
}
|
|
1616
1303
|
|
|
1617
1304
|
if (this.multiSelect) {
|
|
1618
|
-
// In multi-select mode, check if the option is in the selected array
|
|
1619
1305
|
return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
|
|
1620
1306
|
}
|
|
1621
1307
|
|
|
@@ -1680,9 +1366,9 @@ class AuroMenu extends AuroElement {
|
|
|
1680
1366
|
*/
|
|
1681
1367
|
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
1368
|
|
|
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}`;
|
|
1369
|
+
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
1370
|
|
|
1685
|
-
var colorCss = i$
|
|
1371
|
+
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
1372
|
|
|
1687
1373
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1688
1374
|
// See LICENSE in the project root for license information.
|
|
@@ -1730,10 +1416,10 @@ class AuroDependencyVersioning {
|
|
|
1730
1416
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1731
1417
|
*/const o=o=>o??A;
|
|
1732
1418
|
|
|
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$
|
|
1419
|
+
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}
|
|
1420
|
+
`;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}
|
|
1421
|
+
`;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)}
|
|
1422
|
+
`;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
1423
|
`;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
1424
|
<div class="componentWrapper">
|
|
1739
1425
|
<div
|
|
@@ -1771,37 +1457,12 @@ let menuOptionIdCounter = 0;
|
|
|
1771
1457
|
* @slot default - The default slot for the menu option text.
|
|
1772
1458
|
*
|
|
1773
1459
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
1460
|
+
* @event auroMenuOption-click - Notifies that this option has been clicked.
|
|
1774
1461
|
*/
|
|
1775
1462
|
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
1463
|
constructor() {
|
|
1801
1464
|
super();
|
|
1802
1465
|
|
|
1803
|
-
this.bindEvents();
|
|
1804
|
-
|
|
1805
1466
|
/**
|
|
1806
1467
|
* @private
|
|
1807
1468
|
*/
|
|
@@ -1826,109 +1487,57 @@ class AuroMenuOption extends AuroElement {
|
|
|
1826
1487
|
/**
|
|
1827
1488
|
* @private
|
|
1828
1489
|
*/
|
|
1829
|
-
this.
|
|
1830
|
-
|
|
1831
|
-
// Initialize context-related properties
|
|
1832
|
-
this.menuService = null;
|
|
1833
|
-
this.unsubscribe = null;
|
|
1490
|
+
this.tabIndex = -1;
|
|
1834
1491
|
|
|
1835
1492
|
/**
|
|
1836
1493
|
* @private
|
|
1837
1494
|
*/
|
|
1838
|
-
this.
|
|
1495
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1496
|
+
|
|
1497
|
+
this.addEventListener('click', this.handleClick.bind(this));
|
|
1839
1498
|
}
|
|
1840
1499
|
|
|
1841
1500
|
static get properties() {
|
|
1842
1501
|
return {
|
|
1843
1502
|
...super.properties,
|
|
1844
|
-
|
|
1845
|
-
/**
|
|
1846
|
-
* When true, disables the menu option.
|
|
1847
|
-
*/
|
|
1848
|
-
disabled: {
|
|
1503
|
+
noCheckmark: {
|
|
1849
1504
|
type: Boolean,
|
|
1850
1505
|
reflect: true
|
|
1851
1506
|
},
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
* @private
|
|
1855
|
-
*/
|
|
1856
|
-
event: {
|
|
1857
|
-
type: String,
|
|
1507
|
+
selected: {
|
|
1508
|
+
type: Boolean,
|
|
1858
1509
|
reflect: true
|
|
1859
1510
|
},
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
*/
|
|
1864
|
-
layout: {
|
|
1865
|
-
type: String
|
|
1511
|
+
disabled: {
|
|
1512
|
+
type: Boolean,
|
|
1513
|
+
reflect: true
|
|
1866
1514
|
},
|
|
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: {
|
|
1515
|
+
value: {
|
|
1872
1516
|
type: String,
|
|
1873
1517
|
reflect: true
|
|
1874
1518
|
},
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
*/
|
|
1879
|
-
menuService: {
|
|
1880
|
-
type: Object,
|
|
1881
|
-
state: true
|
|
1519
|
+
tabIndex: {
|
|
1520
|
+
type: Number,
|
|
1521
|
+
reflect: true
|
|
1882
1522
|
},
|
|
1883
1523
|
|
|
1884
1524
|
/**
|
|
1885
1525
|
* @private
|
|
1886
1526
|
*/
|
|
1887
|
-
|
|
1527
|
+
event: {
|
|
1888
1528
|
type: String,
|
|
1889
|
-
state: true
|
|
1890
|
-
},
|
|
1891
|
-
|
|
1892
|
-
/**
|
|
1893
|
-
* @private
|
|
1894
|
-
*/
|
|
1895
|
-
noCheckmark: {
|
|
1896
|
-
type: Boolean,
|
|
1897
1529
|
reflect: true
|
|
1898
1530
|
},
|
|
1899
1531
|
|
|
1900
1532
|
/**
|
|
1901
|
-
* When true, marks this option as the "no matching results" placeholder shown by combobox
|
|
1533
|
+
* When true, marks this option as the "no matching results" placeholder shown by combobox
|
|
1534
|
+
* when the user's input does not match any available options.
|
|
1902
1535
|
*/
|
|
1903
1536
|
noMatch: {
|
|
1904
1537
|
type: Boolean,
|
|
1905
1538
|
reflect: true,
|
|
1906
1539
|
attribute: 'nomatch'
|
|
1907
1540
|
},
|
|
1908
|
-
|
|
1909
|
-
/**
|
|
1910
|
-
* Specifies that an option is selected.
|
|
1911
|
-
*/
|
|
1912
|
-
selected: {
|
|
1913
|
-
type: Boolean,
|
|
1914
|
-
reflect: true
|
|
1915
|
-
},
|
|
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
1541
|
};
|
|
1933
1542
|
}
|
|
1934
1543
|
|
|
@@ -1940,41 +1549,48 @@ class AuroMenuOption extends AuroElement {
|
|
|
1940
1549
|
];
|
|
1941
1550
|
}
|
|
1942
1551
|
|
|
1552
|
+
/**
|
|
1553
|
+
* This will register this element with the browser.
|
|
1554
|
+
* @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
|
|
1555
|
+
*
|
|
1556
|
+
* @example
|
|
1557
|
+
* AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
|
|
1558
|
+
*
|
|
1559
|
+
*/
|
|
1560
|
+
static register(name = "auro-menuoption") {
|
|
1561
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
1562
|
+
}
|
|
1563
|
+
|
|
1564
|
+
/**
|
|
1565
|
+
* Returns whether the menu option is currently active and selectable.
|
|
1566
|
+
* @returns {boolean}
|
|
1567
|
+
*/
|
|
1568
|
+
get isActive() {
|
|
1569
|
+
return !this.hasAttribute('hidden') &&
|
|
1570
|
+
!this.disabled &&
|
|
1571
|
+
!this.hasAttribute('static');
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1943
1574
|
connectedCallback() {
|
|
1944
1575
|
super.connectedCallback();
|
|
1945
1576
|
|
|
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
1577
|
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
1578
|
}
|
|
1972
1579
|
|
|
1973
1580
|
firstUpdated() {
|
|
1974
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
1975
1581
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
1976
1582
|
|
|
1977
|
-
//
|
|
1583
|
+
// firstUpdated can fire on an option that was detached before the first
|
|
1584
|
+
// render completed (e.g. dynamic-menu rebuilds clear and repopulate the
|
|
1585
|
+
// menu mid-cycle). parentElement is null in that case — fall back to
|
|
1586
|
+
// defaults; the next render after re-attachment will pick up real values.
|
|
1587
|
+
if (!this.hasAttribute('size')) {
|
|
1588
|
+
this.size = this.parentElement ? this.parentElement.getAttribute('size') || 'sm' : 'sm';
|
|
1589
|
+
}
|
|
1590
|
+
if (!this.hasAttribute('shape')) {
|
|
1591
|
+
this.shape = this.parentElement ? this.parentElement.getAttribute('shape') || 'box' : 'box';
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1978
1594
|
if (!this.id) {
|
|
1979
1595
|
menuOptionIdCounter += 1;
|
|
1980
1596
|
this.id = `menuoption-${menuOptionIdCounter}`;
|
|
@@ -1996,16 +1612,8 @@ class AuroMenuOption extends AuroElement {
|
|
|
1996
1612
|
updated(changedProperties) {
|
|
1997
1613
|
super.updated(changedProperties);
|
|
1998
1614
|
|
|
1999
|
-
// Update aria-selected attribute if selected changed
|
|
2000
1615
|
if (changedProperties.has('selected')) {
|
|
2001
|
-
|
|
2002
|
-
// Update aria-selected attribute
|
|
2003
1616
|
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
1617
|
}
|
|
2010
1618
|
|
|
2011
1619
|
if (changedProperties.has('disabled')) {
|
|
@@ -2015,231 +1623,48 @@ class AuroMenuOption extends AuroElement {
|
|
|
2015
1623
|
this.removeAttribute('aria-disabled');
|
|
2016
1624
|
}
|
|
2017
1625
|
}
|
|
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
|
-
}
|
|
2046
|
-
|
|
2047
|
-
/**
|
|
2048
|
-
* Sets up event listeners for user interaction with the menu option.
|
|
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
1626
|
}
|
|
2055
1627
|
|
|
2056
|
-
|
|
2057
|
-
|
|
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);
|
|
1628
|
+
handleMenuChange() {
|
|
1629
|
+
// no-op: menu owns state in the distributed architecture
|
|
2068
1630
|
}
|
|
2069
1631
|
|
|
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
|
-
}
|
|
1632
|
+
setSelected(value) {
|
|
1633
|
+
this.selected = value;
|
|
2098
1634
|
}
|
|
2099
1635
|
|
|
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();
|
|
1636
|
+
updateActive(active) {
|
|
1637
|
+
this.active = active;
|
|
1638
|
+
if (active) {
|
|
1639
|
+
this.classList.add('active');
|
|
1640
|
+
} else {
|
|
1641
|
+
this.classList.remove('active');
|
|
2112
1642
|
}
|
|
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
1643
|
}
|
|
2152
1644
|
|
|
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
|
-
}
|
|
1645
|
+
attachTo() {
|
|
1646
|
+
// no-op: menu owns state in the distributed architecture
|
|
2192
1647
|
}
|
|
2193
1648
|
|
|
2194
1649
|
/**
|
|
2195
|
-
* Handles click events on the menu option
|
|
2196
|
-
* This function dispatches a click event and updates selection if the option is not disabled.
|
|
1650
|
+
* Handles click events on the menu option.
|
|
2197
1651
|
* @private
|
|
2198
1652
|
*/
|
|
2199
1653
|
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
1654
|
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 });
|
|
1655
|
+
// Pure event emitter: the parent menu owns selection state and will
|
|
1656
|
+
// update `selected` via setSelected(). Toggling here desyncs the option
|
|
1657
|
+
// UI from auro-menu.optionSelected (e.g. single-select re-click on the
|
|
1658
|
+
// already-selected option would flip the option off while the menu keeps it on).
|
|
1659
|
+
this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
|
|
1660
|
+
bubbles: true,
|
|
1661
|
+
cancelable: false,
|
|
1662
|
+
composed: true,
|
|
1663
|
+
detail: this
|
|
1664
|
+
}));
|
|
2226
1665
|
}
|
|
2227
1666
|
}
|
|
2228
1667
|
|
|
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
1668
|
/**
|
|
2244
1669
|
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
2245
1670
|
*
|
|
@@ -2279,8 +1704,8 @@ class AuroMenuOption extends AuroElement {
|
|
|
2279
1704
|
return u$1`
|
|
2280
1705
|
<div class="${classes}">
|
|
2281
1706
|
${this.selected && !this.noCheckmark
|
|
2282
|
-
|
|
2283
|
-
|
|
1707
|
+
? this.generateIconHtml(checkmarkIcon.svg)
|
|
1708
|
+
: undefined}
|
|
2284
1709
|
<slot></slot>
|
|
2285
1710
|
</div>
|
|
2286
1711
|
`;
|