@aurodesignsystem/auro-formkit 2.0.0-beta.10 → 2.0.0-beta.11
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/.turbo/cache/0c8124a987c1cc05-meta.json +1 -1
- package/.turbo/cache/0cd512cdf86242c7-meta.json +1 -0
- package/.turbo/cache/{ff4dbfffc29255ab.tar.zst → 0cd512cdf86242c7.tar.zst} +0 -0
- package/.turbo/cache/123c83cd8727dff3-meta.json +1 -0
- package/.turbo/cache/123c83cd8727dff3.tar.zst +0 -0
- package/.turbo/cache/18129dba20f51b6b-meta.json +1 -1
- package/.turbo/cache/253e861af7025ed4-meta.json +1 -0
- package/.turbo/cache/253e861af7025ed4.tar.zst +0 -0
- package/.turbo/cache/2787020e69f50af2-meta.json +1 -1
- package/.turbo/cache/2a5295c8f561ed84-meta.json +1 -0
- package/.turbo/cache/2c0d681132c153dd-meta.json +1 -1
- package/.turbo/cache/4006a206400d5c7b-meta.json +1 -1
- package/.turbo/cache/492dda333b8d15f1-meta.json +1 -1
- package/.turbo/cache/4e3619d9dfc86809-meta.json +1 -0
- package/.turbo/cache/4e3619d9dfc86809.tar.zst +0 -0
- package/.turbo/cache/50993de942ec15a9-meta.json +1 -1
- package/.turbo/cache/50cd7dcfc9f820c5-meta.json +1 -0
- package/.turbo/cache/50cd7dcfc9f820c5.tar.zst +0 -0
- package/.turbo/cache/51eaa58d5c167de8-meta.json +1 -1
- package/.turbo/cache/5a0d3e26da304c62-meta.json +1 -0
- package/.turbo/cache/5a0d3e26da304c62.tar.zst +0 -0
- package/.turbo/cache/5c960af698582835-meta.json +1 -0
- package/.turbo/cache/5c960af698582835.tar.zst +0 -0
- package/.turbo/cache/5dbbb71dffc3f542-meta.json +1 -0
- package/.turbo/cache/5dbbb71dffc3f542.tar.zst +0 -0
- package/.turbo/cache/6081837e8943b62e-meta.json +1 -1
- package/.turbo/cache/60ad74320c682a2b-meta.json +1 -1
- package/.turbo/cache/61e218aba69cff58-meta.json +1 -1
- package/.turbo/cache/77da375a012de9d0-meta.json +1 -1
- package/.turbo/cache/7964d1656e9e702a-meta.json +1 -0
- package/.turbo/cache/7964d1656e9e702a.tar.zst +0 -0
- package/.turbo/cache/7bf2b06a479d0b30-meta.json +1 -1
- package/.turbo/cache/7c9ca6163e61285c-meta.json +1 -1
- package/.turbo/cache/80aca269cd346fb4-meta.json +1 -0
- package/.turbo/cache/80aca269cd346fb4.tar.zst +0 -0
- package/.turbo/cache/8602fc2bb737a5cf-meta.json +1 -0
- package/.turbo/cache/89e0e7a6148e854f-meta.json +1 -0
- package/.turbo/cache/89e0e7a6148e854f.tar.zst +0 -0
- package/.turbo/cache/8bb856bd31b5b479-meta.json +1 -1
- package/.turbo/cache/93c887fb93a10daa-meta.json +1 -0
- package/.turbo/cache/93c887fb93a10daa.tar.zst +0 -0
- package/.turbo/cache/94dae2a64e9d8356-meta.json +1 -0
- package/.turbo/cache/97f6fe83b54acf09-meta.json +1 -0
- package/.turbo/cache/{080ca6155e637d5d.tar.zst → 97f6fe83b54acf09.tar.zst} +0 -0
- package/.turbo/cache/98317b0d14d94df7-meta.json +1 -0
- package/.turbo/cache/98317b0d14d94df7.tar.zst +0 -0
- package/.turbo/cache/9ae99e8e7bd83d06-meta.json +1 -1
- package/.turbo/cache/9cbcd13b1d031f63-meta.json +1 -0
- package/.turbo/cache/{8af27c076dc010c3.tar.zst → 9cbcd13b1d031f63.tar.zst} +0 -0
- package/.turbo/cache/afbbd49ed1a558b9-meta.json +1 -0
- package/.turbo/cache/b353ce8f6da43dea-meta.json +1 -0
- package/.turbo/cache/b5e6dc7fb9ae1a2f-meta.json +1 -1
- package/.turbo/cache/b6a202cc85cb61a0-meta.json +1 -1
- package/.turbo/cache/b8db059a9b9ccb5d-meta.json +1 -0
- package/.turbo/cache/bc24a38aa1b1a102-meta.json +1 -0
- package/.turbo/cache/be0b95293ea517cc-meta.json +1 -1
- package/.turbo/cache/c3a4f7a3565d6706-meta.json +1 -0
- package/.turbo/cache/c3a4f7a3565d6706.tar.zst +0 -0
- package/.turbo/cache/c44efc9e4ddd8a0e-meta.json +1 -1
- package/.turbo/cache/c6c6411199b68170-meta.json +1 -1
- package/.turbo/cache/c97b043e748e3580-meta.json +1 -0
- package/.turbo/cache/d5db503b2eaf239c-meta.json +1 -1
- package/.turbo/cache/d775555355d6b8fc-meta.json +1 -1
- package/.turbo/cache/d7c3007be148d2a1-meta.json +1 -1
- package/.turbo/cache/dad3d78b33edd9e4-meta.json +1 -1
- package/.turbo/cache/dc597b3ea4f61ec8-meta.json +1 -0
- package/.turbo/cache/dc597b3ea4f61ec8.tar.zst +0 -0
- package/.turbo/cache/df40b180126e5351-meta.json +1 -0
- package/.turbo/cache/df40b180126e5351.tar.zst +0 -0
- package/.turbo/cache/e5f217f77c32c93b-meta.json +1 -0
- package/.turbo/cache/{c2b51643f886a493.tar.zst → e5f217f77c32c93b.tar.zst} +0 -0
- package/.turbo/cache/e62cfee068e3ef36-meta.json +1 -1
- package/.turbo/cache/e9e36823f6c98f07-meta.json +1 -1
- package/.turbo/cache/ee1a3c1fe389da51-meta.json +1 -0
- package/.turbo/cache/f3c7b40f2c6a4094-meta.json +1 -0
- package/.turbo/cache/{b22ca87b2f7f9cc2.tar.zst → f3c7b40f2c6a4094.tar.zst} +0 -0
- package/.turbo/cache/f5958c3acb889631-meta.json +1 -0
- package/.turbo/cache/fb3809ac3f90e3b2-meta.json +1 -0
- package/.turbo/cache/{eb1dbe885532c1dc.tar.zst → fb3809ac3f90e3b2.tar.zst} +0 -0
- package/.turbo/cache/fd5ddfa43ebd8e5c-meta.json +1 -0
- package/.turbo/cache/fd5ddfa43ebd8e5c.tar.zst +0 -0
- package/CHANGELOG.md +13 -0
- package/components/checkbox/.turbo/turbo-build.log +3 -3
- package/components/checkbox/.turbo/turbo-bundler.log +3 -3
- package/components/checkbox/README.md +1 -1
- package/components/combobox/.turbo/turbo-build.log +3 -3
- package/components/combobox/README.md +4 -4
- package/components/combobox/demo/api.md +9 -9
- package/components/combobox/demo/api.min.js +2508 -642
- package/components/combobox/demo/index.min.js +2505 -639
- package/components/combobox/dist/auro-combobox.d.ts +9 -4
- package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
- package/components/combobox/dist/index.js +1863 -312
- package/components/combobox/src/auro-combobox.js +70 -26
- package/components/counter/.turbo/turbo-build.log +3 -3
- package/components/counter/.turbo/turbo-bundler.log +3 -3
- package/components/counter/README.md +1 -1
- package/components/datepicker/.turbo/turbo-build.log +3 -3
- package/components/datepicker/README.md +4 -4
- package/components/dropdown/.turbo/turbo-build.log +3 -3
- package/components/dropdown/.turbo/turbo-bundler.log +2 -2
- package/components/dropdown/README.md +1 -1
- package/components/form/.turbo/turbo-build.log +3 -3
- package/components/form/.turbo/turbo-bundler.log +3 -3
- package/components/form/README.md +1 -1
- package/components/input/.turbo/turbo-build.log +3 -3
- package/components/input/.turbo/turbo-bundler.log +3 -3
- package/components/input/README.md +1 -1
- package/components/menu/.turbo/turbo-build.log +4 -2
- package/components/menu/.turbo/turbo-bundler.log +3 -3
- package/components/menu/README.md +1 -1
- package/components/menu/demo/api.md +57 -20
- package/components/menu/demo/api.min.js +620 -305
- package/components/menu/demo/index.min.js +618 -303
- package/components/menu/dist/auro-menu-utils.d.ts +43 -0
- package/components/menu/dist/auro-menu-utils.d.ts.map +1 -0
- package/components/menu/dist/auro-menu.d.ts +97 -81
- package/components/menu/dist/auro-menu.d.ts.map +1 -1
- package/components/menu/dist/index.d.ts +1 -0
- package/components/menu/dist/index.js +619 -304
- package/components/menu/src/auro-menu-utils.js +131 -0
- package/components/menu/src/auro-menu.js +493 -303
- package/components/menu/src/index.js +7 -0
- package/components/radio/.turbo/turbo-build.log +3 -3
- package/components/radio/.turbo/turbo-bundler.log +3 -3
- package/components/radio/README.md +1 -1
- package/components/select/.turbo/turbo-build.log +5 -3
- package/components/select/README.md +3 -3
- package/components/select/demo/api.md +46 -11
- package/components/select/demo/api.min.js +2336 -485
- package/components/select/demo/index.min.js +2337 -486
- package/components/select/dist/auro-select.d.ts +17 -6
- package/components/select/dist/auro-select.d.ts.map +1 -1
- package/components/select/dist/index.js +1706 -170
- package/components/select/src/auro-select.js +53 -24
- package/components/select/src/styles/style-css.js +1 -1
- package/components/select/src/styles/style.css +7 -0
- package/components/select/src/styles/style.scss +13 -0
- package/package.json +1 -1
- package/.turbo/cache/026e4d886ba97e63-meta.json +0 -1
- package/.turbo/cache/026e4d886ba97e63.tar.zst +0 -0
- package/.turbo/cache/080ca6155e637d5d-meta.json +0 -1
- package/.turbo/cache/0b115e30ff606299-meta.json +0 -1
- package/.turbo/cache/0b115e30ff606299.tar.zst +0 -0
- package/.turbo/cache/1c630fb3411e4a41-meta.json +0 -1
- package/.turbo/cache/24b19ac5895e5dd6-meta.json +0 -1
- package/.turbo/cache/24b19ac5895e5dd6.tar.zst +0 -0
- package/.turbo/cache/29b72c73cbccb53d-meta.json +0 -1
- package/.turbo/cache/29b72c73cbccb53d.tar.zst +0 -0
- package/.turbo/cache/3e647c5863d32e6f-meta.json +0 -1
- package/.turbo/cache/3e647c5863d32e6f.tar.zst +0 -0
- package/.turbo/cache/43f5206cc4e69b44-meta.json +0 -1
- package/.turbo/cache/4a85ec226b585fd5-meta.json +0 -1
- package/.turbo/cache/50a29c70b93c57dd-meta.json +0 -1
- package/.turbo/cache/50a29c70b93c57dd.tar.zst +0 -0
- package/.turbo/cache/56455145cd768755-meta.json +0 -1
- package/.turbo/cache/56455145cd768755.tar.zst +0 -0
- package/.turbo/cache/5c06332cf9f132da-meta.json +0 -1
- package/.turbo/cache/5e613afc6868d0e2-meta.json +0 -1
- package/.turbo/cache/5e613afc6868d0e2.tar.zst +0 -0
- package/.turbo/cache/639dac15b979bedc-meta.json +0 -1
- package/.turbo/cache/664c2e08614fd212-meta.json +0 -1
- package/.turbo/cache/6c51b0ebfc086faa-meta.json +0 -1
- package/.turbo/cache/6c51b0ebfc086faa.tar.zst +0 -0
- package/.turbo/cache/7216d994164825fb-meta.json +0 -1
- package/.turbo/cache/7216d994164825fb.tar.zst +0 -0
- package/.turbo/cache/83a167e135cb431a-meta.json +0 -1
- package/.turbo/cache/83a167e135cb431a.tar.zst +0 -0
- package/.turbo/cache/8af27c076dc010c3-meta.json +0 -1
- package/.turbo/cache/953c8216249d3509-meta.json +0 -1
- package/.turbo/cache/95a5e76ffd8c5110-meta.json +0 -1
- package/.turbo/cache/95a5e76ffd8c5110.tar.zst +0 -0
- package/.turbo/cache/a8b0fa0a9aa707c5-meta.json +0 -1
- package/.turbo/cache/a8b0fa0a9aa707c5.tar.zst +0 -0
- package/.turbo/cache/b22ca87b2f7f9cc2-meta.json +0 -1
- package/.turbo/cache/b7bbe2e7d44b77f0-meta.json +0 -1
- package/.turbo/cache/b7bbe2e7d44b77f0.tar.zst +0 -0
- package/.turbo/cache/c2b51643f886a493-meta.json +0 -1
- package/.turbo/cache/c74d369a0475b124-meta.json +0 -1
- package/.turbo/cache/c7f5a276ddb73cf7-meta.json +0 -1
- package/.turbo/cache/c96933d40404e4c8-meta.json +0 -1
- package/.turbo/cache/c96933d40404e4c8.tar.zst +0 -0
- package/.turbo/cache/eb1dbe885532c1dc-meta.json +0 -1
- package/.turbo/cache/f1f6744948f1b18f-meta.json +0 -1
- package/.turbo/cache/f1f6744948f1b18f.tar.zst +0 -0
- package/.turbo/cache/feefbc25d550c1cd-meta.json +0 -1
- package/.turbo/cache/ff4dbfffc29255ab-meta.json +0 -1
- /package/.turbo/cache/{639dac15b979bedc.tar.zst → 2a5295c8f561ed84.tar.zst} +0 -0
- /package/.turbo/cache/{1c630fb3411e4a41.tar.zst → 8602fc2bb737a5cf.tar.zst} +0 -0
- /package/.turbo/cache/{664c2e08614fd212.tar.zst → 94dae2a64e9d8356.tar.zst} +0 -0
- /package/.turbo/cache/{c7f5a276ddb73cf7.tar.zst → afbbd49ed1a558b9.tar.zst} +0 -0
- /package/.turbo/cache/{43f5206cc4e69b44.tar.zst → b353ce8f6da43dea.tar.zst} +0 -0
- /package/.turbo/cache/{c74d369a0475b124.tar.zst → b8db059a9b9ccb5d.tar.zst} +0 -0
- /package/.turbo/cache/{4a85ec226b585fd5.tar.zst → bc24a38aa1b1a102.tar.zst} +0 -0
- /package/.turbo/cache/{5c06332cf9f132da.tar.zst → c97b043e748e3580.tar.zst} +0 -0
- /package/.turbo/cache/{953c8216249d3509.tar.zst → ee1a3c1fe389da51.tar.zst} +0 -0
- /package/.turbo/cache/{feefbc25d550c1cd.tar.zst → f5958c3acb889631.tar.zst} +0 -0
|
@@ -3,46 +3,46 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$
|
|
6
|
+
const t$6=globalThis,e$a=t$6.ShadowRoot&&(undefined===t$6.ShadyCSS||t$6.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$6=Symbol(),o$a=new WeakMap;let n$8 = 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$a&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$a.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$a.set(s,t));}return t}toString(){return this.cssText}};const r$8=t=>new n$8("string"==typeof t?t:t+"",undefined,s$6),i$c=(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$8(o,t,s$6)},S$4=(s,o)=>{if(e$a)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$6.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$6=e$a?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$8(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$b,defineProperty:e$9,getOwnPropertyDescriptor:r$7,getOwnPropertyNames:h$4,getOwnPropertySymbols:o$9,getPrototypeOf:n$7}=Object,a$6=globalThis,c$5=a$6.trustedTypes,l$6=c$5?c$5.emptyScript:"",p$4=a$6.reactiveElementPolyfillSupport,d$4=(t,s)=>t,u$6={toAttribute(t,s){switch(s){case Boolean:t=t?l$6: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$4=(t,s)=>!i$b(t,s),y$4={attribute:true,type:String,converter:u$6,reflect:false,hasChanged:f$4};Symbol.metadata??=Symbol("metadata"),a$6.litPropertyMetadata??=new WeakMap;let b$2 = class b 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=y$4){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);undefined!==r&&e$9(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$7(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$4}static _$Ei(){if(this.hasOwnProperty(d$4("elementProperties")))return;const t=n$7(this);t.finalize(),undefined!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$4("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$4("properties"))){const t=this.properties,s=[...h$4(t),...o$9(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(undefined!==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);undefined!==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$6(s));}else undefined!==s&&i.push(c$6(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?undefined:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():undefined}constructor(){super(),this._$Ep=undefined,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),undefined!==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$4(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);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(undefined!==e&&true===i.reflect){const r=(undefined!==i.converter?.toAttribute?i.converter:u$6).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(undefined!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:undefined!==t.converter?.fromAttribute?t.converter:u$6;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(undefined!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$4)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){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=undefined;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||undefined===this[s]||this.P(s,this[s],i);}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._$EU();}catch(s){throw t=false,this._$EU(),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);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$2.elementStyles=[],b$2.shadowRootOptions={mode:"open"},b$2[d$4("elementProperties")]=new Map,b$2[d$4("finalized")]=new Map,p$4?.({ReactiveElement:b$2}),(a$6.reactiveElementVersions??=[]).push("2.0.4");
|
|
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$
|
|
19
|
+
const t$5=globalThis,i$a=t$5.trustedTypes,s$5=i$a?i$a.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$8="$lit$",h$3=`lit$${Math.random().toFixed(9).slice(2)}$`,o$8="?"+h$3,n$6=`<${o$8}>`,r$6=document,l$5=()=>r$6.createComment(""),c$4=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$5=Array.isArray,u$5=t=>a$5(t)||"function"==typeof t?.[Symbol.iterator],d$3="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$2=/>/g,m$2=RegExp(`>|${d$3}(?:([^\\s"'>=/]+)(${d$3}*=${d$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$2=/"/g,$$2=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$3(1),T$2=Symbol.for("lit-noChange"),E$2=Symbol.for("lit-nothing"),A$2=new WeakMap,C$2=r$6.createTreeWalker(r$6,129);function P$2(t,i){if(!a$5(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s$5?s$5.createHTML(i):i}const V$2=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$3;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$3?"!--"===u[1]?c=v$2:undefined!==u[1]?c=_$2:undefined!==u[2]?($$2.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):undefined!==u[3]&&(c=m$2):c===m$2?">"===u[0]?(c=r??f$3,d=-1):undefined===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=undefined===u[3]?m$2:'"'===u[3]?g$2:p$3):c===g$2||c===p$3?c=m$2:c===v$2||c===_$2?c=f$3:(c=m$2,r=undefined);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$6:d>=0?(o.push(a),s.slice(0,d)+e$8+s.slice(d)+h$3+x):s+h$3+(-2===d?i:x);}return [P$2(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$2 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$2(t,s);if(this.el=N.createElement(f,n),C$2.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$2.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$8)){const i=v[a++],s=r.getAttribute(t).split(h$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$2:"?"===e[1]?I$2:"@"===e[1]?L$2:k$2}),r.removeAttribute(t);}else t.startsWith(h$3)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$2.test(r.tagName)){const t=r.textContent.split(h$3),s=t.length-1;if(s>0){r.textContent=i$a?i$a.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$5()),C$2.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$5());}}}else if(8===r.nodeType)if(r.data===o$8)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$3,t+1));)d.push({type:7,index:c}),t+=h$3.length-1;}c++;}}static createElement(t,i){const s=r$6.createElement("template");return s.innerHTML=t,s}};function S$3(t,i,s=t,e){if(i===T$2)return i;let h=undefined!==e?s._$Co?.[e]:s._$Cl;const o=c$4(i)?undefined:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),undefined===o?h=undefined:(h=new o(t),h._$AT(t,s,e)),undefined!==e?(s._$Co??=[])[e]=h:s._$Cl=h),undefined!==h&&(i=S$3(t,h._$AS(t,i.values),h,e)),i}let M$2 = class M{constructor(t,i){this._$AV=[],this._$AN=undefined,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??r$6).importNode(i,true);C$2.currentNode=e;let h=C$2.nextNode(),o=0,n=0,l=s[0];for(;undefined!==l;){if(o===l.index){let i;2===l.type?i=new R$2(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$2(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$2.nextNode(),o++);}return C$2.currentNode=r$6,e}p(t){let i=0;for(const s of this._$AV) undefined!==s&&(undefined!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$2 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$2,this._$AN=undefined,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 undefined!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$3(this,t,i),c$4(t)?t===E$2||null==t||""===t?(this._$AH!==E$2&&this._$AR(),this._$AH=E$2):t!==this._$AH&&t!==T$2&&this._(t):undefined!==t._$litType$?this.$(t):undefined!==t.nodeType?this.T(t):u$5(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!==E$2&&c$4(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$6.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(undefined===s.el&&(s.el=N$2.createElement(P$2(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$2(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$2.get(t.strings);return undefined===i&&A$2.set(t.strings,i=new N$2(t)),i}k(t){a$5(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 R(this.O(l$5()),this.O(l$5()),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,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ undefined===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$2 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$2,this._$AN=undefined,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=E$2;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(undefined===h)t=S$3(this,t,i,0),o=!c$4(t)||t!==this._$AH&&t!==T$2,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$3(this,e[s+n],i,n),r===T$2&&(r=this._$AH[n]),o||=!c$4(r)||r!==this._$AH[n],r===E$2?t=E$2:t!==E$2&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$2?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$2 = class H extends k$2{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$2?undefined:t;}};let I$2 = class I extends k$2{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$2);}};let L$2 = class L extends k$2{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$3(this,t,i,0)??E$2)===T$2)return;const s=this._$AH,e=t===E$2&&s!==E$2||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$2&&(s===E$2||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);}};let z$2 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=undefined,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$3(this,t);}};const j$2=t$5.litHtmlPolyfillSupport;j$2?.(N$2,R$2),(t$5.litHtmlVersions??=[]).push("3.2.1");const B$2=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(undefined===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$2(i.insertBefore(l$5(),t),t,undefined,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
|
-
*/let r$
|
|
25
|
+
*/let r$5 = class r extends b$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$2(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$2}};r$5._$litElement$=true,r$5["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$9=globalThis.litElementPolyfillSupport;i$9?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
31
|
*/
|
|
32
|
-
const t$
|
|
32
|
+
const t$4={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$7=t=>(...e)=>({_$litDirective$:t,values:e});let i$8 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
36
36
|
* Copyright 2018 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
-
*/const e$
|
|
38
|
+
*/const e$6=e$7(class extends i$8{constructor(t){if(super(t),t.type!==t$4.ATTRIBUTE||"class"!==t.name||t.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(undefined===this.st){this.st=new Set,undefined!==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 T$2}});
|
|
39
39
|
|
|
40
40
|
/**
|
|
41
41
|
* @license
|
|
42
42
|
* Copyright 2020 Google LLC
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
44
|
*/
|
|
45
|
-
const a$
|
|
45
|
+
const a$4=Symbol.for(""),o$7=t=>{if(t?.r===a$4)return t?._$litStatic$},s$4=t=>({_$litStatic$:t,r:a$4}),i$7=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(undefined!==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$4}),l$4=new Map,n$5=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&undefined!==(i=e[$],s=o$7(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$$");undefined===(r=l$4.get(t))&&(n.raw=n,l$4.set(t,r=n)),e=u;}return t(r,...e)},u$4=n$5(x$2);
|
|
46
46
|
|
|
47
47
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
48
48
|
// See LICENSE in the project root for license information.
|
|
@@ -51,7 +51,7 @@ const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({
|
|
|
51
51
|
|
|
52
52
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
53
53
|
|
|
54
|
-
let AuroLibraryRuntimeUtils$
|
|
54
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
55
55
|
|
|
56
56
|
/* eslint-disable jsdoc/require-param */
|
|
57
57
|
|
|
@@ -120,7 +120,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
120
120
|
|
|
121
121
|
class AuroFormValidation {
|
|
122
122
|
constructor() {
|
|
123
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
123
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
/**
|
|
@@ -432,7 +432,7 @@ class AuroFormValidation {
|
|
|
432
432
|
// See LICENSE in the project root for license information.
|
|
433
433
|
|
|
434
434
|
|
|
435
|
-
let AuroDependencyVersioning$
|
|
435
|
+
let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
|
|
436
436
|
|
|
437
437
|
/**
|
|
438
438
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -458,7 +458,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
458
458
|
*/
|
|
459
459
|
generateTag(baseName, version, tagClass) {
|
|
460
460
|
const elementName = this.generateElementName(baseName, version);
|
|
461
|
-
const tag = i$
|
|
461
|
+
const tag = i$7`${s$4(elementName)}`;
|
|
462
462
|
|
|
463
463
|
if (!customElements.get(elementName)) {
|
|
464
464
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -473,33 +473,33 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
473
473
|
* Copyright 2017 Google LLC
|
|
474
474
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
475
475
|
*/
|
|
476
|
-
const t$2=globalThis,i$5=t$2.trustedTypes,s$2=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$3=document,l$2=()=>r$3.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$2=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1=/'/g,g=/"/g
|
|
476
|
+
const t$2$1=globalThis,i$5$1=t$2$1.trustedTypes,s$2$1=i$5$1?i$5$1.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$4$1="$lit$",h$1$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4$1="?"+h$1$1,n$3$1=`<${o$4$1}>`,r$3$1=document,l$2$1=()=>r$3$1.createComment(""),c$2$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2$1=Array.isArray,u$2$1=t=>a$2$1(t)||"function"==typeof t?.[Symbol.iterator],d$1$1="[ \t\n\f\r]",f$1$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$1=RegExp(`>|${d$1$1}(?:([^\\s"'>=/]+)(${d$1$1}*=${d$1$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1$1=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$1$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$1$1(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$3$1.createTreeWalker(r$3$1,129);function P$1(t,i){if(!a$2$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s$2$1?s$2$1.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$1$1;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$1$1?"!--"===u[1]?c=v$1:undefined!==u[1]?c=_$1:undefined!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):undefined!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$1$1,d=-1):undefined===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=undefined===u[3]?m$1:'"'===u[3]?g$1:p$1$1):c===g$1||c===p$1$1?c=m$1:c===v$1||c===_$1?c=f$1$1:(c=m$1,r=undefined);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1$1?s+n$3$1:d>=0?(o.push(a),s.slice(0,d)+e$4$1+s.slice(d)+h$1$1+x):s+h$1$1+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$4$1)){const i=v[a++],s=r.getAttribute(t).split(h$1$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$1$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$1$1),s=t.length-1;if(s>0){r.textContent=i$5$1?i$5$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2$1()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2$1());}}}else if(8===r.nodeType)if(r.data===o$4$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1$1,t+1));)d.push({type:7,index:c}),t+=h$1$1.length-1;}c++;}}static createElement(t,i){const s=r$3$1.createElement("template");return s.innerHTML=t,s}};function S$1$1(t,i,s=t,e){if(i===T$1)return i;let h=undefined!==e?s._$Co?.[e]:s._$Cl;const o=c$2$1(i)?undefined:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),undefined===o?h=undefined:(h=new o(t),h._$AT(t,s,e)),undefined!==e?(s._$Co??=[])[e]=h:s._$Cl=h),undefined!==h&&(i=S$1$1(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=undefined,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??r$3$1).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;undefined!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$3$1,e}p(t){let i=0;for(const s of this._$AV) undefined!==s&&(undefined!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=undefined,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 undefined!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1$1(this,t,i),c$2$1(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):undefined!==t._$litType$?this.$(t):undefined!==t.nodeType?this.T(t):u$2$1(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!==E$1&&c$2$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$3$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(undefined===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return undefined===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$2$1(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 R(this.O(l$2$1()),this.O(l$2$1()),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,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ undefined===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=undefined,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=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(undefined===h)t=S$1$1(this,t,i,0),o=!c$2$1(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1$1(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$2$1(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?undefined:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1$1(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||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);}};let z$1 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=undefined,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$1$1(this,t);}};const j$1=t$2$1.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$2$1.litHtmlVersions??=[]).push("3.2.1");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(undefined===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$2$1(),t),t,undefined,s??{});}return h._$AI(t),h};
|
|
477
477
|
|
|
478
478
|
/**
|
|
479
479
|
* @license
|
|
480
480
|
* Copyright 2020 Google LLC
|
|
481
481
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
482
482
|
*/
|
|
483
|
-
const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$1=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(undefined!==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$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&undefined!==(i=e[$],s=o$3(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$$");undefined===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$1=n$2(x);
|
|
483
|
+
const a$1$1=Symbol.for(""),o$3$1=t=>{if(t?.r===a$1$1)return t?._$litStatic$},s$1$1=t=>({_$litStatic$:t,r:a$1$1}),i$4$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(undefined!==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$1$1}),l$1$1=new Map,n$2$1=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&undefined!==(i=e[$],s=o$3$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$$");undefined===(r=l$1$1.get(t))&&(n.raw=n,l$1$1.set(t,r=n)),e=u;}return t(r,...e)},u$1$1=n$2$1(x$1);
|
|
484
484
|
|
|
485
485
|
/**
|
|
486
486
|
* @license
|
|
487
487
|
* Copyright 2019 Google LLC
|
|
488
488
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
489
489
|
*/
|
|
490
|
-
const t$1=globalThis,e$3=t$1.ShadowRoot&&(undefined===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)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$3&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$2.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",undefined,s),i$3=(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$1(o,t,s)},S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
|
|
490
|
+
const t$1$1=globalThis,e$3$1=t$1$1.ShadowRoot&&(undefined===t$1$1.ShadyCSS||t$1$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$2$1=new WeakMap;let n$1$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3$1&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$2$1.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2$1.set(s,t));}return t}toString(){return this.cssText}};const r$2$1=t=>new n$1$1("string"==typeof t?t:t+"",undefined,s$3),i$3$1=(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$1$1(o,t,s$3)},S$2=(s,o)=>{if(e$3$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1$1.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1$1=e$3$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2$1(e)})(t):t;
|
|
491
491
|
|
|
492
492
|
/**
|
|
493
493
|
* @license
|
|
494
494
|
* Copyright 2017 Google LLC
|
|
495
495
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
496
|
-
*/const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o$1,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l: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=(t,s)=>!i$2(t,s),y={attribute:true,type:String,converter:u,reflect:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b 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=y){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);undefined!==r&&e$2(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),undefined!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o$1(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(undefined!==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);undefined!==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$1(s));}else undefined!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?undefined:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():undefined}constructor(){super(),this._$Ep=undefined,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),undefined!==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(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);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(undefined!==e&&true===i.reflect){const r=(undefined!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(undefined!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:undefined!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(undefined!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){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=undefined;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||undefined===this[s]||this.P(s,this[s],i);}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._$EU();}catch(s){throw t=false,this._$EU(),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);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4");
|
|
496
|
+
*/const{is:i$2$1,defineProperty:e$2$1,getOwnPropertyDescriptor:r$1$1,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$1$1,getPrototypeOf:n$4}=Object,a$3=globalThis,c$3=a$3.trustedTypes,l$3=c$3?c$3.emptyScript:"",p$2=a$3.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$3={toAttribute(t,s){switch(s){case Boolean:t=t?l$3: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$2$1(t,s),y$2={attribute:true,type:String,converter:u$3,reflect:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$3.litPropertyMetadata??=new WeakMap;let b$1 = class b 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=y$2){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);undefined!==r&&e$2$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$2}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$4(this);t.finalize(),undefined!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...h$2(t),...o$1$1(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(undefined!==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);undefined!==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$1$1(s));}else undefined!==s&&i.push(c$1$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?undefined:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():undefined}constructor(){super(),this._$Ep=undefined,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),undefined!==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$2(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);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(undefined!==e&&true===i.reflect){const r=(undefined!==i.converter?.toAttribute?i.converter:u$3).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(undefined!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:undefined!==t.converter?.fromAttribute?t.converter:u$3;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(undefined!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$2)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){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=undefined;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||undefined===this[s]||this.P(s,this[s],i);}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._$EU();}catch(s){throw t=false,this._$EU(),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);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$2("elementProperties")]=new Map,b$1[d$2("finalized")]=new Map,p$2?.({ReactiveElement:b$1}),(a$3.reactiveElementVersions??=[]).push("2.0.4");
|
|
497
497
|
|
|
498
498
|
/**
|
|
499
499
|
* @license
|
|
500
500
|
* Copyright 2017 Google LLC
|
|
501
501
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
502
|
-
*/class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i$1=globalThis.litElementPolyfillSupport;i$1?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
502
|
+
*/let r$4 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};r$4._$litElement$=true,r$4["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$4});const i$1$1=globalThis.litElementPolyfillSupport;i$1$1?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
503
503
|
|
|
504
504
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
505
505
|
// See LICENSE in the project root for license information.
|
|
@@ -508,7 +508,7 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(undefined===t$1.ShadyCSS||t$1.ShadyCSS
|
|
|
508
508
|
|
|
509
509
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
510
510
|
|
|
511
|
-
class AuroLibraryRuntimeUtils {
|
|
511
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
512
512
|
|
|
513
513
|
/* eslint-disable jsdoc/require-param */
|
|
514
514
|
|
|
@@ -569,7 +569,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
569
569
|
|
|
570
570
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
571
571
|
}
|
|
572
|
-
}
|
|
572
|
+
};
|
|
573
573
|
|
|
574
574
|
/**
|
|
575
575
|
* Custom positioning reference element.
|
|
@@ -2457,7 +2457,7 @@ class AuroFloatingUI {
|
|
|
2457
2457
|
// See LICENSE in the project root for license information.
|
|
2458
2458
|
|
|
2459
2459
|
|
|
2460
|
-
class AuroDependencyVersioning {
|
|
2460
|
+
let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
2461
2461
|
|
|
2462
2462
|
/**
|
|
2463
2463
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -2483,7 +2483,7 @@ class AuroDependencyVersioning {
|
|
|
2483
2483
|
*/
|
|
2484
2484
|
generateTag(baseName, version, tagClass) {
|
|
2485
2485
|
const elementName = this.generateElementName(baseName, version);
|
|
2486
|
-
const tag = i$4`${s$1(elementName)}`;
|
|
2486
|
+
const tag = i$4$1`${s$1$1(elementName)}`;
|
|
2487
2487
|
|
|
2488
2488
|
if (!customElements.get(elementName)) {
|
|
2489
2489
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -2491,26 +2491,26 @@ class AuroDependencyVersioning {
|
|
|
2491
2491
|
|
|
2492
2492
|
return tag;
|
|
2493
2493
|
}
|
|
2494
|
-
}
|
|
2494
|
+
};
|
|
2495
2495
|
|
|
2496
2496
|
/**
|
|
2497
2497
|
* @license
|
|
2498
2498
|
* Copyright 2017 Google LLC
|
|
2499
2499
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2500
2500
|
*/
|
|
2501
|
-
const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
2501
|
+
const t$3={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$6 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
|
|
2502
2502
|
|
|
2503
2503
|
/**
|
|
2504
2504
|
* @license
|
|
2505
2505
|
* Copyright 2018 Google LLC
|
|
2506
2506
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2507
|
-
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(undefined===this.st){this.st=new Set,undefined!==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 T}});
|
|
2507
|
+
*/const e$5=e$1$1(class extends i$6{constructor(t$1){if(super(t$1),t$1.type!==t$3.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(undefined===this.st){this.st=new Set,undefined!==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 T$1}});
|
|
2508
2508
|
|
|
2509
2509
|
/**
|
|
2510
2510
|
* @license
|
|
2511
2511
|
* Copyright 2018 Google LLC
|
|
2512
2512
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2513
|
-
*/const o$
|
|
2513
|
+
*/const o$6=o=>o??E$1;
|
|
2514
2514
|
|
|
2515
2515
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2516
2516
|
// See LICENSE in the project root for license information.
|
|
@@ -2522,7 +2522,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
|
|
|
2522
2522
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
2523
2523
|
*/
|
|
2524
2524
|
|
|
2525
|
-
let AuroElement$
|
|
2525
|
+
let AuroElement$2 = class AuroElement extends r$4 {
|
|
2526
2526
|
|
|
2527
2527
|
// function to define props used within the scope of this component
|
|
2528
2528
|
static get properties() {
|
|
@@ -2548,11 +2548,11 @@ let AuroElement$1 = class AuroElement extends r {
|
|
|
2548
2548
|
}
|
|
2549
2549
|
};
|
|
2550
2550
|
|
|
2551
|
-
var error$
|
|
2551
|
+
var error$2 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<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>"};
|
|
2552
2552
|
|
|
2553
2553
|
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
2554
2554
|
|
|
2555
|
-
const _fetchMap$
|
|
2555
|
+
const _fetchMap$2 = new Map();
|
|
2556
2556
|
|
|
2557
2557
|
/**
|
|
2558
2558
|
* A callback to parse Response body.
|
|
@@ -2570,15 +2570,15 @@ const _fetchMap$1 = new Map();
|
|
|
2570
2570
|
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
2571
2571
|
* @returns {Promise}
|
|
2572
2572
|
*/
|
|
2573
|
-
const cacheFetch$
|
|
2573
|
+
const cacheFetch$2 = (uri, options = {}) => {
|
|
2574
2574
|
const responseParser = options.responseParser || ((response) => response.text());
|
|
2575
|
-
if (!_fetchMap$
|
|
2576
|
-
_fetchMap$
|
|
2575
|
+
if (!_fetchMap$2.has(uri)) {
|
|
2576
|
+
_fetchMap$2.set(uri, fetch(uri).then(responseParser));
|
|
2577
2577
|
}
|
|
2578
|
-
return _fetchMap$
|
|
2578
|
+
return _fetchMap$2.get(uri);
|
|
2579
2579
|
};
|
|
2580
2580
|
|
|
2581
|
-
var styleCss$2$
|
|
2581
|
+
var styleCss$2$2 = i$3$1`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
|
|
2582
2582
|
|
|
2583
2583
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2584
2584
|
// See LICENSE in the project root for license information.
|
|
@@ -2591,7 +2591,7 @@ var styleCss$2$1 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-r
|
|
|
2591
2591
|
*/
|
|
2592
2592
|
|
|
2593
2593
|
// build the component class
|
|
2594
|
-
let BaseIcon$
|
|
2594
|
+
let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
2595
2595
|
constructor() {
|
|
2596
2596
|
super();
|
|
2597
2597
|
this.onDark = false;
|
|
@@ -2617,8 +2617,8 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2617
2617
|
}
|
|
2618
2618
|
|
|
2619
2619
|
static get styles() {
|
|
2620
|
-
return i$3`
|
|
2621
|
-
${styleCss$2$
|
|
2620
|
+
return i$3$1`
|
|
2621
|
+
${styleCss$2$2}
|
|
2622
2622
|
`;
|
|
2623
2623
|
}
|
|
2624
2624
|
|
|
@@ -2633,9 +2633,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2633
2633
|
let iconHTML = '';
|
|
2634
2634
|
|
|
2635
2635
|
if (category === 'logos') {
|
|
2636
|
-
iconHTML = await cacheFetch$
|
|
2636
|
+
iconHTML = await cacheFetch$2(`${this.uri}/${category}/${name}.svg`);
|
|
2637
2637
|
} else {
|
|
2638
|
-
iconHTML = await cacheFetch$
|
|
2638
|
+
iconHTML = await cacheFetch$2(`${this.uri}/icons/${category}/${name}.svg`);
|
|
2639
2639
|
}
|
|
2640
2640
|
|
|
2641
2641
|
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
@@ -2651,7 +2651,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2651
2651
|
if (svg) {
|
|
2652
2652
|
this.svg = svg;
|
|
2653
2653
|
} else if (!svg) {
|
|
2654
|
-
const penDOM = new DOMParser().parseFromString(error$
|
|
2654
|
+
const penDOM = new DOMParser().parseFromString(error$2.svg, 'text/html');
|
|
2655
2655
|
|
|
2656
2656
|
this.svg = penDOM.body.firstChild;
|
|
2657
2657
|
}
|
|
@@ -2659,9 +2659,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2659
2659
|
}
|
|
2660
2660
|
};
|
|
2661
2661
|
|
|
2662
|
-
var tokensCss$1$
|
|
2662
|
+
var tokensCss$1$2 = i$3$1`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
|
|
2663
2663
|
|
|
2664
|
-
var colorCss$2$
|
|
2664
|
+
var colorCss$2$2 = i$3$1`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
2665
2665
|
|
|
2666
2666
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2667
2667
|
// See LICENSE in the project root for license information.
|
|
@@ -2694,7 +2694,7 @@ var colorCss$2$1 = i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]
|
|
|
2694
2694
|
*/
|
|
2695
2695
|
|
|
2696
2696
|
// build the component class
|
|
2697
|
-
let AuroIcon$
|
|
2697
|
+
let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
2698
2698
|
constructor() {
|
|
2699
2699
|
super();
|
|
2700
2700
|
|
|
@@ -2723,7 +2723,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2723
2723
|
this.success = false;
|
|
2724
2724
|
this.tertiary = false;
|
|
2725
2725
|
this.warning = false;
|
|
2726
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
2726
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
2727
2727
|
}
|
|
2728
2728
|
|
|
2729
2729
|
// function to define props used within the scope of this component
|
|
@@ -2805,9 +2805,9 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2805
2805
|
static get styles() {
|
|
2806
2806
|
return [
|
|
2807
2807
|
super.styles,
|
|
2808
|
-
i$3`${tokensCss$1$
|
|
2809
|
-
i$3`${styleCss$2$
|
|
2810
|
-
i$3`${colorCss$2$
|
|
2808
|
+
i$3$1`${tokensCss$1$2}`,
|
|
2809
|
+
i$3$1`${styleCss$2$2}`,
|
|
2810
|
+
i$3$1`${colorCss$2$2}`
|
|
2811
2811
|
];
|
|
2812
2812
|
}
|
|
2813
2813
|
|
|
@@ -2820,7 +2820,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2820
2820
|
*
|
|
2821
2821
|
*/
|
|
2822
2822
|
static register(name = "auro-icon") {
|
|
2823
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
2823
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
|
|
2824
2824
|
}
|
|
2825
2825
|
|
|
2826
2826
|
connectedCallback() {
|
|
@@ -2849,20 +2849,20 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2849
2849
|
'wrapper': true,
|
|
2850
2850
|
};
|
|
2851
2851
|
|
|
2852
|
-
return x`
|
|
2852
|
+
return x$1`
|
|
2853
2853
|
<div
|
|
2854
|
-
class="${e(classes)}"
|
|
2855
|
-
title="${o$
|
|
2856
|
-
<span aria-hidden="${o$
|
|
2857
|
-
${this.customSvg ? x`
|
|
2854
|
+
class="${e$5(classes)}"
|
|
2855
|
+
title="${o$6(this.title || undefined)}">
|
|
2856
|
+
<span aria-hidden="${o$6(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
2857
|
+
${this.customSvg ? x$1`
|
|
2858
2858
|
<slot name="svg"></slot>
|
|
2859
|
-
` : x`
|
|
2859
|
+
` : x$1`
|
|
2860
2860
|
${this.svg}
|
|
2861
2861
|
`
|
|
2862
2862
|
}
|
|
2863
2863
|
</span>
|
|
2864
2864
|
|
|
2865
|
-
<div class="${e(a11y)}">
|
|
2865
|
+
<div class="${e$5(a11y)}">
|
|
2866
2866
|
<slot></slot>
|
|
2867
2867
|
</div>
|
|
2868
2868
|
</div>
|
|
@@ -2870,17 +2870,17 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2870
2870
|
}
|
|
2871
2871
|
};
|
|
2872
2872
|
|
|
2873
|
-
var iconVersion$
|
|
2873
|
+
var iconVersion$2 = '6.1.2';
|
|
2874
2874
|
|
|
2875
|
-
var styleCss$1$
|
|
2875
|
+
var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
|
|
2876
2876
|
|
|
2877
|
-
var colorCss$1$
|
|
2877
|
+
var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
|
|
2878
2878
|
|
|
2879
|
-
var tokensCss$
|
|
2879
|
+
var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
|
|
2880
2880
|
|
|
2881
|
-
var styleCss$
|
|
2881
|
+
var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
|
|
2882
2882
|
|
|
2883
|
-
var colorCss$
|
|
2883
|
+
var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
2884
2884
|
|
|
2885
2885
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2886
2886
|
// See LICENSE in the project root for license information.
|
|
@@ -2900,7 +2900,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
|
2900
2900
|
* @csspart bibContainer - Apply css to the bib container.
|
|
2901
2901
|
*/
|
|
2902
2902
|
|
|
2903
|
-
class AuroDropdownBib extends r {
|
|
2903
|
+
class AuroDropdownBib extends r$4 {
|
|
2904
2904
|
|
|
2905
2905
|
constructor() {
|
|
2906
2906
|
super();
|
|
@@ -2913,9 +2913,9 @@ class AuroDropdownBib extends r {
|
|
|
2913
2913
|
|
|
2914
2914
|
static get styles() {
|
|
2915
2915
|
return [
|
|
2916
|
-
styleCss$
|
|
2917
|
-
colorCss$
|
|
2918
|
-
tokensCss$
|
|
2916
|
+
styleCss$5,
|
|
2917
|
+
colorCss$5,
|
|
2918
|
+
tokensCss$4
|
|
2919
2919
|
];
|
|
2920
2920
|
}
|
|
2921
2921
|
|
|
@@ -2966,7 +2966,7 @@ class AuroDropdownBib extends r {
|
|
|
2966
2966
|
|
|
2967
2967
|
// function that renders the HTML and CSS into the scope of the component
|
|
2968
2968
|
render() {
|
|
2969
|
-
return u$1`
|
|
2969
|
+
return u$1$1`
|
|
2970
2970
|
<div class="container" part="bibContainer">
|
|
2971
2971
|
<slot></slot>
|
|
2972
2972
|
</div>
|
|
@@ -2996,7 +2996,7 @@ if (!customElements.get("auro-dropdownbib")) {
|
|
|
2996
2996
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
2997
2997
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
2998
2998
|
*/
|
|
2999
|
-
class AuroDropdown extends r {
|
|
2999
|
+
class AuroDropdown extends r$4 {
|
|
3000
3000
|
constructor() {
|
|
3001
3001
|
super();
|
|
3002
3002
|
|
|
@@ -3035,7 +3035,7 @@ class AuroDropdown extends r {
|
|
|
3035
3035
|
/**
|
|
3036
3036
|
* @private
|
|
3037
3037
|
*/
|
|
3038
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
3038
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
3039
3039
|
|
|
3040
3040
|
/**
|
|
3041
3041
|
* @private
|
|
@@ -3055,8 +3055,8 @@ class AuroDropdown extends r {
|
|
|
3055
3055
|
/**
|
|
3056
3056
|
* Generate unique names for dependency components.
|
|
3057
3057
|
*/
|
|
3058
|
-
const versioning = new AuroDependencyVersioning();
|
|
3059
|
-
this.iconTag = versioning.generateTag('auro-icon', iconVersion$
|
|
3058
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
3059
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion$2, AuroIcon$2);
|
|
3060
3060
|
}
|
|
3061
3061
|
|
|
3062
3062
|
/**
|
|
@@ -3236,9 +3236,9 @@ class AuroDropdown extends r {
|
|
|
3236
3236
|
|
|
3237
3237
|
static get styles() {
|
|
3238
3238
|
return [
|
|
3239
|
-
colorCss$1$
|
|
3240
|
-
styleCss$1$
|
|
3241
|
-
tokensCss$
|
|
3239
|
+
colorCss$1$2,
|
|
3240
|
+
styleCss$1$2,
|
|
3241
|
+
tokensCss$4
|
|
3242
3242
|
];
|
|
3243
3243
|
}
|
|
3244
3244
|
|
|
@@ -3251,7 +3251,7 @@ class AuroDropdown extends r {
|
|
|
3251
3251
|
*
|
|
3252
3252
|
*/
|
|
3253
3253
|
static register(name = "auro-dropdown") {
|
|
3254
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown);
|
|
3254
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
|
|
3255
3255
|
}
|
|
3256
3256
|
|
|
3257
3257
|
connectedCallback() {
|
|
@@ -3375,7 +3375,7 @@ class AuroDropdown extends r {
|
|
|
3375
3375
|
|
|
3376
3376
|
// function that renders the HTML and CSS into the scope of the component
|
|
3377
3377
|
render() {
|
|
3378
|
-
return u$1`
|
|
3378
|
+
return u$1$1`
|
|
3379
3379
|
<div>
|
|
3380
3380
|
<div
|
|
3381
3381
|
id="trigger"
|
|
@@ -3396,7 +3396,7 @@ class AuroDropdown extends r {
|
|
|
3396
3396
|
@slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
|
|
3397
3397
|
</div>
|
|
3398
3398
|
</div>
|
|
3399
|
-
${this.chevron || this.common ? u$1`
|
|
3399
|
+
${this.chevron || this.common ? u$1$1`
|
|
3400
3400
|
<div
|
|
3401
3401
|
id="showStateIcon"
|
|
3402
3402
|
part="chevron">
|
|
@@ -3435,105 +3435,1617 @@ AuroDropdown.register();
|
|
|
3435
3435
|
|
|
3436
3436
|
var dropdownVersion = '3.0.0';
|
|
3437
3437
|
|
|
3438
|
-
|
|
3438
|
+
/**
|
|
3439
|
+
* @license
|
|
3440
|
+
* Copyright 2019 Google LLC
|
|
3441
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3442
|
+
*/
|
|
3443
|
+
const t$2=globalThis,e$4=t$2.ShadowRoot&&(undefined===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$4.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$3("string"==typeof t?t:t+"",undefined,s$2),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
|
|
3444
|
+
|
|
3445
|
+
/**
|
|
3446
|
+
* @license
|
|
3447
|
+
* Copyright 2017 Google LLC
|
|
3448
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3449
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$3,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={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$1=(t,s)=>!i$4(t,s),y$1={attribute:true,type:String,converter:u$2,reflect:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;class b 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=y$1){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);undefined!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),undefined!==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=[...h$1(t),...o$3(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(undefined!==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);undefined!==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 undefined!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?undefined:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():undefined}constructor(){super(),this._$Ep=undefined,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),undefined!==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);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(undefined!==e&&true===i.reflect){const r=(undefined!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(undefined!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:undefined!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(undefined!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){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=undefined;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||undefined===this[s]||this.P(s,this[s],i);}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._$EU();}catch(s){throw t=false,this._$EU(),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);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$2.reactiveElementVersions??=[]).push("2.0.4");
|
|
3450
|
+
|
|
3451
|
+
/**
|
|
3452
|
+
* @license
|
|
3453
|
+
* Copyright 2017 Google LLC
|
|
3454
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3455
|
+
*/
|
|
3456
|
+
const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$2="?"+h,n$1=`<${o$2}>`,r$1=document,l$1=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$1=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:undefined!==u[1]?c=_:undefined!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):undefined!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):undefined===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=undefined===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=undefined);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1());}}}else if(8===r.nodeType)if(r.data===o$2)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$1.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=undefined!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?undefined:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),undefined===o?h=undefined:(h=new o(t),h._$AT(t,s,e)),undefined!==e?(s._$Co??=[])[e]=h:s._$Cl=h),undefined!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=undefined,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??r$1).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;undefined!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$1,e}p(t){let i=0;for(const s of this._$AV) undefined!==s&&(undefined!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=undefined,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 undefined!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):undefined!==t._$litType$?this.$(t):undefined!==t.nodeType?this.T(t):u$1(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!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(undefined===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return undefined===i&&A.set(t.strings,i=new N(t)),i}k(t){a$1(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 R(this.O(l$1()),this.O(l$1()),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,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ undefined===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=undefined,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=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(undefined===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?undefined:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||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=undefined,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(undefined===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$1(),t),t,undefined,s??{});}return h._$AI(t),h};
|
|
3457
|
+
|
|
3458
|
+
/**
|
|
3459
|
+
* @license
|
|
3460
|
+
* Copyright 2017 Google LLC
|
|
3461
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3462
|
+
*/class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
3463
|
+
|
|
3464
|
+
var styleCss$2$1 = i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left: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([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
|
|
3465
|
+
|
|
3466
|
+
var colorCss$2$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
|
|
3467
|
+
|
|
3468
|
+
var tokensCss$1$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
|
|
3469
|
+
|
|
3470
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3471
|
+
// See LICENSE in the project root for license information.
|
|
3472
|
+
|
|
3473
|
+
// ---------------------------------------------------------------------
|
|
3474
|
+
|
|
3475
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3476
|
+
|
|
3477
|
+
class AuroLibraryRuntimeUtils {
|
|
3478
|
+
|
|
3479
|
+
/* eslint-disable jsdoc/require-param */
|
|
3480
|
+
|
|
3481
|
+
/**
|
|
3482
|
+
* This will register a new custom element with the browser.
|
|
3483
|
+
* @param {String} name - The name of the custom element.
|
|
3484
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
3485
|
+
* @returns {void}
|
|
3486
|
+
*/
|
|
3487
|
+
registerComponent(name, componentClass) {
|
|
3488
|
+
if (!customElements.get(name)) {
|
|
3489
|
+
customElements.define(name, class extends componentClass {});
|
|
3490
|
+
}
|
|
3491
|
+
}
|
|
3492
|
+
|
|
3493
|
+
/**
|
|
3494
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
3495
|
+
* @returns {void}
|
|
3496
|
+
*/
|
|
3497
|
+
closestElement(
|
|
3498
|
+
selector, // selector like in .closest()
|
|
3499
|
+
base = this, // extra functionality to skip a parent
|
|
3500
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
3501
|
+
!el || el === document || el === window
|
|
3502
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
3503
|
+
: found
|
|
3504
|
+
? found // found a selector INside this element
|
|
3505
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
3506
|
+
) {
|
|
3507
|
+
return __Closest(base);
|
|
3508
|
+
}
|
|
3509
|
+
/* eslint-enable jsdoc/require-param */
|
|
3510
|
+
|
|
3511
|
+
/**
|
|
3512
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
3513
|
+
* @param {Object} elem - The element to check.
|
|
3514
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
3515
|
+
* @returns {void}
|
|
3516
|
+
*/
|
|
3517
|
+
handleComponentTagRename(elem, tagName) {
|
|
3518
|
+
const tag = tagName.toLowerCase();
|
|
3519
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
3520
|
+
|
|
3521
|
+
if (elemTag !== tag) {
|
|
3522
|
+
elem.setAttribute(tag, true);
|
|
3523
|
+
}
|
|
3524
|
+
}
|
|
3525
|
+
|
|
3526
|
+
/**
|
|
3527
|
+
* Validates if an element is a specific Auro component.
|
|
3528
|
+
* @param {Object} elem - The element to validate.
|
|
3529
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
3530
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
3531
|
+
*/
|
|
3532
|
+
elementMatch(elem, tagName) {
|
|
3533
|
+
const tag = tagName.toLowerCase();
|
|
3534
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
3535
|
+
|
|
3536
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
3537
|
+
}
|
|
3538
|
+
}
|
|
3539
|
+
|
|
3540
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3541
|
+
// See LICENSE in the project root for license information.
|
|
3542
|
+
|
|
3543
|
+
// ---------------------------------------------------------------------
|
|
3544
|
+
|
|
3545
|
+
/**
|
|
3546
|
+
* Converts value to an array.
|
|
3547
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
3548
|
+
* If the value is already an array, it is returned.
|
|
3549
|
+
* If the value is undefined, it returns undefined.
|
|
3550
|
+
* @private
|
|
3551
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
3552
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
3553
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
3554
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
3555
|
+
*/
|
|
3556
|
+
function arrayConverter$1(value) {
|
|
3557
|
+
// Allow undefined
|
|
3558
|
+
if (value === undefined) {
|
|
3559
|
+
return undefined;
|
|
3560
|
+
}
|
|
3561
|
+
|
|
3562
|
+
// Return the value if it is already an array
|
|
3563
|
+
if (Array.isArray(value)) {
|
|
3564
|
+
return value;
|
|
3565
|
+
}
|
|
3566
|
+
|
|
3567
|
+
try {
|
|
3568
|
+
// If value is a JSON string, parse it
|
|
3569
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
3570
|
+
|
|
3571
|
+
// Check if the parsed value is an array
|
|
3572
|
+
if (Array.isArray(parsed)) {
|
|
3573
|
+
return parsed;
|
|
3574
|
+
}
|
|
3575
|
+
} catch (error) {
|
|
3576
|
+
// If JSON parsing fails, continue to throw an error below
|
|
3577
|
+
/* eslint-disable no-console */
|
|
3578
|
+
console.error('JSON parsing failed:', error);
|
|
3579
|
+
}
|
|
3580
|
+
|
|
3581
|
+
// Throw error if the input is not an array or undefined
|
|
3582
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
3583
|
+
}
|
|
3584
|
+
|
|
3585
|
+
/**
|
|
3586
|
+
* Compare two arrays for equality.
|
|
3587
|
+
* @private
|
|
3588
|
+
* @param {Array} arr1 - First array to compare.
|
|
3589
|
+
* @param {Array} arr2 - Second array to compare.
|
|
3590
|
+
* @returns {boolean} True if arrays are equal.
|
|
3591
|
+
*/
|
|
3592
|
+
function arraysAreEqual$1(arr1, arr2) {
|
|
3593
|
+
// If both arrays undefined, they are equal (true)
|
|
3594
|
+
if (arr1 === undefined || arr2 === undefined) {
|
|
3595
|
+
return arr1 === arr2;
|
|
3596
|
+
}
|
|
3597
|
+
|
|
3598
|
+
// If arrays have different lengths, they are not equal
|
|
3599
|
+
if (arr1.length !== arr2.length) {
|
|
3600
|
+
return false;
|
|
3601
|
+
}
|
|
3602
|
+
|
|
3603
|
+
// If every item at each index is the same, return true
|
|
3604
|
+
for (let index = 0; index < arr1.length; index += 1) {
|
|
3605
|
+
if (arr1[index] !== arr2[index]) {
|
|
3606
|
+
return false;
|
|
3607
|
+
}
|
|
3608
|
+
}
|
|
3609
|
+
return true;
|
|
3610
|
+
}
|
|
3611
|
+
|
|
3612
|
+
/**
|
|
3613
|
+
* Compares array for changes.
|
|
3614
|
+
* @private
|
|
3615
|
+
* @param {Array|any} newVal - New value to compare.
|
|
3616
|
+
* @param {Array|any} oldVal - Old value to compare.
|
|
3617
|
+
* @returns {boolean} True if arrays have changed.
|
|
3618
|
+
*/
|
|
3619
|
+
function arrayOrUndefinedHasChanged$1(newVal, oldVal) {
|
|
3620
|
+
try {
|
|
3621
|
+
// Check if values are undefined or arrays
|
|
3622
|
+
const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
|
|
3623
|
+
|
|
3624
|
+
// If non-array or non-undefined, throw error
|
|
3625
|
+
if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
|
|
3626
|
+
const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
|
|
3627
|
+
throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
|
|
3628
|
+
}
|
|
3629
|
+
|
|
3630
|
+
// Return true if arrays have changed, false if they are the same
|
|
3631
|
+
return !arraysAreEqual$1(newVal, oldVal);
|
|
3632
|
+
} catch (error) {
|
|
3633
|
+
/* eslint-disable no-console */
|
|
3634
|
+
console.error(error);
|
|
3635
|
+
// If validation fails, it has changed
|
|
3636
|
+
return true;
|
|
3637
|
+
}
|
|
3638
|
+
}
|
|
3639
|
+
|
|
3640
|
+
/**
|
|
3641
|
+
* Validates if an option can be interacted with.
|
|
3642
|
+
* @private
|
|
3643
|
+
* @param {HTMLElement} option - The option to check.
|
|
3644
|
+
* @returns {boolean} True if option is interactive.
|
|
3645
|
+
*/
|
|
3646
|
+
function isOptionInteractive$1(option) {
|
|
3647
|
+
return !option.hasAttribute('hidden') &&
|
|
3648
|
+
!option.hasAttribute('disabled') &&
|
|
3649
|
+
!option.hasAttribute('static');
|
|
3650
|
+
}
|
|
3651
|
+
|
|
3652
|
+
/**
|
|
3653
|
+
* Helper method to dispatch custom events.
|
|
3654
|
+
* @param {HTMLElement} element - Element to dispatch event from.
|
|
3655
|
+
* @param {string} eventName - Name of the event to dispatch.
|
|
3656
|
+
* @param {Object} [detail] - Optional detail object to include with the event.
|
|
3657
|
+
*/
|
|
3658
|
+
function dispatchMenuEvent$1(element, eventName, detail = null) {
|
|
3659
|
+
const eventConfig = {
|
|
3660
|
+
bubbles: true,
|
|
3661
|
+
cancelable: false,
|
|
3662
|
+
composed: true
|
|
3663
|
+
};
|
|
3439
3664
|
|
|
3440
|
-
|
|
3665
|
+
if (detail !== null) {
|
|
3666
|
+
eventConfig.detail = detail;
|
|
3667
|
+
}
|
|
3441
3668
|
|
|
3442
|
-
|
|
3669
|
+
element.dispatchEvent(new CustomEvent(eventName, eventConfig));
|
|
3670
|
+
}
|
|
3443
3671
|
|
|
3444
3672
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3445
3673
|
// See LICENSE in the project root for license information.
|
|
3446
3674
|
|
|
3447
3675
|
|
|
3676
|
+
|
|
3448
3677
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
3449
3678
|
/**
|
|
3450
|
-
* The auro-
|
|
3451
|
-
*
|
|
3452
|
-
* @
|
|
3453
|
-
* @
|
|
3454
|
-
* @
|
|
3455
|
-
* @
|
|
3456
|
-
* @
|
|
3457
|
-
* @
|
|
3458
|
-
* @
|
|
3679
|
+
* The auro-menu element provides users a way to select from a list of options.
|
|
3680
|
+
* @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
|
|
3681
|
+
* @attr {object} optionactive - Specifies the current active menuOption.
|
|
3682
|
+
* @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
|
|
3683
|
+
* @attr {boolean} disabled - When true, the entire menu and all options are disabled;
|
|
3684
|
+
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
3685
|
+
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
3686
|
+
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
3687
|
+
* @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
|
|
3688
|
+
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
3689
|
+
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
3690
|
+
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3691
|
+
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
3692
|
+
* @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
|
|
3693
|
+
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
3694
|
+
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
3695
|
+
* @slot loadingText - Text to show while loading attribute is set
|
|
3696
|
+
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
3697
|
+
* @slot - Slot for insertion of menu options.
|
|
3459
3698
|
*/
|
|
3460
3699
|
|
|
3461
|
-
|
|
3462
|
-
|
|
3700
|
+
/* eslint-disable no-magic-numbers, max-lines */
|
|
3701
|
+
|
|
3702
|
+
let AuroMenu$1 = class AuroMenu extends r {
|
|
3463
3703
|
constructor() {
|
|
3464
3704
|
super();
|
|
3465
3705
|
|
|
3706
|
+
// State properties (reactive)
|
|
3707
|
+
|
|
3708
|
+
// Value of the selected options
|
|
3709
|
+
this.value = undefined;
|
|
3710
|
+
// Currently selected option
|
|
3466
3711
|
this.optionSelected = undefined;
|
|
3467
|
-
|
|
3712
|
+
// String used for highlighting/filtering
|
|
3713
|
+
this.matchWord = undefined;
|
|
3714
|
+
// Hide the checkmark icon on selected options
|
|
3715
|
+
this.noCheckmark = false;
|
|
3716
|
+
// Currently active option
|
|
3717
|
+
this.optionActive = undefined;
|
|
3718
|
+
// Loading state
|
|
3719
|
+
this.loading = false;
|
|
3720
|
+
// Multi-select mode
|
|
3721
|
+
this.multiSelect = false;
|
|
3468
3722
|
|
|
3469
|
-
|
|
3470
|
-
const idSubstrEnd = 8;
|
|
3471
|
-
const idSubstrStart = 2;
|
|
3723
|
+
// Event Bindings
|
|
3472
3724
|
|
|
3473
3725
|
/**
|
|
3474
3726
|
* @private
|
|
3475
3727
|
*/
|
|
3476
|
-
this.
|
|
3477
|
-
toString(idLength).
|
|
3478
|
-
substring(idSubstrStart, idSubstrEnd);
|
|
3728
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
3479
3729
|
|
|
3480
3730
|
/**
|
|
3481
3731
|
* @private
|
|
3482
3732
|
*/
|
|
3483
|
-
this.
|
|
3733
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
3484
3734
|
|
|
3485
3735
|
/**
|
|
3486
3736
|
* @private
|
|
3487
3737
|
*/
|
|
3488
|
-
this.
|
|
3489
|
-
|
|
3490
|
-
/**
|
|
3491
|
-
* Generate unique names for dependency components.
|
|
3492
|
-
*/
|
|
3493
|
-
const versioning = new AuroDependencyVersioning$1();
|
|
3738
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
3494
3739
|
|
|
3495
3740
|
/**
|
|
3496
3741
|
* @private
|
|
3497
3742
|
*/
|
|
3498
|
-
this.
|
|
3743
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
3744
|
+
|
|
3745
|
+
// Instance properties (non-reactive)
|
|
3499
3746
|
|
|
3500
3747
|
/**
|
|
3501
3748
|
* @private
|
|
3502
3749
|
*/
|
|
3503
|
-
this
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3750
|
+
Object.assign(this, {
|
|
3751
|
+
// Root-level menu (true) or a nested submenu (false)
|
|
3752
|
+
rootMenu: true,
|
|
3753
|
+
// Currently focused/active menu item index
|
|
3754
|
+
index: -1,
|
|
3755
|
+
// Nested menu spacer
|
|
3756
|
+
nestingSpacer: '<span class="nestingSpacer"></span>',
|
|
3757
|
+
// Loading indicator for slot elements
|
|
3758
|
+
loadingSlots: null,
|
|
3759
|
+
// Store for menu items
|
|
3760
|
+
items: [],
|
|
3761
|
+
});
|
|
3513
3762
|
}
|
|
3514
3763
|
|
|
3515
|
-
// This function is to define props used within the scope of this component
|
|
3516
|
-
// Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes
|
|
3517
|
-
// to understand how to use reflected attributes with your property settings.
|
|
3518
3764
|
static get properties() {
|
|
3519
3765
|
return {
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3766
|
+
noCheckmark: {
|
|
3767
|
+
type: Boolean,
|
|
3768
|
+
reflect: true,
|
|
3769
|
+
attribute: 'nocheckmark'
|
|
3770
|
+
},
|
|
3524
3771
|
disabled: {
|
|
3525
3772
|
type: Boolean,
|
|
3526
3773
|
reflect: true
|
|
3527
3774
|
},
|
|
3528
|
-
|
|
3529
|
-
/**
|
|
3530
|
-
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
3531
|
-
*/
|
|
3532
|
-
flexMenuWidth: {
|
|
3775
|
+
loading: {
|
|
3533
3776
|
type: Boolean,
|
|
3534
3777
|
reflect: true
|
|
3535
3778
|
},
|
|
3536
|
-
|
|
3779
|
+
optionSelected: {
|
|
3780
|
+
// Allow HTMLElement[] arrays and undefined
|
|
3781
|
+
converter: arrayConverter$1,
|
|
3782
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3783
|
+
},
|
|
3784
|
+
optionActive: {
|
|
3785
|
+
type: Object,
|
|
3786
|
+
attribute: 'optionactive'
|
|
3787
|
+
},
|
|
3788
|
+
matchWord: {
|
|
3789
|
+
type: String,
|
|
3790
|
+
attribute: 'matchword'
|
|
3791
|
+
},
|
|
3792
|
+
multiSelect: {
|
|
3793
|
+
type: Boolean,
|
|
3794
|
+
reflect: true,
|
|
3795
|
+
attribute: 'multiselect'
|
|
3796
|
+
},
|
|
3797
|
+
value: {
|
|
3798
|
+
// Allow string[] arrays and undefined
|
|
3799
|
+
type: Object,
|
|
3800
|
+
converter: arrayConverter$1,
|
|
3801
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3802
|
+
}
|
|
3803
|
+
};
|
|
3804
|
+
}
|
|
3805
|
+
|
|
3806
|
+
static get styles() {
|
|
3807
|
+
return [
|
|
3808
|
+
styleCss$2$1,
|
|
3809
|
+
colorCss$2$1,
|
|
3810
|
+
tokensCss$1$1
|
|
3811
|
+
];
|
|
3812
|
+
}
|
|
3813
|
+
|
|
3814
|
+
/**
|
|
3815
|
+
* This will register this element with the browser.
|
|
3816
|
+
* @param {string} [name="auro-menu"] - The name of element that you want to register to.
|
|
3817
|
+
*
|
|
3818
|
+
* @example
|
|
3819
|
+
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
3820
|
+
*
|
|
3821
|
+
*/
|
|
3822
|
+
static register(name = "auro-menu") {
|
|
3823
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
|
|
3824
|
+
}
|
|
3825
|
+
|
|
3826
|
+
// Lifecycle Methods
|
|
3827
|
+
|
|
3828
|
+
connectedCallback() {
|
|
3829
|
+
super.connectedCallback();
|
|
3830
|
+
|
|
3831
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
3832
|
+
this.addEventListener('mousedown', this.handleMouseSelect);
|
|
3833
|
+
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
3834
|
+
this.addEventListener('slotchange', this.handleSlotChange);
|
|
3835
|
+
}
|
|
3836
|
+
|
|
3837
|
+
disconnectedCallback() {
|
|
3838
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
3839
|
+
this.removeEventListener('mousedown', this.handleMouseSelect);
|
|
3840
|
+
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
3841
|
+
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
3842
|
+
|
|
3843
|
+
super.disconnectedCallback();
|
|
3844
|
+
}
|
|
3845
|
+
|
|
3846
|
+
firstUpdated() {
|
|
3847
|
+
AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
3848
|
+
|
|
3849
|
+
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
3850
|
+
this.initializeMenu();
|
|
3851
|
+
}
|
|
3852
|
+
|
|
3853
|
+
updated(changedProperties) {
|
|
3854
|
+
if (changedProperties.has('value')) {
|
|
3855
|
+
// Handle null/undefined case
|
|
3856
|
+
if (this.value === undefined || this.value === null) {
|
|
3857
|
+
this.optionSelected = undefined;
|
|
3858
|
+
// Reset index tracking
|
|
3859
|
+
this.index = -1;
|
|
3860
|
+
} else {
|
|
3861
|
+
// Convert single values to arrays
|
|
3862
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
3863
|
+
|
|
3864
|
+
// Find all matching options
|
|
3865
|
+
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
3866
|
+
|
|
3867
|
+
if (matchingOptions.length > 0) {
|
|
3868
|
+
if (this.multiSelect) {
|
|
3869
|
+
// For multiselect, keep all matching options
|
|
3870
|
+
this.optionSelected = matchingOptions;
|
|
3871
|
+
} else {
|
|
3872
|
+
// For single select, only use the first match
|
|
3873
|
+
this.optionSelected = [matchingOptions[0]];
|
|
3874
|
+
this.index = this.items.indexOf(matchingOptions[0]);
|
|
3875
|
+
}
|
|
3876
|
+
} else {
|
|
3877
|
+
// No matches found - trigger failure event
|
|
3878
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueFailure');
|
|
3879
|
+
this.optionSelected = undefined;
|
|
3880
|
+
this.index = -1;
|
|
3881
|
+
}
|
|
3882
|
+
}
|
|
3883
|
+
|
|
3884
|
+
// Update UI state
|
|
3885
|
+
this.updateItemsState(new Map([
|
|
3886
|
+
[
|
|
3887
|
+
'optionSelected',
|
|
3888
|
+
true
|
|
3889
|
+
]
|
|
3890
|
+
]));
|
|
3891
|
+
|
|
3892
|
+
// Notify of changes
|
|
3893
|
+
if (this.optionSelected !== undefined) {
|
|
3894
|
+
this.notifySelectionChange();
|
|
3895
|
+
}
|
|
3896
|
+
}
|
|
3897
|
+
|
|
3898
|
+
// Process all other UI updates
|
|
3899
|
+
this.updateItemsState(changedProperties);
|
|
3900
|
+
}
|
|
3901
|
+
|
|
3902
|
+
/**
|
|
3903
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
3904
|
+
* @private
|
|
3905
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
3906
|
+
*/
|
|
3907
|
+
updateItemsState(changedProperties) {
|
|
3908
|
+
if (!this.items) {
|
|
3909
|
+
return;
|
|
3910
|
+
}
|
|
3911
|
+
|
|
3912
|
+
// Handle noCheckmark propagation to all menus and options
|
|
3913
|
+
if (changedProperties.has('noCheckmark') && this.noCheckmark) {
|
|
3914
|
+
// Update both menus and options
|
|
3915
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
|
|
3916
|
+
}
|
|
3917
|
+
|
|
3918
|
+
// Regex for matchWord if needed
|
|
3919
|
+
let regexWord = null;
|
|
3920
|
+
|
|
3921
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
3922
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
3923
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
3924
|
+
}
|
|
3925
|
+
|
|
3926
|
+
// Handle direct item updates
|
|
3927
|
+
this.items.forEach((option) => {
|
|
3928
|
+
// Update selection if option or value changed
|
|
3929
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
3930
|
+
const isSelected = this.isOptionSelected(option);
|
|
3931
|
+
option.classList.toggle('active', isSelected);
|
|
3932
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
3933
|
+
|
|
3934
|
+
// Add/remove selected attribute based on state
|
|
3935
|
+
if (isSelected) {
|
|
3936
|
+
option.setAttribute('selected', '');
|
|
3937
|
+
} else {
|
|
3938
|
+
option.removeAttribute('selected');
|
|
3939
|
+
}
|
|
3940
|
+
}
|
|
3941
|
+
|
|
3942
|
+
// Update text highlighting if matchWord changed
|
|
3943
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
3944
|
+
isOptionInteractive$1(option) && !option.hasAttribute('persistent')) {
|
|
3945
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
3946
|
+
// Create nested spacers
|
|
3947
|
+
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
3948
|
+
|
|
3949
|
+
// Update with spacers and matchWord
|
|
3950
|
+
option.innerHTML = nestingSpacerBundle +
|
|
3951
|
+
option.textContent.replace(
|
|
3952
|
+
regexWord,
|
|
3953
|
+
(match) => `<strong>${match}</strong>`
|
|
3954
|
+
);
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3957
|
+
// Update disabled state
|
|
3958
|
+
if (changedProperties.has('disabled')) {
|
|
3959
|
+
option.disabled = this.disabled;
|
|
3960
|
+
}
|
|
3961
|
+
});
|
|
3962
|
+
|
|
3963
|
+
// Handle loading state changes
|
|
3964
|
+
if (changedProperties.has('loading')) {
|
|
3965
|
+
this.setAttribute("aria-busy", this.loading);
|
|
3966
|
+
dispatchMenuEvent$1(this, "auroMenu-loadingChange", {
|
|
3967
|
+
loading: this.loading,
|
|
3968
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
3969
|
+
});
|
|
3970
|
+
}
|
|
3971
|
+
}
|
|
3972
|
+
|
|
3973
|
+
// Init Methods
|
|
3974
|
+
|
|
3975
|
+
/**
|
|
3976
|
+
* Initializes the menu's state and structure.
|
|
3977
|
+
* @private
|
|
3978
|
+
*/
|
|
3979
|
+
initializeMenu() {
|
|
3980
|
+
this.initItems();
|
|
3981
|
+
if (this.rootMenu) {
|
|
3982
|
+
this.setAttribute('role', 'listbox');
|
|
3983
|
+
this.setAttribute('root', '');
|
|
3984
|
+
this.handleNestedMenus(this);
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
|
|
3988
|
+
/**
|
|
3989
|
+
* Initializes menu items and their attributes.
|
|
3990
|
+
* @private
|
|
3991
|
+
*/
|
|
3992
|
+
initItems() {
|
|
3993
|
+
this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
3994
|
+
if (this.noCheckmark) {
|
|
3995
|
+
this.updateItemsState(new Map([
|
|
3996
|
+
[
|
|
3997
|
+
'noCheckmark',
|
|
3998
|
+
true
|
|
3999
|
+
]
|
|
4000
|
+
]));
|
|
4001
|
+
}
|
|
4002
|
+
}
|
|
4003
|
+
|
|
4004
|
+
// Logic Methods
|
|
4005
|
+
|
|
4006
|
+
/**
|
|
4007
|
+
* Updates menu state when an option is selected.
|
|
4008
|
+
* @private
|
|
4009
|
+
* @param {HTMLElement} option - The option element to select.
|
|
4010
|
+
*/
|
|
4011
|
+
handleSelectState(option) {
|
|
4012
|
+
if (this.multiSelect) {
|
|
4013
|
+
const currentValue = this.value || [];
|
|
4014
|
+
const currentSelected = this.optionSelected || [];
|
|
4015
|
+
|
|
4016
|
+
if (!currentValue.includes(option.value)) {
|
|
4017
|
+
this.value = [
|
|
4018
|
+
...currentValue,
|
|
4019
|
+
option.value
|
|
4020
|
+
];
|
|
4021
|
+
}
|
|
4022
|
+
if (!currentSelected.includes(option)) {
|
|
4023
|
+
this.optionSelected = [
|
|
4024
|
+
...currentSelected,
|
|
4025
|
+
option
|
|
4026
|
+
];
|
|
4027
|
+
}
|
|
4028
|
+
} else {
|
|
4029
|
+
// Single select - use arrays with single values
|
|
4030
|
+
this.value = [option.value];
|
|
4031
|
+
this.optionSelected = [option];
|
|
4032
|
+
}
|
|
4033
|
+
|
|
4034
|
+
this.index = this.items.indexOf(option);
|
|
4035
|
+
}
|
|
4036
|
+
|
|
4037
|
+
/**
|
|
4038
|
+
* Deselects a menu option and updates related state.
|
|
4039
|
+
* @private
|
|
4040
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
4041
|
+
*/
|
|
4042
|
+
handleDeselectState(option) {
|
|
4043
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
4044
|
+
// Remove this option from array
|
|
4045
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
4046
|
+
|
|
4047
|
+
// If array is empty after removal, set back to undefined
|
|
4048
|
+
if (this.value.length === 0) {
|
|
4049
|
+
this.value = undefined;
|
|
4050
|
+
}
|
|
4051
|
+
|
|
4052
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
4053
|
+
if (this.optionSelected.length === 0) {
|
|
4054
|
+
this.optionSelected = undefined;
|
|
4055
|
+
}
|
|
4056
|
+
} else {
|
|
4057
|
+
// For single-select: Back to undefined when deselected
|
|
4058
|
+
this.value = undefined;
|
|
4059
|
+
this.optionSelected = undefined;
|
|
4060
|
+
}
|
|
4061
|
+
|
|
4062
|
+
// Update the index tracking
|
|
4063
|
+
this.index = this.items.indexOf(option);
|
|
4064
|
+
|
|
4065
|
+
// Update UI to reflect changes
|
|
4066
|
+
this.updateItemsState(new Map([
|
|
4067
|
+
[
|
|
4068
|
+
'optionSelected',
|
|
4069
|
+
true
|
|
4070
|
+
]
|
|
4071
|
+
]));
|
|
4072
|
+
|
|
4073
|
+
// Notify of selection change
|
|
4074
|
+
this.notifySelectionChange();
|
|
4075
|
+
}
|
|
4076
|
+
|
|
4077
|
+
/**
|
|
4078
|
+
* Resets all options to their default state.
|
|
4079
|
+
* @private
|
|
4080
|
+
*/
|
|
4081
|
+
clearSelection() {
|
|
4082
|
+
this.optionSelected = undefined;
|
|
4083
|
+
this.value = undefined;
|
|
4084
|
+
}
|
|
4085
|
+
|
|
4086
|
+
/**
|
|
4087
|
+
* Resets the menu to its initial state.
|
|
4088
|
+
* This is the only way to return value to undefined.
|
|
4089
|
+
* @public
|
|
4090
|
+
*/
|
|
4091
|
+
reset() {
|
|
4092
|
+
// Reset to undefined - initial state
|
|
4093
|
+
this.value = undefined;
|
|
4094
|
+
this.optionSelected = undefined;
|
|
4095
|
+
this.index = -1;
|
|
4096
|
+
|
|
4097
|
+
// Reset UI state
|
|
4098
|
+
this.updateItemsState(new Map([
|
|
4099
|
+
[
|
|
4100
|
+
'optionSelected',
|
|
4101
|
+
true
|
|
4102
|
+
]
|
|
4103
|
+
]));
|
|
4104
|
+
|
|
4105
|
+
// Dispatch reset event
|
|
4106
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueReset');
|
|
4107
|
+
}
|
|
4108
|
+
|
|
4109
|
+
/**
|
|
4110
|
+
* Handles nested menu structure.
|
|
4111
|
+
* @private
|
|
4112
|
+
* @param {HTMLElement} menu - Root menu element.
|
|
4113
|
+
*/
|
|
4114
|
+
handleNestedMenus(menu) {
|
|
4115
|
+
const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
|
|
4116
|
+
|
|
4117
|
+
nestedMenus.forEach((nestedMenu) => {
|
|
4118
|
+
// role="listbox" only allows "role=group" for children.
|
|
4119
|
+
nestedMenu.setAttribute('role', 'group');
|
|
4120
|
+
if (!nestedMenu.hasAttribute('aria-label')) {
|
|
4121
|
+
nestedMenu.setAttribute('aria-label', 'submenu');
|
|
4122
|
+
}
|
|
4123
|
+
|
|
4124
|
+
const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
4125
|
+
options.forEach((option) => {
|
|
4126
|
+
option.innerHTML = this.nestingSpacer + option.innerHTML;
|
|
4127
|
+
});
|
|
4128
|
+
|
|
4129
|
+
this.handleNestedMenus(nestedMenu);
|
|
4130
|
+
});
|
|
4131
|
+
}
|
|
4132
|
+
|
|
4133
|
+
// Event Handlers
|
|
4134
|
+
|
|
4135
|
+
/**
|
|
4136
|
+
* Handles keyboard navigation.
|
|
4137
|
+
* @private
|
|
4138
|
+
* @param {KeyboardEvent} event - Event object from the browser.
|
|
4139
|
+
*/
|
|
4140
|
+
handleKeyDown(event) {
|
|
4141
|
+
event.preventDefault();
|
|
4142
|
+
switch (event.key) {
|
|
4143
|
+
case "ArrowDown":
|
|
4144
|
+
this.navigateOptions('down');
|
|
4145
|
+
break;
|
|
4146
|
+
case "ArrowUp":
|
|
4147
|
+
this.navigateOptions('up');
|
|
4148
|
+
break;
|
|
4149
|
+
case "Enter":
|
|
4150
|
+
this.makeSelection();
|
|
4151
|
+
break;
|
|
4152
|
+
}
|
|
4153
|
+
}
|
|
4154
|
+
|
|
4155
|
+
/**
|
|
4156
|
+
* Makes a selection based on the current index or clicked option.
|
|
4157
|
+
* @private
|
|
4158
|
+
*/
|
|
4159
|
+
makeSelection() {
|
|
4160
|
+
if (!this.items) {
|
|
4161
|
+
this.initItems();
|
|
4162
|
+
}
|
|
4163
|
+
|
|
4164
|
+
// Get currently selected menu option based on index
|
|
4165
|
+
const option = this.items[this.index];
|
|
4166
|
+
|
|
4167
|
+
// Return early if option is not interactive
|
|
4168
|
+
if (!option || !isOptionInteractive$1(option)) {
|
|
4169
|
+
return;
|
|
4170
|
+
}
|
|
4171
|
+
|
|
4172
|
+
// Handle custom events first
|
|
4173
|
+
if (option.hasAttribute('event')) {
|
|
4174
|
+
this.handleCustomEvent(option);
|
|
4175
|
+
return;
|
|
4176
|
+
}
|
|
4177
|
+
|
|
4178
|
+
if (this.multiSelect) {
|
|
4179
|
+
// In multiselect, toggle individual selections
|
|
4180
|
+
this.toggleOption(option);
|
|
4181
|
+
// In single select, only handle selection of new options
|
|
4182
|
+
} else if (!this.isOptionSelected(option)) {
|
|
4183
|
+
this.clearSelection();
|
|
4184
|
+
this.handleSelectState(option);
|
|
4185
|
+
}
|
|
4186
|
+
|
|
4187
|
+
this.notifySelectionChange();
|
|
4188
|
+
}
|
|
4189
|
+
|
|
4190
|
+
/**
|
|
4191
|
+
* Toggle the selection state of the menuoption.
|
|
4192
|
+
* @private
|
|
4193
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
4194
|
+
*/
|
|
4195
|
+
toggleOption(option) {
|
|
4196
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
4197
|
+
|
|
4198
|
+
if (isCurrentlySelected) {
|
|
4199
|
+
this.handleDeselectState(option);
|
|
4200
|
+
} else if (option.value === undefined || option.value === '') {
|
|
4201
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueFailure');
|
|
4202
|
+
} else {
|
|
4203
|
+
this.handleSelectState(option);
|
|
4204
|
+
}
|
|
4205
|
+
}
|
|
4206
|
+
|
|
4207
|
+
/**
|
|
4208
|
+
* Handles option selection via mouse.
|
|
4209
|
+
* @private
|
|
4210
|
+
* @param {MouseEvent} event - Event object from the browser.
|
|
4211
|
+
*/
|
|
4212
|
+
handleMouseSelect(event) {
|
|
4213
|
+
if (event.target === this) {
|
|
4214
|
+
return;
|
|
4215
|
+
}
|
|
4216
|
+
|
|
4217
|
+
const option = event.target.closest('auro-menuoption, [auro-menuoption]');
|
|
4218
|
+
if (option) {
|
|
4219
|
+
this.index = this.items.indexOf(option);
|
|
4220
|
+
this.makeSelection();
|
|
4221
|
+
}
|
|
4222
|
+
}
|
|
4223
|
+
|
|
4224
|
+
/**
|
|
4225
|
+
* Handles option hover events.
|
|
4226
|
+
* @private
|
|
4227
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
4228
|
+
*/
|
|
4229
|
+
handleOptionHover(event) {
|
|
4230
|
+
const option = event.target;
|
|
4231
|
+
this.index = this.items.indexOf(option);
|
|
4232
|
+
this.updateActiveOption(this.index);
|
|
4233
|
+
}
|
|
4234
|
+
|
|
4235
|
+
/**
|
|
4236
|
+
* Handles slot change events.
|
|
4237
|
+
* @private
|
|
4238
|
+
*/
|
|
4239
|
+
handleSlotChange() {
|
|
4240
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
4241
|
+
this.rootMenu = false;
|
|
4242
|
+
}
|
|
4243
|
+
|
|
4244
|
+
if (this.rootMenu) {
|
|
4245
|
+
this.initializeMenu();
|
|
4246
|
+
} else if (this.noCheckmark) {
|
|
4247
|
+
this.updateItemsState(new Map([
|
|
4248
|
+
[
|
|
4249
|
+
'noCheckmark',
|
|
4250
|
+
true
|
|
4251
|
+
]
|
|
4252
|
+
]));
|
|
4253
|
+
}
|
|
4254
|
+
}
|
|
4255
|
+
|
|
4256
|
+
/**
|
|
4257
|
+
* Navigates through options using keyboard.
|
|
4258
|
+
* @private
|
|
4259
|
+
* @param {string} direction - 'up' or 'down'.
|
|
4260
|
+
*/
|
|
4261
|
+
navigateOptions(direction) {
|
|
4262
|
+
// Return early if no items exist
|
|
4263
|
+
if (!this.items || !this.items.length) {
|
|
4264
|
+
return;
|
|
4265
|
+
}
|
|
4266
|
+
|
|
4267
|
+
let newIndex = this.index;
|
|
4268
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
4269
|
+
const maxIterations = this.items.length;
|
|
4270
|
+
let iterations = 0;
|
|
4271
|
+
let foundInteractiveOption = false;
|
|
4272
|
+
|
|
4273
|
+
do {
|
|
4274
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
4275
|
+
iterations += 1;
|
|
4276
|
+
|
|
4277
|
+
// Check if current option is interactive
|
|
4278
|
+
const currentOption = this.items[newIndex];
|
|
4279
|
+
if (isOptionInteractive$1(currentOption)) {
|
|
4280
|
+
foundInteractiveOption = true;
|
|
4281
|
+
break;
|
|
4282
|
+
}
|
|
4283
|
+
|
|
4284
|
+
// Break if all options were checked
|
|
4285
|
+
if (iterations >= maxIterations) {
|
|
4286
|
+
break;
|
|
4287
|
+
}
|
|
4288
|
+
} while (iterations < maxIterations);
|
|
4289
|
+
|
|
4290
|
+
// Handle the results of the search
|
|
4291
|
+
if (foundInteractiveOption) {
|
|
4292
|
+
// Update only if an interactive option was found
|
|
4293
|
+
this.index = newIndex;
|
|
4294
|
+
this.updateActiveOption(this.index);
|
|
4295
|
+
} else {
|
|
4296
|
+
// All options are disabled or non-interactive
|
|
4297
|
+
// Keep the current index unchanged
|
|
4298
|
+
dispatchMenuEvent$1(this, 'auroMenu-navigateFailure', {
|
|
4299
|
+
reason: 'No interactive options available',
|
|
4300
|
+
direction,
|
|
4301
|
+
currentIndex: this.index
|
|
4302
|
+
});
|
|
4303
|
+
}
|
|
4304
|
+
}
|
|
4305
|
+
|
|
4306
|
+
/**
|
|
4307
|
+
* Updates the active option state and dispatches events.
|
|
4308
|
+
* @private
|
|
4309
|
+
* @param {number} index - Index of the option to make active.
|
|
4310
|
+
*/
|
|
4311
|
+
updateActiveOption(index) {
|
|
4312
|
+
if (!this.items || !this.items[index]) {
|
|
4313
|
+
return;
|
|
4314
|
+
}
|
|
4315
|
+
|
|
4316
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
4317
|
+
this.items[index].classList.add('active');
|
|
4318
|
+
this.optionActive = this.items[index];
|
|
4319
|
+
|
|
4320
|
+
dispatchMenuEvent$1(this, 'auroMenu-activatedOption', this.items[index]);
|
|
4321
|
+
}
|
|
4322
|
+
|
|
4323
|
+
/**
|
|
4324
|
+
* Handles custom events defined on options.
|
|
4325
|
+
* @private
|
|
4326
|
+
* @param {HTMLElement} option - Option with custom event.
|
|
4327
|
+
*/
|
|
4328
|
+
handleCustomEvent(option) {
|
|
4329
|
+
const eventName = option.getAttribute('event');
|
|
4330
|
+
dispatchMenuEvent$1(this, eventName);
|
|
4331
|
+
dispatchMenuEvent$1(this, 'auroMenu-customEventFired');
|
|
4332
|
+
}
|
|
4333
|
+
|
|
4334
|
+
/**
|
|
4335
|
+
* Notifies selection change to parent components.
|
|
4336
|
+
* @private
|
|
4337
|
+
*/
|
|
4338
|
+
notifySelectionChange() {
|
|
4339
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectedOption');
|
|
4340
|
+
}
|
|
4341
|
+
|
|
4342
|
+
/**
|
|
4343
|
+
* Checks if an option is currently selected.
|
|
4344
|
+
* @private
|
|
4345
|
+
* @param {HTMLElement} option - The option to check.
|
|
4346
|
+
* @returns {boolean}
|
|
4347
|
+
*/
|
|
4348
|
+
isOptionSelected(option) {
|
|
4349
|
+
if (!this.optionSelected) {
|
|
4350
|
+
return false;
|
|
4351
|
+
}
|
|
4352
|
+
// Always treat as array for both single and multi-select
|
|
4353
|
+
return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
|
|
4354
|
+
}
|
|
4355
|
+
|
|
4356
|
+
/**
|
|
4357
|
+
* Getter for loading placeholder state.
|
|
4358
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
4359
|
+
*/
|
|
4360
|
+
get hasLoadingPlaceholder() {
|
|
4361
|
+
return this.loadingSlots && this.loadingSlots.length > 0;
|
|
4362
|
+
}
|
|
4363
|
+
|
|
4364
|
+
/**
|
|
4365
|
+
* Renders the component.
|
|
4366
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
4367
|
+
*/
|
|
4368
|
+
render() {
|
|
4369
|
+
if (this.loading) {
|
|
4370
|
+
return x`
|
|
4371
|
+
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
|
|
4372
|
+
<div>
|
|
4373
|
+
<slot name="loadingIcon"></slot>
|
|
4374
|
+
<slot name="loadingText"></slot>
|
|
4375
|
+
</div>
|
|
4376
|
+
</auro-menuoption>
|
|
4377
|
+
`;
|
|
4378
|
+
}
|
|
4379
|
+
|
|
4380
|
+
return x`<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
4381
|
+
}
|
|
4382
|
+
};
|
|
4383
|
+
|
|
4384
|
+
/**
|
|
4385
|
+
* @license
|
|
4386
|
+
* Copyright 2020 Google LLC
|
|
4387
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4388
|
+
*/
|
|
4389
|
+
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(undefined!==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&&undefined!==(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$$");undefined===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
4390
|
+
|
|
4391
|
+
var styleCss$1$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}: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)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
4392
|
+
|
|
4393
|
+
var colorCss$1$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
|
|
4394
|
+
|
|
4395
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
4396
|
+
// See LICENSE in the project root for license information.
|
|
4397
|
+
|
|
4398
|
+
|
|
4399
|
+
class AuroDependencyVersioning {
|
|
4400
|
+
|
|
4401
|
+
/**
|
|
4402
|
+
* Generates a unique string to be used for child auro element naming.
|
|
4403
|
+
* @private
|
|
4404
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
4405
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
4406
|
+
* @returns {string} - Unique string to be used for naming.
|
|
4407
|
+
*/
|
|
4408
|
+
generateElementName(baseName, version) {
|
|
4409
|
+
let result = baseName;
|
|
4410
|
+
|
|
4411
|
+
result += '-';
|
|
4412
|
+
result += version.replace(/[.]/g, '_');
|
|
4413
|
+
|
|
4414
|
+
return result;
|
|
4415
|
+
}
|
|
4416
|
+
|
|
4417
|
+
/**
|
|
4418
|
+
* Generates a unique string to be used for child auro element naming.
|
|
4419
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
4420
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
4421
|
+
* @returns {string} - Unique string to be used for naming.
|
|
4422
|
+
*/
|
|
4423
|
+
generateTag(baseName, version, tagClass) {
|
|
4424
|
+
const elementName = this.generateElementName(baseName, version);
|
|
4425
|
+
const tag = i$1`${s(elementName)}`;
|
|
4426
|
+
|
|
4427
|
+
if (!customElements.get(elementName)) {
|
|
4428
|
+
customElements.define(elementName, class extends tagClass {});
|
|
4429
|
+
}
|
|
4430
|
+
|
|
4431
|
+
return tag;
|
|
4432
|
+
}
|
|
4433
|
+
}
|
|
4434
|
+
|
|
4435
|
+
/**
|
|
4436
|
+
* @license
|
|
4437
|
+
* Copyright 2017 Google LLC
|
|
4438
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4439
|
+
*/
|
|
4440
|
+
const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
4441
|
+
|
|
4442
|
+
/**
|
|
4443
|
+
* @license
|
|
4444
|
+
* Copyright 2018 Google LLC
|
|
4445
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4446
|
+
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(undefined===this.st){this.st=new Set,undefined!==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 T}});
|
|
4447
|
+
|
|
4448
|
+
/**
|
|
4449
|
+
* @license
|
|
4450
|
+
* Copyright 2018 Google LLC
|
|
4451
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4452
|
+
*/const o$5=o=>o??E;
|
|
4453
|
+
|
|
4454
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4455
|
+
// See LICENSE in the project root for license information.
|
|
4456
|
+
|
|
4457
|
+
|
|
4458
|
+
/**
|
|
4459
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
4460
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
4461
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
4462
|
+
*/
|
|
4463
|
+
|
|
4464
|
+
let AuroElement$1 = class AuroElement extends r {
|
|
4465
|
+
|
|
4466
|
+
// function to define props used within the scope of this component
|
|
4467
|
+
static get properties() {
|
|
4468
|
+
return {
|
|
4469
|
+
hidden: { type: Boolean,
|
|
4470
|
+
reflect: true },
|
|
4471
|
+
hiddenVisually: { type: Boolean,
|
|
4472
|
+
reflect: true },
|
|
4473
|
+
hiddenAudible: { type: Boolean,
|
|
4474
|
+
reflect: true },
|
|
4475
|
+
};
|
|
4476
|
+
}
|
|
4477
|
+
|
|
4478
|
+
/**
|
|
4479
|
+
* @private Function that determines state of aria-hidden
|
|
4480
|
+
*/
|
|
4481
|
+
hideAudible(value) {
|
|
4482
|
+
if (value) {
|
|
4483
|
+
return 'true'
|
|
4484
|
+
}
|
|
4485
|
+
|
|
4486
|
+
return 'false'
|
|
4487
|
+
}
|
|
4488
|
+
};
|
|
4489
|
+
|
|
4490
|
+
var error$1 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<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>"};
|
|
4491
|
+
|
|
4492
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
4493
|
+
|
|
4494
|
+
const _fetchMap$1 = new Map();
|
|
4495
|
+
|
|
4496
|
+
/**
|
|
4497
|
+
* A callback to parse Response body.
|
|
4498
|
+
*
|
|
4499
|
+
* @callback ResponseParser
|
|
4500
|
+
* @param {Fetch.Response} response
|
|
4501
|
+
* @returns {Promise}
|
|
4502
|
+
*/
|
|
4503
|
+
|
|
4504
|
+
/**
|
|
4505
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
4506
|
+
*
|
|
4507
|
+
* @param {String} uri
|
|
4508
|
+
* @param {Object} [options={}]
|
|
4509
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
4510
|
+
* @returns {Promise}
|
|
4511
|
+
*/
|
|
4512
|
+
const cacheFetch$1 = (uri, options = {}) => {
|
|
4513
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
4514
|
+
if (!_fetchMap$1.has(uri)) {
|
|
4515
|
+
_fetchMap$1.set(uri, fetch(uri).then(responseParser));
|
|
4516
|
+
}
|
|
4517
|
+
return _fetchMap$1.get(uri);
|
|
4518
|
+
};
|
|
4519
|
+
|
|
4520
|
+
var styleCss$4 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
|
|
4521
|
+
|
|
4522
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4523
|
+
// See LICENSE in the project root for license information.
|
|
4524
|
+
|
|
4525
|
+
|
|
4526
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4527
|
+
/**
|
|
4528
|
+
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
4529
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
4530
|
+
*/
|
|
4531
|
+
|
|
4532
|
+
// build the component class
|
|
4533
|
+
let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
4534
|
+
constructor() {
|
|
4535
|
+
super();
|
|
4536
|
+
this.onDark = false;
|
|
4537
|
+
}
|
|
4538
|
+
|
|
4539
|
+
// function to define props used within the scope of this component
|
|
4540
|
+
static get properties() {
|
|
4541
|
+
return {
|
|
4542
|
+
...super.properties,
|
|
4543
|
+
onDark: {
|
|
4544
|
+
type: Boolean,
|
|
4545
|
+
reflect: true
|
|
4546
|
+
},
|
|
4547
|
+
|
|
4548
|
+
/**
|
|
4549
|
+
* @private
|
|
4550
|
+
*/
|
|
4551
|
+
svg: {
|
|
4552
|
+
attribute: false,
|
|
4553
|
+
reflect: true
|
|
4554
|
+
}
|
|
4555
|
+
};
|
|
4556
|
+
}
|
|
4557
|
+
|
|
4558
|
+
static get styles() {
|
|
4559
|
+
return i$5`
|
|
4560
|
+
${styleCss$4}
|
|
4561
|
+
`;
|
|
4562
|
+
}
|
|
4563
|
+
|
|
4564
|
+
/**
|
|
4565
|
+
* Async function to fetch requested icon from npm CDN.
|
|
4566
|
+
* @private
|
|
4567
|
+
* @param {string} category - Icon category.
|
|
4568
|
+
* @param {string} name - Icon name.
|
|
4569
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
4570
|
+
*/
|
|
4571
|
+
async fetchIcon(category, name) {
|
|
4572
|
+
let iconHTML = '';
|
|
4573
|
+
|
|
4574
|
+
if (category === 'logos') {
|
|
4575
|
+
iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`);
|
|
4576
|
+
} else {
|
|
4577
|
+
iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
|
|
4578
|
+
}
|
|
4579
|
+
|
|
4580
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
4581
|
+
|
|
4582
|
+
return dom.body.querySelector('svg');
|
|
4583
|
+
}
|
|
4584
|
+
|
|
4585
|
+
// lifecycle function
|
|
4586
|
+
async firstUpdated() {
|
|
4587
|
+
if (!this.customSvg) {
|
|
4588
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
4589
|
+
|
|
4590
|
+
if (svg) {
|
|
4591
|
+
this.svg = svg;
|
|
4592
|
+
} else if (!svg) {
|
|
4593
|
+
const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
|
|
4594
|
+
|
|
4595
|
+
this.svg = penDOM.body.firstChild;
|
|
4596
|
+
}
|
|
4597
|
+
}
|
|
4598
|
+
}
|
|
4599
|
+
};
|
|
4600
|
+
|
|
4601
|
+
var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
|
|
4602
|
+
|
|
4603
|
+
var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
4604
|
+
|
|
4605
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4606
|
+
// See LICENSE in the project root for license information.
|
|
4607
|
+
|
|
4608
|
+
|
|
4609
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4610
|
+
/**
|
|
4611
|
+
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
4612
|
+
*
|
|
4613
|
+
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
4614
|
+
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
4615
|
+
* @attr {Boolean} customColor - Removes primary selector.
|
|
4616
|
+
* @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
|
|
4617
|
+
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
4618
|
+
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
4619
|
+
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
4620
|
+
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
4621
|
+
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
4622
|
+
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
4623
|
+
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
4624
|
+
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
4625
|
+
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
4626
|
+
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
4627
|
+
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
4628
|
+
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
4629
|
+
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
4630
|
+
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
4631
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
4632
|
+
* @slot svg - Used for custom SVG content.
|
|
4633
|
+
*/
|
|
4634
|
+
|
|
4635
|
+
// build the component class
|
|
4636
|
+
let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
4637
|
+
constructor() {
|
|
4638
|
+
super();
|
|
4639
|
+
|
|
4640
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
4641
|
+
|
|
4642
|
+
this.privateDefaults();
|
|
4643
|
+
}
|
|
4644
|
+
|
|
4645
|
+
/**
|
|
4646
|
+
* Internal Defaults.
|
|
4647
|
+
* @private
|
|
4648
|
+
* @returns {void}
|
|
4649
|
+
*/
|
|
4650
|
+
privateDefaults() {
|
|
4651
|
+
this.accent = false;
|
|
4652
|
+
this.customColor = false;
|
|
4653
|
+
this.customSvg = false;
|
|
4654
|
+
this.disabled = false;
|
|
4655
|
+
this.emphasis = false;
|
|
4656
|
+
this.error = false;
|
|
4657
|
+
this.info = false;
|
|
4658
|
+
this.label = false;
|
|
4659
|
+
this.primary = false;
|
|
4660
|
+
this.secondary = false;
|
|
4661
|
+
this.subtle = false;
|
|
4662
|
+
this.success = false;
|
|
4663
|
+
this.tertiary = false;
|
|
4664
|
+
this.warning = false;
|
|
4665
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
4666
|
+
}
|
|
4667
|
+
|
|
4668
|
+
// function to define props used within the scope of this component
|
|
4669
|
+
static get properties() {
|
|
4670
|
+
return {
|
|
4671
|
+
...super.properties,
|
|
4672
|
+
accent: {
|
|
4673
|
+
type: Boolean,
|
|
4674
|
+
reflect: true
|
|
4675
|
+
},
|
|
4676
|
+
ariaHidden: {
|
|
4677
|
+
type: String,
|
|
4678
|
+
reflect: true
|
|
4679
|
+
},
|
|
4680
|
+
category: {
|
|
4681
|
+
type: String,
|
|
4682
|
+
reflect: true
|
|
4683
|
+
},
|
|
4684
|
+
customColor: {
|
|
4685
|
+
type: Boolean
|
|
4686
|
+
},
|
|
4687
|
+
customSvg: {
|
|
4688
|
+
type: Boolean
|
|
4689
|
+
},
|
|
4690
|
+
disabled: {
|
|
4691
|
+
type: Boolean,
|
|
4692
|
+
reflect: true
|
|
4693
|
+
},
|
|
4694
|
+
emphasis: {
|
|
4695
|
+
type: Boolean,
|
|
4696
|
+
reflect: true
|
|
4697
|
+
},
|
|
4698
|
+
error: {
|
|
4699
|
+
type: Boolean,
|
|
4700
|
+
reflect: true
|
|
4701
|
+
},
|
|
4702
|
+
info: {
|
|
4703
|
+
type: Boolean,
|
|
4704
|
+
reflect: true
|
|
4705
|
+
},
|
|
4706
|
+
label: {
|
|
4707
|
+
type: Boolean,
|
|
4708
|
+
reflect: true
|
|
4709
|
+
},
|
|
4710
|
+
name: {
|
|
4711
|
+
type: String,
|
|
4712
|
+
reflect: true
|
|
4713
|
+
},
|
|
4714
|
+
primary: {
|
|
4715
|
+
type: Boolean,
|
|
4716
|
+
reflect: true
|
|
4717
|
+
},
|
|
4718
|
+
secondary: {
|
|
4719
|
+
type: Boolean,
|
|
4720
|
+
reflect: true
|
|
4721
|
+
},
|
|
4722
|
+
subtle: {
|
|
4723
|
+
type: Boolean,
|
|
4724
|
+
reflect: true
|
|
4725
|
+
},
|
|
4726
|
+
success: {
|
|
4727
|
+
type: Boolean,
|
|
4728
|
+
reflect: true
|
|
4729
|
+
},
|
|
4730
|
+
tertiary: {
|
|
4731
|
+
type: Boolean,
|
|
4732
|
+
reflect: true
|
|
4733
|
+
},
|
|
4734
|
+
uri: {
|
|
4735
|
+
type: String
|
|
4736
|
+
},
|
|
4737
|
+
warning: {
|
|
4738
|
+
type: Boolean,
|
|
4739
|
+
reflect: true
|
|
4740
|
+
}
|
|
4741
|
+
};
|
|
4742
|
+
}
|
|
4743
|
+
|
|
4744
|
+
static get styles() {
|
|
4745
|
+
return [
|
|
4746
|
+
super.styles,
|
|
4747
|
+
i$5`${tokensCss$3}`,
|
|
4748
|
+
i$5`${styleCss$4}`,
|
|
4749
|
+
i$5`${colorCss$4}`
|
|
4750
|
+
];
|
|
4751
|
+
}
|
|
4752
|
+
|
|
4753
|
+
/**
|
|
4754
|
+
* This will register this element with the browser.
|
|
4755
|
+
* @param {string} [name="auro-icon"] - The name of element that you want to register to.
|
|
4756
|
+
*
|
|
4757
|
+
* @example
|
|
4758
|
+
* AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
|
|
4759
|
+
*
|
|
4760
|
+
*/
|
|
4761
|
+
static register(name = "auro-icon") {
|
|
4762
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
4763
|
+
}
|
|
4764
|
+
|
|
4765
|
+
connectedCallback() {
|
|
4766
|
+
super.connectedCallback();
|
|
4767
|
+
|
|
4768
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
4769
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
4770
|
+
}
|
|
4771
|
+
|
|
4772
|
+
/**
|
|
4773
|
+
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
4774
|
+
*/
|
|
4775
|
+
exposeCssParts() {
|
|
4776
|
+
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
4777
|
+
}
|
|
4778
|
+
|
|
4779
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4780
|
+
render() {
|
|
4781
|
+
const a11y = {
|
|
4782
|
+
'labelContainer': true,
|
|
4783
|
+
'util_displayHiddenVisually': !this.label
|
|
4784
|
+
};
|
|
4785
|
+
|
|
4786
|
+
const classes = {
|
|
4787
|
+
'label': this.label,
|
|
4788
|
+
'wrapper': true,
|
|
4789
|
+
};
|
|
4790
|
+
|
|
4791
|
+
return x`
|
|
4792
|
+
<div
|
|
4793
|
+
class="${e(classes)}"
|
|
4794
|
+
title="${o$5(this.title || undefined)}">
|
|
4795
|
+
<span aria-hidden="${o$5(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
4796
|
+
${this.customSvg ? x`
|
|
4797
|
+
<slot name="svg"></slot>
|
|
4798
|
+
` : x`
|
|
4799
|
+
${this.svg}
|
|
4800
|
+
`
|
|
4801
|
+
}
|
|
4802
|
+
</span>
|
|
4803
|
+
|
|
4804
|
+
<div class="${e(a11y)}">
|
|
4805
|
+
<slot></slot>
|
|
4806
|
+
</div>
|
|
4807
|
+
</div>
|
|
4808
|
+
`;
|
|
4809
|
+
}
|
|
4810
|
+
};
|
|
4811
|
+
|
|
4812
|
+
var iconVersion$1 = '6.1.2';
|
|
4813
|
+
|
|
4814
|
+
var checkmarkIcon$1 = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
|
|
4815
|
+
|
|
4816
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4817
|
+
// See LICENSE in the project root for license information.
|
|
4818
|
+
|
|
4819
|
+
|
|
4820
|
+
/**
|
|
4821
|
+
* The auro-menu element provides users a way to define a menu option.
|
|
4822
|
+
*
|
|
4823
|
+
* @attr {String} value - Specifies the value to be sent to a server.
|
|
4824
|
+
* @attr {String} noCheckmark - When true, selected option will not show the checkmark.
|
|
4825
|
+
* @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
|
|
4826
|
+
* @attr {Boolean} selected - Specifies that an option is selected.
|
|
4827
|
+
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
4828
|
+
* @slot - Specifies text for an option, but is not the value.
|
|
4829
|
+
*/
|
|
4830
|
+
let AuroMenuOption$1 = class AuroMenuOption extends r {
|
|
4831
|
+
constructor() {
|
|
4832
|
+
super();
|
|
4833
|
+
|
|
4834
|
+
/**
|
|
4835
|
+
* Generate unique names for dependency components.
|
|
4836
|
+
*/
|
|
4837
|
+
const versioning = new AuroDependencyVersioning();
|
|
4838
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon$1);
|
|
4839
|
+
|
|
4840
|
+
this.selected = false;
|
|
4841
|
+
this.nocheckmark = false;
|
|
4842
|
+
this.disabled = false;
|
|
4843
|
+
|
|
4844
|
+
/**
|
|
4845
|
+
* @private
|
|
4846
|
+
*/
|
|
4847
|
+
this.tabIndex = -1;
|
|
4848
|
+
|
|
4849
|
+
/**
|
|
4850
|
+
* @private
|
|
4851
|
+
*/
|
|
4852
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
4853
|
+
}
|
|
4854
|
+
|
|
4855
|
+
static get properties() {
|
|
4856
|
+
return {
|
|
4857
|
+
nocheckmark: {
|
|
4858
|
+
type: Boolean,
|
|
4859
|
+
reflect: true
|
|
4860
|
+
},
|
|
4861
|
+
selected: {
|
|
4862
|
+
type: Boolean,
|
|
4863
|
+
reflect: true
|
|
4864
|
+
},
|
|
4865
|
+
disabled: {
|
|
4866
|
+
type: Boolean,
|
|
4867
|
+
reflect: true
|
|
4868
|
+
},
|
|
4869
|
+
value: {
|
|
4870
|
+
type: String
|
|
4871
|
+
},
|
|
4872
|
+
tabIndex: {
|
|
4873
|
+
type: Number,
|
|
4874
|
+
reflect: true
|
|
4875
|
+
}
|
|
4876
|
+
};
|
|
4877
|
+
}
|
|
4878
|
+
|
|
4879
|
+
static get styles() {
|
|
4880
|
+
return [
|
|
4881
|
+
styleCss$1$1,
|
|
4882
|
+
colorCss$1$1,
|
|
4883
|
+
tokensCss$1$1
|
|
4884
|
+
];
|
|
4885
|
+
}
|
|
4886
|
+
|
|
4887
|
+
/**
|
|
4888
|
+
* This will register this element with the browser.
|
|
4889
|
+
* @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
|
|
4890
|
+
*
|
|
4891
|
+
* @example
|
|
4892
|
+
* AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
|
|
4893
|
+
*
|
|
4894
|
+
*/
|
|
4895
|
+
static register(name = "auro-menuoption") {
|
|
4896
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
4897
|
+
}
|
|
4898
|
+
|
|
4899
|
+
firstUpdated() {
|
|
4900
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
4901
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
4902
|
+
|
|
4903
|
+
this.setAttribute('role', 'option');
|
|
4904
|
+
this.setAttribute('aria-selected', 'false');
|
|
4905
|
+
|
|
4906
|
+
this.addEventListener('mouseover', () => {
|
|
4907
|
+
this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
|
|
4908
|
+
bubbles: true,
|
|
4909
|
+
cancelable: false,
|
|
4910
|
+
composed: true,
|
|
4911
|
+
detail: this
|
|
4912
|
+
}));
|
|
4913
|
+
});
|
|
4914
|
+
}
|
|
4915
|
+
|
|
4916
|
+
// observer for selected property changes
|
|
4917
|
+
updated(changedProperties) {
|
|
4918
|
+
if (changedProperties.has('selected')) {
|
|
4919
|
+
this.setAttribute('aria-selected', this.selected.toString());
|
|
4920
|
+
}
|
|
4921
|
+
}
|
|
4922
|
+
|
|
4923
|
+
/**
|
|
4924
|
+
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
4925
|
+
*
|
|
4926
|
+
* @private
|
|
4927
|
+
* @param {string} svgContent - The SVG content to be embedded.
|
|
4928
|
+
* @returns {Element} The HTML element containing the SVG icon.
|
|
4929
|
+
*/
|
|
4930
|
+
generateIconHtml(svgContent) {
|
|
4931
|
+
const dom = new DOMParser().parseFromString(svgContent, 'text/html');
|
|
4932
|
+
const svg = dom.body.firstChild;
|
|
4933
|
+
|
|
4934
|
+
svg.setAttribute('slot', 'svg');
|
|
4935
|
+
|
|
4936
|
+
return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
4937
|
+
}
|
|
4938
|
+
|
|
4939
|
+
render() {
|
|
4940
|
+
return u`
|
|
4941
|
+
${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon$1.svg) : undefined}
|
|
4942
|
+
<slot></slot>
|
|
4943
|
+
`;
|
|
4944
|
+
}
|
|
4945
|
+
};
|
|
4946
|
+
|
|
4947
|
+
AuroMenu$1.register();
|
|
4948
|
+
AuroMenuOption$1.register();
|
|
4949
|
+
|
|
4950
|
+
var styleCss$3 = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}`;
|
|
4951
|
+
|
|
4952
|
+
var colorCss$3 = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host [auro-dropdown]::part(trigger):hover{--ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06)}:host([disabled]) *{color:var(--ds-color-text-ui-disabled-default, #adadad)}.placeholder{color:var(--ds-auro-select-placeholder-text-color)}`;
|
|
4953
|
+
|
|
4954
|
+
var tokensCss$2 = i$c`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;
|
|
4955
|
+
|
|
4956
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4957
|
+
// See LICENSE in the project root for license information.
|
|
4958
|
+
|
|
4959
|
+
|
|
4960
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4961
|
+
/**
|
|
4962
|
+
* The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
|
|
4963
|
+
*
|
|
4964
|
+
* @slot - Default slot for the menu content.
|
|
4965
|
+
* @slot label - Defines the content of the label.
|
|
4966
|
+
* @slot helpText - Defines the content of the helpText.
|
|
4967
|
+
* @slot placeholder - Defines the content of the placeholder to be shown when there is no value
|
|
4968
|
+
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
4969
|
+
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
4970
|
+
* @csspart helpText - Apply CSS to the help text.
|
|
4971
|
+
*/
|
|
4972
|
+
|
|
4973
|
+
// build the component class
|
|
4974
|
+
class AuroSelect extends r$5 {
|
|
4975
|
+
constructor() {
|
|
4976
|
+
super();
|
|
4977
|
+
|
|
4978
|
+
this.optionSelected = undefined;
|
|
4979
|
+
this.value = undefined;
|
|
4980
|
+
|
|
4981
|
+
const idLength = 36;
|
|
4982
|
+
const idSubstrEnd = 8;
|
|
4983
|
+
const idSubstrStart = 2;
|
|
4984
|
+
|
|
4985
|
+
/**
|
|
4986
|
+
* @private
|
|
4987
|
+
*/
|
|
4988
|
+
this.uniqueId = Math.random().
|
|
4989
|
+
toString(idLength).
|
|
4990
|
+
substring(idSubstrStart, idSubstrEnd);
|
|
4991
|
+
|
|
4992
|
+
/**
|
|
4993
|
+
* @private
|
|
4994
|
+
*/
|
|
4995
|
+
this.validation = new AuroFormValidation();
|
|
4996
|
+
|
|
4997
|
+
/**
|
|
4998
|
+
* @private
|
|
4999
|
+
*/
|
|
5000
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
5001
|
+
|
|
5002
|
+
/**
|
|
5003
|
+
* Generate unique names for dependency components.
|
|
5004
|
+
*/
|
|
5005
|
+
const versioning = new AuroDependencyVersioning$2();
|
|
5006
|
+
|
|
5007
|
+
/**
|
|
5008
|
+
* @private
|
|
5009
|
+
*/
|
|
5010
|
+
this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
|
|
5011
|
+
|
|
5012
|
+
/**
|
|
5013
|
+
* @private
|
|
5014
|
+
*/
|
|
5015
|
+
this.isHiddenWhileLoading = false;
|
|
5016
|
+
}
|
|
5017
|
+
|
|
5018
|
+
/**
|
|
5019
|
+
* @private
|
|
5020
|
+
* @returns {void} Internal defaults.
|
|
5021
|
+
*/
|
|
5022
|
+
privateDefaults() {
|
|
5023
|
+
this.options = [];
|
|
5024
|
+
this.optionActive = null;
|
|
5025
|
+
}
|
|
5026
|
+
|
|
5027
|
+
// This function is to define props used within the scope of this component
|
|
5028
|
+
// Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes
|
|
5029
|
+
// to understand how to use reflected attributes with your property settings.
|
|
5030
|
+
static get properties() {
|
|
5031
|
+
return {
|
|
5032
|
+
|
|
5033
|
+
/**
|
|
5034
|
+
* When attribute is present, element shows disabled state.
|
|
5035
|
+
*/
|
|
5036
|
+
disabled: {
|
|
5037
|
+
type: Boolean,
|
|
5038
|
+
reflect: true
|
|
5039
|
+
},
|
|
5040
|
+
|
|
5041
|
+
/**
|
|
5042
|
+
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
5043
|
+
*/
|
|
5044
|
+
flexMenuWidth: {
|
|
5045
|
+
type: Boolean,
|
|
5046
|
+
reflect: true
|
|
5047
|
+
},
|
|
5048
|
+
|
|
3537
5049
|
/**
|
|
3538
5050
|
* When true, checkmark on selected option will no longer be present.
|
|
3539
5051
|
*/
|
|
@@ -3561,7 +5073,9 @@ class AuroSelect extends r$4 {
|
|
|
3561
5073
|
* Specifies the current selected menuOption.
|
|
3562
5074
|
*/
|
|
3563
5075
|
optionSelected: {
|
|
3564
|
-
|
|
5076
|
+
// Allow HTMLElement[] arrays and undefined
|
|
5077
|
+
converter: arrayConverter$1,
|
|
5078
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3565
5079
|
},
|
|
3566
5080
|
|
|
3567
5081
|
/**
|
|
@@ -3620,8 +5134,19 @@ class AuroSelect extends r$4 {
|
|
|
3620
5134
|
* Value selected for the component.
|
|
3621
5135
|
*/
|
|
3622
5136
|
value: {
|
|
3623
|
-
|
|
3624
|
-
|
|
5137
|
+
// Allow string[] arrays and undefined
|
|
5138
|
+
converter: arrayConverter$1,
|
|
5139
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
5140
|
+
},
|
|
5141
|
+
|
|
5142
|
+
/**
|
|
5143
|
+
* Sets multi-select mode, allowing multiple options to be selected at once.
|
|
5144
|
+
*/
|
|
5145
|
+
multiSelect: {
|
|
5146
|
+
type: Boolean,
|
|
5147
|
+
reflect: true,
|
|
5148
|
+
attribute: 'multiselect'
|
|
5149
|
+
},
|
|
3625
5150
|
};
|
|
3626
5151
|
}
|
|
3627
5152
|
|
|
@@ -3659,33 +5184,34 @@ class AuroSelect extends r$4 {
|
|
|
3659
5184
|
*
|
|
3660
5185
|
*/
|
|
3661
5186
|
static register(name = "auro-select") {
|
|
3662
|
-
AuroLibraryRuntimeUtils$
|
|
5187
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroSelect);
|
|
3663
5188
|
}
|
|
3664
5189
|
|
|
3665
5190
|
/**
|
|
3666
|
-
* Updates the displayed value in an Auro dropdown component based on optionSelected
|
|
5191
|
+
* Updates the displayed value in an Auro dropdown component based on optionSelected.
|
|
3667
5192
|
* @private
|
|
3668
5193
|
* @returns {void}
|
|
3669
5194
|
*/
|
|
3670
5195
|
updateDisplayedValue() {
|
|
3671
5196
|
const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
|
|
3672
5197
|
|
|
3673
|
-
//
|
|
3674
|
-
triggerContentEl.
|
|
3675
|
-
|
|
3676
|
-
|
|
5198
|
+
// Clear everything except placeholder
|
|
5199
|
+
const placeholder = triggerContentEl.querySelector('#placeholder');
|
|
5200
|
+
triggerContentEl.innerHTML = '';
|
|
5201
|
+
if (placeholder) {
|
|
5202
|
+
triggerContentEl.appendChild(placeholder);
|
|
5203
|
+
}
|
|
3677
5204
|
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
clone.removeAttribute('class');
|
|
5205
|
+
// Handle selected options
|
|
5206
|
+
if (this.optionSelected && this.optionSelected.length) {
|
|
5207
|
+
// Create display text from selected options
|
|
5208
|
+
const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
|
|
3683
5209
|
|
|
3684
|
-
|
|
3685
|
-
|
|
5210
|
+
const span = document.createElement('span');
|
|
5211
|
+
span.textContent = displayText;
|
|
5212
|
+
triggerContentEl.appendChild(span);
|
|
3686
5213
|
}
|
|
3687
5214
|
|
|
3688
|
-
// notify dropdown as trigger content is changed
|
|
3689
5215
|
this.dropdown.requestUpdate();
|
|
3690
5216
|
}
|
|
3691
5217
|
|
|
@@ -3705,6 +5231,10 @@ class AuroSelect extends r$4 {
|
|
|
3705
5231
|
return;
|
|
3706
5232
|
}
|
|
3707
5233
|
|
|
5234
|
+
if (this.multiSelect) {
|
|
5235
|
+
this.menu.multiSelect = this.multiSelect;
|
|
5236
|
+
}
|
|
5237
|
+
|
|
3708
5238
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
3709
5239
|
this.menu.setAttribute('aria-hidden', 'true');
|
|
3710
5240
|
|
|
@@ -3715,8 +5245,10 @@ class AuroSelect extends r$4 {
|
|
|
3715
5245
|
});
|
|
3716
5246
|
|
|
3717
5247
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
5248
|
+
// Get array of selected options from menu
|
|
3718
5249
|
this.optionSelected = this.menu.optionSelected;
|
|
3719
|
-
|
|
5250
|
+
// For single select, we still use arrays but only take first value
|
|
5251
|
+
this.value = this.menu.value;
|
|
3720
5252
|
|
|
3721
5253
|
if (this.dropdown.isPopoverVisible) {
|
|
3722
5254
|
this.dropdown.hide();
|
|
@@ -3731,7 +5263,7 @@ class AuroSelect extends r$4 {
|
|
|
3731
5263
|
* with `auro-select.value`.
|
|
3732
5264
|
*/
|
|
3733
5265
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
3734
|
-
this.
|
|
5266
|
+
this.menu.clearSelection();
|
|
3735
5267
|
});
|
|
3736
5268
|
|
|
3737
5269
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
@@ -3756,7 +5288,7 @@ class AuroSelect extends r$4 {
|
|
|
3756
5288
|
this.dropdown.show();
|
|
3757
5289
|
|
|
3758
5290
|
if (this.dropdown.isPopoverVisible) {
|
|
3759
|
-
this.menu.
|
|
5291
|
+
this.menu.navigateOptions('up');
|
|
3760
5292
|
}
|
|
3761
5293
|
}
|
|
3762
5294
|
|
|
@@ -3766,7 +5298,7 @@ class AuroSelect extends r$4 {
|
|
|
3766
5298
|
this.dropdown.show();
|
|
3767
5299
|
|
|
3768
5300
|
if (this.dropdown.isPopoverVisible) {
|
|
3769
|
-
this.menu.
|
|
5301
|
+
this.menu.navigateOptions('down');
|
|
3770
5302
|
}
|
|
3771
5303
|
}
|
|
3772
5304
|
|
|
@@ -3829,7 +5361,7 @@ class AuroSelect extends r$4 {
|
|
|
3829
5361
|
* input as no longer in the initial state.
|
|
3830
5362
|
*/
|
|
3831
5363
|
if (this.value === undefined) {
|
|
3832
|
-
this.value =
|
|
5364
|
+
this.value = undefined;
|
|
3833
5365
|
this.removeEventListener('focusin', this.handleFocusin);
|
|
3834
5366
|
}
|
|
3835
5367
|
}
|
|
@@ -3887,11 +5419,15 @@ class AuroSelect extends r$4 {
|
|
|
3887
5419
|
}
|
|
3888
5420
|
}
|
|
3889
5421
|
|
|
3890
|
-
updated(changedProperties) {
|
|
3891
|
-
// After the component is ready, send direct value changes to auro-menu.
|
|
5422
|
+
async updated(changedProperties) {
|
|
3892
5423
|
if (changedProperties.has('value')) {
|
|
3893
5424
|
if (this.value) {
|
|
3894
5425
|
this.menu.value = this.value;
|
|
5426
|
+
|
|
5427
|
+
// Wait for menu to finish updating its value
|
|
5428
|
+
await this.menu.updateComplete;
|
|
5429
|
+
|
|
5430
|
+
this.optionSelected = this.menu.optionSelected;
|
|
3895
5431
|
} else {
|
|
3896
5432
|
this.menu.value = undefined;
|
|
3897
5433
|
}
|
|
@@ -3931,18 +5467,18 @@ class AuroSelect extends r$4 {
|
|
|
3931
5467
|
hidden: this.value,
|
|
3932
5468
|
};
|
|
3933
5469
|
|
|
3934
|
-
return u$
|
|
5470
|
+
return u$4`
|
|
3935
5471
|
<div class="outerWrapper">
|
|
3936
5472
|
<div aria-live="polite" class="util_displayHiddenVisually">
|
|
3937
5473
|
${this.optionActive && this.options.length > 0
|
|
3938
|
-
? u$
|
|
5474
|
+
? u$4`
|
|
3939
5475
|
${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
|
|
3940
5476
|
`
|
|
3941
5477
|
: undefined
|
|
3942
5478
|
};
|
|
3943
5479
|
|
|
3944
5480
|
${this.optionSelected && this.options.length > 0
|
|
3945
|
-
? u$
|
|
5481
|
+
? u$4`
|
|
3946
5482
|
${`${this.optionSelected.innerText} selected`}
|
|
3947
5483
|
`
|
|
3948
5484
|
: undefined
|
|
@@ -3957,18 +5493,18 @@ class AuroSelect extends r$4 {
|
|
|
3957
5493
|
chevron
|
|
3958
5494
|
part="dropdown">
|
|
3959
5495
|
<span slot="trigger" aria-haspopup="true" id="triggerFocus">
|
|
3960
|
-
<span id="placeholder" class="${e$
|
|
5496
|
+
<span id="placeholder" class="${e$6(placeholderClass)}"><slot name="placeholder"></slot></span>
|
|
3961
5497
|
</span>
|
|
3962
5498
|
<div class="menuWrapper">
|
|
3963
5499
|
</div>
|
|
3964
5500
|
<slot name="label" slot="label"></slot>
|
|
3965
5501
|
<span slot="helpText">
|
|
3966
5502
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
3967
|
-
? u$
|
|
5503
|
+
? u$4`
|
|
3968
5504
|
<p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
|
|
3969
5505
|
<slot name="helpText"></slot>
|
|
3970
5506
|
</p>`
|
|
3971
|
-
: u$
|
|
5507
|
+
: u$4`
|
|
3972
5508
|
<p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
3973
5509
|
${this.errorMessage}
|
|
3974
5510
|
</p>`
|
|
@@ -3981,32 +5517,167 @@ class AuroSelect extends r$4 {
|
|
|
3981
5517
|
}
|
|
3982
5518
|
}
|
|
3983
5519
|
|
|
3984
|
-
var styleCss$2 = i$b`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left: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([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
|
|
5520
|
+
var styleCss$2 = i$c`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left: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([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
|
|
5521
|
+
|
|
5522
|
+
var colorCss$2 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
|
|
5523
|
+
|
|
5524
|
+
var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
|
|
5525
|
+
|
|
5526
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5527
|
+
// See LICENSE in the project root for license information.
|
|
5528
|
+
|
|
5529
|
+
// ---------------------------------------------------------------------
|
|
5530
|
+
|
|
5531
|
+
/**
|
|
5532
|
+
* Converts value to an array.
|
|
5533
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
5534
|
+
* If the value is already an array, it is returned.
|
|
5535
|
+
* If the value is undefined, it returns undefined.
|
|
5536
|
+
* @private
|
|
5537
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
5538
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
5539
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
5540
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
5541
|
+
*/
|
|
5542
|
+
function arrayConverter(value) {
|
|
5543
|
+
// Allow undefined
|
|
5544
|
+
if (value === undefined) {
|
|
5545
|
+
return undefined;
|
|
5546
|
+
}
|
|
5547
|
+
|
|
5548
|
+
// Return the value if it is already an array
|
|
5549
|
+
if (Array.isArray(value)) {
|
|
5550
|
+
return value;
|
|
5551
|
+
}
|
|
5552
|
+
|
|
5553
|
+
try {
|
|
5554
|
+
// If value is a JSON string, parse it
|
|
5555
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
5556
|
+
|
|
5557
|
+
// Check if the parsed value is an array
|
|
5558
|
+
if (Array.isArray(parsed)) {
|
|
5559
|
+
return parsed;
|
|
5560
|
+
}
|
|
5561
|
+
} catch (error) {
|
|
5562
|
+
// If JSON parsing fails, continue to throw an error below
|
|
5563
|
+
/* eslint-disable no-console */
|
|
5564
|
+
console.error('JSON parsing failed:', error);
|
|
5565
|
+
}
|
|
5566
|
+
|
|
5567
|
+
// Throw error if the input is not an array or undefined
|
|
5568
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
5569
|
+
}
|
|
5570
|
+
|
|
5571
|
+
/**
|
|
5572
|
+
* Compare two arrays for equality.
|
|
5573
|
+
* @private
|
|
5574
|
+
* @param {Array} arr1 - First array to compare.
|
|
5575
|
+
* @param {Array} arr2 - Second array to compare.
|
|
5576
|
+
* @returns {boolean} True if arrays are equal.
|
|
5577
|
+
*/
|
|
5578
|
+
function arraysAreEqual(arr1, arr2) {
|
|
5579
|
+
// If both arrays undefined, they are equal (true)
|
|
5580
|
+
if (arr1 === undefined || arr2 === undefined) {
|
|
5581
|
+
return arr1 === arr2;
|
|
5582
|
+
}
|
|
5583
|
+
|
|
5584
|
+
// If arrays have different lengths, they are not equal
|
|
5585
|
+
if (arr1.length !== arr2.length) {
|
|
5586
|
+
return false;
|
|
5587
|
+
}
|
|
5588
|
+
|
|
5589
|
+
// If every item at each index is the same, return true
|
|
5590
|
+
for (let index = 0; index < arr1.length; index += 1) {
|
|
5591
|
+
if (arr1[index] !== arr2[index]) {
|
|
5592
|
+
return false;
|
|
5593
|
+
}
|
|
5594
|
+
}
|
|
5595
|
+
return true;
|
|
5596
|
+
}
|
|
5597
|
+
|
|
5598
|
+
/**
|
|
5599
|
+
* Compares array for changes.
|
|
5600
|
+
* @private
|
|
5601
|
+
* @param {Array|any} newVal - New value to compare.
|
|
5602
|
+
* @param {Array|any} oldVal - Old value to compare.
|
|
5603
|
+
* @returns {boolean} True if arrays have changed.
|
|
5604
|
+
*/
|
|
5605
|
+
function arrayOrUndefinedHasChanged(newVal, oldVal) {
|
|
5606
|
+
try {
|
|
5607
|
+
// Check if values are undefined or arrays
|
|
5608
|
+
const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
|
|
5609
|
+
|
|
5610
|
+
// If non-array or non-undefined, throw error
|
|
5611
|
+
if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
|
|
5612
|
+
const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
|
|
5613
|
+
throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
|
|
5614
|
+
}
|
|
5615
|
+
|
|
5616
|
+
// Return true if arrays have changed, false if they are the same
|
|
5617
|
+
return !arraysAreEqual(newVal, oldVal);
|
|
5618
|
+
} catch (error) {
|
|
5619
|
+
/* eslint-disable no-console */
|
|
5620
|
+
console.error(error);
|
|
5621
|
+
// If validation fails, it has changed
|
|
5622
|
+
return true;
|
|
5623
|
+
}
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
/**
|
|
5627
|
+
* Validates if an option can be interacted with.
|
|
5628
|
+
* @private
|
|
5629
|
+
* @param {HTMLElement} option - The option to check.
|
|
5630
|
+
* @returns {boolean} True if option is interactive.
|
|
5631
|
+
*/
|
|
5632
|
+
function isOptionInteractive(option) {
|
|
5633
|
+
return !option.hasAttribute('hidden') &&
|
|
5634
|
+
!option.hasAttribute('disabled') &&
|
|
5635
|
+
!option.hasAttribute('static');
|
|
5636
|
+
}
|
|
5637
|
+
|
|
5638
|
+
/**
|
|
5639
|
+
* Helper method to dispatch custom events.
|
|
5640
|
+
* @param {HTMLElement} element - Element to dispatch event from.
|
|
5641
|
+
* @param {string} eventName - Name of the event to dispatch.
|
|
5642
|
+
* @param {Object} [detail] - Optional detail object to include with the event.
|
|
5643
|
+
*/
|
|
5644
|
+
function dispatchMenuEvent(element, eventName, detail = null) {
|
|
5645
|
+
const eventConfig = {
|
|
5646
|
+
bubbles: true,
|
|
5647
|
+
cancelable: false,
|
|
5648
|
+
composed: true
|
|
5649
|
+
};
|
|
3985
5650
|
|
|
3986
|
-
|
|
5651
|
+
if (detail !== null) {
|
|
5652
|
+
eventConfig.detail = detail;
|
|
5653
|
+
}
|
|
3987
5654
|
|
|
3988
|
-
|
|
5655
|
+
element.dispatchEvent(new CustomEvent(eventName, eventConfig));
|
|
5656
|
+
}
|
|
3989
5657
|
|
|
3990
5658
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3991
5659
|
// See LICENSE in the project root for license information.
|
|
3992
5660
|
|
|
3993
5661
|
|
|
5662
|
+
|
|
3994
5663
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
3995
5664
|
/**
|
|
3996
5665
|
* The auro-menu element provides users a way to select from a list of options.
|
|
3997
|
-
* @attr {
|
|
3998
|
-
* @attr {
|
|
3999
|
-
* @attr {
|
|
4000
|
-
* @attr {
|
|
4001
|
-
* @attr {
|
|
4002
|
-
* @attr {
|
|
4003
|
-
* @
|
|
4004
|
-
* @
|
|
4005
|
-
* @
|
|
4006
|
-
* @event auroMenu-
|
|
4007
|
-
* @event auroMenu-
|
|
4008
|
-
* @event auroMenu-
|
|
4009
|
-
* @event auroMenu-
|
|
5666
|
+
* @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
|
|
5667
|
+
* @attr {object} optionactive - Specifies the current active menuOption.
|
|
5668
|
+
* @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
|
|
5669
|
+
* @attr {boolean} disabled - When true, the entire menu and all options are disabled;
|
|
5670
|
+
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
5671
|
+
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
5672
|
+
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
5673
|
+
* @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
|
|
5674
|
+
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
5675
|
+
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
5676
|
+
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
5677
|
+
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
5678
|
+
* @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
|
|
5679
|
+
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
5680
|
+
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
4010
5681
|
* @slot loadingText - Text to show while loading attribute is set
|
|
4011
5682
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
4012
5683
|
* @slot - Slot for insertion of menu options.
|
|
@@ -4014,55 +5685,107 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
|
|
|
4014
5685
|
|
|
4015
5686
|
/* eslint-disable no-magic-numbers, max-lines */
|
|
4016
5687
|
|
|
4017
|
-
class AuroMenu extends r$
|
|
5688
|
+
class AuroMenu extends r$5 {
|
|
4018
5689
|
constructor() {
|
|
4019
5690
|
super();
|
|
5691
|
+
|
|
5692
|
+
// State properties (reactive)
|
|
5693
|
+
|
|
5694
|
+
// Value of the selected options
|
|
4020
5695
|
this.value = undefined;
|
|
5696
|
+
// Currently selected option
|
|
4021
5697
|
this.optionSelected = undefined;
|
|
5698
|
+
// String used for highlighting/filtering
|
|
4022
5699
|
this.matchWord = undefined;
|
|
5700
|
+
// Hide the checkmark icon on selected options
|
|
4023
5701
|
this.noCheckmark = false;
|
|
5702
|
+
// Currently active option
|
|
4024
5703
|
this.optionActive = undefined;
|
|
5704
|
+
// Loading state
|
|
4025
5705
|
this.loading = false;
|
|
5706
|
+
// Multi-select mode
|
|
5707
|
+
this.multiSelect = false;
|
|
5708
|
+
|
|
5709
|
+
// Event Bindings
|
|
4026
5710
|
|
|
4027
5711
|
/**
|
|
4028
5712
|
* @private
|
|
4029
5713
|
*/
|
|
4030
|
-
this.
|
|
5714
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
4031
5715
|
|
|
4032
5716
|
/**
|
|
4033
5717
|
* @private
|
|
4034
5718
|
*/
|
|
4035
|
-
this.
|
|
5719
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
5720
|
+
|
|
5721
|
+
/**
|
|
5722
|
+
* @private
|
|
5723
|
+
*/
|
|
5724
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
4036
5725
|
|
|
4037
5726
|
/**
|
|
4038
5727
|
* @private
|
|
4039
5728
|
*/
|
|
4040
|
-
this.
|
|
5729
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
5730
|
+
|
|
5731
|
+
// Instance properties (non-reactive)
|
|
4041
5732
|
|
|
4042
5733
|
/**
|
|
4043
5734
|
* @private
|
|
4044
5735
|
*/
|
|
4045
|
-
this
|
|
5736
|
+
Object.assign(this, {
|
|
5737
|
+
// Root-level menu (true) or a nested submenu (false)
|
|
5738
|
+
rootMenu: true,
|
|
5739
|
+
// Currently focused/active menu item index
|
|
5740
|
+
index: -1,
|
|
5741
|
+
// Nested menu spacer
|
|
5742
|
+
nestingSpacer: '<span class="nestingSpacer"></span>',
|
|
5743
|
+
// Loading indicator for slot elements
|
|
5744
|
+
loadingSlots: null,
|
|
5745
|
+
// Store for menu items
|
|
5746
|
+
items: [],
|
|
5747
|
+
});
|
|
4046
5748
|
}
|
|
4047
5749
|
|
|
4048
5750
|
static get properties() {
|
|
4049
5751
|
return {
|
|
4050
|
-
noCheckmark:
|
|
5752
|
+
noCheckmark: {
|
|
4051
5753
|
type: Boolean,
|
|
4052
|
-
reflect: true
|
|
5754
|
+
reflect: true,
|
|
5755
|
+
attribute: 'nocheckmark'
|
|
4053
5756
|
},
|
|
4054
|
-
disabled:
|
|
5757
|
+
disabled: {
|
|
4055
5758
|
type: Boolean,
|
|
4056
5759
|
reflect: true
|
|
4057
5760
|
},
|
|
4058
|
-
loading:
|
|
5761
|
+
loading: {
|
|
4059
5762
|
type: Boolean,
|
|
4060
5763
|
reflect: true
|
|
4061
5764
|
},
|
|
4062
|
-
optionSelected: {
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
5765
|
+
optionSelected: {
|
|
5766
|
+
// Allow HTMLElement[] arrays and undefined
|
|
5767
|
+
converter: arrayConverter,
|
|
5768
|
+
hasChanged: arrayOrUndefinedHasChanged
|
|
5769
|
+
},
|
|
5770
|
+
optionActive: {
|
|
5771
|
+
type: Object,
|
|
5772
|
+
attribute: 'optionactive'
|
|
5773
|
+
},
|
|
5774
|
+
matchWord: {
|
|
5775
|
+
type: String,
|
|
5776
|
+
attribute: 'matchword'
|
|
5777
|
+
},
|
|
5778
|
+
multiSelect: {
|
|
5779
|
+
type: Boolean,
|
|
5780
|
+
reflect: true,
|
|
5781
|
+
attribute: 'multiselect'
|
|
5782
|
+
},
|
|
5783
|
+
value: {
|
|
5784
|
+
// Allow string[] arrays and undefined
|
|
5785
|
+
type: Object,
|
|
5786
|
+
converter: arrayConverter,
|
|
5787
|
+
hasChanged: arrayOrUndefinedHasChanged
|
|
5788
|
+
}
|
|
4066
5789
|
};
|
|
4067
5790
|
}
|
|
4068
5791
|
|
|
@@ -4083,201 +5806,332 @@ class AuroMenu extends r$4 {
|
|
|
4083
5806
|
*
|
|
4084
5807
|
*/
|
|
4085
5808
|
static register(name = "auro-menu") {
|
|
4086
|
-
AuroLibraryRuntimeUtils$
|
|
5809
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
|
|
4087
5810
|
}
|
|
4088
5811
|
|
|
4089
|
-
|
|
4090
|
-
* Passes the noCheckmark attribute to all nested auro-menuoptions.
|
|
4091
|
-
* @private
|
|
4092
|
-
* @returns {void}
|
|
4093
|
-
*/
|
|
4094
|
-
handleNoCheckmarkAttr() {
|
|
4095
|
-
if (this.noCheckmark) {
|
|
4096
|
-
const menus = this.querySelectorAll('auro-menu, [auro-menu]');
|
|
5812
|
+
// Lifecycle Methods
|
|
4097
5813
|
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
5814
|
+
connectedCallback() {
|
|
5815
|
+
super.connectedCallback();
|
|
5816
|
+
|
|
5817
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
5818
|
+
this.addEventListener('mousedown', this.handleMouseSelect);
|
|
5819
|
+
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
5820
|
+
this.addEventListener('slotchange', this.handleSlotChange);
|
|
5821
|
+
}
|
|
4101
5822
|
|
|
4102
|
-
|
|
5823
|
+
disconnectedCallback() {
|
|
5824
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
5825
|
+
this.removeEventListener('mousedown', this.handleMouseSelect);
|
|
5826
|
+
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
5827
|
+
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
4103
5828
|
|
|
4104
|
-
|
|
4105
|
-
option.setAttribute('noCheckmark', '');
|
|
4106
|
-
});
|
|
4107
|
-
}
|
|
5829
|
+
super.disconnectedCallback();
|
|
4108
5830
|
}
|
|
4109
5831
|
|
|
4110
5832
|
firstUpdated() {
|
|
4111
|
-
|
|
4112
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
|
|
4113
|
-
|
|
4114
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
5833
|
+
AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
4115
5834
|
|
|
4116
5835
|
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
5836
|
+
this.initializeMenu();
|
|
4117
5837
|
}
|
|
4118
5838
|
|
|
4119
5839
|
updated(changedProperties) {
|
|
4120
|
-
if (changedProperties.has('
|
|
4121
|
-
|
|
5840
|
+
if (changedProperties.has('value')) {
|
|
5841
|
+
// Handle null/undefined case
|
|
5842
|
+
if (this.value === undefined || this.value === null) {
|
|
5843
|
+
this.optionSelected = undefined;
|
|
5844
|
+
// Reset index tracking
|
|
5845
|
+
this.index = -1;
|
|
5846
|
+
} else {
|
|
5847
|
+
// Convert single values to arrays
|
|
5848
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
5849
|
+
|
|
5850
|
+
// Find all matching options
|
|
5851
|
+
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
5852
|
+
|
|
5853
|
+
if (matchingOptions.length > 0) {
|
|
5854
|
+
if (this.multiSelect) {
|
|
5855
|
+
// For multiselect, keep all matching options
|
|
5856
|
+
this.optionSelected = matchingOptions;
|
|
5857
|
+
} else {
|
|
5858
|
+
// For single select, only use the first match
|
|
5859
|
+
this.optionSelected = [matchingOptions[0]];
|
|
5860
|
+
this.index = this.items.indexOf(matchingOptions[0]);
|
|
5861
|
+
}
|
|
5862
|
+
} else {
|
|
5863
|
+
// No matches found - trigger failure event
|
|
5864
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
5865
|
+
this.optionSelected = undefined;
|
|
5866
|
+
this.index = -1;
|
|
5867
|
+
}
|
|
5868
|
+
}
|
|
5869
|
+
|
|
5870
|
+
// Update UI state
|
|
5871
|
+
this.updateItemsState(new Map([
|
|
5872
|
+
[
|
|
5873
|
+
'optionSelected',
|
|
5874
|
+
true
|
|
5875
|
+
]
|
|
5876
|
+
]));
|
|
5877
|
+
|
|
5878
|
+
// Notify of changes
|
|
5879
|
+
if (this.optionSelected !== undefined) {
|
|
5880
|
+
this.notifySelectionChange();
|
|
5881
|
+
}
|
|
4122
5882
|
}
|
|
4123
5883
|
|
|
4124
|
-
|
|
4125
|
-
|
|
5884
|
+
// Process all other UI updates
|
|
5885
|
+
this.updateItemsState(changedProperties);
|
|
5886
|
+
}
|
|
5887
|
+
|
|
5888
|
+
/**
|
|
5889
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
5890
|
+
* @private
|
|
5891
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
5892
|
+
*/
|
|
5893
|
+
updateItemsState(changedProperties) {
|
|
5894
|
+
if (!this.items) {
|
|
5895
|
+
return;
|
|
4126
5896
|
}
|
|
4127
5897
|
|
|
4128
|
-
|
|
4129
|
-
|
|
5898
|
+
// Handle noCheckmark propagation to all menus and options
|
|
5899
|
+
if (changedProperties.has('noCheckmark') && this.noCheckmark) {
|
|
5900
|
+
// Update both menus and options
|
|
5901
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
|
|
5902
|
+
}
|
|
4130
5903
|
|
|
4131
|
-
|
|
4132
|
-
|
|
4133
|
-
|
|
5904
|
+
// Regex for matchWord if needed
|
|
5905
|
+
let regexWord = null;
|
|
5906
|
+
|
|
5907
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
5908
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
5909
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
4134
5910
|
}
|
|
4135
5911
|
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
5912
|
+
// Handle direct item updates
|
|
5913
|
+
this.items.forEach((option) => {
|
|
5914
|
+
// Update selection if option or value changed
|
|
5915
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
5916
|
+
const isSelected = this.isOptionSelected(option);
|
|
5917
|
+
option.classList.toggle('active', isSelected);
|
|
5918
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
5919
|
+
|
|
5920
|
+
// Add/remove selected attribute based on state
|
|
5921
|
+
if (isSelected) {
|
|
5922
|
+
option.setAttribute('selected', '');
|
|
5923
|
+
} else {
|
|
5924
|
+
option.removeAttribute('selected');
|
|
4142
5925
|
}
|
|
5926
|
+
}
|
|
5927
|
+
|
|
5928
|
+
// Update text highlighting if matchWord changed
|
|
5929
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
5930
|
+
isOptionInteractive(option) && !option.hasAttribute('persistent')) {
|
|
5931
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
5932
|
+
// Create nested spacers
|
|
5933
|
+
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
5934
|
+
|
|
5935
|
+
// Update with spacers and matchWord
|
|
5936
|
+
option.innerHTML = nestingSpacerBundle +
|
|
5937
|
+
option.textContent.replace(
|
|
5938
|
+
regexWord,
|
|
5939
|
+
(match) => `<strong>${match}</strong>`
|
|
5940
|
+
);
|
|
5941
|
+
}
|
|
5942
|
+
|
|
5943
|
+
// Update disabled state
|
|
5944
|
+
if (changedProperties.has('disabled')) {
|
|
5945
|
+
option.disabled = this.disabled;
|
|
5946
|
+
}
|
|
5947
|
+
});
|
|
5948
|
+
|
|
5949
|
+
// Handle loading state changes
|
|
5950
|
+
if (changedProperties.has('loading')) {
|
|
5951
|
+
this.setAttribute("aria-busy", this.loading);
|
|
5952
|
+
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
5953
|
+
loading: this.loading,
|
|
5954
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
4143
5955
|
});
|
|
4144
|
-
this.setAttribute("aria-busy", this.hasAttribute("loading"));
|
|
4145
|
-
this.dispatchEvent(event);
|
|
4146
5956
|
}
|
|
4147
5957
|
}
|
|
4148
5958
|
|
|
5959
|
+
// Init Methods
|
|
5960
|
+
|
|
4149
5961
|
/**
|
|
5962
|
+
* Initializes the menu's state and structure.
|
|
4150
5963
|
* @private
|
|
4151
|
-
* @param {Object} option - The menuoption to check for interactive state.
|
|
4152
|
-
* @returns {Boolean} Returns true if the option is interactive.
|
|
4153
5964
|
*/
|
|
4154
|
-
|
|
4155
|
-
|
|
5965
|
+
initializeMenu() {
|
|
5966
|
+
this.initItems();
|
|
5967
|
+
if (this.rootMenu) {
|
|
5968
|
+
this.setAttribute('role', 'listbox');
|
|
5969
|
+
this.setAttribute('root', '');
|
|
5970
|
+
this.handleNestedMenus(this);
|
|
5971
|
+
}
|
|
4156
5972
|
}
|
|
4157
5973
|
|
|
4158
5974
|
/**
|
|
5975
|
+
* Initializes menu items and their attributes.
|
|
4159
5976
|
* @private
|
|
4160
|
-
* @returns {void} When called will update the DOM with visible suggest text matches.
|
|
4161
5977
|
*/
|
|
4162
|
-
|
|
4163
|
-
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
this.items.forEach((item) => {
|
|
4172
|
-
if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
|
|
4173
|
-
const nested = item.querySelectorAll('.nestingSpacer');
|
|
4174
|
-
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
4175
|
-
|
|
4176
|
-
item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
|
|
4177
|
-
}
|
|
4178
|
-
});
|
|
5978
|
+
initItems() {
|
|
5979
|
+
this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
5980
|
+
if (this.noCheckmark) {
|
|
5981
|
+
this.updateItemsState(new Map([
|
|
5982
|
+
[
|
|
5983
|
+
'noCheckmark',
|
|
5984
|
+
true
|
|
5985
|
+
]
|
|
5986
|
+
]));
|
|
4179
5987
|
}
|
|
4180
5988
|
}
|
|
4181
5989
|
|
|
5990
|
+
// Logic Methods
|
|
5991
|
+
|
|
4182
5992
|
/**
|
|
4183
|
-
*
|
|
5993
|
+
* Updates menu state when an option is selected.
|
|
5994
|
+
* @private
|
|
5995
|
+
* @param {HTMLElement} option - The option element to select.
|
|
4184
5996
|
*/
|
|
4185
|
-
|
|
4186
|
-
this.
|
|
4187
|
-
|
|
4188
|
-
this.
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
5997
|
+
handleSelectState(option) {
|
|
5998
|
+
if (this.multiSelect) {
|
|
5999
|
+
const currentValue = this.value || [];
|
|
6000
|
+
const currentSelected = this.optionSelected || [];
|
|
6001
|
+
|
|
6002
|
+
if (!currentValue.includes(option.value)) {
|
|
6003
|
+
this.value = [
|
|
6004
|
+
...currentValue,
|
|
6005
|
+
option.value
|
|
6006
|
+
];
|
|
6007
|
+
}
|
|
6008
|
+
if (!currentSelected.includes(option)) {
|
|
6009
|
+
this.optionSelected = [
|
|
6010
|
+
...currentSelected,
|
|
6011
|
+
option
|
|
6012
|
+
];
|
|
6013
|
+
}
|
|
6014
|
+
} else {
|
|
6015
|
+
// Single select - use arrays with single values
|
|
6016
|
+
this.value = [option.value];
|
|
6017
|
+
this.optionSelected = [option];
|
|
4192
6018
|
}
|
|
6019
|
+
|
|
6020
|
+
this.index = this.items.indexOf(option);
|
|
4193
6021
|
}
|
|
4194
6022
|
|
|
4195
6023
|
/**
|
|
4196
|
-
*
|
|
4197
|
-
* @param {Object} option - The menuoption to be selected.
|
|
6024
|
+
* Deselects a menu option and updates related state.
|
|
4198
6025
|
* @private
|
|
6026
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
4199
6027
|
*/
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
6028
|
+
handleDeselectState(option) {
|
|
6029
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
6030
|
+
// Remove this option from array
|
|
6031
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
6032
|
+
|
|
6033
|
+
// If array is empty after removal, set back to undefined
|
|
6034
|
+
if (this.value.length === 0) {
|
|
6035
|
+
this.value = undefined;
|
|
6036
|
+
}
|
|
4204
6037
|
|
|
4205
|
-
|
|
4206
|
-
|
|
6038
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
6039
|
+
if (this.optionSelected.length === 0) {
|
|
6040
|
+
this.optionSelected = undefined;
|
|
6041
|
+
}
|
|
6042
|
+
} else {
|
|
6043
|
+
// For single-select: Back to undefined when deselected
|
|
6044
|
+
this.value = undefined;
|
|
6045
|
+
this.optionSelected = undefined;
|
|
6046
|
+
}
|
|
6047
|
+
|
|
6048
|
+
// Update the index tracking
|
|
4207
6049
|
this.index = this.items.indexOf(option);
|
|
6050
|
+
|
|
6051
|
+
// Update UI to reflect changes
|
|
6052
|
+
this.updateItemsState(new Map([
|
|
6053
|
+
[
|
|
6054
|
+
'optionSelected',
|
|
6055
|
+
true
|
|
6056
|
+
]
|
|
6057
|
+
]));
|
|
6058
|
+
|
|
6059
|
+
// Notify of selection change
|
|
6060
|
+
this.notifySelectionChange();
|
|
4208
6061
|
}
|
|
4209
6062
|
|
|
4210
6063
|
/**
|
|
4211
|
-
*
|
|
6064
|
+
* Resets all options to their default state.
|
|
4212
6065
|
* @private
|
|
4213
|
-
* @return {void}
|
|
4214
6066
|
*/
|
|
4215
|
-
|
|
4216
|
-
this.
|
|
4217
|
-
|
|
4218
|
-
cancelable: false,
|
|
4219
|
-
composed: true,
|
|
4220
|
-
}));
|
|
6067
|
+
clearSelection() {
|
|
6068
|
+
this.optionSelected = undefined;
|
|
6069
|
+
this.value = undefined;
|
|
4221
6070
|
}
|
|
4222
6071
|
|
|
4223
6072
|
/**
|
|
4224
|
-
*
|
|
6073
|
+
* Resets the menu to its initial state.
|
|
6074
|
+
* This is the only way to return value to undefined.
|
|
6075
|
+
* @public
|
|
4225
6076
|
*/
|
|
4226
|
-
|
|
4227
|
-
|
|
4228
|
-
|
|
4229
|
-
|
|
6077
|
+
reset() {
|
|
6078
|
+
// Reset to undefined - initial state
|
|
6079
|
+
this.value = undefined;
|
|
6080
|
+
this.optionSelected = undefined;
|
|
6081
|
+
this.index = -1;
|
|
4230
6082
|
|
|
4231
|
-
|
|
4232
|
-
|
|
6083
|
+
// Reset UI state
|
|
6084
|
+
this.updateItemsState(new Map([
|
|
6085
|
+
[
|
|
6086
|
+
'optionSelected',
|
|
6087
|
+
true
|
|
6088
|
+
]
|
|
6089
|
+
]));
|
|
4233
6090
|
|
|
4234
|
-
|
|
4235
|
-
|
|
6091
|
+
// Dispatch reset event
|
|
6092
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueReset');
|
|
6093
|
+
}
|
|
4236
6094
|
|
|
4237
|
-
|
|
4238
|
-
|
|
4239
|
-
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
composed: true,
|
|
4245
|
-
}));
|
|
6095
|
+
/**
|
|
6096
|
+
* Handles nested menu structure.
|
|
6097
|
+
* @private
|
|
6098
|
+
* @param {HTMLElement} menu - Root menu element.
|
|
6099
|
+
*/
|
|
6100
|
+
handleNestedMenus(menu) {
|
|
6101
|
+
const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
|
|
4246
6102
|
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
} else {
|
|
4253
|
-
this.handleLocalSelectState(option);
|
|
4254
|
-
}
|
|
4255
|
-
}
|
|
6103
|
+
nestedMenus.forEach((nestedMenu) => {
|
|
6104
|
+
// role="listbox" only allows "role=group" for children.
|
|
6105
|
+
nestedMenu.setAttribute('role', 'group');
|
|
6106
|
+
if (!nestedMenu.hasAttribute('aria-label')) {
|
|
6107
|
+
nestedMenu.setAttribute('aria-label', 'submenu');
|
|
4256
6108
|
}
|
|
4257
|
-
}
|
|
4258
6109
|
|
|
4259
|
-
|
|
6110
|
+
const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
6111
|
+
options.forEach((option) => {
|
|
6112
|
+
option.innerHTML = this.nestingSpacer + option.innerHTML;
|
|
6113
|
+
});
|
|
6114
|
+
|
|
6115
|
+
this.handleNestedMenus(nestedMenu);
|
|
6116
|
+
});
|
|
4260
6117
|
}
|
|
4261
6118
|
|
|
6119
|
+
// Event Handlers
|
|
6120
|
+
|
|
4262
6121
|
/**
|
|
4263
|
-
*
|
|
6122
|
+
* Handles keyboard navigation.
|
|
4264
6123
|
* @private
|
|
4265
|
-
* @param {
|
|
6124
|
+
* @param {KeyboardEvent} event - Event object from the browser.
|
|
4266
6125
|
*/
|
|
4267
6126
|
handleKeyDown(event) {
|
|
4268
6127
|
event.preventDefault();
|
|
4269
|
-
|
|
4270
|
-
// With ArrowDown/ArrowUp events, pass new value to selectNextItem()
|
|
4271
|
-
// With Enter event, set value and apply attrs
|
|
4272
6128
|
switch (event.key) {
|
|
4273
6129
|
case "ArrowDown":
|
|
4274
|
-
this.
|
|
6130
|
+
this.navigateOptions('down');
|
|
4275
6131
|
break;
|
|
4276
|
-
|
|
4277
6132
|
case "ArrowUp":
|
|
4278
|
-
this.
|
|
6133
|
+
this.navigateOptions('up');
|
|
4279
6134
|
break;
|
|
4280
|
-
|
|
4281
6135
|
case "Enter":
|
|
4282
6136
|
this.makeSelection();
|
|
4283
6137
|
break;
|
|
@@ -4285,225 +6139,221 @@ class AuroMenu extends r$4 {
|
|
|
4285
6139
|
}
|
|
4286
6140
|
|
|
4287
6141
|
/**
|
|
4288
|
-
*
|
|
6142
|
+
* Makes a selection based on the current index or clicked option.
|
|
4289
6143
|
* @private
|
|
4290
6144
|
*/
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
6145
|
+
makeSelection() {
|
|
6146
|
+
if (!this.items) {
|
|
6147
|
+
this.initItems();
|
|
6148
|
+
}
|
|
6149
|
+
|
|
6150
|
+
// Get currently selected menu option based on index
|
|
6151
|
+
const option = this.items[this.index];
|
|
6152
|
+
|
|
6153
|
+
// Return early if option is not interactive
|
|
6154
|
+
if (!option || !isOptionInteractive(option)) {
|
|
6155
|
+
return;
|
|
6156
|
+
}
|
|
6157
|
+
|
|
6158
|
+
// Handle custom events first
|
|
6159
|
+
if (option.hasAttribute('event')) {
|
|
6160
|
+
this.handleCustomEvent(option);
|
|
6161
|
+
return;
|
|
6162
|
+
}
|
|
6163
|
+
|
|
6164
|
+
if (this.multiSelect) {
|
|
6165
|
+
// In multiselect, toggle individual selections
|
|
6166
|
+
this.toggleOption(option);
|
|
6167
|
+
// In single select, only handle selection of new options
|
|
6168
|
+
} else if (!this.isOptionSelected(option)) {
|
|
6169
|
+
this.clearSelection();
|
|
6170
|
+
this.handleSelectState(option);
|
|
6171
|
+
}
|
|
6172
|
+
|
|
6173
|
+
this.notifySelectionChange();
|
|
4294
6174
|
}
|
|
4295
6175
|
|
|
4296
6176
|
/**
|
|
4297
|
-
*
|
|
6177
|
+
* Toggle the selection state of the menuoption.
|
|
4298
6178
|
* @private
|
|
6179
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
4299
6180
|
*/
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
|
|
6181
|
+
toggleOption(option) {
|
|
6182
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
4303
6183
|
|
|
4304
|
-
if (
|
|
4305
|
-
this.
|
|
4306
|
-
|
|
6184
|
+
if (isCurrentlySelected) {
|
|
6185
|
+
this.handleDeselectState(option);
|
|
6186
|
+
} else if (option.value === undefined || option.value === '') {
|
|
6187
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
6188
|
+
} else {
|
|
6189
|
+
this.handleSelectState(option);
|
|
4307
6190
|
}
|
|
4308
6191
|
}
|
|
4309
6192
|
|
|
4310
6193
|
/**
|
|
4311
|
-
*
|
|
4312
|
-
*
|
|
4313
|
-
*
|
|
4314
|
-
*
|
|
4315
|
-
* The event.target is not used as the function needs to know where to go,
|
|
4316
|
-
* versus knowing where it is.
|
|
4317
|
-
* @param {String} moveDirection - Up or Down based on keyboard event.
|
|
6194
|
+
* Handles option selection via mouse.
|
|
6195
|
+
* @private
|
|
6196
|
+
* @param {MouseEvent} event - Event object from the browser.
|
|
4318
6197
|
*/
|
|
4319
|
-
|
|
4320
|
-
if (
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
// calculate which is the selection we should focus next
|
|
4324
|
-
let increment = 0;
|
|
4325
|
-
|
|
4326
|
-
if (moveDirection === 'down') {
|
|
4327
|
-
increment = 1;
|
|
4328
|
-
} else if (moveDirection === 'up') {
|
|
4329
|
-
increment = -1;
|
|
4330
|
-
}
|
|
4331
|
-
|
|
4332
|
-
this.index += increment;
|
|
4333
|
-
|
|
4334
|
-
// keep looping inside the array of options
|
|
4335
|
-
if (this.index > this.items.length - 1) {
|
|
4336
|
-
this.index = 0;
|
|
4337
|
-
} else if (this.index < 0) {
|
|
4338
|
-
this.index = this.items.length - 1;
|
|
4339
|
-
}
|
|
4340
|
-
|
|
4341
|
-
// check if new index is disabled, static or hidden, if so, execute again
|
|
4342
|
-
if (!this.optionInteractive(this.items[this.index])) {
|
|
4343
|
-
this.selectNextItem(moveDirection);
|
|
4344
|
-
} else {
|
|
4345
|
-
// apply focus to new index
|
|
4346
|
-
this.updateActiveOption(this.index);
|
|
4347
|
-
}
|
|
4348
|
-
} else {
|
|
4349
|
-
this.index = 0;
|
|
6198
|
+
handleMouseSelect(event) {
|
|
6199
|
+
if (event.target === this) {
|
|
6200
|
+
return;
|
|
6201
|
+
}
|
|
4350
6202
|
|
|
4351
|
-
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
}
|
|
6203
|
+
const option = event.target.closest('auro-menuoption, [auro-menuoption]');
|
|
6204
|
+
if (option) {
|
|
6205
|
+
this.index = this.items.indexOf(option);
|
|
6206
|
+
this.makeSelection();
|
|
4356
6207
|
}
|
|
4357
6208
|
}
|
|
4358
6209
|
|
|
4359
6210
|
/**
|
|
4360
|
-
*
|
|
6211
|
+
* Handles option hover events.
|
|
4361
6212
|
* @private
|
|
4362
|
-
* @param {
|
|
6213
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
4363
6214
|
*/
|
|
4364
|
-
|
|
4365
|
-
const
|
|
6215
|
+
handleOptionHover(event) {
|
|
6216
|
+
const option = event.target;
|
|
6217
|
+
this.index = this.items.indexOf(option);
|
|
6218
|
+
this.updateActiveOption(this.index);
|
|
6219
|
+
}
|
|
4366
6220
|
|
|
4367
|
-
|
|
4368
|
-
|
|
6221
|
+
/**
|
|
6222
|
+
* Handles slot change events.
|
|
6223
|
+
* @private
|
|
6224
|
+
*/
|
|
6225
|
+
handleSlotChange() {
|
|
6226
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
6227
|
+
this.rootMenu = false;
|
|
4369
6228
|
}
|
|
4370
6229
|
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
6230
|
+
if (this.rootMenu) {
|
|
6231
|
+
this.initializeMenu();
|
|
6232
|
+
} else if (this.noCheckmark) {
|
|
6233
|
+
this.updateItemsState(new Map([
|
|
6234
|
+
[
|
|
6235
|
+
'noCheckmark',
|
|
6236
|
+
true
|
|
6237
|
+
]
|
|
6238
|
+
]));
|
|
6239
|
+
}
|
|
4380
6240
|
}
|
|
4381
6241
|
|
|
4382
6242
|
/**
|
|
4383
|
-
*
|
|
6243
|
+
* Navigates through options using keyboard.
|
|
4384
6244
|
* @private
|
|
4385
|
-
* @param {
|
|
6245
|
+
* @param {string} direction - 'up' or 'down'.
|
|
4386
6246
|
*/
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
if (!this.items) {
|
|
4390
|
-
|
|
6247
|
+
navigateOptions(direction) {
|
|
6248
|
+
// Return early if no items exist
|
|
6249
|
+
if (!this.items || !this.items.length) {
|
|
6250
|
+
return;
|
|
4391
6251
|
}
|
|
4392
6252
|
|
|
4393
|
-
this.index
|
|
6253
|
+
let newIndex = this.index;
|
|
6254
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
6255
|
+
const maxIterations = this.items.length;
|
|
6256
|
+
let iterations = 0;
|
|
6257
|
+
let foundInteractiveOption = false;
|
|
4394
6258
|
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
valueMatch = true;
|
|
4399
|
-
this.index = index;
|
|
4400
|
-
}
|
|
4401
|
-
}
|
|
6259
|
+
do {
|
|
6260
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
6261
|
+
iterations += 1;
|
|
4402
6262
|
|
|
4403
|
-
if
|
|
4404
|
-
|
|
4405
|
-
|
|
6263
|
+
// Check if current option is interactive
|
|
6264
|
+
const currentOption = this.items[newIndex];
|
|
6265
|
+
if (isOptionInteractive(currentOption)) {
|
|
6266
|
+
foundInteractiveOption = true;
|
|
6267
|
+
break;
|
|
6268
|
+
}
|
|
4406
6269
|
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
composed: true,
|
|
4411
|
-
}));
|
|
4412
|
-
} else {
|
|
4413
|
-
this.makeSelection();
|
|
6270
|
+
// Break if all options were checked
|
|
6271
|
+
if (iterations >= maxIterations) {
|
|
6272
|
+
break;
|
|
4414
6273
|
}
|
|
4415
|
-
}
|
|
4416
|
-
this.resetOptionsStates();
|
|
6274
|
+
} while (iterations < maxIterations);
|
|
4417
6275
|
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
6276
|
+
// Handle the results of the search
|
|
6277
|
+
if (foundInteractiveOption) {
|
|
6278
|
+
// Update only if an interactive option was found
|
|
6279
|
+
this.index = newIndex;
|
|
6280
|
+
this.updateActiveOption(this.index);
|
|
6281
|
+
} else {
|
|
6282
|
+
// All options are disabled or non-interactive
|
|
6283
|
+
// Keep the current index unchanged
|
|
6284
|
+
dispatchMenuEvent(this, 'auroMenu-navigateFailure', {
|
|
6285
|
+
reason: 'No interactive options available',
|
|
6286
|
+
direction,
|
|
6287
|
+
currentIndex: this.index
|
|
6288
|
+
});
|
|
4423
6289
|
}
|
|
4424
6290
|
}
|
|
4425
6291
|
|
|
4426
6292
|
/**
|
|
4427
|
-
*
|
|
4428
|
-
* @param {Number} index - Index of the menuoption that will be made active.
|
|
6293
|
+
* Updates the active option state and dispatches events.
|
|
4429
6294
|
* @private
|
|
6295
|
+
* @param {number} index - Index of the option to make active.
|
|
4430
6296
|
*/
|
|
4431
6297
|
updateActiveOption(index) {
|
|
4432
|
-
this.items.
|
|
4433
|
-
|
|
4434
|
-
}
|
|
6298
|
+
if (!this.items || !this.items[index]) {
|
|
6299
|
+
return;
|
|
6300
|
+
}
|
|
6301
|
+
|
|
6302
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
4435
6303
|
this.items[index].classList.add('active');
|
|
4436
6304
|
this.optionActive = this.items[index];
|
|
4437
6305
|
|
|
4438
|
-
this
|
|
4439
|
-
bubbles: true,
|
|
4440
|
-
cancelable: false,
|
|
4441
|
-
composed: true,
|
|
4442
|
-
detail: this.items[index]
|
|
4443
|
-
}));
|
|
6306
|
+
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
|
|
4444
6307
|
}
|
|
4445
6308
|
|
|
4446
6309
|
/**
|
|
4447
|
-
*
|
|
4448
|
-
* @param {Event} evt - Mousedown event.
|
|
6310
|
+
* Handles custom events defined on options.
|
|
4449
6311
|
* @private
|
|
6312
|
+
* @param {HTMLElement} option - Option with custom event.
|
|
4450
6313
|
*/
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
6314
|
+
handleCustomEvent(option) {
|
|
6315
|
+
const eventName = option.getAttribute('event');
|
|
6316
|
+
dispatchMenuEvent(this, eventName);
|
|
6317
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired');
|
|
4455
6318
|
}
|
|
4456
6319
|
|
|
4457
6320
|
/**
|
|
4458
|
-
*
|
|
4459
|
-
*
|
|
4460
|
-
* This getter evaluates the `loadingSlots` collection to determine if it contains any items.
|
|
4461
|
-
* If the size of the collection is greater than zero, it indicates the presence of loading
|
|
4462
|
-
* placeholders, returning true; otherwise, it returns false.
|
|
4463
|
-
*
|
|
4464
|
-
* @getter hasLoadingPlaceholder
|
|
4465
|
-
* @type {boolean}
|
|
4466
|
-
* @returns {boolean} Returns true if loading placeholders exist; false otherwise.
|
|
6321
|
+
* Notifies selection change to parent components.
|
|
6322
|
+
* @private
|
|
4467
6323
|
*/
|
|
4468
|
-
|
|
4469
|
-
|
|
6324
|
+
notifySelectionChange() {
|
|
6325
|
+
dispatchMenuEvent(this, 'auroMenu-selectedOption');
|
|
4470
6326
|
}
|
|
4471
6327
|
|
|
4472
6328
|
/**
|
|
4473
|
-
*
|
|
6329
|
+
* Checks if an option is currently selected.
|
|
4474
6330
|
* @private
|
|
6331
|
+
* @param {HTMLElement} option - The option to check.
|
|
6332
|
+
* @returns {boolean}
|
|
4475
6333
|
*/
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
this.rootMenu = false;
|
|
6334
|
+
isOptionSelected(option) {
|
|
6335
|
+
if (!this.optionSelected) {
|
|
6336
|
+
return false;
|
|
4480
6337
|
}
|
|
6338
|
+
// Always treat as array for both single and multi-select
|
|
6339
|
+
return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
|
|
6340
|
+
}
|
|
4481
6341
|
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
this.markOptions();
|
|
4489
|
-
this.index = -1;
|
|
4490
|
-
this.getSelectedIndex();
|
|
4491
|
-
|
|
4492
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
4493
|
-
this.addEventListener('mousedown', this.handleMenuMouseDown);
|
|
4494
|
-
this.addEventListener('auroMenuOption-mouseover', (evt) => {
|
|
4495
|
-
this.index = this.items.indexOf(evt.target);
|
|
4496
|
-
this.updateActiveOption(this.index);
|
|
4497
|
-
});
|
|
4498
|
-
} else {
|
|
4499
|
-
// make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
|
|
4500
|
-
this.handleNoCheckmarkAttr();
|
|
4501
|
-
}
|
|
6342
|
+
/**
|
|
6343
|
+
* Getter for loading placeholder state.
|
|
6344
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
6345
|
+
*/
|
|
6346
|
+
get hasLoadingPlaceholder() {
|
|
6347
|
+
return this.loadingSlots && this.loadingSlots.length > 0;
|
|
4502
6348
|
}
|
|
4503
6349
|
|
|
6350
|
+
/**
|
|
6351
|
+
* Renders the component.
|
|
6352
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
6353
|
+
*/
|
|
4504
6354
|
render() {
|
|
4505
6355
|
if (this.loading) {
|
|
4506
|
-
return x$
|
|
6356
|
+
return x$2`
|
|
4507
6357
|
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
|
|
4508
6358
|
<div>
|
|
4509
6359
|
<slot name="loadingIcon"></slot>
|
|
@@ -4512,19 +6362,20 @@ class AuroMenu extends r$4 {
|
|
|
4512
6362
|
</auro-menuoption>
|
|
4513
6363
|
`;
|
|
4514
6364
|
}
|
|
4515
|
-
|
|
6365
|
+
|
|
6366
|
+
return x$2`<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
4516
6367
|
}
|
|
4517
6368
|
}
|
|
4518
6369
|
|
|
4519
|
-
var styleCss$1 = i$
|
|
6370
|
+
var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}: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)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
4520
6371
|
|
|
4521
|
-
var colorCss$1 = i$
|
|
6372
|
+
var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
|
|
4522
6373
|
|
|
4523
6374
|
/**
|
|
4524
6375
|
* @license
|
|
4525
6376
|
* Copyright 2018 Google LLC
|
|
4526
6377
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
4527
|
-
*/const o=o=>o??E$
|
|
6378
|
+
*/const o=o=>o??E$2;
|
|
4528
6379
|
|
|
4529
6380
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4530
6381
|
// See LICENSE in the project root for license information.
|
|
@@ -4536,7 +6387,7 @@ var colorCss$1 = i$b`:host{background-color:var(--ds-auro-menuoption-container-c
|
|
|
4536
6387
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
4537
6388
|
*/
|
|
4538
6389
|
|
|
4539
|
-
class AuroElement extends r$
|
|
6390
|
+
class AuroElement extends r$5 {
|
|
4540
6391
|
|
|
4541
6392
|
// function to define props used within the scope of this component
|
|
4542
6393
|
static get properties() {
|
|
@@ -4592,7 +6443,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
4592
6443
|
return _fetchMap.get(uri);
|
|
4593
6444
|
};
|
|
4594
6445
|
|
|
4595
|
-
var styleCss = i$
|
|
6446
|
+
var styleCss = i$c`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
|
|
4596
6447
|
|
|
4597
6448
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4598
6449
|
// See LICENSE in the project root for license information.
|
|
@@ -4631,7 +6482,7 @@ class BaseIcon extends AuroElement {
|
|
|
4631
6482
|
}
|
|
4632
6483
|
|
|
4633
6484
|
static get styles() {
|
|
4634
|
-
return i$
|
|
6485
|
+
return i$c`
|
|
4635
6486
|
${styleCss}
|
|
4636
6487
|
`;
|
|
4637
6488
|
}
|
|
@@ -4673,9 +6524,9 @@ class BaseIcon extends AuroElement {
|
|
|
4673
6524
|
}
|
|
4674
6525
|
}
|
|
4675
6526
|
|
|
4676
|
-
var tokensCss = i$
|
|
6527
|
+
var tokensCss = i$c`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
|
|
4677
6528
|
|
|
4678
|
-
var colorCss = i$
|
|
6529
|
+
var colorCss = i$c`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
4679
6530
|
|
|
4680
6531
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4681
6532
|
// See LICENSE in the project root for license information.
|
|
@@ -4737,7 +6588,7 @@ class AuroIcon extends BaseIcon {
|
|
|
4737
6588
|
this.success = false;
|
|
4738
6589
|
this.tertiary = false;
|
|
4739
6590
|
this.warning = false;
|
|
4740
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6591
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
4741
6592
|
}
|
|
4742
6593
|
|
|
4743
6594
|
// function to define props used within the scope of this component
|
|
@@ -4819,9 +6670,9 @@ class AuroIcon extends BaseIcon {
|
|
|
4819
6670
|
static get styles() {
|
|
4820
6671
|
return [
|
|
4821
6672
|
super.styles,
|
|
4822
|
-
i$
|
|
4823
|
-
i$
|
|
4824
|
-
i$
|
|
6673
|
+
i$c`${tokensCss}`,
|
|
6674
|
+
i$c`${styleCss}`,
|
|
6675
|
+
i$c`${colorCss}`
|
|
4825
6676
|
];
|
|
4826
6677
|
}
|
|
4827
6678
|
|
|
@@ -4834,7 +6685,7 @@ class AuroIcon extends BaseIcon {
|
|
|
4834
6685
|
*
|
|
4835
6686
|
*/
|
|
4836
6687
|
static register(name = "auro-icon") {
|
|
4837
|
-
AuroLibraryRuntimeUtils$
|
|
6688
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
4838
6689
|
}
|
|
4839
6690
|
|
|
4840
6691
|
connectedCallback() {
|
|
@@ -4863,20 +6714,20 @@ class AuroIcon extends BaseIcon {
|
|
|
4863
6714
|
'wrapper': true,
|
|
4864
6715
|
};
|
|
4865
6716
|
|
|
4866
|
-
return x$
|
|
6717
|
+
return x$2`
|
|
4867
6718
|
<div
|
|
4868
|
-
class="${e$
|
|
6719
|
+
class="${e$6(classes)}"
|
|
4869
6720
|
title="${o(this.title || undefined)}">
|
|
4870
6721
|
<span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
4871
|
-
${this.customSvg ? x$
|
|
6722
|
+
${this.customSvg ? x$2`
|
|
4872
6723
|
<slot name="svg"></slot>
|
|
4873
|
-
` : x$
|
|
6724
|
+
` : x$2`
|
|
4874
6725
|
${this.svg}
|
|
4875
6726
|
`
|
|
4876
6727
|
}
|
|
4877
6728
|
</span>
|
|
4878
6729
|
|
|
4879
|
-
<div class="${e$
|
|
6730
|
+
<div class="${e$6(a11y)}">
|
|
4880
6731
|
<slot></slot>
|
|
4881
6732
|
</div>
|
|
4882
6733
|
</div>
|
|
@@ -4902,14 +6753,14 @@ var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a sm
|
|
|
4902
6753
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
4903
6754
|
* @slot - Specifies text for an option, but is not the value.
|
|
4904
6755
|
*/
|
|
4905
|
-
class AuroMenuOption extends r$
|
|
6756
|
+
class AuroMenuOption extends r$5 {
|
|
4906
6757
|
constructor() {
|
|
4907
6758
|
super();
|
|
4908
6759
|
|
|
4909
6760
|
/**
|
|
4910
6761
|
* Generate unique names for dependency components.
|
|
4911
6762
|
*/
|
|
4912
|
-
const versioning = new AuroDependencyVersioning$
|
|
6763
|
+
const versioning = new AuroDependencyVersioning$2();
|
|
4913
6764
|
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
4914
6765
|
|
|
4915
6766
|
this.selected = false;
|
|
@@ -4924,7 +6775,7 @@ class AuroMenuOption extends r$4 {
|
|
|
4924
6775
|
/**
|
|
4925
6776
|
* @private
|
|
4926
6777
|
*/
|
|
4927
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6778
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
4928
6779
|
}
|
|
4929
6780
|
|
|
4930
6781
|
static get properties() {
|
|
@@ -4968,7 +6819,7 @@ class AuroMenuOption extends r$4 {
|
|
|
4968
6819
|
*
|
|
4969
6820
|
*/
|
|
4970
6821
|
static register(name = "auro-menuoption") {
|
|
4971
|
-
AuroLibraryRuntimeUtils$
|
|
6822
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
|
|
4972
6823
|
}
|
|
4973
6824
|
|
|
4974
6825
|
firstUpdated() {
|
|
@@ -5008,11 +6859,11 @@ class AuroMenuOption extends r$4 {
|
|
|
5008
6859
|
|
|
5009
6860
|
svg.setAttribute('slot', 'svg');
|
|
5010
6861
|
|
|
5011
|
-
return u$
|
|
6862
|
+
return u$4`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
5012
6863
|
}
|
|
5013
6864
|
|
|
5014
6865
|
render() {
|
|
5015
|
-
return u$
|
|
6866
|
+
return u$4`
|
|
5016
6867
|
${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
|
|
5017
6868
|
<slot></slot>
|
|
5018
6869
|
`;
|