@aurodesignsystem-dev/auro-formkit 0.0.0-pr1498.0 → 0.0.0-pr1499.1
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 +3 -7
- package/components/combobox/demo/customize.min.js +1703 -1461
- package/components/combobox/demo/getting-started.min.js +1703 -1461
- package/components/combobox/demo/index.min.js +1703 -1461
- package/components/combobox/dist/auro-combobox.d.ts +0 -5
- package/components/combobox/dist/index.js +162 -495
- package/components/combobox/dist/registered.js +162 -495
- package/components/counter/demo/customize.min.js +19 -18
- package/components/counter/demo/index.min.js +19 -18
- package/components/counter/dist/index.js +160 -5811
- package/components/counter/dist/registered.js +187 -5442
- package/components/datepicker/demo/customize.md +477 -384
- package/components/datepicker/demo/customize.min.js +99 -171
- package/components/datepicker/demo/index.md +0 -1
- package/components/datepicker/demo/index.min.js +99 -171
- package/components/datepicker/dist/index.js +99 -171
- package/components/datepicker/dist/registered.js +99 -171
- package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -2
- package/components/dropdown/demo/customize.min.js +17 -16
- package/components/dropdown/demo/getting-started.min.js +17 -16
- package/components/dropdown/demo/index.min.js +17 -16
- package/components/dropdown/dist/auro-dropdown.d.ts +2 -1
- package/components/dropdown/dist/index.js +17 -16
- package/components/dropdown/dist/registered.js +17 -16
- package/components/form/demo/customize.min.js +8494 -8428
- package/components/form/demo/getting-started.min.js +8494 -8428
- package/components/form/demo/index.min.js +8494 -8428
- package/components/form/demo/registerDemoDeps.min.js +8518 -8452
- package/components/input/demo/customize.md +539 -472
- package/components/input/demo/customize.min.js +61 -136
- package/components/input/demo/getting-started.min.js +61 -136
- package/components/input/demo/index.min.js +61 -136
- package/components/input/dist/base-input.d.ts +0 -16
- package/components/input/dist/index.js +61 -136
- package/components/input/dist/registered.js +61 -136
- package/components/menu/demo/api.md +45 -41
- package/components/menu/demo/customize.md +28 -0
- package/components/menu/demo/index.min.js +1358 -783
- package/components/menu/dist/auro-menu.context.d.ts +238 -0
- package/components/menu/dist/auro-menu.d.ts +110 -95
- package/components/menu/dist/auro-menuoption.d.ts +138 -32
- package/components/menu/dist/index.js +1312 -757
- package/components/menu/dist/registered.js +1312 -769
- 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 +3 -7
- package/components/select/demo/customize.min.js +1634 -1089
- package/components/select/demo/getting-started.min.js +1634 -1089
- package/components/select/demo/index.min.js +1634 -1089
- package/components/select/dist/index.js +31 -61
- package/components/select/dist/registered.js +31 -61
- package/custom-elements.json +1024 -378
- package/package.json +1 -1
- package/components/select/dist/selectUtils.d.ts +0 -12
|
@@ -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$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$6=Symbol(),o$5=new WeakMap;let n$4 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$6)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$4("string"==typeof t?t:t+"",void 0,s$6),i$6=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$4(o,t,s$6)},S$1=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
|
|
7
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$5,defineProperty:e$4,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$3}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$3={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$5(t,s),b$1={attribute:true,type:String,converter:u$3,reflect:false,useDefault:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$2 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$4(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$3(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$3).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$3;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$2)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$2.elementStyles=[],y$2.shadowRootOptions={mode:"open"},y$2[d$1("elementProperties")]=new Map,y$2[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$2}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
|
|
13
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$4=t=>t,s$5=t$1.trustedTypes,e$3=s$5?s$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$2="?"+o$3,r=`<${n$2}>`,l$1=document,c=()=>l$1.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$2=Array.isArray,d=t=>u$2(t)||"function"==typeof t?.[Symbol.iterator],f$1="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$1=/-->/g,m$1=/>/g,p$1=RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$1=/'/g,$=/"/g,y$1=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$1.createTreeWalker(l$1,129);function V(t,i){if(!u$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$3?e$3.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_$1:void 0!==u[1]?c=m$1:void 0!==u[2]?(y$1.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$1):void 0!==u[3]&&(c=p$1):c===p$1?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$1:'"'===u[3]?$:g$1):c===$||c===g$1?c=p$1:c===_$1||c===m$1?c=v:(c=p$1,n=void 0);const x=c===p$1&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$1:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$1.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$5?s$5.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$2)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l$1.createElement("template");return s.innerHTML=t,s}}function M$1(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M$1(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$1).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k$1(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}let k$1 = class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M$1(this,t,i),a$1(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$4(t).nextSibling;i$4(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$1(this,t,i,0),o=!a$1(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M$1(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$1(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}let z$1 = class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$1(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M$1(this,t);}}const B=t$1.litHtmlPolyfillSupport;B?.(S,k$1),(t$1.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k$1(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
20
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$4=globalThis;let i$3 = class i extends y$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$3._$litElement$=true,i$3["finalized"]=true,s$4.litElementHydrateSupport?.({LitElement:i$3});const o$2=s$4.litElementPolyfillSupport;o$2?.({LitElement:i$3});(s$4.litElementVersions??=[]).push("4.2.2");
|
|
26
26
|
|
|
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)}`;
|
|
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)}`;
|
|
28
28
|
|
|
29
|
-
var colorCss$1 = i$
|
|
29
|
+
var colorCss$1 = i$6`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
30
30
|
|
|
31
|
-
var tokensCss = i$
|
|
31
|
+
var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
32
32
|
|
|
33
|
-
class AuroElement extends i$
|
|
33
|
+
class AuroElement extends i$3 {
|
|
34
34
|
static get properties() {
|
|
35
35
|
return {
|
|
36
36
|
|
|
@@ -134,6 +134,753 @@ class AuroElement extends i$2 {
|
|
|
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
|
+
|
|
137
884
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
138
885
|
// See LICENSE in the project root for license information.
|
|
139
886
|
|
|
@@ -221,18 +968,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
221
968
|
// See LICENSE in the project root for license information.
|
|
222
969
|
|
|
223
970
|
|
|
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
|
-
|
|
236
971
|
/**
|
|
237
972
|
* Helper method to dispatch custom events.
|
|
238
973
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -266,7 +1001,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
266
1001
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
267
1002
|
*/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}});
|
|
268
1003
|
|
|
269
|
-
/* eslint-disable no-underscore-dangle
|
|
1004
|
+
/* eslint-disable no-underscore-dangle */
|
|
270
1005
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
271
1006
|
// See LICENSE in the project root for license information.
|
|
272
1007
|
|
|
@@ -280,12 +1015,16 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
280
1015
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
281
1016
|
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
282
1017
|
* @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`.
|
|
283
1019
|
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
284
1020
|
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
285
1021
|
* @slot loadingText - Text to show while loading attribute is set
|
|
286
1022
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
287
1023
|
* @slot - Slot for insertion of menu options.
|
|
288
1024
|
*/
|
|
1025
|
+
|
|
1026
|
+
/* eslint-disable max-lines */
|
|
1027
|
+
|
|
289
1028
|
class AuroMenu extends AuroElement {
|
|
290
1029
|
|
|
291
1030
|
constructor() {
|
|
@@ -303,8 +1042,6 @@ class AuroMenu extends AuroElement {
|
|
|
303
1042
|
*/
|
|
304
1043
|
this.size = "sm";
|
|
305
1044
|
|
|
306
|
-
// Value of the selected options
|
|
307
|
-
this.value = undefined;
|
|
308
1045
|
// Currently selected option
|
|
309
1046
|
this.optionSelected = undefined;
|
|
310
1047
|
// String used for highlighting/filtering
|
|
@@ -317,24 +1054,13 @@ class AuroMenu extends AuroElement {
|
|
|
317
1054
|
this.loading = false;
|
|
318
1055
|
// Multi-select mode
|
|
319
1056
|
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;
|
|
320
1061
|
|
|
321
1062
|
// Event Bindings
|
|
322
1063
|
|
|
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
|
-
|
|
338
1064
|
/**
|
|
339
1065
|
* @private
|
|
340
1066
|
*/
|
|
@@ -361,6 +1087,14 @@ class AuroMenu extends AuroElement {
|
|
|
361
1087
|
return {
|
|
362
1088
|
...super.properties,
|
|
363
1089
|
|
|
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
|
+
|
|
364
1098
|
/**
|
|
365
1099
|
* When true, the entire menu and all options are disabled.
|
|
366
1100
|
*/
|
|
@@ -369,6 +1103,20 @@ class AuroMenu extends AuroElement {
|
|
|
369
1103
|
reflect: true
|
|
370
1104
|
},
|
|
371
1105
|
|
|
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
|
+
|
|
372
1120
|
/**
|
|
373
1121
|
* Indent level for submenus.
|
|
374
1122
|
* @private
|
|
@@ -429,6 +1177,44 @@ class AuroMenu extends AuroElement {
|
|
|
429
1177
|
type: Object
|
|
430
1178
|
},
|
|
431
1179
|
|
|
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
|
+
|
|
432
1218
|
/**
|
|
433
1219
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
434
1220
|
*/
|
|
@@ -449,23 +1235,20 @@ class AuroMenu extends AuroElement {
|
|
|
449
1235
|
}
|
|
450
1236
|
|
|
451
1237
|
/**
|
|
452
|
-
*
|
|
453
|
-
* @
|
|
454
|
-
*
|
|
455
|
-
* @example
|
|
456
|
-
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
457
|
-
*
|
|
1238
|
+
* @readonly
|
|
1239
|
+
* @returns {string} - Returns the label of the currently selected option(s).
|
|
458
1240
|
*/
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
}
|
|
1241
|
+
get currentLabel() {
|
|
1242
|
+
return this.menuService.currentLabel;
|
|
1243
|
+
};
|
|
462
1244
|
|
|
463
1245
|
/**
|
|
464
1246
|
* @readonly
|
|
465
1247
|
* @returns {Array<HTMLElement>} - Returns the array of available menu options.
|
|
1248
|
+
* @deprecated Use `options` property instead.
|
|
466
1249
|
*/
|
|
467
|
-
get
|
|
468
|
-
return this.
|
|
1250
|
+
get items() {
|
|
1251
|
+
return this.options;
|
|
469
1252
|
}
|
|
470
1253
|
|
|
471
1254
|
/**
|
|
@@ -476,101 +1259,145 @@ class AuroMenu extends AuroElement {
|
|
|
476
1259
|
}
|
|
477
1260
|
|
|
478
1261
|
/**
|
|
479
|
-
* @param {number} value - Sets the index of the currently active option.
|
|
1262
|
+
* @param {number} value - Sets the index of the currently active option.
|
|
1263
|
+
*/
|
|
1264
|
+
set index(value) {
|
|
1265
|
+
this.menuService.setHighlightedIndex(value);
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
/**
|
|
1269
|
+
* This will register this element with the browser.
|
|
1270
|
+
* @param {string} [name="auro-menu"] - The name of the element that you want to register.
|
|
1271
|
+
*
|
|
1272
|
+
* @example
|
|
1273
|
+
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
1274
|
+
*
|
|
1275
|
+
*/
|
|
1276
|
+
static register(name = "auro-menu") {
|
|
1277
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
/**
|
|
1281
|
+
* Formatted value based on `multiSelect` state.
|
|
1282
|
+
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
1283
|
+
* @private
|
|
1284
|
+
* @returns {String|Array<String>}
|
|
1285
|
+
*/
|
|
1286
|
+
get formattedValue() {
|
|
1287
|
+
return this.menuService.currentValue;
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
/**
|
|
1291
|
+
* Gets the current property values for the menu service.
|
|
1292
|
+
* @private
|
|
1293
|
+
* @returns {Object}
|
|
480
1294
|
*/
|
|
481
|
-
|
|
482
|
-
|
|
1295
|
+
get propertyValues() {
|
|
1296
|
+
return {
|
|
1297
|
+
size: this.size,
|
|
1298
|
+
shape: this.shape,
|
|
1299
|
+
noCheckmark: this.nocheckmark,
|
|
1300
|
+
disabled: this.disabled
|
|
1301
|
+
};
|
|
483
1302
|
}
|
|
484
1303
|
|
|
485
1304
|
/**
|
|
486
|
-
*
|
|
487
|
-
*
|
|
1305
|
+
* Provides the menu context to child components.
|
|
1306
|
+
* Initializes the MenuService and subscribes to menu changes.
|
|
1307
|
+
* @protected
|
|
488
1308
|
*/
|
|
489
|
-
|
|
490
|
-
if (
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
return
|
|
1309
|
+
provideContext() {
|
|
1310
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
1311
|
+
this.rootMenu = false;
|
|
1312
|
+
this.menuService = this.parentElement.menuService;
|
|
1313
|
+
this._contextProvider = this.parentElement._contextProvider;
|
|
1314
|
+
return;
|
|
495
1315
|
}
|
|
496
|
-
|
|
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
|
+
});
|
|
497
1324
|
}
|
|
498
1325
|
|
|
499
1326
|
/**
|
|
500
|
-
*
|
|
501
|
-
* @
|
|
1327
|
+
* Updates the currently active option in the menu.
|
|
1328
|
+
* @param {HTMLElement} option - The option to set as active.
|
|
502
1329
|
*/
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
return opts.length > 0 ? opts[0] : null;
|
|
1330
|
+
updateActiveOption(option) {
|
|
1331
|
+
this.menuService.setHighlightedOption(option);
|
|
506
1332
|
}
|
|
507
1333
|
|
|
508
1334
|
/**
|
|
509
|
-
*
|
|
510
|
-
* @
|
|
1335
|
+
* Sets the internal value and manages update state.
|
|
1336
|
+
* @param {String|Array<String>} value - The value to set.
|
|
1337
|
+
* @protected
|
|
511
1338
|
*/
|
|
512
|
-
|
|
513
|
-
if (
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
1339
|
+
setInternalValue(value) {
|
|
1340
|
+
if (this.value !== value) {
|
|
1341
|
+
this.internalUpdateInProgress = true;
|
|
1342
|
+
this.value = value;
|
|
1343
|
+
|
|
1344
|
+
setTimeout(() => {
|
|
1345
|
+
this.internalUpdateInProgress = false;
|
|
1346
|
+
});
|
|
518
1347
|
}
|
|
519
|
-
return this.optionSelected.textContent || '';
|
|
520
1348
|
}
|
|
521
1349
|
|
|
522
1350
|
/**
|
|
523
|
-
*
|
|
524
|
-
*
|
|
525
|
-
* @
|
|
526
|
-
* @returns {String|Array<String>}
|
|
1351
|
+
* Handles changes from the menu service and updates component state.
|
|
1352
|
+
* @param {Object} event - The event object from the menu service.
|
|
1353
|
+
* @protected
|
|
527
1354
|
*/
|
|
528
|
-
|
|
529
|
-
if (
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
if
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
return [String(this.value)];
|
|
1355
|
+
handleMenuChange(event) {
|
|
1356
|
+
if (event.type === 'valueChange') {
|
|
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);
|
|
540
1366
|
}
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
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;
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
if (event.type === 'optionsChange') {
|
|
1378
|
+
this.options = event.options;
|
|
1379
|
+
this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
|
|
1380
|
+
detail: {
|
|
1381
|
+
options: event.options
|
|
549
1382
|
}
|
|
550
|
-
}
|
|
551
|
-
return [this.value];
|
|
1383
|
+
}));
|
|
552
1384
|
}
|
|
553
|
-
return this.value;
|
|
554
1385
|
}
|
|
555
1386
|
|
|
556
1387
|
/**
|
|
557
|
-
*
|
|
558
|
-
* @
|
|
559
|
-
* @public
|
|
1388
|
+
* Gets the currently selected options.
|
|
1389
|
+
* @returns {Array<HTMLElement>}
|
|
560
1390
|
*/
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
(Array.isArray(value) && value.length === 0) ||
|
|
565
|
-
(typeof value === 'string' && value.trim() === '');
|
|
566
|
-
|
|
567
|
-
if (isEmpty) {
|
|
568
|
-
this.clearSelection();
|
|
569
|
-
return;
|
|
570
|
-
}
|
|
1391
|
+
get selectedOptions() {
|
|
1392
|
+
return this.menuService ? this.menuService.selectedOptions : [];
|
|
1393
|
+
}
|
|
571
1394
|
|
|
572
|
-
|
|
573
|
-
|
|
1395
|
+
/**
|
|
1396
|
+
* Gets the first selected option, or null if none.
|
|
1397
|
+
* @returns {HTMLElement|null}
|
|
1398
|
+
*/
|
|
1399
|
+
get selectedOption() {
|
|
1400
|
+
return this.menuService ? this.menuService.selectedOptions[0] : null;
|
|
574
1401
|
}
|
|
575
1402
|
|
|
576
1403
|
// Lifecycle Methods
|
|
@@ -578,7 +1405,9 @@ class AuroMenu extends AuroElement {
|
|
|
578
1405
|
connectedCallback() {
|
|
579
1406
|
super.connectedCallback();
|
|
580
1407
|
|
|
581
|
-
this.
|
|
1408
|
+
this.provideContext();
|
|
1409
|
+
|
|
1410
|
+
// this.addEventListener('keydown', this.handleKeyDown);
|
|
582
1411
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
583
1412
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
584
1413
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -586,7 +1415,7 @@ class AuroMenu extends AuroElement {
|
|
|
586
1415
|
}
|
|
587
1416
|
|
|
588
1417
|
disconnectedCallback() {
|
|
589
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
1418
|
+
// this.removeEventListener('keydown', this.handleKeyDown);
|
|
590
1419
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
591
1420
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
592
1421
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -601,114 +1430,25 @@ class AuroMenu extends AuroElement {
|
|
|
601
1430
|
this.initializeMenu();
|
|
602
1431
|
}
|
|
603
1432
|
|
|
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
|
-
}
|
|
614
1433
|
|
|
615
|
-
// eslint-disable-next-line complexity
|
|
616
1434
|
updated(changedProperties) {
|
|
617
1435
|
super.updated(changedProperties);
|
|
618
1436
|
|
|
619
|
-
//
|
|
620
|
-
//
|
|
621
|
-
//
|
|
622
|
-
//
|
|
623
|
-
//
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
// Reset selection if multiSelect mode changes
|
|
629
|
-
if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
|
|
630
|
-
this.clearSelection();
|
|
1437
|
+
// Apply value selection synchronously so that static-HTML fixtures
|
|
1438
|
+
// resolve within a single update cycle. The refactored selectByValue
|
|
1439
|
+
// no longer calls reset() first, so the destructive intermediate-event
|
|
1440
|
+
// cascade that originally required deferral is eliminated. If option
|
|
1441
|
+
// keys are not yet resolved (framework mount-order race), selectByValue
|
|
1442
|
+
// queues a bounded retry automatically via queuePendingValue.
|
|
1443
|
+
if (changedProperties.has('value') && !this.internalUpdateInProgress) {
|
|
1444
|
+
this.menuService.selectByValue(this.value);
|
|
631
1445
|
}
|
|
632
1446
|
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
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
|
-
}
|
|
1447
|
+
// Handle loading state changes
|
|
1448
|
+
if (changedProperties.has('loading')) {
|
|
1449
|
+
this.setLoadingState(this.loading);
|
|
709
1450
|
}
|
|
710
1451
|
|
|
711
|
-
// Process all other UI updates
|
|
712
1452
|
if (changedProperties.has('multiSelect') && this.rootMenu) {
|
|
713
1453
|
if (this.multiSelect) {
|
|
714
1454
|
this.setAttribute('aria-multiselectable', 'true');
|
|
@@ -716,129 +1456,30 @@ class AuroMenu extends AuroElement {
|
|
|
716
1456
|
this.removeAttribute('aria-multiselectable');
|
|
717
1457
|
}
|
|
718
1458
|
}
|
|
719
|
-
|
|
720
|
-
this.updateItemsState(changedProperties);
|
|
721
1459
|
}
|
|
722
1460
|
|
|
723
1461
|
/**
|
|
724
|
-
*
|
|
1462
|
+
* Sets an attribute that matches the default tag name if the tag name is not the default.
|
|
1463
|
+
* @param {string} tagName - The tag name to set as an attribute.
|
|
725
1464
|
* @private
|
|
726
|
-
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
727
1465
|
*/
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
this.setAttribute("aria-busy", this.loading);
|
|
732
|
-
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
733
|
-
loading: this.loading,
|
|
734
|
-
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
735
|
-
});
|
|
736
|
-
}
|
|
737
|
-
|
|
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');
|
|
1466
|
+
setTagAttribute(tagName) {
|
|
1467
|
+
if (this.tagName.toLowerCase() !== tagName) {
|
|
1468
|
+
this.setAttribute(tagName, true);
|
|
776
1469
|
}
|
|
1470
|
+
}
|
|
777
1471
|
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
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
|
-
}
|
|
1472
|
+
/**
|
|
1473
|
+
* Sets the loading state and dispatches a loading change event.
|
|
1474
|
+
* @param {boolean} isLoading - Whether the menu is loading.
|
|
1475
|
+
* @protected
|
|
1476
|
+
*/
|
|
1477
|
+
setLoadingState(isLoading) {
|
|
1478
|
+
this.setAttribute("aria-busy", isLoading);
|
|
1479
|
+
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
1480
|
+
loading: isLoading,
|
|
1481
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
840
1482
|
});
|
|
841
|
-
|
|
842
1483
|
}
|
|
843
1484
|
|
|
844
1485
|
// Init Methods
|
|
@@ -848,7 +1489,6 @@ class AuroMenu extends AuroElement {
|
|
|
848
1489
|
* @private
|
|
849
1490
|
*/
|
|
850
1491
|
initializeMenu() {
|
|
851
|
-
this.initItems();
|
|
852
1492
|
if (this.rootMenu) {
|
|
853
1493
|
this.setAttribute('role', 'listbox');
|
|
854
1494
|
this.setAttribute('root', '');
|
|
@@ -858,117 +1498,15 @@ class AuroMenu extends AuroElement {
|
|
|
858
1498
|
}
|
|
859
1499
|
}
|
|
860
1500
|
|
|
861
|
-
// Must run for nested menus too — sets level, role="group", and aria-label="submenu" based on parent.
|
|
862
1501
|
this.handleNestedMenus(this);
|
|
863
1502
|
}
|
|
864
1503
|
|
|
865
1504
|
/**
|
|
866
|
-
*
|
|
867
|
-
* @
|
|
868
|
-
*/
|
|
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.
|
|
1505
|
+
* Selects the currently highlighted option.
|
|
1506
|
+
* @protected
|
|
937
1507
|
*/
|
|
938
|
-
|
|
939
|
-
|
|
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.
|
|
1508
|
+
makeSelection() {
|
|
1509
|
+
this.menuService.selectHighlightedOption();
|
|
972
1510
|
}
|
|
973
1511
|
|
|
974
1512
|
/**
|
|
@@ -987,18 +1525,7 @@ class AuroMenu extends AuroElement {
|
|
|
987
1525
|
* @public
|
|
988
1526
|
*/
|
|
989
1527
|
reset() {
|
|
990
|
-
|
|
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
|
-
]));
|
|
1528
|
+
this.menuService.reset();
|
|
1002
1529
|
|
|
1003
1530
|
// Dispatch reset event
|
|
1004
1531
|
dispatchMenuEvent(this, 'auroMenu-selectValueReset');
|
|
@@ -1010,239 +1537,44 @@ class AuroMenu extends AuroElement {
|
|
|
1010
1537
|
* @param {HTMLElement} menu - Root menu element.
|
|
1011
1538
|
*/
|
|
1012
1539
|
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
|
-
|
|
1021
1540
|
menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
|
|
1022
1541
|
|
|
1023
|
-
if (menu.level > 0) {
|
|
1024
|
-
menu.setAttribute('role', 'group');
|
|
1025
|
-
menu.removeAttribute("root");
|
|
1026
|
-
if (!menu.hasAttribute('aria-label')) {
|
|
1027
|
-
menu.setAttribute('aria-label', 'submenu');
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
|
-
|
|
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);
|
|
1542
|
+
if (menu.level > 0) {
|
|
1543
|
+
menu.setAttribute('role', 'group');
|
|
1544
|
+
menu.removeAttribute("root");
|
|
1545
|
+
if (!menu.hasAttribute('aria-label')) {
|
|
1546
|
+
menu.setAttribute('aria-label', 'submenu');
|
|
1547
|
+
}
|
|
1177
1548
|
}
|
|
1549
|
+
|
|
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
|
+
});
|
|
1178
1555
|
}
|
|
1179
1556
|
|
|
1180
1557
|
/**
|
|
1181
|
-
* Navigates
|
|
1182
|
-
* @param {
|
|
1558
|
+
* Navigates the menu options in the specified direction.
|
|
1559
|
+
* @param {'up'|'down'} direction - The direction to navigate.
|
|
1560
|
+
* @protected
|
|
1183
1561
|
*/
|
|
1184
1562
|
navigateOptions(direction) {
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
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);
|
|
1563
|
+
if (direction === 'up') {
|
|
1564
|
+
this.menuService.highlightPrevious();
|
|
1565
|
+
} else if (direction === 'down') {
|
|
1566
|
+
this.menuService.highlightNext();
|
|
1219
1567
|
}
|
|
1220
1568
|
}
|
|
1221
1569
|
|
|
1222
1570
|
/**
|
|
1223
|
-
*
|
|
1224
|
-
*
|
|
1225
|
-
* @param {number|HTMLElement} indexOrOption - Index of the option or the option element to make active.
|
|
1571
|
+
* Handles slot change events.
|
|
1572
|
+
* @private
|
|
1226
1573
|
*/
|
|
1227
|
-
|
|
1228
|
-
|
|
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;
|
|
1574
|
+
handleSlotChange() {
|
|
1575
|
+
if (this.rootMenu) {
|
|
1576
|
+
this.initializeMenu();
|
|
1238
1577
|
}
|
|
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]);
|
|
1246
1578
|
}
|
|
1247
1579
|
|
|
1248
1580
|
/**
|
|
@@ -1252,8 +1584,8 @@ class AuroMenu extends AuroElement {
|
|
|
1252
1584
|
*/
|
|
1253
1585
|
handleCustomEvent(option) {
|
|
1254
1586
|
const eventName = option.getAttribute('event');
|
|
1255
|
-
dispatchMenuEvent(this, eventName
|
|
1256
|
-
dispatchMenuEvent(this, 'auroMenu-customEventFired'
|
|
1587
|
+
dispatchMenuEvent(this, eventName);
|
|
1588
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired');
|
|
1257
1589
|
}
|
|
1258
1590
|
|
|
1259
1591
|
/**
|
|
@@ -1261,33 +1593,14 @@ class AuroMenu extends AuroElement {
|
|
|
1261
1593
|
* @param {any} source - The source that triggers this event.
|
|
1262
1594
|
* @private
|
|
1263
1595
|
*/
|
|
1264
|
-
notifySelectionChange(
|
|
1265
|
-
dispatchMenuEvent(this, 'auroMenu-selectedOption', {
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
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;
|
|
1596
|
+
notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
|
|
1597
|
+
dispatchMenuEvent(this, 'auroMenu-selectedOption', {
|
|
1598
|
+
value,
|
|
1599
|
+
stringValue,
|
|
1600
|
+
keys,
|
|
1601
|
+
options,
|
|
1602
|
+
reason
|
|
1603
|
+
});
|
|
1291
1604
|
}
|
|
1292
1605
|
|
|
1293
1606
|
/**
|
|
@@ -1302,6 +1615,7 @@ class AuroMenu extends AuroElement {
|
|
|
1302
1615
|
}
|
|
1303
1616
|
|
|
1304
1617
|
if (this.multiSelect) {
|
|
1618
|
+
// In multi-select mode, check if the option is in the selected array
|
|
1305
1619
|
return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
|
|
1306
1620
|
}
|
|
1307
1621
|
|
|
@@ -1366,9 +1680,9 @@ class AuroMenu extends AuroElement {
|
|
|
1366
1680
|
*/
|
|
1367
1681
|
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);
|
|
1368
1682
|
|
|
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}`;
|
|
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}`;
|
|
1370
1684
|
|
|
1371
|
-
var colorCss = i$
|
|
1685
|
+
var colorCss = i$6`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
|
|
1372
1686
|
|
|
1373
1687
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1374
1688
|
// See LICENSE in the project root for license information.
|
|
@@ -1416,10 +1730,10 @@ class AuroDependencyVersioning {
|
|
|
1416
1730
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1417
1731
|
*/const o=o=>o??A;
|
|
1418
1732
|
|
|
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$
|
|
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$
|
|
1421
|
-
`;var M=i$
|
|
1422
|
-
`;var _=i$
|
|
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$3{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$6`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
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$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
1735
|
+
`;var M=i$6`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
1736
|
+
`;var _=i$6`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
1423
1737
|
`;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`
|
|
1424
1738
|
<div class="componentWrapper">
|
|
1425
1739
|
<div
|
|
@@ -1457,12 +1771,37 @@ let menuOptionIdCounter = 0;
|
|
|
1457
1771
|
* @slot default - The default slot for the menu option text.
|
|
1458
1772
|
*
|
|
1459
1773
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
1460
|
-
* @event auroMenuOption-click - Notifies that this option has been clicked.
|
|
1461
1774
|
*/
|
|
1462
1775
|
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
|
+
|
|
1463
1800
|
constructor() {
|
|
1464
1801
|
super();
|
|
1465
1802
|
|
|
1803
|
+
this.bindEvents();
|
|
1804
|
+
|
|
1466
1805
|
/**
|
|
1467
1806
|
* @private
|
|
1468
1807
|
*/
|
|
@@ -1487,57 +1826,109 @@ class AuroMenuOption extends AuroElement {
|
|
|
1487
1826
|
/**
|
|
1488
1827
|
* @private
|
|
1489
1828
|
*/
|
|
1490
|
-
this.
|
|
1829
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1830
|
+
|
|
1831
|
+
// Initialize context-related properties
|
|
1832
|
+
this.menuService = null;
|
|
1833
|
+
this.unsubscribe = null;
|
|
1491
1834
|
|
|
1492
1835
|
/**
|
|
1493
1836
|
* @private
|
|
1494
1837
|
*/
|
|
1495
|
-
this.
|
|
1496
|
-
|
|
1497
|
-
this.addEventListener('click', this.handleClick.bind(this));
|
|
1838
|
+
this.handleMenuChange = this.handleMenuChange.bind(this);
|
|
1498
1839
|
}
|
|
1499
1840
|
|
|
1500
1841
|
static get properties() {
|
|
1501
1842
|
return {
|
|
1502
1843
|
...super.properties,
|
|
1503
|
-
|
|
1844
|
+
|
|
1845
|
+
/**
|
|
1846
|
+
* When true, disables the menu option.
|
|
1847
|
+
*/
|
|
1848
|
+
disabled: {
|
|
1504
1849
|
type: Boolean,
|
|
1505
1850
|
reflect: true
|
|
1506
1851
|
},
|
|
1507
|
-
|
|
1508
|
-
|
|
1852
|
+
|
|
1853
|
+
/**
|
|
1854
|
+
* @private
|
|
1855
|
+
*/
|
|
1856
|
+
event: {
|
|
1857
|
+
type: String,
|
|
1509
1858
|
reflect: true
|
|
1510
1859
|
},
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1860
|
+
|
|
1861
|
+
/**
|
|
1862
|
+
* @private
|
|
1863
|
+
*/
|
|
1864
|
+
layout: {
|
|
1865
|
+
type: String
|
|
1514
1866
|
},
|
|
1515
|
-
|
|
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: {
|
|
1516
1872
|
type: String,
|
|
1517
1873
|
reflect: true
|
|
1518
1874
|
},
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1875
|
+
|
|
1876
|
+
/**
|
|
1877
|
+
* @private
|
|
1878
|
+
*/
|
|
1879
|
+
menuService: {
|
|
1880
|
+
type: Object,
|
|
1881
|
+
state: true
|
|
1522
1882
|
},
|
|
1523
1883
|
|
|
1524
1884
|
/**
|
|
1525
1885
|
* @private
|
|
1526
1886
|
*/
|
|
1527
|
-
|
|
1887
|
+
matchWord: {
|
|
1528
1888
|
type: String,
|
|
1889
|
+
state: true
|
|
1890
|
+
},
|
|
1891
|
+
|
|
1892
|
+
/**
|
|
1893
|
+
* @private
|
|
1894
|
+
*/
|
|
1895
|
+
noCheckmark: {
|
|
1896
|
+
type: Boolean,
|
|
1529
1897
|
reflect: true
|
|
1530
1898
|
},
|
|
1531
1899
|
|
|
1532
1900
|
/**
|
|
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.
|
|
1901
|
+
* When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
|
|
1535
1902
|
*/
|
|
1536
1903
|
noMatch: {
|
|
1537
1904
|
type: Boolean,
|
|
1538
1905
|
reflect: true,
|
|
1539
1906
|
attribute: 'nomatch'
|
|
1540
1907
|
},
|
|
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
|
+
},
|
|
1541
1932
|
};
|
|
1542
1933
|
}
|
|
1543
1934
|
|
|
@@ -1549,48 +1940,41 @@ class AuroMenuOption extends AuroElement {
|
|
|
1549
1940
|
];
|
|
1550
1941
|
}
|
|
1551
1942
|
|
|
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
|
-
|
|
1574
1943
|
connectedCallback() {
|
|
1575
1944
|
super.connectedCallback();
|
|
1576
1945
|
|
|
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.
|
|
1577
1948
|
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
|
+
}
|
|
1578
1971
|
}
|
|
1579
1972
|
|
|
1580
1973
|
firstUpdated() {
|
|
1974
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
1581
1975
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
1582
1976
|
|
|
1583
|
-
//
|
|
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
|
-
|
|
1977
|
+
// Generate unique ID if not already set (required for aria-activedescendant)
|
|
1594
1978
|
if (!this.id) {
|
|
1595
1979
|
menuOptionIdCounter += 1;
|
|
1596
1980
|
this.id = `menuoption-${menuOptionIdCounter}`;
|
|
@@ -1612,8 +1996,16 @@ class AuroMenuOption extends AuroElement {
|
|
|
1612
1996
|
updated(changedProperties) {
|
|
1613
1997
|
super.updated(changedProperties);
|
|
1614
1998
|
|
|
1999
|
+
// Update aria-selected attribute if selected changed
|
|
1615
2000
|
if (changedProperties.has('selected')) {
|
|
2001
|
+
|
|
2002
|
+
// Update aria-selected attribute
|
|
1616
2003
|
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
|
+
}
|
|
1617
2009
|
}
|
|
1618
2010
|
|
|
1619
2011
|
if (changedProperties.has('disabled')) {
|
|
@@ -1623,48 +2015,231 @@ class AuroMenuOption extends AuroElement {
|
|
|
1623
2015
|
this.removeAttribute('aria-disabled');
|
|
1624
2016
|
}
|
|
1625
2017
|
}
|
|
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
|
+
}
|
|
1626
2045
|
}
|
|
1627
2046
|
|
|
1628
|
-
|
|
1629
|
-
|
|
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));
|
|
1630
2054
|
}
|
|
1631
2055
|
|
|
1632
|
-
|
|
1633
|
-
|
|
2056
|
+
/**
|
|
2057
|
+
* Attaches this menu option to a menu service and subscribes to its events.
|
|
2058
|
+
* This method enables the option to participate in menu selection and highlighting logic.
|
|
2059
|
+
* @param {Object} service - The menu service instance to attach to.
|
|
2060
|
+
*/
|
|
2061
|
+
attachTo(service) {
|
|
2062
|
+
if (!service) {
|
|
2063
|
+
return;
|
|
2064
|
+
}
|
|
2065
|
+
this.menuService = service;
|
|
2066
|
+
this.menuService.addMenuOption(this);
|
|
2067
|
+
this.menuService.subscribe(this.handleMenuChange);
|
|
1634
2068
|
}
|
|
1635
2069
|
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
2070
|
+
/**
|
|
2071
|
+
* Handles changes from the menu service and updates the option's state.
|
|
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
|
+
}
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
/**
|
|
2101
|
+
* Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
|
|
2102
|
+
* This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
|
|
2103
|
+
* @param {boolean} isSelected - Whether the option should be marked as selected.
|
|
2104
|
+
*/
|
|
2105
|
+
setInternalSelected(isSelected) {
|
|
2106
|
+
this.internalUpdateInProgress = true;
|
|
2107
|
+
this.selected = isSelected;
|
|
2108
|
+
|
|
2109
|
+
// Fire custom event if selected
|
|
2110
|
+
if (isSelected) {
|
|
2111
|
+
this.handleCustomEvent();
|
|
1642
2112
|
}
|
|
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');
|
|
1643
2151
|
}
|
|
1644
2152
|
|
|
1645
|
-
|
|
1646
|
-
|
|
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
|
+
}
|
|
1647
2192
|
}
|
|
1648
2193
|
|
|
1649
2194
|
/**
|
|
1650
|
-
* Handles click events on the menu option.
|
|
2195
|
+
* Handles click events on the menu option, toggling its selected state.
|
|
2196
|
+
* This function dispatches a click event and updates selection if the option is not disabled.
|
|
1651
2197
|
* @private
|
|
1652
2198
|
*/
|
|
1653
2199
|
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() {
|
|
1654
2212
|
if (!this.disabled) {
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
2213
|
+
this.menuService.setHighlightedOption(this);
|
|
2214
|
+
}
|
|
2215
|
+
}
|
|
2216
|
+
|
|
2217
|
+
/**
|
|
2218
|
+
* Dispatches custom events defined for this menu option.
|
|
2219
|
+
* This function notifies listeners when a custom event is triggered by the option.
|
|
2220
|
+
* @private
|
|
2221
|
+
*/
|
|
2222
|
+
handleCustomEvent() {
|
|
2223
|
+
if (this.event) {
|
|
2224
|
+
dispatchMenuEvent(this, this.event, { option: this });
|
|
2225
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
|
|
1665
2226
|
}
|
|
1666
2227
|
}
|
|
1667
2228
|
|
|
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
|
+
|
|
1668
2243
|
/**
|
|
1669
2244
|
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
1670
2245
|
*
|
|
@@ -1704,8 +2279,8 @@ class AuroMenuOption extends AuroElement {
|
|
|
1704
2279
|
return u$1`
|
|
1705
2280
|
<div class="${classes}">
|
|
1706
2281
|
${this.selected && !this.noCheckmark
|
|
1707
|
-
|
|
1708
|
-
|
|
2282
|
+
? this.generateIconHtml(checkmarkIcon.svg)
|
|
2283
|
+
: undefined}
|
|
1709
2284
|
<slot></slot>
|
|
1710
2285
|
</div>
|
|
1711
2286
|
`;
|