@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
|
@@ -26,11 +26,11 @@ function valueExample() {
|
|
|
26
26
|
const valueExample = document.querySelector('#valueExample');
|
|
27
27
|
|
|
28
28
|
document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
|
|
29
|
-
valueExample.value = 'arrival';
|
|
29
|
+
valueExample.value = ['arrival'];
|
|
30
30
|
});
|
|
31
31
|
|
|
32
32
|
document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
|
|
33
|
-
valueExample.value = 'flight course';
|
|
33
|
+
valueExample.value = ['flight course'];
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -107,46 +107,46 @@ function auroMenuLoadingExample() {
|
|
|
107
107
|
* Copyright 2019 Google LLC
|
|
108
108
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
109
109
|
*/
|
|
110
|
-
const t$
|
|
110
|
+
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;
|
|
111
111
|
|
|
112
112
|
/**
|
|
113
113
|
* @license
|
|
114
114
|
* Copyright 2017 Google LLC
|
|
115
115
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
116
|
-
*/const{is:i$
|
|
116
|
+
*/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");
|
|
117
117
|
|
|
118
118
|
/**
|
|
119
119
|
* @license
|
|
120
120
|
* Copyright 2017 Google LLC
|
|
121
121
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
122
122
|
*/
|
|
123
|
-
const t$
|
|
123
|
+
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};
|
|
124
124
|
|
|
125
125
|
/**
|
|
126
126
|
* @license
|
|
127
127
|
* Copyright 2017 Google LLC
|
|
128
128
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
129
|
-
*/let r$
|
|
129
|
+
*/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");
|
|
130
130
|
|
|
131
131
|
/**
|
|
132
132
|
* @license
|
|
133
133
|
* Copyright 2017 Google LLC
|
|
134
134
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
135
135
|
*/
|
|
136
|
-
const t$
|
|
136
|
+
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)}};
|
|
137
137
|
|
|
138
138
|
/**
|
|
139
139
|
* @license
|
|
140
140
|
* Copyright 2018 Google LLC
|
|
141
141
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
142
|
-
*/const e$
|
|
142
|
+
*/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}});
|
|
143
143
|
|
|
144
144
|
/**
|
|
145
145
|
* @license
|
|
146
146
|
* Copyright 2020 Google LLC
|
|
147
147
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
148
148
|
*/
|
|
149
|
-
const a$
|
|
149
|
+
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);
|
|
150
150
|
|
|
151
151
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
152
152
|
// See LICENSE in the project root for license information.
|
|
@@ -155,7 +155,7 @@ const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({
|
|
|
155
155
|
|
|
156
156
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
157
157
|
|
|
158
|
-
let AuroLibraryRuntimeUtils$
|
|
158
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
159
159
|
|
|
160
160
|
/* eslint-disable jsdoc/require-param */
|
|
161
161
|
|
|
@@ -224,7 +224,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
224
224
|
|
|
225
225
|
class AuroFormValidation {
|
|
226
226
|
constructor() {
|
|
227
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
227
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
228
228
|
}
|
|
229
229
|
|
|
230
230
|
/**
|
|
@@ -536,7 +536,7 @@ class AuroFormValidation {
|
|
|
536
536
|
// See LICENSE in the project root for license information.
|
|
537
537
|
|
|
538
538
|
|
|
539
|
-
let AuroDependencyVersioning$
|
|
539
|
+
let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
|
|
540
540
|
|
|
541
541
|
/**
|
|
542
542
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -562,7 +562,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
562
562
|
*/
|
|
563
563
|
generateTag(baseName, version, tagClass) {
|
|
564
564
|
const elementName = this.generateElementName(baseName, version);
|
|
565
|
-
const tag = i$
|
|
565
|
+
const tag = i$7`${s$4(elementName)}`;
|
|
566
566
|
|
|
567
567
|
if (!customElements.get(elementName)) {
|
|
568
568
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -577,33 +577,33 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
577
577
|
* Copyright 2017 Google LLC
|
|
578
578
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
579
579
|
*/
|
|
580
|
-
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
|
|
580
|
+
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};
|
|
581
581
|
|
|
582
582
|
/**
|
|
583
583
|
* @license
|
|
584
584
|
* Copyright 2020 Google LLC
|
|
585
585
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
586
586
|
*/
|
|
587
|
-
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);
|
|
587
|
+
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);
|
|
588
588
|
|
|
589
589
|
/**
|
|
590
590
|
* @license
|
|
591
591
|
* Copyright 2019 Google LLC
|
|
592
592
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
593
593
|
*/
|
|
594
|
-
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;
|
|
594
|
+
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;
|
|
595
595
|
|
|
596
596
|
/**
|
|
597
597
|
* @license
|
|
598
598
|
* Copyright 2017 Google LLC
|
|
599
599
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
600
|
-
*/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");
|
|
600
|
+
*/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");
|
|
601
601
|
|
|
602
602
|
/**
|
|
603
603
|
* @license
|
|
604
604
|
* Copyright 2017 Google LLC
|
|
605
605
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
606
|
-
*/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");
|
|
606
|
+
*/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");
|
|
607
607
|
|
|
608
608
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
609
609
|
// See LICENSE in the project root for license information.
|
|
@@ -612,7 +612,7 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(undefined===t$1.ShadyCSS||t$1.ShadyCSS
|
|
|
612
612
|
|
|
613
613
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
614
614
|
|
|
615
|
-
class AuroLibraryRuntimeUtils {
|
|
615
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
616
616
|
|
|
617
617
|
/* eslint-disable jsdoc/require-param */
|
|
618
618
|
|
|
@@ -673,7 +673,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
673
673
|
|
|
674
674
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
675
675
|
}
|
|
676
|
-
}
|
|
676
|
+
};
|
|
677
677
|
|
|
678
678
|
/**
|
|
679
679
|
* Custom positioning reference element.
|
|
@@ -2561,7 +2561,7 @@ class AuroFloatingUI {
|
|
|
2561
2561
|
// See LICENSE in the project root for license information.
|
|
2562
2562
|
|
|
2563
2563
|
|
|
2564
|
-
class AuroDependencyVersioning {
|
|
2564
|
+
let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
2565
2565
|
|
|
2566
2566
|
/**
|
|
2567
2567
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -2587,7 +2587,7 @@ class AuroDependencyVersioning {
|
|
|
2587
2587
|
*/
|
|
2588
2588
|
generateTag(baseName, version, tagClass) {
|
|
2589
2589
|
const elementName = this.generateElementName(baseName, version);
|
|
2590
|
-
const tag = i$4`${s$1(elementName)}`;
|
|
2590
|
+
const tag = i$4$1`${s$1$1(elementName)}`;
|
|
2591
2591
|
|
|
2592
2592
|
if (!customElements.get(elementName)) {
|
|
2593
2593
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -2595,26 +2595,26 @@ class AuroDependencyVersioning {
|
|
|
2595
2595
|
|
|
2596
2596
|
return tag;
|
|
2597
2597
|
}
|
|
2598
|
-
}
|
|
2598
|
+
};
|
|
2599
2599
|
|
|
2600
2600
|
/**
|
|
2601
2601
|
* @license
|
|
2602
2602
|
* Copyright 2017 Google LLC
|
|
2603
2603
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2604
2604
|
*/
|
|
2605
|
-
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)}}
|
|
2605
|
+
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)}};
|
|
2606
2606
|
|
|
2607
2607
|
/**
|
|
2608
2608
|
* @license
|
|
2609
2609
|
* Copyright 2018 Google LLC
|
|
2610
2610
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2611
|
-
*/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}});
|
|
2611
|
+
*/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}});
|
|
2612
2612
|
|
|
2613
2613
|
/**
|
|
2614
2614
|
* @license
|
|
2615
2615
|
* Copyright 2018 Google LLC
|
|
2616
2616
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2617
|
-
*/const o$
|
|
2617
|
+
*/const o$6=o=>o??E$1;
|
|
2618
2618
|
|
|
2619
2619
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2620
2620
|
// See LICENSE in the project root for license information.
|
|
@@ -2626,7 +2626,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
|
|
|
2626
2626
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
2627
2627
|
*/
|
|
2628
2628
|
|
|
2629
|
-
let AuroElement$
|
|
2629
|
+
let AuroElement$2 = class AuroElement extends r$4 {
|
|
2630
2630
|
|
|
2631
2631
|
// function to define props used within the scope of this component
|
|
2632
2632
|
static get properties() {
|
|
@@ -2652,11 +2652,11 @@ let AuroElement$1 = class AuroElement extends r {
|
|
|
2652
2652
|
}
|
|
2653
2653
|
};
|
|
2654
2654
|
|
|
2655
|
-
var error$
|
|
2655
|
+
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>"};
|
|
2656
2656
|
|
|
2657
2657
|
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
2658
2658
|
|
|
2659
|
-
const _fetchMap$
|
|
2659
|
+
const _fetchMap$2 = new Map();
|
|
2660
2660
|
|
|
2661
2661
|
/**
|
|
2662
2662
|
* A callback to parse Response body.
|
|
@@ -2674,15 +2674,15 @@ const _fetchMap$1 = new Map();
|
|
|
2674
2674
|
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
2675
2675
|
* @returns {Promise}
|
|
2676
2676
|
*/
|
|
2677
|
-
const cacheFetch$
|
|
2677
|
+
const cacheFetch$2 = (uri, options = {}) => {
|
|
2678
2678
|
const responseParser = options.responseParser || ((response) => response.text());
|
|
2679
|
-
if (!_fetchMap$
|
|
2680
|
-
_fetchMap$
|
|
2679
|
+
if (!_fetchMap$2.has(uri)) {
|
|
2680
|
+
_fetchMap$2.set(uri, fetch(uri).then(responseParser));
|
|
2681
2681
|
}
|
|
2682
|
-
return _fetchMap$
|
|
2682
|
+
return _fetchMap$2.get(uri);
|
|
2683
2683
|
};
|
|
2684
2684
|
|
|
2685
|
-
var styleCss$2$
|
|
2685
|
+
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}`;
|
|
2686
2686
|
|
|
2687
2687
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2688
2688
|
// See LICENSE in the project root for license information.
|
|
@@ -2695,7 +2695,7 @@ var styleCss$2$1 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-r
|
|
|
2695
2695
|
*/
|
|
2696
2696
|
|
|
2697
2697
|
// build the component class
|
|
2698
|
-
let BaseIcon$
|
|
2698
|
+
let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
2699
2699
|
constructor() {
|
|
2700
2700
|
super();
|
|
2701
2701
|
this.onDark = false;
|
|
@@ -2721,8 +2721,8 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2721
2721
|
}
|
|
2722
2722
|
|
|
2723
2723
|
static get styles() {
|
|
2724
|
-
return i$3`
|
|
2725
|
-
${styleCss$2$
|
|
2724
|
+
return i$3$1`
|
|
2725
|
+
${styleCss$2$2}
|
|
2726
2726
|
`;
|
|
2727
2727
|
}
|
|
2728
2728
|
|
|
@@ -2737,9 +2737,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2737
2737
|
let iconHTML = '';
|
|
2738
2738
|
|
|
2739
2739
|
if (category === 'logos') {
|
|
2740
|
-
iconHTML = await cacheFetch$
|
|
2740
|
+
iconHTML = await cacheFetch$2(`${this.uri}/${category}/${name}.svg`);
|
|
2741
2741
|
} else {
|
|
2742
|
-
iconHTML = await cacheFetch$
|
|
2742
|
+
iconHTML = await cacheFetch$2(`${this.uri}/icons/${category}/${name}.svg`);
|
|
2743
2743
|
}
|
|
2744
2744
|
|
|
2745
2745
|
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
@@ -2755,7 +2755,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2755
2755
|
if (svg) {
|
|
2756
2756
|
this.svg = svg;
|
|
2757
2757
|
} else if (!svg) {
|
|
2758
|
-
const penDOM = new DOMParser().parseFromString(error$
|
|
2758
|
+
const penDOM = new DOMParser().parseFromString(error$2.svg, 'text/html');
|
|
2759
2759
|
|
|
2760
2760
|
this.svg = penDOM.body.firstChild;
|
|
2761
2761
|
}
|
|
@@ -2763,9 +2763,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
2763
2763
|
}
|
|
2764
2764
|
};
|
|
2765
2765
|
|
|
2766
|
-
var tokensCss$1$
|
|
2766
|
+
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)}`;
|
|
2767
2767
|
|
|
2768
|
-
var colorCss$2$
|
|
2768
|
+
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)}`;
|
|
2769
2769
|
|
|
2770
2770
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2771
2771
|
// See LICENSE in the project root for license information.
|
|
@@ -2798,7 +2798,7 @@ var colorCss$2$1 = i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]
|
|
|
2798
2798
|
*/
|
|
2799
2799
|
|
|
2800
2800
|
// build the component class
|
|
2801
|
-
let AuroIcon$
|
|
2801
|
+
let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
2802
2802
|
constructor() {
|
|
2803
2803
|
super();
|
|
2804
2804
|
|
|
@@ -2827,7 +2827,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2827
2827
|
this.success = false;
|
|
2828
2828
|
this.tertiary = false;
|
|
2829
2829
|
this.warning = false;
|
|
2830
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
2830
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
2831
2831
|
}
|
|
2832
2832
|
|
|
2833
2833
|
// function to define props used within the scope of this component
|
|
@@ -2909,9 +2909,9 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2909
2909
|
static get styles() {
|
|
2910
2910
|
return [
|
|
2911
2911
|
super.styles,
|
|
2912
|
-
i$3`${tokensCss$1$
|
|
2913
|
-
i$3`${styleCss$2$
|
|
2914
|
-
i$3`${colorCss$2$
|
|
2912
|
+
i$3$1`${tokensCss$1$2}`,
|
|
2913
|
+
i$3$1`${styleCss$2$2}`,
|
|
2914
|
+
i$3$1`${colorCss$2$2}`
|
|
2915
2915
|
];
|
|
2916
2916
|
}
|
|
2917
2917
|
|
|
@@ -2924,7 +2924,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2924
2924
|
*
|
|
2925
2925
|
*/
|
|
2926
2926
|
static register(name = "auro-icon") {
|
|
2927
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
2927
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
|
|
2928
2928
|
}
|
|
2929
2929
|
|
|
2930
2930
|
connectedCallback() {
|
|
@@ -2953,20 +2953,20 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2953
2953
|
'wrapper': true,
|
|
2954
2954
|
};
|
|
2955
2955
|
|
|
2956
|
-
return x`
|
|
2956
|
+
return x$1`
|
|
2957
2957
|
<div
|
|
2958
|
-
class="${e(classes)}"
|
|
2959
|
-
title="${o$
|
|
2960
|
-
<span aria-hidden="${o$
|
|
2961
|
-
${this.customSvg ? x`
|
|
2958
|
+
class="${e$5(classes)}"
|
|
2959
|
+
title="${o$6(this.title || undefined)}">
|
|
2960
|
+
<span aria-hidden="${o$6(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
2961
|
+
${this.customSvg ? x$1`
|
|
2962
2962
|
<slot name="svg"></slot>
|
|
2963
|
-
` : x`
|
|
2963
|
+
` : x$1`
|
|
2964
2964
|
${this.svg}
|
|
2965
2965
|
`
|
|
2966
2966
|
}
|
|
2967
2967
|
</span>
|
|
2968
2968
|
|
|
2969
|
-
<div class="${e(a11y)}">
|
|
2969
|
+
<div class="${e$5(a11y)}">
|
|
2970
2970
|
<slot></slot>
|
|
2971
2971
|
</div>
|
|
2972
2972
|
</div>
|
|
@@ -2974,17 +2974,17 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
2974
2974
|
}
|
|
2975
2975
|
};
|
|
2976
2976
|
|
|
2977
|
-
var iconVersion$
|
|
2977
|
+
var iconVersion$2 = '6.1.2';
|
|
2978
2978
|
|
|
2979
|
-
var styleCss$1$
|
|
2979
|
+
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)}`;
|
|
2980
2980
|
|
|
2981
|
-
var colorCss$1$
|
|
2981
|
+
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)}`;
|
|
2982
2982
|
|
|
2983
|
-
var tokensCss$
|
|
2983
|
+
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)}`;
|
|
2984
2984
|
|
|
2985
|
-
var styleCss$
|
|
2985
|
+
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}`;
|
|
2986
2986
|
|
|
2987
|
-
var colorCss$
|
|
2987
|
+
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)}`;
|
|
2988
2988
|
|
|
2989
2989
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2990
2990
|
// See LICENSE in the project root for license information.
|
|
@@ -3004,7 +3004,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
|
3004
3004
|
* @csspart bibContainer - Apply css to the bib container.
|
|
3005
3005
|
*/
|
|
3006
3006
|
|
|
3007
|
-
class AuroDropdownBib extends r {
|
|
3007
|
+
class AuroDropdownBib extends r$4 {
|
|
3008
3008
|
|
|
3009
3009
|
constructor() {
|
|
3010
3010
|
super();
|
|
@@ -3017,9 +3017,9 @@ class AuroDropdownBib extends r {
|
|
|
3017
3017
|
|
|
3018
3018
|
static get styles() {
|
|
3019
3019
|
return [
|
|
3020
|
-
styleCss$
|
|
3021
|
-
colorCss$
|
|
3022
|
-
tokensCss$
|
|
3020
|
+
styleCss$5,
|
|
3021
|
+
colorCss$5,
|
|
3022
|
+
tokensCss$4
|
|
3023
3023
|
];
|
|
3024
3024
|
}
|
|
3025
3025
|
|
|
@@ -3070,7 +3070,7 @@ class AuroDropdownBib extends r {
|
|
|
3070
3070
|
|
|
3071
3071
|
// function that renders the HTML and CSS into the scope of the component
|
|
3072
3072
|
render() {
|
|
3073
|
-
return u$1`
|
|
3073
|
+
return u$1$1`
|
|
3074
3074
|
<div class="container" part="bibContainer">
|
|
3075
3075
|
<slot></slot>
|
|
3076
3076
|
</div>
|
|
@@ -3100,7 +3100,7 @@ if (!customElements.get("auro-dropdownbib")) {
|
|
|
3100
3100
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3101
3101
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
3102
3102
|
*/
|
|
3103
|
-
class AuroDropdown extends r {
|
|
3103
|
+
class AuroDropdown extends r$4 {
|
|
3104
3104
|
constructor() {
|
|
3105
3105
|
super();
|
|
3106
3106
|
|
|
@@ -3139,7 +3139,7 @@ class AuroDropdown extends r {
|
|
|
3139
3139
|
/**
|
|
3140
3140
|
* @private
|
|
3141
3141
|
*/
|
|
3142
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
3142
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
3143
3143
|
|
|
3144
3144
|
/**
|
|
3145
3145
|
* @private
|
|
@@ -3159,8 +3159,8 @@ class AuroDropdown extends r {
|
|
|
3159
3159
|
/**
|
|
3160
3160
|
* Generate unique names for dependency components.
|
|
3161
3161
|
*/
|
|
3162
|
-
const versioning = new AuroDependencyVersioning();
|
|
3163
|
-
this.iconTag = versioning.generateTag('auro-icon', iconVersion$
|
|
3162
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
3163
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion$2, AuroIcon$2);
|
|
3164
3164
|
}
|
|
3165
3165
|
|
|
3166
3166
|
/**
|
|
@@ -3340,9 +3340,9 @@ class AuroDropdown extends r {
|
|
|
3340
3340
|
|
|
3341
3341
|
static get styles() {
|
|
3342
3342
|
return [
|
|
3343
|
-
colorCss$1$
|
|
3344
|
-
styleCss$1$
|
|
3345
|
-
tokensCss$
|
|
3343
|
+
colorCss$1$2,
|
|
3344
|
+
styleCss$1$2,
|
|
3345
|
+
tokensCss$4
|
|
3346
3346
|
];
|
|
3347
3347
|
}
|
|
3348
3348
|
|
|
@@ -3355,7 +3355,7 @@ class AuroDropdown extends r {
|
|
|
3355
3355
|
*
|
|
3356
3356
|
*/
|
|
3357
3357
|
static register(name = "auro-dropdown") {
|
|
3358
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown);
|
|
3358
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
|
|
3359
3359
|
}
|
|
3360
3360
|
|
|
3361
3361
|
connectedCallback() {
|
|
@@ -3479,7 +3479,7 @@ class AuroDropdown extends r {
|
|
|
3479
3479
|
|
|
3480
3480
|
// function that renders the HTML and CSS into the scope of the component
|
|
3481
3481
|
render() {
|
|
3482
|
-
return u$1`
|
|
3482
|
+
return u$1$1`
|
|
3483
3483
|
<div>
|
|
3484
3484
|
<div
|
|
3485
3485
|
id="trigger"
|
|
@@ -3500,7 +3500,7 @@ class AuroDropdown extends r {
|
|
|
3500
3500
|
@slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
|
|
3501
3501
|
</div>
|
|
3502
3502
|
</div>
|
|
3503
|
-
${this.chevron || this.common ? u$1`
|
|
3503
|
+
${this.chevron || this.common ? u$1$1`
|
|
3504
3504
|
<div
|
|
3505
3505
|
id="showStateIcon"
|
|
3506
3506
|
part="chevron">
|
|
@@ -3539,99 +3539,1611 @@ AuroDropdown.register();
|
|
|
3539
3539
|
|
|
3540
3540
|
var dropdownVersion = '3.0.0';
|
|
3541
3541
|
|
|
3542
|
-
|
|
3542
|
+
/**
|
|
3543
|
+
* @license
|
|
3544
|
+
* Copyright 2019 Google LLC
|
|
3545
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3546
|
+
*/
|
|
3547
|
+
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;
|
|
3548
|
+
|
|
3549
|
+
/**
|
|
3550
|
+
* @license
|
|
3551
|
+
* Copyright 2017 Google LLC
|
|
3552
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3553
|
+
*/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");
|
|
3554
|
+
|
|
3555
|
+
/**
|
|
3556
|
+
* @license
|
|
3557
|
+
* Copyright 2017 Google LLC
|
|
3558
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3559
|
+
*/
|
|
3560
|
+
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};
|
|
3561
|
+
|
|
3562
|
+
/**
|
|
3563
|
+
* @license
|
|
3564
|
+
* Copyright 2017 Google LLC
|
|
3565
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3566
|
+
*/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");
|
|
3567
|
+
|
|
3568
|
+
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)}`;
|
|
3569
|
+
|
|
3570
|
+
var colorCss$2$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
|
|
3571
|
+
|
|
3572
|
+
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)}`;
|
|
3573
|
+
|
|
3574
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3575
|
+
// See LICENSE in the project root for license information.
|
|
3576
|
+
|
|
3577
|
+
// ---------------------------------------------------------------------
|
|
3578
|
+
|
|
3579
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3580
|
+
|
|
3581
|
+
class AuroLibraryRuntimeUtils {
|
|
3582
|
+
|
|
3583
|
+
/* eslint-disable jsdoc/require-param */
|
|
3584
|
+
|
|
3585
|
+
/**
|
|
3586
|
+
* This will register a new custom element with the browser.
|
|
3587
|
+
* @param {String} name - The name of the custom element.
|
|
3588
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
3589
|
+
* @returns {void}
|
|
3590
|
+
*/
|
|
3591
|
+
registerComponent(name, componentClass) {
|
|
3592
|
+
if (!customElements.get(name)) {
|
|
3593
|
+
customElements.define(name, class extends componentClass {});
|
|
3594
|
+
}
|
|
3595
|
+
}
|
|
3596
|
+
|
|
3597
|
+
/**
|
|
3598
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
3599
|
+
* @returns {void}
|
|
3600
|
+
*/
|
|
3601
|
+
closestElement(
|
|
3602
|
+
selector, // selector like in .closest()
|
|
3603
|
+
base = this, // extra functionality to skip a parent
|
|
3604
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
3605
|
+
!el || el === document || el === window
|
|
3606
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
3607
|
+
: found
|
|
3608
|
+
? found // found a selector INside this element
|
|
3609
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
3610
|
+
) {
|
|
3611
|
+
return __Closest(base);
|
|
3612
|
+
}
|
|
3613
|
+
/* eslint-enable jsdoc/require-param */
|
|
3614
|
+
|
|
3615
|
+
/**
|
|
3616
|
+
* 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.
|
|
3617
|
+
* @param {Object} elem - The element to check.
|
|
3618
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
3619
|
+
* @returns {void}
|
|
3620
|
+
*/
|
|
3621
|
+
handleComponentTagRename(elem, tagName) {
|
|
3622
|
+
const tag = tagName.toLowerCase();
|
|
3623
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
3624
|
+
|
|
3625
|
+
if (elemTag !== tag) {
|
|
3626
|
+
elem.setAttribute(tag, true);
|
|
3627
|
+
}
|
|
3628
|
+
}
|
|
3629
|
+
|
|
3630
|
+
/**
|
|
3631
|
+
* Validates if an element is a specific Auro component.
|
|
3632
|
+
* @param {Object} elem - The element to validate.
|
|
3633
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
3634
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
3635
|
+
*/
|
|
3636
|
+
elementMatch(elem, tagName) {
|
|
3637
|
+
const tag = tagName.toLowerCase();
|
|
3638
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
3639
|
+
|
|
3640
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
3641
|
+
}
|
|
3642
|
+
}
|
|
3643
|
+
|
|
3644
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3645
|
+
// See LICENSE in the project root for license information.
|
|
3646
|
+
|
|
3647
|
+
// ---------------------------------------------------------------------
|
|
3648
|
+
|
|
3649
|
+
/**
|
|
3650
|
+
* Converts value to an array.
|
|
3651
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
3652
|
+
* If the value is already an array, it is returned.
|
|
3653
|
+
* If the value is undefined, it returns undefined.
|
|
3654
|
+
* @private
|
|
3655
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
3656
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
3657
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
3658
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
3659
|
+
*/
|
|
3660
|
+
function arrayConverter$1(value) {
|
|
3661
|
+
// Allow undefined
|
|
3662
|
+
if (value === undefined) {
|
|
3663
|
+
return undefined;
|
|
3664
|
+
}
|
|
3665
|
+
|
|
3666
|
+
// Return the value if it is already an array
|
|
3667
|
+
if (Array.isArray(value)) {
|
|
3668
|
+
return value;
|
|
3669
|
+
}
|
|
3670
|
+
|
|
3671
|
+
try {
|
|
3672
|
+
// If value is a JSON string, parse it
|
|
3673
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
3674
|
+
|
|
3675
|
+
// Check if the parsed value is an array
|
|
3676
|
+
if (Array.isArray(parsed)) {
|
|
3677
|
+
return parsed;
|
|
3678
|
+
}
|
|
3679
|
+
} catch (error) {
|
|
3680
|
+
// If JSON parsing fails, continue to throw an error below
|
|
3681
|
+
/* eslint-disable no-console */
|
|
3682
|
+
console.error('JSON parsing failed:', error);
|
|
3683
|
+
}
|
|
3684
|
+
|
|
3685
|
+
// Throw error if the input is not an array or undefined
|
|
3686
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
3687
|
+
}
|
|
3688
|
+
|
|
3689
|
+
/**
|
|
3690
|
+
* Compare two arrays for equality.
|
|
3691
|
+
* @private
|
|
3692
|
+
* @param {Array} arr1 - First array to compare.
|
|
3693
|
+
* @param {Array} arr2 - Second array to compare.
|
|
3694
|
+
* @returns {boolean} True if arrays are equal.
|
|
3695
|
+
*/
|
|
3696
|
+
function arraysAreEqual$1(arr1, arr2) {
|
|
3697
|
+
// If both arrays undefined, they are equal (true)
|
|
3698
|
+
if (arr1 === undefined || arr2 === undefined) {
|
|
3699
|
+
return arr1 === arr2;
|
|
3700
|
+
}
|
|
3701
|
+
|
|
3702
|
+
// If arrays have different lengths, they are not equal
|
|
3703
|
+
if (arr1.length !== arr2.length) {
|
|
3704
|
+
return false;
|
|
3705
|
+
}
|
|
3706
|
+
|
|
3707
|
+
// If every item at each index is the same, return true
|
|
3708
|
+
for (let index = 0; index < arr1.length; index += 1) {
|
|
3709
|
+
if (arr1[index] !== arr2[index]) {
|
|
3710
|
+
return false;
|
|
3711
|
+
}
|
|
3712
|
+
}
|
|
3713
|
+
return true;
|
|
3714
|
+
}
|
|
3715
|
+
|
|
3716
|
+
/**
|
|
3717
|
+
* Compares array for changes.
|
|
3718
|
+
* @private
|
|
3719
|
+
* @param {Array|any} newVal - New value to compare.
|
|
3720
|
+
* @param {Array|any} oldVal - Old value to compare.
|
|
3721
|
+
* @returns {boolean} True if arrays have changed.
|
|
3722
|
+
*/
|
|
3723
|
+
function arrayOrUndefinedHasChanged$1(newVal, oldVal) {
|
|
3724
|
+
try {
|
|
3725
|
+
// Check if values are undefined or arrays
|
|
3726
|
+
const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
|
|
3727
|
+
|
|
3728
|
+
// If non-array or non-undefined, throw error
|
|
3729
|
+
if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
|
|
3730
|
+
const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
|
|
3731
|
+
throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
|
|
3732
|
+
}
|
|
3733
|
+
|
|
3734
|
+
// Return true if arrays have changed, false if they are the same
|
|
3735
|
+
return !arraysAreEqual$1(newVal, oldVal);
|
|
3736
|
+
} catch (error) {
|
|
3737
|
+
/* eslint-disable no-console */
|
|
3738
|
+
console.error(error);
|
|
3739
|
+
// If validation fails, it has changed
|
|
3740
|
+
return true;
|
|
3741
|
+
}
|
|
3742
|
+
}
|
|
3743
|
+
|
|
3744
|
+
/**
|
|
3745
|
+
* Validates if an option can be interacted with.
|
|
3746
|
+
* @private
|
|
3747
|
+
* @param {HTMLElement} option - The option to check.
|
|
3748
|
+
* @returns {boolean} True if option is interactive.
|
|
3749
|
+
*/
|
|
3750
|
+
function isOptionInteractive$1(option) {
|
|
3751
|
+
return !option.hasAttribute('hidden') &&
|
|
3752
|
+
!option.hasAttribute('disabled') &&
|
|
3753
|
+
!option.hasAttribute('static');
|
|
3754
|
+
}
|
|
3755
|
+
|
|
3756
|
+
/**
|
|
3757
|
+
* Helper method to dispatch custom events.
|
|
3758
|
+
* @param {HTMLElement} element - Element to dispatch event from.
|
|
3759
|
+
* @param {string} eventName - Name of the event to dispatch.
|
|
3760
|
+
* @param {Object} [detail] - Optional detail object to include with the event.
|
|
3761
|
+
*/
|
|
3762
|
+
function dispatchMenuEvent$1(element, eventName, detail = null) {
|
|
3763
|
+
const eventConfig = {
|
|
3764
|
+
bubbles: true,
|
|
3765
|
+
cancelable: false,
|
|
3766
|
+
composed: true
|
|
3767
|
+
};
|
|
3543
3768
|
|
|
3544
|
-
|
|
3769
|
+
if (detail !== null) {
|
|
3770
|
+
eventConfig.detail = detail;
|
|
3771
|
+
}
|
|
3545
3772
|
|
|
3546
|
-
|
|
3773
|
+
element.dispatchEvent(new CustomEvent(eventName, eventConfig));
|
|
3774
|
+
}
|
|
3547
3775
|
|
|
3548
3776
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3549
3777
|
// See LICENSE in the project root for license information.
|
|
3550
3778
|
|
|
3551
3779
|
|
|
3780
|
+
|
|
3552
3781
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
3553
3782
|
/**
|
|
3554
|
-
* The auro-
|
|
3555
|
-
*
|
|
3556
|
-
* @
|
|
3557
|
-
* @
|
|
3558
|
-
* @
|
|
3559
|
-
* @
|
|
3560
|
-
* @
|
|
3561
|
-
* @
|
|
3562
|
-
* @
|
|
3783
|
+
* The auro-menu element provides users a way to select from a list of options.
|
|
3784
|
+
* @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.
|
|
3785
|
+
* @attr {object} optionactive - Specifies the current active menuOption.
|
|
3786
|
+
* @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
|
|
3787
|
+
* @attr {boolean} disabled - When true, the entire menu and all options are disabled;
|
|
3788
|
+
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
3789
|
+
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
3790
|
+
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
3791
|
+
* @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.
|
|
3792
|
+
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
3793
|
+
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
3794
|
+
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3795
|
+
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
3796
|
+
* @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
|
|
3797
|
+
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
3798
|
+
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
3799
|
+
* @slot loadingText - Text to show while loading attribute is set
|
|
3800
|
+
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
3801
|
+
* @slot - Slot for insertion of menu options.
|
|
3563
3802
|
*/
|
|
3564
3803
|
|
|
3565
|
-
|
|
3566
|
-
|
|
3804
|
+
/* eslint-disable no-magic-numbers, max-lines */
|
|
3805
|
+
|
|
3806
|
+
let AuroMenu$1 = class AuroMenu extends r {
|
|
3567
3807
|
constructor() {
|
|
3568
3808
|
super();
|
|
3569
3809
|
|
|
3810
|
+
// State properties (reactive)
|
|
3811
|
+
|
|
3812
|
+
// Value of the selected options
|
|
3813
|
+
this.value = undefined;
|
|
3814
|
+
// Currently selected option
|
|
3570
3815
|
this.optionSelected = undefined;
|
|
3571
|
-
|
|
3816
|
+
// String used for highlighting/filtering
|
|
3817
|
+
this.matchWord = undefined;
|
|
3818
|
+
// Hide the checkmark icon on selected options
|
|
3819
|
+
this.noCheckmark = false;
|
|
3820
|
+
// Currently active option
|
|
3821
|
+
this.optionActive = undefined;
|
|
3822
|
+
// Loading state
|
|
3823
|
+
this.loading = false;
|
|
3824
|
+
// Multi-select mode
|
|
3825
|
+
this.multiSelect = false;
|
|
3572
3826
|
|
|
3573
|
-
|
|
3574
|
-
const idSubstrEnd = 8;
|
|
3575
|
-
const idSubstrStart = 2;
|
|
3827
|
+
// Event Bindings
|
|
3576
3828
|
|
|
3577
3829
|
/**
|
|
3578
3830
|
* @private
|
|
3579
3831
|
*/
|
|
3580
|
-
this.
|
|
3581
|
-
toString(idLength).
|
|
3582
|
-
substring(idSubstrStart, idSubstrEnd);
|
|
3832
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
3583
3833
|
|
|
3584
3834
|
/**
|
|
3585
3835
|
* @private
|
|
3586
3836
|
*/
|
|
3587
|
-
this.
|
|
3837
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
3588
3838
|
|
|
3589
3839
|
/**
|
|
3590
3840
|
* @private
|
|
3591
3841
|
*/
|
|
3592
|
-
this.
|
|
3593
|
-
|
|
3594
|
-
/**
|
|
3595
|
-
* Generate unique names for dependency components.
|
|
3596
|
-
*/
|
|
3597
|
-
const versioning = new AuroDependencyVersioning$1();
|
|
3842
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
3598
3843
|
|
|
3599
3844
|
/**
|
|
3600
3845
|
* @private
|
|
3601
3846
|
*/
|
|
3602
|
-
this.
|
|
3847
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
3848
|
+
|
|
3849
|
+
// Instance properties (non-reactive)
|
|
3603
3850
|
|
|
3604
3851
|
/**
|
|
3605
3852
|
* @private
|
|
3606
3853
|
*/
|
|
3607
|
-
this
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3854
|
+
Object.assign(this, {
|
|
3855
|
+
// Root-level menu (true) or a nested submenu (false)
|
|
3856
|
+
rootMenu: true,
|
|
3857
|
+
// Currently focused/active menu item index
|
|
3858
|
+
index: -1,
|
|
3859
|
+
// Nested menu spacer
|
|
3860
|
+
nestingSpacer: '<span class="nestingSpacer"></span>',
|
|
3861
|
+
// Loading indicator for slot elements
|
|
3862
|
+
loadingSlots: null,
|
|
3863
|
+
// Store for menu items
|
|
3864
|
+
items: [],
|
|
3865
|
+
});
|
|
3617
3866
|
}
|
|
3618
3867
|
|
|
3619
|
-
// This function is to define props used within the scope of this component
|
|
3620
|
-
// Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes
|
|
3621
|
-
// to understand how to use reflected attributes with your property settings.
|
|
3622
3868
|
static get properties() {
|
|
3623
3869
|
return {
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3870
|
+
noCheckmark: {
|
|
3871
|
+
type: Boolean,
|
|
3872
|
+
reflect: true,
|
|
3873
|
+
attribute: 'nocheckmark'
|
|
3874
|
+
},
|
|
3628
3875
|
disabled: {
|
|
3629
3876
|
type: Boolean,
|
|
3630
3877
|
reflect: true
|
|
3631
3878
|
},
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3879
|
+
loading: {
|
|
3880
|
+
type: Boolean,
|
|
3881
|
+
reflect: true
|
|
3882
|
+
},
|
|
3883
|
+
optionSelected: {
|
|
3884
|
+
// Allow HTMLElement[] arrays and undefined
|
|
3885
|
+
converter: arrayConverter$1,
|
|
3886
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3887
|
+
},
|
|
3888
|
+
optionActive: {
|
|
3889
|
+
type: Object,
|
|
3890
|
+
attribute: 'optionactive'
|
|
3891
|
+
},
|
|
3892
|
+
matchWord: {
|
|
3893
|
+
type: String,
|
|
3894
|
+
attribute: 'matchword'
|
|
3895
|
+
},
|
|
3896
|
+
multiSelect: {
|
|
3897
|
+
type: Boolean,
|
|
3898
|
+
reflect: true,
|
|
3899
|
+
attribute: 'multiselect'
|
|
3900
|
+
},
|
|
3901
|
+
value: {
|
|
3902
|
+
// Allow string[] arrays and undefined
|
|
3903
|
+
type: Object,
|
|
3904
|
+
converter: arrayConverter$1,
|
|
3905
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3906
|
+
}
|
|
3907
|
+
};
|
|
3908
|
+
}
|
|
3909
|
+
|
|
3910
|
+
static get styles() {
|
|
3911
|
+
return [
|
|
3912
|
+
styleCss$2$1,
|
|
3913
|
+
colorCss$2$1,
|
|
3914
|
+
tokensCss$1$1
|
|
3915
|
+
];
|
|
3916
|
+
}
|
|
3917
|
+
|
|
3918
|
+
/**
|
|
3919
|
+
* This will register this element with the browser.
|
|
3920
|
+
* @param {string} [name="auro-menu"] - The name of element that you want to register to.
|
|
3921
|
+
*
|
|
3922
|
+
* @example
|
|
3923
|
+
* AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
|
|
3924
|
+
*
|
|
3925
|
+
*/
|
|
3926
|
+
static register(name = "auro-menu") {
|
|
3927
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
|
|
3928
|
+
}
|
|
3929
|
+
|
|
3930
|
+
// Lifecycle Methods
|
|
3931
|
+
|
|
3932
|
+
connectedCallback() {
|
|
3933
|
+
super.connectedCallback();
|
|
3934
|
+
|
|
3935
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
3936
|
+
this.addEventListener('mousedown', this.handleMouseSelect);
|
|
3937
|
+
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
3938
|
+
this.addEventListener('slotchange', this.handleSlotChange);
|
|
3939
|
+
}
|
|
3940
|
+
|
|
3941
|
+
disconnectedCallback() {
|
|
3942
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
3943
|
+
this.removeEventListener('mousedown', this.handleMouseSelect);
|
|
3944
|
+
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
3945
|
+
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
3946
|
+
|
|
3947
|
+
super.disconnectedCallback();
|
|
3948
|
+
}
|
|
3949
|
+
|
|
3950
|
+
firstUpdated() {
|
|
3951
|
+
AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
3952
|
+
|
|
3953
|
+
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
3954
|
+
this.initializeMenu();
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3957
|
+
updated(changedProperties) {
|
|
3958
|
+
if (changedProperties.has('value')) {
|
|
3959
|
+
// Handle null/undefined case
|
|
3960
|
+
if (this.value === undefined || this.value === null) {
|
|
3961
|
+
this.optionSelected = undefined;
|
|
3962
|
+
// Reset index tracking
|
|
3963
|
+
this.index = -1;
|
|
3964
|
+
} else {
|
|
3965
|
+
// Convert single values to arrays
|
|
3966
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
3967
|
+
|
|
3968
|
+
// Find all matching options
|
|
3969
|
+
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
3970
|
+
|
|
3971
|
+
if (matchingOptions.length > 0) {
|
|
3972
|
+
if (this.multiSelect) {
|
|
3973
|
+
// For multiselect, keep all matching options
|
|
3974
|
+
this.optionSelected = matchingOptions;
|
|
3975
|
+
} else {
|
|
3976
|
+
// For single select, only use the first match
|
|
3977
|
+
this.optionSelected = [matchingOptions[0]];
|
|
3978
|
+
this.index = this.items.indexOf(matchingOptions[0]);
|
|
3979
|
+
}
|
|
3980
|
+
} else {
|
|
3981
|
+
// No matches found - trigger failure event
|
|
3982
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueFailure');
|
|
3983
|
+
this.optionSelected = undefined;
|
|
3984
|
+
this.index = -1;
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
|
|
3988
|
+
// Update UI state
|
|
3989
|
+
this.updateItemsState(new Map([
|
|
3990
|
+
[
|
|
3991
|
+
'optionSelected',
|
|
3992
|
+
true
|
|
3993
|
+
]
|
|
3994
|
+
]));
|
|
3995
|
+
|
|
3996
|
+
// Notify of changes
|
|
3997
|
+
if (this.optionSelected !== undefined) {
|
|
3998
|
+
this.notifySelectionChange();
|
|
3999
|
+
}
|
|
4000
|
+
}
|
|
4001
|
+
|
|
4002
|
+
// Process all other UI updates
|
|
4003
|
+
this.updateItemsState(changedProperties);
|
|
4004
|
+
}
|
|
4005
|
+
|
|
4006
|
+
/**
|
|
4007
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
4008
|
+
* @private
|
|
4009
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
4010
|
+
*/
|
|
4011
|
+
updateItemsState(changedProperties) {
|
|
4012
|
+
if (!this.items) {
|
|
4013
|
+
return;
|
|
4014
|
+
}
|
|
4015
|
+
|
|
4016
|
+
// Handle noCheckmark propagation to all menus and options
|
|
4017
|
+
if (changedProperties.has('noCheckmark') && this.noCheckmark) {
|
|
4018
|
+
// Update both menus and options
|
|
4019
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
|
|
4020
|
+
}
|
|
4021
|
+
|
|
4022
|
+
// Regex for matchWord if needed
|
|
4023
|
+
let regexWord = null;
|
|
4024
|
+
|
|
4025
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
4026
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
4027
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
4028
|
+
}
|
|
4029
|
+
|
|
4030
|
+
// Handle direct item updates
|
|
4031
|
+
this.items.forEach((option) => {
|
|
4032
|
+
// Update selection if option or value changed
|
|
4033
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
4034
|
+
const isSelected = this.isOptionSelected(option);
|
|
4035
|
+
option.classList.toggle('active', isSelected);
|
|
4036
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
4037
|
+
|
|
4038
|
+
// Add/remove selected attribute based on state
|
|
4039
|
+
if (isSelected) {
|
|
4040
|
+
option.setAttribute('selected', '');
|
|
4041
|
+
} else {
|
|
4042
|
+
option.removeAttribute('selected');
|
|
4043
|
+
}
|
|
4044
|
+
}
|
|
4045
|
+
|
|
4046
|
+
// Update text highlighting if matchWord changed
|
|
4047
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
4048
|
+
isOptionInteractive$1(option) && !option.hasAttribute('persistent')) {
|
|
4049
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
4050
|
+
// Create nested spacers
|
|
4051
|
+
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
4052
|
+
|
|
4053
|
+
// Update with spacers and matchWord
|
|
4054
|
+
option.innerHTML = nestingSpacerBundle +
|
|
4055
|
+
option.textContent.replace(
|
|
4056
|
+
regexWord,
|
|
4057
|
+
(match) => `<strong>${match}</strong>`
|
|
4058
|
+
);
|
|
4059
|
+
}
|
|
4060
|
+
|
|
4061
|
+
// Update disabled state
|
|
4062
|
+
if (changedProperties.has('disabled')) {
|
|
4063
|
+
option.disabled = this.disabled;
|
|
4064
|
+
}
|
|
4065
|
+
});
|
|
4066
|
+
|
|
4067
|
+
// Handle loading state changes
|
|
4068
|
+
if (changedProperties.has('loading')) {
|
|
4069
|
+
this.setAttribute("aria-busy", this.loading);
|
|
4070
|
+
dispatchMenuEvent$1(this, "auroMenu-loadingChange", {
|
|
4071
|
+
loading: this.loading,
|
|
4072
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
4073
|
+
});
|
|
4074
|
+
}
|
|
4075
|
+
}
|
|
4076
|
+
|
|
4077
|
+
// Init Methods
|
|
4078
|
+
|
|
4079
|
+
/**
|
|
4080
|
+
* Initializes the menu's state and structure.
|
|
4081
|
+
* @private
|
|
4082
|
+
*/
|
|
4083
|
+
initializeMenu() {
|
|
4084
|
+
this.initItems();
|
|
4085
|
+
if (this.rootMenu) {
|
|
4086
|
+
this.setAttribute('role', 'listbox');
|
|
4087
|
+
this.setAttribute('root', '');
|
|
4088
|
+
this.handleNestedMenus(this);
|
|
4089
|
+
}
|
|
4090
|
+
}
|
|
4091
|
+
|
|
4092
|
+
/**
|
|
4093
|
+
* Initializes menu items and their attributes.
|
|
4094
|
+
* @private
|
|
4095
|
+
*/
|
|
4096
|
+
initItems() {
|
|
4097
|
+
this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
4098
|
+
if (this.noCheckmark) {
|
|
4099
|
+
this.updateItemsState(new Map([
|
|
4100
|
+
[
|
|
4101
|
+
'noCheckmark',
|
|
4102
|
+
true
|
|
4103
|
+
]
|
|
4104
|
+
]));
|
|
4105
|
+
}
|
|
4106
|
+
}
|
|
4107
|
+
|
|
4108
|
+
// Logic Methods
|
|
4109
|
+
|
|
4110
|
+
/**
|
|
4111
|
+
* Updates menu state when an option is selected.
|
|
4112
|
+
* @private
|
|
4113
|
+
* @param {HTMLElement} option - The option element to select.
|
|
4114
|
+
*/
|
|
4115
|
+
handleSelectState(option) {
|
|
4116
|
+
if (this.multiSelect) {
|
|
4117
|
+
const currentValue = this.value || [];
|
|
4118
|
+
const currentSelected = this.optionSelected || [];
|
|
4119
|
+
|
|
4120
|
+
if (!currentValue.includes(option.value)) {
|
|
4121
|
+
this.value = [
|
|
4122
|
+
...currentValue,
|
|
4123
|
+
option.value
|
|
4124
|
+
];
|
|
4125
|
+
}
|
|
4126
|
+
if (!currentSelected.includes(option)) {
|
|
4127
|
+
this.optionSelected = [
|
|
4128
|
+
...currentSelected,
|
|
4129
|
+
option
|
|
4130
|
+
];
|
|
4131
|
+
}
|
|
4132
|
+
} else {
|
|
4133
|
+
// Single select - use arrays with single values
|
|
4134
|
+
this.value = [option.value];
|
|
4135
|
+
this.optionSelected = [option];
|
|
4136
|
+
}
|
|
4137
|
+
|
|
4138
|
+
this.index = this.items.indexOf(option);
|
|
4139
|
+
}
|
|
4140
|
+
|
|
4141
|
+
/**
|
|
4142
|
+
* Deselects a menu option and updates related state.
|
|
4143
|
+
* @private
|
|
4144
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
4145
|
+
*/
|
|
4146
|
+
handleDeselectState(option) {
|
|
4147
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
4148
|
+
// Remove this option from array
|
|
4149
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
4150
|
+
|
|
4151
|
+
// If array is empty after removal, set back to undefined
|
|
4152
|
+
if (this.value.length === 0) {
|
|
4153
|
+
this.value = undefined;
|
|
4154
|
+
}
|
|
4155
|
+
|
|
4156
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
4157
|
+
if (this.optionSelected.length === 0) {
|
|
4158
|
+
this.optionSelected = undefined;
|
|
4159
|
+
}
|
|
4160
|
+
} else {
|
|
4161
|
+
// For single-select: Back to undefined when deselected
|
|
4162
|
+
this.value = undefined;
|
|
4163
|
+
this.optionSelected = undefined;
|
|
4164
|
+
}
|
|
4165
|
+
|
|
4166
|
+
// Update the index tracking
|
|
4167
|
+
this.index = this.items.indexOf(option);
|
|
4168
|
+
|
|
4169
|
+
// Update UI to reflect changes
|
|
4170
|
+
this.updateItemsState(new Map([
|
|
4171
|
+
[
|
|
4172
|
+
'optionSelected',
|
|
4173
|
+
true
|
|
4174
|
+
]
|
|
4175
|
+
]));
|
|
4176
|
+
|
|
4177
|
+
// Notify of selection change
|
|
4178
|
+
this.notifySelectionChange();
|
|
4179
|
+
}
|
|
4180
|
+
|
|
4181
|
+
/**
|
|
4182
|
+
* Resets all options to their default state.
|
|
4183
|
+
* @private
|
|
4184
|
+
*/
|
|
4185
|
+
clearSelection() {
|
|
4186
|
+
this.optionSelected = undefined;
|
|
4187
|
+
this.value = undefined;
|
|
4188
|
+
}
|
|
4189
|
+
|
|
4190
|
+
/**
|
|
4191
|
+
* Resets the menu to its initial state.
|
|
4192
|
+
* This is the only way to return value to undefined.
|
|
4193
|
+
* @public
|
|
4194
|
+
*/
|
|
4195
|
+
reset() {
|
|
4196
|
+
// Reset to undefined - initial state
|
|
4197
|
+
this.value = undefined;
|
|
4198
|
+
this.optionSelected = undefined;
|
|
4199
|
+
this.index = -1;
|
|
4200
|
+
|
|
4201
|
+
// Reset UI state
|
|
4202
|
+
this.updateItemsState(new Map([
|
|
4203
|
+
[
|
|
4204
|
+
'optionSelected',
|
|
4205
|
+
true
|
|
4206
|
+
]
|
|
4207
|
+
]));
|
|
4208
|
+
|
|
4209
|
+
// Dispatch reset event
|
|
4210
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueReset');
|
|
4211
|
+
}
|
|
4212
|
+
|
|
4213
|
+
/**
|
|
4214
|
+
* Handles nested menu structure.
|
|
4215
|
+
* @private
|
|
4216
|
+
* @param {HTMLElement} menu - Root menu element.
|
|
4217
|
+
*/
|
|
4218
|
+
handleNestedMenus(menu) {
|
|
4219
|
+
const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
|
|
4220
|
+
|
|
4221
|
+
nestedMenus.forEach((nestedMenu) => {
|
|
4222
|
+
// role="listbox" only allows "role=group" for children.
|
|
4223
|
+
nestedMenu.setAttribute('role', 'group');
|
|
4224
|
+
if (!nestedMenu.hasAttribute('aria-label')) {
|
|
4225
|
+
nestedMenu.setAttribute('aria-label', 'submenu');
|
|
4226
|
+
}
|
|
4227
|
+
|
|
4228
|
+
const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
4229
|
+
options.forEach((option) => {
|
|
4230
|
+
option.innerHTML = this.nestingSpacer + option.innerHTML;
|
|
4231
|
+
});
|
|
4232
|
+
|
|
4233
|
+
this.handleNestedMenus(nestedMenu);
|
|
4234
|
+
});
|
|
4235
|
+
}
|
|
4236
|
+
|
|
4237
|
+
// Event Handlers
|
|
4238
|
+
|
|
4239
|
+
/**
|
|
4240
|
+
* Handles keyboard navigation.
|
|
4241
|
+
* @private
|
|
4242
|
+
* @param {KeyboardEvent} event - Event object from the browser.
|
|
4243
|
+
*/
|
|
4244
|
+
handleKeyDown(event) {
|
|
4245
|
+
event.preventDefault();
|
|
4246
|
+
switch (event.key) {
|
|
4247
|
+
case "ArrowDown":
|
|
4248
|
+
this.navigateOptions('down');
|
|
4249
|
+
break;
|
|
4250
|
+
case "ArrowUp":
|
|
4251
|
+
this.navigateOptions('up');
|
|
4252
|
+
break;
|
|
4253
|
+
case "Enter":
|
|
4254
|
+
this.makeSelection();
|
|
4255
|
+
break;
|
|
4256
|
+
}
|
|
4257
|
+
}
|
|
4258
|
+
|
|
4259
|
+
/**
|
|
4260
|
+
* Makes a selection based on the current index or clicked option.
|
|
4261
|
+
* @private
|
|
4262
|
+
*/
|
|
4263
|
+
makeSelection() {
|
|
4264
|
+
if (!this.items) {
|
|
4265
|
+
this.initItems();
|
|
4266
|
+
}
|
|
4267
|
+
|
|
4268
|
+
// Get currently selected menu option based on index
|
|
4269
|
+
const option = this.items[this.index];
|
|
4270
|
+
|
|
4271
|
+
// Return early if option is not interactive
|
|
4272
|
+
if (!option || !isOptionInteractive$1(option)) {
|
|
4273
|
+
return;
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4276
|
+
// Handle custom events first
|
|
4277
|
+
if (option.hasAttribute('event')) {
|
|
4278
|
+
this.handleCustomEvent(option);
|
|
4279
|
+
return;
|
|
4280
|
+
}
|
|
4281
|
+
|
|
4282
|
+
if (this.multiSelect) {
|
|
4283
|
+
// In multiselect, toggle individual selections
|
|
4284
|
+
this.toggleOption(option);
|
|
4285
|
+
// In single select, only handle selection of new options
|
|
4286
|
+
} else if (!this.isOptionSelected(option)) {
|
|
4287
|
+
this.clearSelection();
|
|
4288
|
+
this.handleSelectState(option);
|
|
4289
|
+
}
|
|
4290
|
+
|
|
4291
|
+
this.notifySelectionChange();
|
|
4292
|
+
}
|
|
4293
|
+
|
|
4294
|
+
/**
|
|
4295
|
+
* Toggle the selection state of the menuoption.
|
|
4296
|
+
* @private
|
|
4297
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
4298
|
+
*/
|
|
4299
|
+
toggleOption(option) {
|
|
4300
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
4301
|
+
|
|
4302
|
+
if (isCurrentlySelected) {
|
|
4303
|
+
this.handleDeselectState(option);
|
|
4304
|
+
} else if (option.value === undefined || option.value === '') {
|
|
4305
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectValueFailure');
|
|
4306
|
+
} else {
|
|
4307
|
+
this.handleSelectState(option);
|
|
4308
|
+
}
|
|
4309
|
+
}
|
|
4310
|
+
|
|
4311
|
+
/**
|
|
4312
|
+
* Handles option selection via mouse.
|
|
4313
|
+
* @private
|
|
4314
|
+
* @param {MouseEvent} event - Event object from the browser.
|
|
4315
|
+
*/
|
|
4316
|
+
handleMouseSelect(event) {
|
|
4317
|
+
if (event.target === this) {
|
|
4318
|
+
return;
|
|
4319
|
+
}
|
|
4320
|
+
|
|
4321
|
+
const option = event.target.closest('auro-menuoption, [auro-menuoption]');
|
|
4322
|
+
if (option) {
|
|
4323
|
+
this.index = this.items.indexOf(option);
|
|
4324
|
+
this.makeSelection();
|
|
4325
|
+
}
|
|
4326
|
+
}
|
|
4327
|
+
|
|
4328
|
+
/**
|
|
4329
|
+
* Handles option hover events.
|
|
4330
|
+
* @private
|
|
4331
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
4332
|
+
*/
|
|
4333
|
+
handleOptionHover(event) {
|
|
4334
|
+
const option = event.target;
|
|
4335
|
+
this.index = this.items.indexOf(option);
|
|
4336
|
+
this.updateActiveOption(this.index);
|
|
4337
|
+
}
|
|
4338
|
+
|
|
4339
|
+
/**
|
|
4340
|
+
* Handles slot change events.
|
|
4341
|
+
* @private
|
|
4342
|
+
*/
|
|
4343
|
+
handleSlotChange() {
|
|
4344
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
4345
|
+
this.rootMenu = false;
|
|
4346
|
+
}
|
|
4347
|
+
|
|
4348
|
+
if (this.rootMenu) {
|
|
4349
|
+
this.initializeMenu();
|
|
4350
|
+
} else if (this.noCheckmark) {
|
|
4351
|
+
this.updateItemsState(new Map([
|
|
4352
|
+
[
|
|
4353
|
+
'noCheckmark',
|
|
4354
|
+
true
|
|
4355
|
+
]
|
|
4356
|
+
]));
|
|
4357
|
+
}
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
/**
|
|
4361
|
+
* Navigates through options using keyboard.
|
|
4362
|
+
* @private
|
|
4363
|
+
* @param {string} direction - 'up' or 'down'.
|
|
4364
|
+
*/
|
|
4365
|
+
navigateOptions(direction) {
|
|
4366
|
+
// Return early if no items exist
|
|
4367
|
+
if (!this.items || !this.items.length) {
|
|
4368
|
+
return;
|
|
4369
|
+
}
|
|
4370
|
+
|
|
4371
|
+
let newIndex = this.index;
|
|
4372
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
4373
|
+
const maxIterations = this.items.length;
|
|
4374
|
+
let iterations = 0;
|
|
4375
|
+
let foundInteractiveOption = false;
|
|
4376
|
+
|
|
4377
|
+
do {
|
|
4378
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
4379
|
+
iterations += 1;
|
|
4380
|
+
|
|
4381
|
+
// Check if current option is interactive
|
|
4382
|
+
const currentOption = this.items[newIndex];
|
|
4383
|
+
if (isOptionInteractive$1(currentOption)) {
|
|
4384
|
+
foundInteractiveOption = true;
|
|
4385
|
+
break;
|
|
4386
|
+
}
|
|
4387
|
+
|
|
4388
|
+
// Break if all options were checked
|
|
4389
|
+
if (iterations >= maxIterations) {
|
|
4390
|
+
break;
|
|
4391
|
+
}
|
|
4392
|
+
} while (iterations < maxIterations);
|
|
4393
|
+
|
|
4394
|
+
// Handle the results of the search
|
|
4395
|
+
if (foundInteractiveOption) {
|
|
4396
|
+
// Update only if an interactive option was found
|
|
4397
|
+
this.index = newIndex;
|
|
4398
|
+
this.updateActiveOption(this.index);
|
|
4399
|
+
} else {
|
|
4400
|
+
// All options are disabled or non-interactive
|
|
4401
|
+
// Keep the current index unchanged
|
|
4402
|
+
dispatchMenuEvent$1(this, 'auroMenu-navigateFailure', {
|
|
4403
|
+
reason: 'No interactive options available',
|
|
4404
|
+
direction,
|
|
4405
|
+
currentIndex: this.index
|
|
4406
|
+
});
|
|
4407
|
+
}
|
|
4408
|
+
}
|
|
4409
|
+
|
|
4410
|
+
/**
|
|
4411
|
+
* Updates the active option state and dispatches events.
|
|
4412
|
+
* @private
|
|
4413
|
+
* @param {number} index - Index of the option to make active.
|
|
4414
|
+
*/
|
|
4415
|
+
updateActiveOption(index) {
|
|
4416
|
+
if (!this.items || !this.items[index]) {
|
|
4417
|
+
return;
|
|
4418
|
+
}
|
|
4419
|
+
|
|
4420
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
4421
|
+
this.items[index].classList.add('active');
|
|
4422
|
+
this.optionActive = this.items[index];
|
|
4423
|
+
|
|
4424
|
+
dispatchMenuEvent$1(this, 'auroMenu-activatedOption', this.items[index]);
|
|
4425
|
+
}
|
|
4426
|
+
|
|
4427
|
+
/**
|
|
4428
|
+
* Handles custom events defined on options.
|
|
4429
|
+
* @private
|
|
4430
|
+
* @param {HTMLElement} option - Option with custom event.
|
|
4431
|
+
*/
|
|
4432
|
+
handleCustomEvent(option) {
|
|
4433
|
+
const eventName = option.getAttribute('event');
|
|
4434
|
+
dispatchMenuEvent$1(this, eventName);
|
|
4435
|
+
dispatchMenuEvent$1(this, 'auroMenu-customEventFired');
|
|
4436
|
+
}
|
|
4437
|
+
|
|
4438
|
+
/**
|
|
4439
|
+
* Notifies selection change to parent components.
|
|
4440
|
+
* @private
|
|
4441
|
+
*/
|
|
4442
|
+
notifySelectionChange() {
|
|
4443
|
+
dispatchMenuEvent$1(this, 'auroMenu-selectedOption');
|
|
4444
|
+
}
|
|
4445
|
+
|
|
4446
|
+
/**
|
|
4447
|
+
* Checks if an option is currently selected.
|
|
4448
|
+
* @private
|
|
4449
|
+
* @param {HTMLElement} option - The option to check.
|
|
4450
|
+
* @returns {boolean}
|
|
4451
|
+
*/
|
|
4452
|
+
isOptionSelected(option) {
|
|
4453
|
+
if (!this.optionSelected) {
|
|
4454
|
+
return false;
|
|
4455
|
+
}
|
|
4456
|
+
// Always treat as array for both single and multi-select
|
|
4457
|
+
return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
|
|
4458
|
+
}
|
|
4459
|
+
|
|
4460
|
+
/**
|
|
4461
|
+
* Getter for loading placeholder state.
|
|
4462
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
4463
|
+
*/
|
|
4464
|
+
get hasLoadingPlaceholder() {
|
|
4465
|
+
return this.loadingSlots && this.loadingSlots.length > 0;
|
|
4466
|
+
}
|
|
4467
|
+
|
|
4468
|
+
/**
|
|
4469
|
+
* Renders the component.
|
|
4470
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
4471
|
+
*/
|
|
4472
|
+
render() {
|
|
4473
|
+
if (this.loading) {
|
|
4474
|
+
return x`
|
|
4475
|
+
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
|
|
4476
|
+
<div>
|
|
4477
|
+
<slot name="loadingIcon"></slot>
|
|
4478
|
+
<slot name="loadingText"></slot>
|
|
4479
|
+
</div>
|
|
4480
|
+
</auro-menuoption>
|
|
4481
|
+
`;
|
|
4482
|
+
}
|
|
4483
|
+
|
|
4484
|
+
return x`<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
4485
|
+
}
|
|
4486
|
+
};
|
|
4487
|
+
|
|
4488
|
+
/**
|
|
4489
|
+
* @license
|
|
4490
|
+
* Copyright 2020 Google LLC
|
|
4491
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4492
|
+
*/
|
|
4493
|
+
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);
|
|
4494
|
+
|
|
4495
|
+
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}`;
|
|
4496
|
+
|
|
4497
|
+
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)}`;
|
|
4498
|
+
|
|
4499
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
4500
|
+
// See LICENSE in the project root for license information.
|
|
4501
|
+
|
|
4502
|
+
|
|
4503
|
+
class AuroDependencyVersioning {
|
|
4504
|
+
|
|
4505
|
+
/**
|
|
4506
|
+
* Generates a unique string to be used for child auro element naming.
|
|
4507
|
+
* @private
|
|
4508
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
4509
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
4510
|
+
* @returns {string} - Unique string to be used for naming.
|
|
4511
|
+
*/
|
|
4512
|
+
generateElementName(baseName, version) {
|
|
4513
|
+
let result = baseName;
|
|
4514
|
+
|
|
4515
|
+
result += '-';
|
|
4516
|
+
result += version.replace(/[.]/g, '_');
|
|
4517
|
+
|
|
4518
|
+
return result;
|
|
4519
|
+
}
|
|
4520
|
+
|
|
4521
|
+
/**
|
|
4522
|
+
* Generates a unique string to be used for child auro element naming.
|
|
4523
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
4524
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
4525
|
+
* @returns {string} - Unique string to be used for naming.
|
|
4526
|
+
*/
|
|
4527
|
+
generateTag(baseName, version, tagClass) {
|
|
4528
|
+
const elementName = this.generateElementName(baseName, version);
|
|
4529
|
+
const tag = i$1`${s(elementName)}`;
|
|
4530
|
+
|
|
4531
|
+
if (!customElements.get(elementName)) {
|
|
4532
|
+
customElements.define(elementName, class extends tagClass {});
|
|
4533
|
+
}
|
|
4534
|
+
|
|
4535
|
+
return tag;
|
|
4536
|
+
}
|
|
4537
|
+
}
|
|
4538
|
+
|
|
4539
|
+
/**
|
|
4540
|
+
* @license
|
|
4541
|
+
* Copyright 2017 Google LLC
|
|
4542
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4543
|
+
*/
|
|
4544
|
+
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)}}
|
|
4545
|
+
|
|
4546
|
+
/**
|
|
4547
|
+
* @license
|
|
4548
|
+
* Copyright 2018 Google LLC
|
|
4549
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4550
|
+
*/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}});
|
|
4551
|
+
|
|
4552
|
+
/**
|
|
4553
|
+
* @license
|
|
4554
|
+
* Copyright 2018 Google LLC
|
|
4555
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4556
|
+
*/const o$5=o=>o??E;
|
|
4557
|
+
|
|
4558
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4559
|
+
// See LICENSE in the project root for license information.
|
|
4560
|
+
|
|
4561
|
+
|
|
4562
|
+
/**
|
|
4563
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
4564
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
4565
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
4566
|
+
*/
|
|
4567
|
+
|
|
4568
|
+
let AuroElement$1 = class AuroElement extends r {
|
|
4569
|
+
|
|
4570
|
+
// function to define props used within the scope of this component
|
|
4571
|
+
static get properties() {
|
|
4572
|
+
return {
|
|
4573
|
+
hidden: { type: Boolean,
|
|
4574
|
+
reflect: true },
|
|
4575
|
+
hiddenVisually: { type: Boolean,
|
|
4576
|
+
reflect: true },
|
|
4577
|
+
hiddenAudible: { type: Boolean,
|
|
4578
|
+
reflect: true },
|
|
4579
|
+
};
|
|
4580
|
+
}
|
|
4581
|
+
|
|
4582
|
+
/**
|
|
4583
|
+
* @private Function that determines state of aria-hidden
|
|
4584
|
+
*/
|
|
4585
|
+
hideAudible(value) {
|
|
4586
|
+
if (value) {
|
|
4587
|
+
return 'true'
|
|
4588
|
+
}
|
|
4589
|
+
|
|
4590
|
+
return 'false'
|
|
4591
|
+
}
|
|
4592
|
+
};
|
|
4593
|
+
|
|
4594
|
+
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>"};
|
|
4595
|
+
|
|
4596
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
4597
|
+
|
|
4598
|
+
const _fetchMap$1 = new Map();
|
|
4599
|
+
|
|
4600
|
+
/**
|
|
4601
|
+
* A callback to parse Response body.
|
|
4602
|
+
*
|
|
4603
|
+
* @callback ResponseParser
|
|
4604
|
+
* @param {Fetch.Response} response
|
|
4605
|
+
* @returns {Promise}
|
|
4606
|
+
*/
|
|
4607
|
+
|
|
4608
|
+
/**
|
|
4609
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
4610
|
+
*
|
|
4611
|
+
* @param {String} uri
|
|
4612
|
+
* @param {Object} [options={}]
|
|
4613
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
4614
|
+
* @returns {Promise}
|
|
4615
|
+
*/
|
|
4616
|
+
const cacheFetch$1 = (uri, options = {}) => {
|
|
4617
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
4618
|
+
if (!_fetchMap$1.has(uri)) {
|
|
4619
|
+
_fetchMap$1.set(uri, fetch(uri).then(responseParser));
|
|
4620
|
+
}
|
|
4621
|
+
return _fetchMap$1.get(uri);
|
|
4622
|
+
};
|
|
4623
|
+
|
|
4624
|
+
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}`;
|
|
4625
|
+
|
|
4626
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4627
|
+
// See LICENSE in the project root for license information.
|
|
4628
|
+
|
|
4629
|
+
|
|
4630
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4631
|
+
/**
|
|
4632
|
+
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
4633
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
4634
|
+
*/
|
|
4635
|
+
|
|
4636
|
+
// build the component class
|
|
4637
|
+
let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
4638
|
+
constructor() {
|
|
4639
|
+
super();
|
|
4640
|
+
this.onDark = false;
|
|
4641
|
+
}
|
|
4642
|
+
|
|
4643
|
+
// function to define props used within the scope of this component
|
|
4644
|
+
static get properties() {
|
|
4645
|
+
return {
|
|
4646
|
+
...super.properties,
|
|
4647
|
+
onDark: {
|
|
4648
|
+
type: Boolean,
|
|
4649
|
+
reflect: true
|
|
4650
|
+
},
|
|
4651
|
+
|
|
4652
|
+
/**
|
|
4653
|
+
* @private
|
|
4654
|
+
*/
|
|
4655
|
+
svg: {
|
|
4656
|
+
attribute: false,
|
|
4657
|
+
reflect: true
|
|
4658
|
+
}
|
|
4659
|
+
};
|
|
4660
|
+
}
|
|
4661
|
+
|
|
4662
|
+
static get styles() {
|
|
4663
|
+
return i$5`
|
|
4664
|
+
${styleCss$4}
|
|
4665
|
+
`;
|
|
4666
|
+
}
|
|
4667
|
+
|
|
4668
|
+
/**
|
|
4669
|
+
* Async function to fetch requested icon from npm CDN.
|
|
4670
|
+
* @private
|
|
4671
|
+
* @param {string} category - Icon category.
|
|
4672
|
+
* @param {string} name - Icon name.
|
|
4673
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
4674
|
+
*/
|
|
4675
|
+
async fetchIcon(category, name) {
|
|
4676
|
+
let iconHTML = '';
|
|
4677
|
+
|
|
4678
|
+
if (category === 'logos') {
|
|
4679
|
+
iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`);
|
|
4680
|
+
} else {
|
|
4681
|
+
iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
|
|
4682
|
+
}
|
|
4683
|
+
|
|
4684
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
4685
|
+
|
|
4686
|
+
return dom.body.querySelector('svg');
|
|
4687
|
+
}
|
|
4688
|
+
|
|
4689
|
+
// lifecycle function
|
|
4690
|
+
async firstUpdated() {
|
|
4691
|
+
if (!this.customSvg) {
|
|
4692
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
4693
|
+
|
|
4694
|
+
if (svg) {
|
|
4695
|
+
this.svg = svg;
|
|
4696
|
+
} else if (!svg) {
|
|
4697
|
+
const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
|
|
4698
|
+
|
|
4699
|
+
this.svg = penDOM.body.firstChild;
|
|
4700
|
+
}
|
|
4701
|
+
}
|
|
4702
|
+
}
|
|
4703
|
+
};
|
|
4704
|
+
|
|
4705
|
+
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)}`;
|
|
4706
|
+
|
|
4707
|
+
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)}`;
|
|
4708
|
+
|
|
4709
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4710
|
+
// See LICENSE in the project root for license information.
|
|
4711
|
+
|
|
4712
|
+
|
|
4713
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4714
|
+
/**
|
|
4715
|
+
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
4716
|
+
*
|
|
4717
|
+
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
4718
|
+
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
4719
|
+
* @attr {Boolean} customColor - Removes primary selector.
|
|
4720
|
+
* @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
|
|
4721
|
+
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
4722
|
+
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
4723
|
+
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
4724
|
+
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
4725
|
+
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
4726
|
+
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
4727
|
+
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
4728
|
+
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
4729
|
+
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
4730
|
+
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
4731
|
+
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
4732
|
+
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
4733
|
+
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
4734
|
+
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
4735
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
4736
|
+
* @slot svg - Used for custom SVG content.
|
|
4737
|
+
*/
|
|
4738
|
+
|
|
4739
|
+
// build the component class
|
|
4740
|
+
let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
4741
|
+
constructor() {
|
|
4742
|
+
super();
|
|
4743
|
+
|
|
4744
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
4745
|
+
|
|
4746
|
+
this.privateDefaults();
|
|
4747
|
+
}
|
|
4748
|
+
|
|
4749
|
+
/**
|
|
4750
|
+
* Internal Defaults.
|
|
4751
|
+
* @private
|
|
4752
|
+
* @returns {void}
|
|
4753
|
+
*/
|
|
4754
|
+
privateDefaults() {
|
|
4755
|
+
this.accent = false;
|
|
4756
|
+
this.customColor = false;
|
|
4757
|
+
this.customSvg = false;
|
|
4758
|
+
this.disabled = false;
|
|
4759
|
+
this.emphasis = false;
|
|
4760
|
+
this.error = false;
|
|
4761
|
+
this.info = false;
|
|
4762
|
+
this.label = false;
|
|
4763
|
+
this.primary = false;
|
|
4764
|
+
this.secondary = false;
|
|
4765
|
+
this.subtle = false;
|
|
4766
|
+
this.success = false;
|
|
4767
|
+
this.tertiary = false;
|
|
4768
|
+
this.warning = false;
|
|
4769
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
4770
|
+
}
|
|
4771
|
+
|
|
4772
|
+
// function to define props used within the scope of this component
|
|
4773
|
+
static get properties() {
|
|
4774
|
+
return {
|
|
4775
|
+
...super.properties,
|
|
4776
|
+
accent: {
|
|
4777
|
+
type: Boolean,
|
|
4778
|
+
reflect: true
|
|
4779
|
+
},
|
|
4780
|
+
ariaHidden: {
|
|
4781
|
+
type: String,
|
|
4782
|
+
reflect: true
|
|
4783
|
+
},
|
|
4784
|
+
category: {
|
|
4785
|
+
type: String,
|
|
4786
|
+
reflect: true
|
|
4787
|
+
},
|
|
4788
|
+
customColor: {
|
|
4789
|
+
type: Boolean
|
|
4790
|
+
},
|
|
4791
|
+
customSvg: {
|
|
4792
|
+
type: Boolean
|
|
4793
|
+
},
|
|
4794
|
+
disabled: {
|
|
4795
|
+
type: Boolean,
|
|
4796
|
+
reflect: true
|
|
4797
|
+
},
|
|
4798
|
+
emphasis: {
|
|
4799
|
+
type: Boolean,
|
|
4800
|
+
reflect: true
|
|
4801
|
+
},
|
|
4802
|
+
error: {
|
|
4803
|
+
type: Boolean,
|
|
4804
|
+
reflect: true
|
|
4805
|
+
},
|
|
4806
|
+
info: {
|
|
4807
|
+
type: Boolean,
|
|
4808
|
+
reflect: true
|
|
4809
|
+
},
|
|
4810
|
+
label: {
|
|
4811
|
+
type: Boolean,
|
|
4812
|
+
reflect: true
|
|
4813
|
+
},
|
|
4814
|
+
name: {
|
|
4815
|
+
type: String,
|
|
4816
|
+
reflect: true
|
|
4817
|
+
},
|
|
4818
|
+
primary: {
|
|
4819
|
+
type: Boolean,
|
|
4820
|
+
reflect: true
|
|
4821
|
+
},
|
|
4822
|
+
secondary: {
|
|
4823
|
+
type: Boolean,
|
|
4824
|
+
reflect: true
|
|
4825
|
+
},
|
|
4826
|
+
subtle: {
|
|
4827
|
+
type: Boolean,
|
|
4828
|
+
reflect: true
|
|
4829
|
+
},
|
|
4830
|
+
success: {
|
|
4831
|
+
type: Boolean,
|
|
4832
|
+
reflect: true
|
|
4833
|
+
},
|
|
4834
|
+
tertiary: {
|
|
4835
|
+
type: Boolean,
|
|
4836
|
+
reflect: true
|
|
4837
|
+
},
|
|
4838
|
+
uri: {
|
|
4839
|
+
type: String
|
|
4840
|
+
},
|
|
4841
|
+
warning: {
|
|
4842
|
+
type: Boolean,
|
|
4843
|
+
reflect: true
|
|
4844
|
+
}
|
|
4845
|
+
};
|
|
4846
|
+
}
|
|
4847
|
+
|
|
4848
|
+
static get styles() {
|
|
4849
|
+
return [
|
|
4850
|
+
super.styles,
|
|
4851
|
+
i$5`${tokensCss$3}`,
|
|
4852
|
+
i$5`${styleCss$4}`,
|
|
4853
|
+
i$5`${colorCss$4}`
|
|
4854
|
+
];
|
|
4855
|
+
}
|
|
4856
|
+
|
|
4857
|
+
/**
|
|
4858
|
+
* This will register this element with the browser.
|
|
4859
|
+
* @param {string} [name="auro-icon"] - The name of element that you want to register to.
|
|
4860
|
+
*
|
|
4861
|
+
* @example
|
|
4862
|
+
* AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
|
|
4863
|
+
*
|
|
4864
|
+
*/
|
|
4865
|
+
static register(name = "auro-icon") {
|
|
4866
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
4867
|
+
}
|
|
4868
|
+
|
|
4869
|
+
connectedCallback() {
|
|
4870
|
+
super.connectedCallback();
|
|
4871
|
+
|
|
4872
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
4873
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
4874
|
+
}
|
|
4875
|
+
|
|
4876
|
+
/**
|
|
4877
|
+
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
4878
|
+
*/
|
|
4879
|
+
exposeCssParts() {
|
|
4880
|
+
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
4881
|
+
}
|
|
4882
|
+
|
|
4883
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4884
|
+
render() {
|
|
4885
|
+
const a11y = {
|
|
4886
|
+
'labelContainer': true,
|
|
4887
|
+
'util_displayHiddenVisually': !this.label
|
|
4888
|
+
};
|
|
4889
|
+
|
|
4890
|
+
const classes = {
|
|
4891
|
+
'label': this.label,
|
|
4892
|
+
'wrapper': true,
|
|
4893
|
+
};
|
|
4894
|
+
|
|
4895
|
+
return x`
|
|
4896
|
+
<div
|
|
4897
|
+
class="${e(classes)}"
|
|
4898
|
+
title="${o$5(this.title || undefined)}">
|
|
4899
|
+
<span aria-hidden="${o$5(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
4900
|
+
${this.customSvg ? x`
|
|
4901
|
+
<slot name="svg"></slot>
|
|
4902
|
+
` : x`
|
|
4903
|
+
${this.svg}
|
|
4904
|
+
`
|
|
4905
|
+
}
|
|
4906
|
+
</span>
|
|
4907
|
+
|
|
4908
|
+
<div class="${e(a11y)}">
|
|
4909
|
+
<slot></slot>
|
|
4910
|
+
</div>
|
|
4911
|
+
</div>
|
|
4912
|
+
`;
|
|
4913
|
+
}
|
|
4914
|
+
};
|
|
4915
|
+
|
|
4916
|
+
var iconVersion$1 = '6.1.2';
|
|
4917
|
+
|
|
4918
|
+
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>"};
|
|
4919
|
+
|
|
4920
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4921
|
+
// See LICENSE in the project root for license information.
|
|
4922
|
+
|
|
4923
|
+
|
|
4924
|
+
/**
|
|
4925
|
+
* The auro-menu element provides users a way to define a menu option.
|
|
4926
|
+
*
|
|
4927
|
+
* @attr {String} value - Specifies the value to be sent to a server.
|
|
4928
|
+
* @attr {String} noCheckmark - When true, selected option will not show the checkmark.
|
|
4929
|
+
* @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
|
|
4930
|
+
* @attr {Boolean} selected - Specifies that an option is selected.
|
|
4931
|
+
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
4932
|
+
* @slot - Specifies text for an option, but is not the value.
|
|
4933
|
+
*/
|
|
4934
|
+
let AuroMenuOption$1 = class AuroMenuOption extends r {
|
|
4935
|
+
constructor() {
|
|
4936
|
+
super();
|
|
4937
|
+
|
|
4938
|
+
/**
|
|
4939
|
+
* Generate unique names for dependency components.
|
|
4940
|
+
*/
|
|
4941
|
+
const versioning = new AuroDependencyVersioning();
|
|
4942
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon$1);
|
|
4943
|
+
|
|
4944
|
+
this.selected = false;
|
|
4945
|
+
this.nocheckmark = false;
|
|
4946
|
+
this.disabled = false;
|
|
4947
|
+
|
|
4948
|
+
/**
|
|
4949
|
+
* @private
|
|
4950
|
+
*/
|
|
4951
|
+
this.tabIndex = -1;
|
|
4952
|
+
|
|
4953
|
+
/**
|
|
4954
|
+
* @private
|
|
4955
|
+
*/
|
|
4956
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
4957
|
+
}
|
|
4958
|
+
|
|
4959
|
+
static get properties() {
|
|
4960
|
+
return {
|
|
4961
|
+
nocheckmark: {
|
|
4962
|
+
type: Boolean,
|
|
4963
|
+
reflect: true
|
|
4964
|
+
},
|
|
4965
|
+
selected: {
|
|
4966
|
+
type: Boolean,
|
|
4967
|
+
reflect: true
|
|
4968
|
+
},
|
|
4969
|
+
disabled: {
|
|
4970
|
+
type: Boolean,
|
|
4971
|
+
reflect: true
|
|
4972
|
+
},
|
|
4973
|
+
value: {
|
|
4974
|
+
type: String
|
|
4975
|
+
},
|
|
4976
|
+
tabIndex: {
|
|
4977
|
+
type: Number,
|
|
4978
|
+
reflect: true
|
|
4979
|
+
}
|
|
4980
|
+
};
|
|
4981
|
+
}
|
|
4982
|
+
|
|
4983
|
+
static get styles() {
|
|
4984
|
+
return [
|
|
4985
|
+
styleCss$1$1,
|
|
4986
|
+
colorCss$1$1,
|
|
4987
|
+
tokensCss$1$1
|
|
4988
|
+
];
|
|
4989
|
+
}
|
|
4990
|
+
|
|
4991
|
+
/**
|
|
4992
|
+
* This will register this element with the browser.
|
|
4993
|
+
* @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
|
|
4994
|
+
*
|
|
4995
|
+
* @example
|
|
4996
|
+
* AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
|
|
4997
|
+
*
|
|
4998
|
+
*/
|
|
4999
|
+
static register(name = "auro-menuoption") {
|
|
5000
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
5001
|
+
}
|
|
5002
|
+
|
|
5003
|
+
firstUpdated() {
|
|
5004
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
5005
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
5006
|
+
|
|
5007
|
+
this.setAttribute('role', 'option');
|
|
5008
|
+
this.setAttribute('aria-selected', 'false');
|
|
5009
|
+
|
|
5010
|
+
this.addEventListener('mouseover', () => {
|
|
5011
|
+
this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
|
|
5012
|
+
bubbles: true,
|
|
5013
|
+
cancelable: false,
|
|
5014
|
+
composed: true,
|
|
5015
|
+
detail: this
|
|
5016
|
+
}));
|
|
5017
|
+
});
|
|
5018
|
+
}
|
|
5019
|
+
|
|
5020
|
+
// observer for selected property changes
|
|
5021
|
+
updated(changedProperties) {
|
|
5022
|
+
if (changedProperties.has('selected')) {
|
|
5023
|
+
this.setAttribute('aria-selected', this.selected.toString());
|
|
5024
|
+
}
|
|
5025
|
+
}
|
|
5026
|
+
|
|
5027
|
+
/**
|
|
5028
|
+
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
5029
|
+
*
|
|
5030
|
+
* @private
|
|
5031
|
+
* @param {string} svgContent - The SVG content to be embedded.
|
|
5032
|
+
* @returns {Element} The HTML element containing the SVG icon.
|
|
5033
|
+
*/
|
|
5034
|
+
generateIconHtml(svgContent) {
|
|
5035
|
+
const dom = new DOMParser().parseFromString(svgContent, 'text/html');
|
|
5036
|
+
const svg = dom.body.firstChild;
|
|
5037
|
+
|
|
5038
|
+
svg.setAttribute('slot', 'svg');
|
|
5039
|
+
|
|
5040
|
+
return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
5041
|
+
}
|
|
5042
|
+
|
|
5043
|
+
render() {
|
|
5044
|
+
return u`
|
|
5045
|
+
${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon$1.svg) : undefined}
|
|
5046
|
+
<slot></slot>
|
|
5047
|
+
`;
|
|
5048
|
+
}
|
|
5049
|
+
};
|
|
5050
|
+
|
|
5051
|
+
AuroMenu$1.register();
|
|
5052
|
+
AuroMenuOption$1.register();
|
|
5053
|
+
|
|
5054
|
+
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)}`;
|
|
5055
|
+
|
|
5056
|
+
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)}`;
|
|
5057
|
+
|
|
5058
|
+
var tokensCss$2 = i$c`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;
|
|
5059
|
+
|
|
5060
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5061
|
+
// See LICENSE in the project root for license information.
|
|
5062
|
+
|
|
5063
|
+
|
|
5064
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
5065
|
+
/**
|
|
5066
|
+
* The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
|
|
5067
|
+
*
|
|
5068
|
+
* @slot - Default slot for the menu content.
|
|
5069
|
+
* @slot label - Defines the content of the label.
|
|
5070
|
+
* @slot helpText - Defines the content of the helpText.
|
|
5071
|
+
* @slot placeholder - Defines the content of the placeholder to be shown when there is no value
|
|
5072
|
+
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
5073
|
+
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
5074
|
+
* @csspart helpText - Apply CSS to the help text.
|
|
5075
|
+
*/
|
|
5076
|
+
|
|
5077
|
+
// build the component class
|
|
5078
|
+
class AuroSelect extends r$5 {
|
|
5079
|
+
constructor() {
|
|
5080
|
+
super();
|
|
5081
|
+
|
|
5082
|
+
this.optionSelected = undefined;
|
|
5083
|
+
this.value = undefined;
|
|
5084
|
+
|
|
5085
|
+
const idLength = 36;
|
|
5086
|
+
const idSubstrEnd = 8;
|
|
5087
|
+
const idSubstrStart = 2;
|
|
5088
|
+
|
|
5089
|
+
/**
|
|
5090
|
+
* @private
|
|
5091
|
+
*/
|
|
5092
|
+
this.uniqueId = Math.random().
|
|
5093
|
+
toString(idLength).
|
|
5094
|
+
substring(idSubstrStart, idSubstrEnd);
|
|
5095
|
+
|
|
5096
|
+
/**
|
|
5097
|
+
* @private
|
|
5098
|
+
*/
|
|
5099
|
+
this.validation = new AuroFormValidation();
|
|
5100
|
+
|
|
5101
|
+
/**
|
|
5102
|
+
* @private
|
|
5103
|
+
*/
|
|
5104
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
5105
|
+
|
|
5106
|
+
/**
|
|
5107
|
+
* Generate unique names for dependency components.
|
|
5108
|
+
*/
|
|
5109
|
+
const versioning = new AuroDependencyVersioning$2();
|
|
5110
|
+
|
|
5111
|
+
/**
|
|
5112
|
+
* @private
|
|
5113
|
+
*/
|
|
5114
|
+
this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
|
|
5115
|
+
|
|
5116
|
+
/**
|
|
5117
|
+
* @private
|
|
5118
|
+
*/
|
|
5119
|
+
this.isHiddenWhileLoading = false;
|
|
5120
|
+
}
|
|
5121
|
+
|
|
5122
|
+
/**
|
|
5123
|
+
* @private
|
|
5124
|
+
* @returns {void} Internal defaults.
|
|
5125
|
+
*/
|
|
5126
|
+
privateDefaults() {
|
|
5127
|
+
this.options = [];
|
|
5128
|
+
this.optionActive = null;
|
|
5129
|
+
}
|
|
5130
|
+
|
|
5131
|
+
// This function is to define props used within the scope of this component
|
|
5132
|
+
// Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes
|
|
5133
|
+
// to understand how to use reflected attributes with your property settings.
|
|
5134
|
+
static get properties() {
|
|
5135
|
+
return {
|
|
5136
|
+
|
|
5137
|
+
/**
|
|
5138
|
+
* When attribute is present, element shows disabled state.
|
|
5139
|
+
*/
|
|
5140
|
+
disabled: {
|
|
5141
|
+
type: Boolean,
|
|
5142
|
+
reflect: true
|
|
5143
|
+
},
|
|
5144
|
+
|
|
5145
|
+
/**
|
|
5146
|
+
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
3635
5147
|
*/
|
|
3636
5148
|
flexMenuWidth: {
|
|
3637
5149
|
type: Boolean,
|
|
@@ -3665,7 +5177,9 @@ class AuroSelect extends r$4 {
|
|
|
3665
5177
|
* Specifies the current selected menuOption.
|
|
3666
5178
|
*/
|
|
3667
5179
|
optionSelected: {
|
|
3668
|
-
|
|
5180
|
+
// Allow HTMLElement[] arrays and undefined
|
|
5181
|
+
converter: arrayConverter$1,
|
|
5182
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
3669
5183
|
},
|
|
3670
5184
|
|
|
3671
5185
|
/**
|
|
@@ -3724,8 +5238,19 @@ class AuroSelect extends r$4 {
|
|
|
3724
5238
|
* Value selected for the component.
|
|
3725
5239
|
*/
|
|
3726
5240
|
value: {
|
|
3727
|
-
|
|
3728
|
-
|
|
5241
|
+
// Allow string[] arrays and undefined
|
|
5242
|
+
converter: arrayConverter$1,
|
|
5243
|
+
hasChanged: arrayOrUndefinedHasChanged$1
|
|
5244
|
+
},
|
|
5245
|
+
|
|
5246
|
+
/**
|
|
5247
|
+
* Sets multi-select mode, allowing multiple options to be selected at once.
|
|
5248
|
+
*/
|
|
5249
|
+
multiSelect: {
|
|
5250
|
+
type: Boolean,
|
|
5251
|
+
reflect: true,
|
|
5252
|
+
attribute: 'multiselect'
|
|
5253
|
+
},
|
|
3729
5254
|
};
|
|
3730
5255
|
}
|
|
3731
5256
|
|
|
@@ -3763,33 +5288,34 @@ class AuroSelect extends r$4 {
|
|
|
3763
5288
|
*
|
|
3764
5289
|
*/
|
|
3765
5290
|
static register(name = "auro-select") {
|
|
3766
|
-
AuroLibraryRuntimeUtils$
|
|
5291
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroSelect);
|
|
3767
5292
|
}
|
|
3768
5293
|
|
|
3769
5294
|
/**
|
|
3770
|
-
* Updates the displayed value in an Auro dropdown component based on optionSelected
|
|
5295
|
+
* Updates the displayed value in an Auro dropdown component based on optionSelected.
|
|
3771
5296
|
* @private
|
|
3772
5297
|
* @returns {void}
|
|
3773
5298
|
*/
|
|
3774
5299
|
updateDisplayedValue() {
|
|
3775
5300
|
const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
|
|
3776
5301
|
|
|
3777
|
-
//
|
|
3778
|
-
triggerContentEl.
|
|
3779
|
-
|
|
3780
|
-
|
|
5302
|
+
// Clear everything except placeholder
|
|
5303
|
+
const placeholder = triggerContentEl.querySelector('#placeholder');
|
|
5304
|
+
triggerContentEl.innerHTML = '';
|
|
5305
|
+
if (placeholder) {
|
|
5306
|
+
triggerContentEl.appendChild(placeholder);
|
|
5307
|
+
}
|
|
3781
5308
|
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
clone.removeAttribute('class');
|
|
5309
|
+
// Handle selected options
|
|
5310
|
+
if (this.optionSelected && this.optionSelected.length) {
|
|
5311
|
+
// Create display text from selected options
|
|
5312
|
+
const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
|
|
3787
5313
|
|
|
3788
|
-
|
|
3789
|
-
|
|
5314
|
+
const span = document.createElement('span');
|
|
5315
|
+
span.textContent = displayText;
|
|
5316
|
+
triggerContentEl.appendChild(span);
|
|
3790
5317
|
}
|
|
3791
5318
|
|
|
3792
|
-
// notify dropdown as trigger content is changed
|
|
3793
5319
|
this.dropdown.requestUpdate();
|
|
3794
5320
|
}
|
|
3795
5321
|
|
|
@@ -3809,6 +5335,10 @@ class AuroSelect extends r$4 {
|
|
|
3809
5335
|
return;
|
|
3810
5336
|
}
|
|
3811
5337
|
|
|
5338
|
+
if (this.multiSelect) {
|
|
5339
|
+
this.menu.multiSelect = this.multiSelect;
|
|
5340
|
+
}
|
|
5341
|
+
|
|
3812
5342
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
3813
5343
|
this.menu.setAttribute('aria-hidden', 'true');
|
|
3814
5344
|
|
|
@@ -3819,8 +5349,10 @@ class AuroSelect extends r$4 {
|
|
|
3819
5349
|
});
|
|
3820
5350
|
|
|
3821
5351
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
5352
|
+
// Get array of selected options from menu
|
|
3822
5353
|
this.optionSelected = this.menu.optionSelected;
|
|
3823
|
-
|
|
5354
|
+
// For single select, we still use arrays but only take first value
|
|
5355
|
+
this.value = this.menu.value;
|
|
3824
5356
|
|
|
3825
5357
|
if (this.dropdown.isPopoverVisible) {
|
|
3826
5358
|
this.dropdown.hide();
|
|
@@ -3835,7 +5367,7 @@ class AuroSelect extends r$4 {
|
|
|
3835
5367
|
* with `auro-select.value`.
|
|
3836
5368
|
*/
|
|
3837
5369
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
3838
|
-
this.
|
|
5370
|
+
this.menu.clearSelection();
|
|
3839
5371
|
});
|
|
3840
5372
|
|
|
3841
5373
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
@@ -3860,7 +5392,7 @@ class AuroSelect extends r$4 {
|
|
|
3860
5392
|
this.dropdown.show();
|
|
3861
5393
|
|
|
3862
5394
|
if (this.dropdown.isPopoverVisible) {
|
|
3863
|
-
this.menu.
|
|
5395
|
+
this.menu.navigateOptions('up');
|
|
3864
5396
|
}
|
|
3865
5397
|
}
|
|
3866
5398
|
|
|
@@ -3870,7 +5402,7 @@ class AuroSelect extends r$4 {
|
|
|
3870
5402
|
this.dropdown.show();
|
|
3871
5403
|
|
|
3872
5404
|
if (this.dropdown.isPopoverVisible) {
|
|
3873
|
-
this.menu.
|
|
5405
|
+
this.menu.navigateOptions('down');
|
|
3874
5406
|
}
|
|
3875
5407
|
}
|
|
3876
5408
|
|
|
@@ -3933,7 +5465,7 @@ class AuroSelect extends r$4 {
|
|
|
3933
5465
|
* input as no longer in the initial state.
|
|
3934
5466
|
*/
|
|
3935
5467
|
if (this.value === undefined) {
|
|
3936
|
-
this.value =
|
|
5468
|
+
this.value = undefined;
|
|
3937
5469
|
this.removeEventListener('focusin', this.handleFocusin);
|
|
3938
5470
|
}
|
|
3939
5471
|
}
|
|
@@ -3991,11 +5523,15 @@ class AuroSelect extends r$4 {
|
|
|
3991
5523
|
}
|
|
3992
5524
|
}
|
|
3993
5525
|
|
|
3994
|
-
updated(changedProperties) {
|
|
3995
|
-
// After the component is ready, send direct value changes to auro-menu.
|
|
5526
|
+
async updated(changedProperties) {
|
|
3996
5527
|
if (changedProperties.has('value')) {
|
|
3997
5528
|
if (this.value) {
|
|
3998
5529
|
this.menu.value = this.value;
|
|
5530
|
+
|
|
5531
|
+
// Wait for menu to finish updating its value
|
|
5532
|
+
await this.menu.updateComplete;
|
|
5533
|
+
|
|
5534
|
+
this.optionSelected = this.menu.optionSelected;
|
|
3999
5535
|
} else {
|
|
4000
5536
|
this.menu.value = undefined;
|
|
4001
5537
|
}
|
|
@@ -4035,18 +5571,18 @@ class AuroSelect extends r$4 {
|
|
|
4035
5571
|
hidden: this.value,
|
|
4036
5572
|
};
|
|
4037
5573
|
|
|
4038
|
-
return u$
|
|
5574
|
+
return u$4`
|
|
4039
5575
|
<div class="outerWrapper">
|
|
4040
5576
|
<div aria-live="polite" class="util_displayHiddenVisually">
|
|
4041
5577
|
${this.optionActive && this.options.length > 0
|
|
4042
|
-
? u$
|
|
5578
|
+
? u$4`
|
|
4043
5579
|
${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
|
|
4044
5580
|
`
|
|
4045
5581
|
: undefined
|
|
4046
5582
|
};
|
|
4047
5583
|
|
|
4048
5584
|
${this.optionSelected && this.options.length > 0
|
|
4049
|
-
? u$
|
|
5585
|
+
? u$4`
|
|
4050
5586
|
${`${this.optionSelected.innerText} selected`}
|
|
4051
5587
|
`
|
|
4052
5588
|
: undefined
|
|
@@ -4061,18 +5597,18 @@ class AuroSelect extends r$4 {
|
|
|
4061
5597
|
chevron
|
|
4062
5598
|
part="dropdown">
|
|
4063
5599
|
<span slot="trigger" aria-haspopup="true" id="triggerFocus">
|
|
4064
|
-
<span id="placeholder" class="${e$
|
|
5600
|
+
<span id="placeholder" class="${e$6(placeholderClass)}"><slot name="placeholder"></slot></span>
|
|
4065
5601
|
</span>
|
|
4066
5602
|
<div class="menuWrapper">
|
|
4067
5603
|
</div>
|
|
4068
5604
|
<slot name="label" slot="label"></slot>
|
|
4069
5605
|
<span slot="helpText">
|
|
4070
5606
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
4071
|
-
? u$
|
|
5607
|
+
? u$4`
|
|
4072
5608
|
<p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
|
|
4073
5609
|
<slot name="helpText"></slot>
|
|
4074
5610
|
</p>`
|
|
4075
|
-
: u$
|
|
5611
|
+
: u$4`
|
|
4076
5612
|
<p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
4077
5613
|
${this.errorMessage}
|
|
4078
5614
|
</p>`
|
|
@@ -4085,32 +5621,167 @@ class AuroSelect extends r$4 {
|
|
|
4085
5621
|
}
|
|
4086
5622
|
}
|
|
4087
5623
|
|
|
4088
|
-
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)}`;
|
|
5624
|
+
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)}`;
|
|
5625
|
+
|
|
5626
|
+
var colorCss$2 = i$c`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
|
|
5627
|
+
|
|
5628
|
+
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)}`;
|
|
5629
|
+
|
|
5630
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5631
|
+
// See LICENSE in the project root for license information.
|
|
5632
|
+
|
|
5633
|
+
// ---------------------------------------------------------------------
|
|
5634
|
+
|
|
5635
|
+
/**
|
|
5636
|
+
* Converts value to an array.
|
|
5637
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
5638
|
+
* If the value is already an array, it is returned.
|
|
5639
|
+
* If the value is undefined, it returns undefined.
|
|
5640
|
+
* @private
|
|
5641
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
5642
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
5643
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
5644
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
5645
|
+
*/
|
|
5646
|
+
function arrayConverter(value) {
|
|
5647
|
+
// Allow undefined
|
|
5648
|
+
if (value === undefined) {
|
|
5649
|
+
return undefined;
|
|
5650
|
+
}
|
|
5651
|
+
|
|
5652
|
+
// Return the value if it is already an array
|
|
5653
|
+
if (Array.isArray(value)) {
|
|
5654
|
+
return value;
|
|
5655
|
+
}
|
|
5656
|
+
|
|
5657
|
+
try {
|
|
5658
|
+
// If value is a JSON string, parse it
|
|
5659
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
5660
|
+
|
|
5661
|
+
// Check if the parsed value is an array
|
|
5662
|
+
if (Array.isArray(parsed)) {
|
|
5663
|
+
return parsed;
|
|
5664
|
+
}
|
|
5665
|
+
} catch (error) {
|
|
5666
|
+
// If JSON parsing fails, continue to throw an error below
|
|
5667
|
+
/* eslint-disable no-console */
|
|
5668
|
+
console.error('JSON parsing failed:', error);
|
|
5669
|
+
}
|
|
5670
|
+
|
|
5671
|
+
// Throw error if the input is not an array or undefined
|
|
5672
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
5673
|
+
}
|
|
5674
|
+
|
|
5675
|
+
/**
|
|
5676
|
+
* Compare two arrays for equality.
|
|
5677
|
+
* @private
|
|
5678
|
+
* @param {Array} arr1 - First array to compare.
|
|
5679
|
+
* @param {Array} arr2 - Second array to compare.
|
|
5680
|
+
* @returns {boolean} True if arrays are equal.
|
|
5681
|
+
*/
|
|
5682
|
+
function arraysAreEqual(arr1, arr2) {
|
|
5683
|
+
// If both arrays undefined, they are equal (true)
|
|
5684
|
+
if (arr1 === undefined || arr2 === undefined) {
|
|
5685
|
+
return arr1 === arr2;
|
|
5686
|
+
}
|
|
5687
|
+
|
|
5688
|
+
// If arrays have different lengths, they are not equal
|
|
5689
|
+
if (arr1.length !== arr2.length) {
|
|
5690
|
+
return false;
|
|
5691
|
+
}
|
|
5692
|
+
|
|
5693
|
+
// If every item at each index is the same, return true
|
|
5694
|
+
for (let index = 0; index < arr1.length; index += 1) {
|
|
5695
|
+
if (arr1[index] !== arr2[index]) {
|
|
5696
|
+
return false;
|
|
5697
|
+
}
|
|
5698
|
+
}
|
|
5699
|
+
return true;
|
|
5700
|
+
}
|
|
5701
|
+
|
|
5702
|
+
/**
|
|
5703
|
+
* Compares array for changes.
|
|
5704
|
+
* @private
|
|
5705
|
+
* @param {Array|any} newVal - New value to compare.
|
|
5706
|
+
* @param {Array|any} oldVal - Old value to compare.
|
|
5707
|
+
* @returns {boolean} True if arrays have changed.
|
|
5708
|
+
*/
|
|
5709
|
+
function arrayOrUndefinedHasChanged(newVal, oldVal) {
|
|
5710
|
+
try {
|
|
5711
|
+
// Check if values are undefined or arrays
|
|
5712
|
+
const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
|
|
5713
|
+
|
|
5714
|
+
// If non-array or non-undefined, throw error
|
|
5715
|
+
if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
|
|
5716
|
+
const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
|
|
5717
|
+
throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
|
|
5718
|
+
}
|
|
5719
|
+
|
|
5720
|
+
// Return true if arrays have changed, false if they are the same
|
|
5721
|
+
return !arraysAreEqual(newVal, oldVal);
|
|
5722
|
+
} catch (error) {
|
|
5723
|
+
/* eslint-disable no-console */
|
|
5724
|
+
console.error(error);
|
|
5725
|
+
// If validation fails, it has changed
|
|
5726
|
+
return true;
|
|
5727
|
+
}
|
|
5728
|
+
}
|
|
5729
|
+
|
|
5730
|
+
/**
|
|
5731
|
+
* Validates if an option can be interacted with.
|
|
5732
|
+
* @private
|
|
5733
|
+
* @param {HTMLElement} option - The option to check.
|
|
5734
|
+
* @returns {boolean} True if option is interactive.
|
|
5735
|
+
*/
|
|
5736
|
+
function isOptionInteractive(option) {
|
|
5737
|
+
return !option.hasAttribute('hidden') &&
|
|
5738
|
+
!option.hasAttribute('disabled') &&
|
|
5739
|
+
!option.hasAttribute('static');
|
|
5740
|
+
}
|
|
5741
|
+
|
|
5742
|
+
/**
|
|
5743
|
+
* Helper method to dispatch custom events.
|
|
5744
|
+
* @param {HTMLElement} element - Element to dispatch event from.
|
|
5745
|
+
* @param {string} eventName - Name of the event to dispatch.
|
|
5746
|
+
* @param {Object} [detail] - Optional detail object to include with the event.
|
|
5747
|
+
*/
|
|
5748
|
+
function dispatchMenuEvent(element, eventName, detail = null) {
|
|
5749
|
+
const eventConfig = {
|
|
5750
|
+
bubbles: true,
|
|
5751
|
+
cancelable: false,
|
|
5752
|
+
composed: true
|
|
5753
|
+
};
|
|
4089
5754
|
|
|
4090
|
-
|
|
5755
|
+
if (detail !== null) {
|
|
5756
|
+
eventConfig.detail = detail;
|
|
5757
|
+
}
|
|
4091
5758
|
|
|
4092
|
-
|
|
5759
|
+
element.dispatchEvent(new CustomEvent(eventName, eventConfig));
|
|
5760
|
+
}
|
|
4093
5761
|
|
|
4094
5762
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4095
5763
|
// See LICENSE in the project root for license information.
|
|
4096
5764
|
|
|
4097
5765
|
|
|
5766
|
+
|
|
4098
5767
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
4099
5768
|
/**
|
|
4100
5769
|
* The auro-menu element provides users a way to select from a list of options.
|
|
4101
|
-
* @attr {
|
|
4102
|
-
* @attr {
|
|
4103
|
-
* @attr {
|
|
4104
|
-
* @attr {
|
|
4105
|
-
* @attr {
|
|
4106
|
-
* @attr {
|
|
4107
|
-
* @
|
|
4108
|
-
* @
|
|
4109
|
-
* @
|
|
4110
|
-
* @event auroMenu-
|
|
4111
|
-
* @event auroMenu-
|
|
4112
|
-
* @event auroMenu-
|
|
4113
|
-
* @event auroMenu-
|
|
5770
|
+
* @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.
|
|
5771
|
+
* @attr {object} optionactive - Specifies the current active menuOption.
|
|
5772
|
+
* @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
|
|
5773
|
+
* @attr {boolean} disabled - When true, the entire menu and all options are disabled;
|
|
5774
|
+
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
5775
|
+
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
5776
|
+
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
5777
|
+
* @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.
|
|
5778
|
+
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
5779
|
+
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
5780
|
+
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
5781
|
+
* @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
5782
|
+
* @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
|
|
5783
|
+
* @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
5784
|
+
* @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
4114
5785
|
* @slot loadingText - Text to show while loading attribute is set
|
|
4115
5786
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
4116
5787
|
* @slot - Slot for insertion of menu options.
|
|
@@ -4118,55 +5789,107 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
|
|
|
4118
5789
|
|
|
4119
5790
|
/* eslint-disable no-magic-numbers, max-lines */
|
|
4120
5791
|
|
|
4121
|
-
class AuroMenu extends r$
|
|
5792
|
+
class AuroMenu extends r$5 {
|
|
4122
5793
|
constructor() {
|
|
4123
5794
|
super();
|
|
5795
|
+
|
|
5796
|
+
// State properties (reactive)
|
|
5797
|
+
|
|
5798
|
+
// Value of the selected options
|
|
4124
5799
|
this.value = undefined;
|
|
5800
|
+
// Currently selected option
|
|
4125
5801
|
this.optionSelected = undefined;
|
|
5802
|
+
// String used for highlighting/filtering
|
|
4126
5803
|
this.matchWord = undefined;
|
|
5804
|
+
// Hide the checkmark icon on selected options
|
|
4127
5805
|
this.noCheckmark = false;
|
|
5806
|
+
// Currently active option
|
|
4128
5807
|
this.optionActive = undefined;
|
|
5808
|
+
// Loading state
|
|
4129
5809
|
this.loading = false;
|
|
5810
|
+
// Multi-select mode
|
|
5811
|
+
this.multiSelect = false;
|
|
5812
|
+
|
|
5813
|
+
// Event Bindings
|
|
4130
5814
|
|
|
4131
5815
|
/**
|
|
4132
5816
|
* @private
|
|
4133
5817
|
*/
|
|
4134
|
-
this.
|
|
5818
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
4135
5819
|
|
|
4136
5820
|
/**
|
|
4137
5821
|
* @private
|
|
4138
5822
|
*/
|
|
4139
|
-
this.
|
|
5823
|
+
this.handleMouseSelect = this.handleMouseSelect.bind(this);
|
|
5824
|
+
|
|
5825
|
+
/**
|
|
5826
|
+
* @private
|
|
5827
|
+
*/
|
|
5828
|
+
this.handleOptionHover = this.handleOptionHover.bind(this);
|
|
4140
5829
|
|
|
4141
5830
|
/**
|
|
4142
5831
|
* @private
|
|
4143
5832
|
*/
|
|
4144
|
-
this.
|
|
5833
|
+
this.handleSlotChange = this.handleSlotChange.bind(this);
|
|
5834
|
+
|
|
5835
|
+
// Instance properties (non-reactive)
|
|
4145
5836
|
|
|
4146
5837
|
/**
|
|
4147
5838
|
* @private
|
|
4148
5839
|
*/
|
|
4149
|
-
this
|
|
5840
|
+
Object.assign(this, {
|
|
5841
|
+
// Root-level menu (true) or a nested submenu (false)
|
|
5842
|
+
rootMenu: true,
|
|
5843
|
+
// Currently focused/active menu item index
|
|
5844
|
+
index: -1,
|
|
5845
|
+
// Nested menu spacer
|
|
5846
|
+
nestingSpacer: '<span class="nestingSpacer"></span>',
|
|
5847
|
+
// Loading indicator for slot elements
|
|
5848
|
+
loadingSlots: null,
|
|
5849
|
+
// Store for menu items
|
|
5850
|
+
items: [],
|
|
5851
|
+
});
|
|
4150
5852
|
}
|
|
4151
5853
|
|
|
4152
5854
|
static get properties() {
|
|
4153
5855
|
return {
|
|
4154
|
-
noCheckmark:
|
|
5856
|
+
noCheckmark: {
|
|
4155
5857
|
type: Boolean,
|
|
4156
|
-
reflect: true
|
|
5858
|
+
reflect: true,
|
|
5859
|
+
attribute: 'nocheckmark'
|
|
4157
5860
|
},
|
|
4158
|
-
disabled:
|
|
5861
|
+
disabled: {
|
|
4159
5862
|
type: Boolean,
|
|
4160
5863
|
reflect: true
|
|
4161
5864
|
},
|
|
4162
|
-
loading:
|
|
5865
|
+
loading: {
|
|
4163
5866
|
type: Boolean,
|
|
4164
5867
|
reflect: true
|
|
4165
5868
|
},
|
|
4166
|
-
optionSelected: {
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
5869
|
+
optionSelected: {
|
|
5870
|
+
// Allow HTMLElement[] arrays and undefined
|
|
5871
|
+
converter: arrayConverter,
|
|
5872
|
+
hasChanged: arrayOrUndefinedHasChanged
|
|
5873
|
+
},
|
|
5874
|
+
optionActive: {
|
|
5875
|
+
type: Object,
|
|
5876
|
+
attribute: 'optionactive'
|
|
5877
|
+
},
|
|
5878
|
+
matchWord: {
|
|
5879
|
+
type: String,
|
|
5880
|
+
attribute: 'matchword'
|
|
5881
|
+
},
|
|
5882
|
+
multiSelect: {
|
|
5883
|
+
type: Boolean,
|
|
5884
|
+
reflect: true,
|
|
5885
|
+
attribute: 'multiselect'
|
|
5886
|
+
},
|
|
5887
|
+
value: {
|
|
5888
|
+
// Allow string[] arrays and undefined
|
|
5889
|
+
type: Object,
|
|
5890
|
+
converter: arrayConverter,
|
|
5891
|
+
hasChanged: arrayOrUndefinedHasChanged
|
|
5892
|
+
}
|
|
4170
5893
|
};
|
|
4171
5894
|
}
|
|
4172
5895
|
|
|
@@ -4187,201 +5910,332 @@ class AuroMenu extends r$4 {
|
|
|
4187
5910
|
*
|
|
4188
5911
|
*/
|
|
4189
5912
|
static register(name = "auro-menu") {
|
|
4190
|
-
AuroLibraryRuntimeUtils$
|
|
5913
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
|
|
4191
5914
|
}
|
|
4192
5915
|
|
|
4193
|
-
|
|
4194
|
-
* Passes the noCheckmark attribute to all nested auro-menuoptions.
|
|
4195
|
-
* @private
|
|
4196
|
-
* @returns {void}
|
|
4197
|
-
*/
|
|
4198
|
-
handleNoCheckmarkAttr() {
|
|
4199
|
-
if (this.noCheckmark) {
|
|
4200
|
-
const menus = this.querySelectorAll('auro-menu, [auro-menu]');
|
|
5916
|
+
// Lifecycle Methods
|
|
4201
5917
|
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
5918
|
+
connectedCallback() {
|
|
5919
|
+
super.connectedCallback();
|
|
5920
|
+
|
|
5921
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
5922
|
+
this.addEventListener('mousedown', this.handleMouseSelect);
|
|
5923
|
+
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
5924
|
+
this.addEventListener('slotchange', this.handleSlotChange);
|
|
5925
|
+
}
|
|
4205
5926
|
|
|
4206
|
-
|
|
5927
|
+
disconnectedCallback() {
|
|
5928
|
+
this.removeEventListener('keydown', this.handleKeyDown);
|
|
5929
|
+
this.removeEventListener('mousedown', this.handleMouseSelect);
|
|
5930
|
+
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
5931
|
+
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
4207
5932
|
|
|
4208
|
-
|
|
4209
|
-
option.setAttribute('noCheckmark', '');
|
|
4210
|
-
});
|
|
4211
|
-
}
|
|
5933
|
+
super.disconnectedCallback();
|
|
4212
5934
|
}
|
|
4213
5935
|
|
|
4214
5936
|
firstUpdated() {
|
|
4215
|
-
|
|
4216
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
|
|
4217
|
-
|
|
4218
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
5937
|
+
AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
4219
5938
|
|
|
4220
5939
|
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
5940
|
+
this.initializeMenu();
|
|
4221
5941
|
}
|
|
4222
5942
|
|
|
4223
5943
|
updated(changedProperties) {
|
|
4224
|
-
if (changedProperties.has('
|
|
4225
|
-
|
|
5944
|
+
if (changedProperties.has('value')) {
|
|
5945
|
+
// Handle null/undefined case
|
|
5946
|
+
if (this.value === undefined || this.value === null) {
|
|
5947
|
+
this.optionSelected = undefined;
|
|
5948
|
+
// Reset index tracking
|
|
5949
|
+
this.index = -1;
|
|
5950
|
+
} else {
|
|
5951
|
+
// Convert single values to arrays
|
|
5952
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
5953
|
+
|
|
5954
|
+
// Find all matching options
|
|
5955
|
+
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
5956
|
+
|
|
5957
|
+
if (matchingOptions.length > 0) {
|
|
5958
|
+
if (this.multiSelect) {
|
|
5959
|
+
// For multiselect, keep all matching options
|
|
5960
|
+
this.optionSelected = matchingOptions;
|
|
5961
|
+
} else {
|
|
5962
|
+
// For single select, only use the first match
|
|
5963
|
+
this.optionSelected = [matchingOptions[0]];
|
|
5964
|
+
this.index = this.items.indexOf(matchingOptions[0]);
|
|
5965
|
+
}
|
|
5966
|
+
} else {
|
|
5967
|
+
// No matches found - trigger failure event
|
|
5968
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
5969
|
+
this.optionSelected = undefined;
|
|
5970
|
+
this.index = -1;
|
|
5971
|
+
}
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
// Update UI state
|
|
5975
|
+
this.updateItemsState(new Map([
|
|
5976
|
+
[
|
|
5977
|
+
'optionSelected',
|
|
5978
|
+
true
|
|
5979
|
+
]
|
|
5980
|
+
]));
|
|
5981
|
+
|
|
5982
|
+
// Notify of changes
|
|
5983
|
+
if (this.optionSelected !== undefined) {
|
|
5984
|
+
this.notifySelectionChange();
|
|
5985
|
+
}
|
|
4226
5986
|
}
|
|
4227
5987
|
|
|
4228
|
-
|
|
4229
|
-
|
|
5988
|
+
// Process all other UI updates
|
|
5989
|
+
this.updateItemsState(changedProperties);
|
|
5990
|
+
}
|
|
5991
|
+
|
|
5992
|
+
/**
|
|
5993
|
+
* Updates the UI state and appearance of menu items based on changed properties.
|
|
5994
|
+
* @private
|
|
5995
|
+
* @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
|
|
5996
|
+
*/
|
|
5997
|
+
updateItemsState(changedProperties) {
|
|
5998
|
+
if (!this.items) {
|
|
5999
|
+
return;
|
|
4230
6000
|
}
|
|
4231
6001
|
|
|
4232
|
-
|
|
4233
|
-
|
|
6002
|
+
// Handle noCheckmark propagation to all menus and options
|
|
6003
|
+
if (changedProperties.has('noCheckmark') && this.noCheckmark) {
|
|
6004
|
+
// Update both menus and options
|
|
6005
|
+
this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
|
|
6006
|
+
}
|
|
4234
6007
|
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
6008
|
+
// Regex for matchWord if needed
|
|
6009
|
+
let regexWord = null;
|
|
6010
|
+
|
|
6011
|
+
if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
|
|
6012
|
+
const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
|
|
6013
|
+
regexWord = new RegExp(escapedWord, 'giu');
|
|
4238
6014
|
}
|
|
4239
6015
|
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
6016
|
+
// Handle direct item updates
|
|
6017
|
+
this.items.forEach((option) => {
|
|
6018
|
+
// Update selection if option or value changed
|
|
6019
|
+
if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
|
|
6020
|
+
const isSelected = this.isOptionSelected(option);
|
|
6021
|
+
option.classList.toggle('active', isSelected);
|
|
6022
|
+
option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
6023
|
+
|
|
6024
|
+
// Add/remove selected attribute based on state
|
|
6025
|
+
if (isSelected) {
|
|
6026
|
+
option.setAttribute('selected', '');
|
|
6027
|
+
} else {
|
|
6028
|
+
option.removeAttribute('selected');
|
|
4246
6029
|
}
|
|
6030
|
+
}
|
|
6031
|
+
|
|
6032
|
+
// Update text highlighting if matchWord changed
|
|
6033
|
+
if (changedProperties.has('matchWord') && regexWord &&
|
|
6034
|
+
isOptionInteractive(option) && !option.hasAttribute('persistent')) {
|
|
6035
|
+
const nested = option.querySelectorAll('.nestingSpacer');
|
|
6036
|
+
// Create nested spacers
|
|
6037
|
+
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
6038
|
+
|
|
6039
|
+
// Update with spacers and matchWord
|
|
6040
|
+
option.innerHTML = nestingSpacerBundle +
|
|
6041
|
+
option.textContent.replace(
|
|
6042
|
+
regexWord,
|
|
6043
|
+
(match) => `<strong>${match}</strong>`
|
|
6044
|
+
);
|
|
6045
|
+
}
|
|
6046
|
+
|
|
6047
|
+
// Update disabled state
|
|
6048
|
+
if (changedProperties.has('disabled')) {
|
|
6049
|
+
option.disabled = this.disabled;
|
|
6050
|
+
}
|
|
6051
|
+
});
|
|
6052
|
+
|
|
6053
|
+
// Handle loading state changes
|
|
6054
|
+
if (changedProperties.has('loading')) {
|
|
6055
|
+
this.setAttribute("aria-busy", this.loading);
|
|
6056
|
+
dispatchMenuEvent(this, "auroMenu-loadingChange", {
|
|
6057
|
+
loading: this.loading,
|
|
6058
|
+
hasLoadingPlaceholder: this.hasLoadingPlaceholder
|
|
4247
6059
|
});
|
|
4248
|
-
this.setAttribute("aria-busy", this.hasAttribute("loading"));
|
|
4249
|
-
this.dispatchEvent(event);
|
|
4250
6060
|
}
|
|
4251
6061
|
}
|
|
4252
6062
|
|
|
6063
|
+
// Init Methods
|
|
6064
|
+
|
|
4253
6065
|
/**
|
|
6066
|
+
* Initializes the menu's state and structure.
|
|
4254
6067
|
* @private
|
|
4255
|
-
* @param {Object} option - The menuoption to check for interactive state.
|
|
4256
|
-
* @returns {Boolean} Returns true if the option is interactive.
|
|
4257
6068
|
*/
|
|
4258
|
-
|
|
4259
|
-
|
|
6069
|
+
initializeMenu() {
|
|
6070
|
+
this.initItems();
|
|
6071
|
+
if (this.rootMenu) {
|
|
6072
|
+
this.setAttribute('role', 'listbox');
|
|
6073
|
+
this.setAttribute('root', '');
|
|
6074
|
+
this.handleNestedMenus(this);
|
|
6075
|
+
}
|
|
4260
6076
|
}
|
|
4261
6077
|
|
|
4262
6078
|
/**
|
|
6079
|
+
* Initializes menu items and their attributes.
|
|
4263
6080
|
* @private
|
|
4264
|
-
* @returns {void} When called will update the DOM with visible suggest text matches.
|
|
4265
6081
|
*/
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
this.items.forEach((item) => {
|
|
4276
|
-
if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
|
|
4277
|
-
const nested = item.querySelectorAll('.nestingSpacer');
|
|
4278
|
-
const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
|
|
4279
|
-
|
|
4280
|
-
item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
|
|
4281
|
-
}
|
|
4282
|
-
});
|
|
6082
|
+
initItems() {
|
|
6083
|
+
this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
|
|
6084
|
+
if (this.noCheckmark) {
|
|
6085
|
+
this.updateItemsState(new Map([
|
|
6086
|
+
[
|
|
6087
|
+
'noCheckmark',
|
|
6088
|
+
true
|
|
6089
|
+
]
|
|
6090
|
+
]));
|
|
4283
6091
|
}
|
|
4284
6092
|
}
|
|
4285
6093
|
|
|
6094
|
+
// Logic Methods
|
|
6095
|
+
|
|
4286
6096
|
/**
|
|
4287
|
-
*
|
|
6097
|
+
* Updates menu state when an option is selected.
|
|
6098
|
+
* @private
|
|
6099
|
+
* @param {HTMLElement} option - The option element to select.
|
|
4288
6100
|
*/
|
|
4289
|
-
|
|
4290
|
-
this.
|
|
4291
|
-
|
|
4292
|
-
this.
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
6101
|
+
handleSelectState(option) {
|
|
6102
|
+
if (this.multiSelect) {
|
|
6103
|
+
const currentValue = this.value || [];
|
|
6104
|
+
const currentSelected = this.optionSelected || [];
|
|
6105
|
+
|
|
6106
|
+
if (!currentValue.includes(option.value)) {
|
|
6107
|
+
this.value = [
|
|
6108
|
+
...currentValue,
|
|
6109
|
+
option.value
|
|
6110
|
+
];
|
|
6111
|
+
}
|
|
6112
|
+
if (!currentSelected.includes(option)) {
|
|
6113
|
+
this.optionSelected = [
|
|
6114
|
+
...currentSelected,
|
|
6115
|
+
option
|
|
6116
|
+
];
|
|
6117
|
+
}
|
|
6118
|
+
} else {
|
|
6119
|
+
// Single select - use arrays with single values
|
|
6120
|
+
this.value = [option.value];
|
|
6121
|
+
this.optionSelected = [option];
|
|
4296
6122
|
}
|
|
6123
|
+
|
|
6124
|
+
this.index = this.items.indexOf(option);
|
|
4297
6125
|
}
|
|
4298
6126
|
|
|
4299
6127
|
/**
|
|
4300
|
-
*
|
|
4301
|
-
* @param {Object} option - The menuoption to be selected.
|
|
6128
|
+
* Deselects a menu option and updates related state.
|
|
4302
6129
|
* @private
|
|
6130
|
+
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
4303
6131
|
*/
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
6132
|
+
handleDeselectState(option) {
|
|
6133
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
6134
|
+
// Remove this option from array
|
|
6135
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
6136
|
+
|
|
6137
|
+
// If array is empty after removal, set back to undefined
|
|
6138
|
+
if (this.value.length === 0) {
|
|
6139
|
+
this.value = undefined;
|
|
6140
|
+
}
|
|
4308
6141
|
|
|
4309
|
-
|
|
4310
|
-
|
|
6142
|
+
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
6143
|
+
if (this.optionSelected.length === 0) {
|
|
6144
|
+
this.optionSelected = undefined;
|
|
6145
|
+
}
|
|
6146
|
+
} else {
|
|
6147
|
+
// For single-select: Back to undefined when deselected
|
|
6148
|
+
this.value = undefined;
|
|
6149
|
+
this.optionSelected = undefined;
|
|
6150
|
+
}
|
|
6151
|
+
|
|
6152
|
+
// Update the index tracking
|
|
4311
6153
|
this.index = this.items.indexOf(option);
|
|
6154
|
+
|
|
6155
|
+
// Update UI to reflect changes
|
|
6156
|
+
this.updateItemsState(new Map([
|
|
6157
|
+
[
|
|
6158
|
+
'optionSelected',
|
|
6159
|
+
true
|
|
6160
|
+
]
|
|
6161
|
+
]));
|
|
6162
|
+
|
|
6163
|
+
// Notify of selection change
|
|
6164
|
+
this.notifySelectionChange();
|
|
4312
6165
|
}
|
|
4313
6166
|
|
|
4314
6167
|
/**
|
|
4315
|
-
*
|
|
6168
|
+
* Resets all options to their default state.
|
|
4316
6169
|
* @private
|
|
4317
|
-
* @return {void}
|
|
4318
6170
|
*/
|
|
4319
|
-
|
|
4320
|
-
this.
|
|
4321
|
-
|
|
4322
|
-
cancelable: false,
|
|
4323
|
-
composed: true,
|
|
4324
|
-
}));
|
|
6171
|
+
clearSelection() {
|
|
6172
|
+
this.optionSelected = undefined;
|
|
6173
|
+
this.value = undefined;
|
|
4325
6174
|
}
|
|
4326
6175
|
|
|
4327
6176
|
/**
|
|
4328
|
-
*
|
|
6177
|
+
* Resets the menu to its initial state.
|
|
6178
|
+
* This is the only way to return value to undefined.
|
|
6179
|
+
* @public
|
|
4329
6180
|
*/
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
6181
|
+
reset() {
|
|
6182
|
+
// Reset to undefined - initial state
|
|
6183
|
+
this.value = undefined;
|
|
6184
|
+
this.optionSelected = undefined;
|
|
6185
|
+
this.index = -1;
|
|
4334
6186
|
|
|
4335
|
-
|
|
4336
|
-
|
|
6187
|
+
// Reset UI state
|
|
6188
|
+
this.updateItemsState(new Map([
|
|
6189
|
+
[
|
|
6190
|
+
'optionSelected',
|
|
6191
|
+
true
|
|
6192
|
+
]
|
|
6193
|
+
]));
|
|
4337
6194
|
|
|
4338
|
-
|
|
4339
|
-
|
|
6195
|
+
// Dispatch reset event
|
|
6196
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueReset');
|
|
6197
|
+
}
|
|
4340
6198
|
|
|
4341
|
-
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
|
|
4348
|
-
composed: true,
|
|
4349
|
-
}));
|
|
6199
|
+
/**
|
|
6200
|
+
* Handles nested menu structure.
|
|
6201
|
+
* @private
|
|
6202
|
+
* @param {HTMLElement} menu - Root menu element.
|
|
6203
|
+
*/
|
|
6204
|
+
handleNestedMenus(menu) {
|
|
6205
|
+
const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
|
|
4350
6206
|
|
|
4351
|
-
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
} else {
|
|
4357
|
-
this.handleLocalSelectState(option);
|
|
4358
|
-
}
|
|
4359
|
-
}
|
|
6207
|
+
nestedMenus.forEach((nestedMenu) => {
|
|
6208
|
+
// role="listbox" only allows "role=group" for children.
|
|
6209
|
+
nestedMenu.setAttribute('role', 'group');
|
|
6210
|
+
if (!nestedMenu.hasAttribute('aria-label')) {
|
|
6211
|
+
nestedMenu.setAttribute('aria-label', 'submenu');
|
|
4360
6212
|
}
|
|
4361
|
-
}
|
|
4362
6213
|
|
|
4363
|
-
|
|
6214
|
+
const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
|
|
6215
|
+
options.forEach((option) => {
|
|
6216
|
+
option.innerHTML = this.nestingSpacer + option.innerHTML;
|
|
6217
|
+
});
|
|
6218
|
+
|
|
6219
|
+
this.handleNestedMenus(nestedMenu);
|
|
6220
|
+
});
|
|
4364
6221
|
}
|
|
4365
6222
|
|
|
6223
|
+
// Event Handlers
|
|
6224
|
+
|
|
4366
6225
|
/**
|
|
4367
|
-
*
|
|
6226
|
+
* Handles keyboard navigation.
|
|
4368
6227
|
* @private
|
|
4369
|
-
* @param {
|
|
6228
|
+
* @param {KeyboardEvent} event - Event object from the browser.
|
|
4370
6229
|
*/
|
|
4371
6230
|
handleKeyDown(event) {
|
|
4372
6231
|
event.preventDefault();
|
|
4373
|
-
|
|
4374
|
-
// With ArrowDown/ArrowUp events, pass new value to selectNextItem()
|
|
4375
|
-
// With Enter event, set value and apply attrs
|
|
4376
6232
|
switch (event.key) {
|
|
4377
6233
|
case "ArrowDown":
|
|
4378
|
-
this.
|
|
6234
|
+
this.navigateOptions('down');
|
|
4379
6235
|
break;
|
|
4380
|
-
|
|
4381
6236
|
case "ArrowUp":
|
|
4382
|
-
this.
|
|
6237
|
+
this.navigateOptions('up');
|
|
4383
6238
|
break;
|
|
4384
|
-
|
|
4385
6239
|
case "Enter":
|
|
4386
6240
|
this.makeSelection();
|
|
4387
6241
|
break;
|
|
@@ -4389,225 +6243,221 @@ class AuroMenu extends r$4 {
|
|
|
4389
6243
|
}
|
|
4390
6244
|
|
|
4391
6245
|
/**
|
|
4392
|
-
*
|
|
6246
|
+
* Makes a selection based on the current index or clicked option.
|
|
4393
6247
|
* @private
|
|
4394
6248
|
*/
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
6249
|
+
makeSelection() {
|
|
6250
|
+
if (!this.items) {
|
|
6251
|
+
this.initItems();
|
|
6252
|
+
}
|
|
6253
|
+
|
|
6254
|
+
// Get currently selected menu option based on index
|
|
6255
|
+
const option = this.items[this.index];
|
|
6256
|
+
|
|
6257
|
+
// Return early if option is not interactive
|
|
6258
|
+
if (!option || !isOptionInteractive(option)) {
|
|
6259
|
+
return;
|
|
6260
|
+
}
|
|
6261
|
+
|
|
6262
|
+
// Handle custom events first
|
|
6263
|
+
if (option.hasAttribute('event')) {
|
|
6264
|
+
this.handleCustomEvent(option);
|
|
6265
|
+
return;
|
|
6266
|
+
}
|
|
6267
|
+
|
|
6268
|
+
if (this.multiSelect) {
|
|
6269
|
+
// In multiselect, toggle individual selections
|
|
6270
|
+
this.toggleOption(option);
|
|
6271
|
+
// In single select, only handle selection of new options
|
|
6272
|
+
} else if (!this.isOptionSelected(option)) {
|
|
6273
|
+
this.clearSelection();
|
|
6274
|
+
this.handleSelectState(option);
|
|
6275
|
+
}
|
|
6276
|
+
|
|
6277
|
+
this.notifySelectionChange();
|
|
4398
6278
|
}
|
|
4399
6279
|
|
|
4400
6280
|
/**
|
|
4401
|
-
*
|
|
6281
|
+
* Toggle the selection state of the menuoption.
|
|
4402
6282
|
* @private
|
|
6283
|
+
* @param {HTMLElement} option - The menuoption to toggle.
|
|
4403
6284
|
*/
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
|
-
const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
|
|
6285
|
+
toggleOption(option) {
|
|
6286
|
+
const isCurrentlySelected = this.isOptionSelected(option);
|
|
4407
6287
|
|
|
4408
|
-
if (
|
|
4409
|
-
this.
|
|
4410
|
-
|
|
6288
|
+
if (isCurrentlySelected) {
|
|
6289
|
+
this.handleDeselectState(option);
|
|
6290
|
+
} else if (option.value === undefined || option.value === '') {
|
|
6291
|
+
dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
|
|
6292
|
+
} else {
|
|
6293
|
+
this.handleSelectState(option);
|
|
4411
6294
|
}
|
|
4412
6295
|
}
|
|
4413
6296
|
|
|
4414
6297
|
/**
|
|
4415
|
-
*
|
|
4416
|
-
*
|
|
4417
|
-
*
|
|
4418
|
-
*
|
|
4419
|
-
* The event.target is not used as the function needs to know where to go,
|
|
4420
|
-
* versus knowing where it is.
|
|
4421
|
-
* @param {String} moveDirection - Up or Down based on keyboard event.
|
|
6298
|
+
* Handles option selection via mouse.
|
|
6299
|
+
* @private
|
|
6300
|
+
* @param {MouseEvent} event - Event object from the browser.
|
|
4422
6301
|
*/
|
|
4423
|
-
|
|
4424
|
-
if (
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
// calculate which is the selection we should focus next
|
|
4428
|
-
let increment = 0;
|
|
4429
|
-
|
|
4430
|
-
if (moveDirection === 'down') {
|
|
4431
|
-
increment = 1;
|
|
4432
|
-
} else if (moveDirection === 'up') {
|
|
4433
|
-
increment = -1;
|
|
4434
|
-
}
|
|
4435
|
-
|
|
4436
|
-
this.index += increment;
|
|
4437
|
-
|
|
4438
|
-
// keep looping inside the array of options
|
|
4439
|
-
if (this.index > this.items.length - 1) {
|
|
4440
|
-
this.index = 0;
|
|
4441
|
-
} else if (this.index < 0) {
|
|
4442
|
-
this.index = this.items.length - 1;
|
|
4443
|
-
}
|
|
4444
|
-
|
|
4445
|
-
// check if new index is disabled, static or hidden, if so, execute again
|
|
4446
|
-
if (!this.optionInteractive(this.items[this.index])) {
|
|
4447
|
-
this.selectNextItem(moveDirection);
|
|
4448
|
-
} else {
|
|
4449
|
-
// apply focus to new index
|
|
4450
|
-
this.updateActiveOption(this.index);
|
|
4451
|
-
}
|
|
4452
|
-
} else {
|
|
4453
|
-
this.index = 0;
|
|
6302
|
+
handleMouseSelect(event) {
|
|
6303
|
+
if (event.target === this) {
|
|
6304
|
+
return;
|
|
6305
|
+
}
|
|
4454
6306
|
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
|
|
4459
|
-
}
|
|
6307
|
+
const option = event.target.closest('auro-menuoption, [auro-menuoption]');
|
|
6308
|
+
if (option) {
|
|
6309
|
+
this.index = this.items.indexOf(option);
|
|
6310
|
+
this.makeSelection();
|
|
4460
6311
|
}
|
|
4461
6312
|
}
|
|
4462
6313
|
|
|
4463
6314
|
/**
|
|
4464
|
-
*
|
|
6315
|
+
* Handles option hover events.
|
|
4465
6316
|
* @private
|
|
4466
|
-
* @param {
|
|
6317
|
+
* @param {CustomEvent} event - Event object from the browser.
|
|
4467
6318
|
*/
|
|
4468
|
-
|
|
4469
|
-
const
|
|
6319
|
+
handleOptionHover(event) {
|
|
6320
|
+
const option = event.target;
|
|
6321
|
+
this.index = this.items.indexOf(option);
|
|
6322
|
+
this.updateActiveOption(this.index);
|
|
6323
|
+
}
|
|
4470
6324
|
|
|
4471
|
-
|
|
4472
|
-
|
|
6325
|
+
/**
|
|
6326
|
+
* Handles slot change events.
|
|
6327
|
+
* @private
|
|
6328
|
+
*/
|
|
6329
|
+
handleSlotChange() {
|
|
6330
|
+
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
6331
|
+
this.rootMenu = false;
|
|
4473
6332
|
}
|
|
4474
6333
|
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
6334
|
+
if (this.rootMenu) {
|
|
6335
|
+
this.initializeMenu();
|
|
6336
|
+
} else if (this.noCheckmark) {
|
|
6337
|
+
this.updateItemsState(new Map([
|
|
6338
|
+
[
|
|
6339
|
+
'noCheckmark',
|
|
6340
|
+
true
|
|
6341
|
+
]
|
|
6342
|
+
]));
|
|
6343
|
+
}
|
|
4484
6344
|
}
|
|
4485
6345
|
|
|
4486
6346
|
/**
|
|
4487
|
-
*
|
|
6347
|
+
* Navigates through options using keyboard.
|
|
4488
6348
|
* @private
|
|
4489
|
-
* @param {
|
|
6349
|
+
* @param {string} direction - 'up' or 'down'.
|
|
4490
6350
|
*/
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
if (!this.items) {
|
|
4494
|
-
|
|
6351
|
+
navigateOptions(direction) {
|
|
6352
|
+
// Return early if no items exist
|
|
6353
|
+
if (!this.items || !this.items.length) {
|
|
6354
|
+
return;
|
|
4495
6355
|
}
|
|
4496
6356
|
|
|
4497
|
-
this.index
|
|
6357
|
+
let newIndex = this.index;
|
|
6358
|
+
const increment = direction === 'down' ? 1 : -1;
|
|
6359
|
+
const maxIterations = this.items.length;
|
|
6360
|
+
let iterations = 0;
|
|
6361
|
+
let foundInteractiveOption = false;
|
|
4498
6362
|
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
valueMatch = true;
|
|
4503
|
-
this.index = index;
|
|
4504
|
-
}
|
|
4505
|
-
}
|
|
6363
|
+
do {
|
|
6364
|
+
newIndex = (newIndex + increment + this.items.length) % this.items.length;
|
|
6365
|
+
iterations += 1;
|
|
4506
6366
|
|
|
4507
|
-
if
|
|
4508
|
-
|
|
4509
|
-
|
|
6367
|
+
// Check if current option is interactive
|
|
6368
|
+
const currentOption = this.items[newIndex];
|
|
6369
|
+
if (isOptionInteractive(currentOption)) {
|
|
6370
|
+
foundInteractiveOption = true;
|
|
6371
|
+
break;
|
|
6372
|
+
}
|
|
4510
6373
|
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
composed: true,
|
|
4515
|
-
}));
|
|
4516
|
-
} else {
|
|
4517
|
-
this.makeSelection();
|
|
6374
|
+
// Break if all options were checked
|
|
6375
|
+
if (iterations >= maxIterations) {
|
|
6376
|
+
break;
|
|
4518
6377
|
}
|
|
4519
|
-
}
|
|
4520
|
-
this.resetOptionsStates();
|
|
6378
|
+
} while (iterations < maxIterations);
|
|
4521
6379
|
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
6380
|
+
// Handle the results of the search
|
|
6381
|
+
if (foundInteractiveOption) {
|
|
6382
|
+
// Update only if an interactive option was found
|
|
6383
|
+
this.index = newIndex;
|
|
6384
|
+
this.updateActiveOption(this.index);
|
|
6385
|
+
} else {
|
|
6386
|
+
// All options are disabled or non-interactive
|
|
6387
|
+
// Keep the current index unchanged
|
|
6388
|
+
dispatchMenuEvent(this, 'auroMenu-navigateFailure', {
|
|
6389
|
+
reason: 'No interactive options available',
|
|
6390
|
+
direction,
|
|
6391
|
+
currentIndex: this.index
|
|
6392
|
+
});
|
|
4527
6393
|
}
|
|
4528
6394
|
}
|
|
4529
6395
|
|
|
4530
6396
|
/**
|
|
4531
|
-
*
|
|
4532
|
-
* @param {Number} index - Index of the menuoption that will be made active.
|
|
6397
|
+
* Updates the active option state and dispatches events.
|
|
4533
6398
|
* @private
|
|
6399
|
+
* @param {number} index - Index of the option to make active.
|
|
4534
6400
|
*/
|
|
4535
6401
|
updateActiveOption(index) {
|
|
4536
|
-
this.items.
|
|
4537
|
-
|
|
4538
|
-
}
|
|
6402
|
+
if (!this.items || !this.items[index]) {
|
|
6403
|
+
return;
|
|
6404
|
+
}
|
|
6405
|
+
|
|
6406
|
+
this.items.forEach((item) => item.classList.remove('active'));
|
|
4539
6407
|
this.items[index].classList.add('active');
|
|
4540
6408
|
this.optionActive = this.items[index];
|
|
4541
6409
|
|
|
4542
|
-
this
|
|
4543
|
-
bubbles: true,
|
|
4544
|
-
cancelable: false,
|
|
4545
|
-
composed: true,
|
|
4546
|
-
detail: this.items[index]
|
|
4547
|
-
}));
|
|
6410
|
+
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
|
|
4548
6411
|
}
|
|
4549
6412
|
|
|
4550
6413
|
/**
|
|
4551
|
-
*
|
|
4552
|
-
* @param {Event} evt - Mousedown event.
|
|
6414
|
+
* Handles custom events defined on options.
|
|
4553
6415
|
* @private
|
|
6416
|
+
* @param {HTMLElement} option - Option with custom event.
|
|
4554
6417
|
*/
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
|
|
4558
|
-
|
|
6418
|
+
handleCustomEvent(option) {
|
|
6419
|
+
const eventName = option.getAttribute('event');
|
|
6420
|
+
dispatchMenuEvent(this, eventName);
|
|
6421
|
+
dispatchMenuEvent(this, 'auroMenu-customEventFired');
|
|
4559
6422
|
}
|
|
4560
6423
|
|
|
4561
6424
|
/**
|
|
4562
|
-
*
|
|
4563
|
-
*
|
|
4564
|
-
* This getter evaluates the `loadingSlots` collection to determine if it contains any items.
|
|
4565
|
-
* If the size of the collection is greater than zero, it indicates the presence of loading
|
|
4566
|
-
* placeholders, returning true; otherwise, it returns false.
|
|
4567
|
-
*
|
|
4568
|
-
* @getter hasLoadingPlaceholder
|
|
4569
|
-
* @type {boolean}
|
|
4570
|
-
* @returns {boolean} Returns true if loading placeholders exist; false otherwise.
|
|
6425
|
+
* Notifies selection change to parent components.
|
|
6426
|
+
* @private
|
|
4571
6427
|
*/
|
|
4572
|
-
|
|
4573
|
-
|
|
6428
|
+
notifySelectionChange() {
|
|
6429
|
+
dispatchMenuEvent(this, 'auroMenu-selectedOption');
|
|
4574
6430
|
}
|
|
4575
6431
|
|
|
4576
6432
|
/**
|
|
4577
|
-
*
|
|
6433
|
+
* Checks if an option is currently selected.
|
|
4578
6434
|
* @private
|
|
6435
|
+
* @param {HTMLElement} option - The option to check.
|
|
6436
|
+
* @returns {boolean}
|
|
4579
6437
|
*/
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
this.rootMenu = false;
|
|
6438
|
+
isOptionSelected(option) {
|
|
6439
|
+
if (!this.optionSelected) {
|
|
6440
|
+
return false;
|
|
4584
6441
|
}
|
|
6442
|
+
// Always treat as array for both single and multi-select
|
|
6443
|
+
return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
|
|
6444
|
+
}
|
|
4585
6445
|
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
this.markOptions();
|
|
4593
|
-
this.index = -1;
|
|
4594
|
-
this.getSelectedIndex();
|
|
4595
|
-
|
|
4596
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
4597
|
-
this.addEventListener('mousedown', this.handleMenuMouseDown);
|
|
4598
|
-
this.addEventListener('auroMenuOption-mouseover', (evt) => {
|
|
4599
|
-
this.index = this.items.indexOf(evt.target);
|
|
4600
|
-
this.updateActiveOption(this.index);
|
|
4601
|
-
});
|
|
4602
|
-
} else {
|
|
4603
|
-
// make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
|
|
4604
|
-
this.handleNoCheckmarkAttr();
|
|
4605
|
-
}
|
|
6446
|
+
/**
|
|
6447
|
+
* Getter for loading placeholder state.
|
|
6448
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
6449
|
+
*/
|
|
6450
|
+
get hasLoadingPlaceholder() {
|
|
6451
|
+
return this.loadingSlots && this.loadingSlots.length > 0;
|
|
4606
6452
|
}
|
|
4607
6453
|
|
|
6454
|
+
/**
|
|
6455
|
+
* Renders the component.
|
|
6456
|
+
* @returns {boolean} - True if loading slots are present and non-empty.
|
|
6457
|
+
*/
|
|
4608
6458
|
render() {
|
|
4609
6459
|
if (this.loading) {
|
|
4610
|
-
return x$
|
|
6460
|
+
return x$2`
|
|
4611
6461
|
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
|
|
4612
6462
|
<div>
|
|
4613
6463
|
<slot name="loadingIcon"></slot>
|
|
@@ -4616,19 +6466,20 @@ class AuroMenu extends r$4 {
|
|
|
4616
6466
|
</auro-menuoption>
|
|
4617
6467
|
`;
|
|
4618
6468
|
}
|
|
4619
|
-
|
|
6469
|
+
|
|
6470
|
+
return x$2`<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
4620
6471
|
}
|
|
4621
6472
|
}
|
|
4622
6473
|
|
|
4623
|
-
var styleCss$1 = i$
|
|
6474
|
+
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}`;
|
|
4624
6475
|
|
|
4625
|
-
var colorCss$1 = i$
|
|
6476
|
+
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)}`;
|
|
4626
6477
|
|
|
4627
6478
|
/**
|
|
4628
6479
|
* @license
|
|
4629
6480
|
* Copyright 2018 Google LLC
|
|
4630
6481
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
4631
|
-
*/const o=o=>o??E$
|
|
6482
|
+
*/const o=o=>o??E$2;
|
|
4632
6483
|
|
|
4633
6484
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4634
6485
|
// See LICENSE in the project root for license information.
|
|
@@ -4640,7 +6491,7 @@ var colorCss$1 = i$b`:host{background-color:var(--ds-auro-menuoption-container-c
|
|
|
4640
6491
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
4641
6492
|
*/
|
|
4642
6493
|
|
|
4643
|
-
class AuroElement extends r$
|
|
6494
|
+
class AuroElement extends r$5 {
|
|
4644
6495
|
|
|
4645
6496
|
// function to define props used within the scope of this component
|
|
4646
6497
|
static get properties() {
|
|
@@ -4696,7 +6547,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
4696
6547
|
return _fetchMap.get(uri);
|
|
4697
6548
|
};
|
|
4698
6549
|
|
|
4699
|
-
var styleCss = i$
|
|
6550
|
+
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}`;
|
|
4700
6551
|
|
|
4701
6552
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4702
6553
|
// See LICENSE in the project root for license information.
|
|
@@ -4735,7 +6586,7 @@ class BaseIcon extends AuroElement {
|
|
|
4735
6586
|
}
|
|
4736
6587
|
|
|
4737
6588
|
static get styles() {
|
|
4738
|
-
return i$
|
|
6589
|
+
return i$c`
|
|
4739
6590
|
${styleCss}
|
|
4740
6591
|
`;
|
|
4741
6592
|
}
|
|
@@ -4777,9 +6628,9 @@ class BaseIcon extends AuroElement {
|
|
|
4777
6628
|
}
|
|
4778
6629
|
}
|
|
4779
6630
|
|
|
4780
|
-
var tokensCss = i$
|
|
6631
|
+
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)}`;
|
|
4781
6632
|
|
|
4782
|
-
var colorCss = i$
|
|
6633
|
+
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)}`;
|
|
4783
6634
|
|
|
4784
6635
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4785
6636
|
// See LICENSE in the project root for license information.
|
|
@@ -4841,7 +6692,7 @@ class AuroIcon extends BaseIcon {
|
|
|
4841
6692
|
this.success = false;
|
|
4842
6693
|
this.tertiary = false;
|
|
4843
6694
|
this.warning = false;
|
|
4844
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6695
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
4845
6696
|
}
|
|
4846
6697
|
|
|
4847
6698
|
// function to define props used within the scope of this component
|
|
@@ -4923,9 +6774,9 @@ class AuroIcon extends BaseIcon {
|
|
|
4923
6774
|
static get styles() {
|
|
4924
6775
|
return [
|
|
4925
6776
|
super.styles,
|
|
4926
|
-
i$
|
|
4927
|
-
i$
|
|
4928
|
-
i$
|
|
6777
|
+
i$c`${tokensCss}`,
|
|
6778
|
+
i$c`${styleCss}`,
|
|
6779
|
+
i$c`${colorCss}`
|
|
4929
6780
|
];
|
|
4930
6781
|
}
|
|
4931
6782
|
|
|
@@ -4938,7 +6789,7 @@ class AuroIcon extends BaseIcon {
|
|
|
4938
6789
|
*
|
|
4939
6790
|
*/
|
|
4940
6791
|
static register(name = "auro-icon") {
|
|
4941
|
-
AuroLibraryRuntimeUtils$
|
|
6792
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
4942
6793
|
}
|
|
4943
6794
|
|
|
4944
6795
|
connectedCallback() {
|
|
@@ -4967,20 +6818,20 @@ class AuroIcon extends BaseIcon {
|
|
|
4967
6818
|
'wrapper': true,
|
|
4968
6819
|
};
|
|
4969
6820
|
|
|
4970
|
-
return x$
|
|
6821
|
+
return x$2`
|
|
4971
6822
|
<div
|
|
4972
|
-
class="${e$
|
|
6823
|
+
class="${e$6(classes)}"
|
|
4973
6824
|
title="${o(this.title || undefined)}">
|
|
4974
6825
|
<span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
4975
|
-
${this.customSvg ? x$
|
|
6826
|
+
${this.customSvg ? x$2`
|
|
4976
6827
|
<slot name="svg"></slot>
|
|
4977
|
-
` : x$
|
|
6828
|
+
` : x$2`
|
|
4978
6829
|
${this.svg}
|
|
4979
6830
|
`
|
|
4980
6831
|
}
|
|
4981
6832
|
</span>
|
|
4982
6833
|
|
|
4983
|
-
<div class="${e$
|
|
6834
|
+
<div class="${e$6(a11y)}">
|
|
4984
6835
|
<slot></slot>
|
|
4985
6836
|
</div>
|
|
4986
6837
|
</div>
|
|
@@ -5006,14 +6857,14 @@ var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a sm
|
|
|
5006
6857
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
5007
6858
|
* @slot - Specifies text for an option, but is not the value.
|
|
5008
6859
|
*/
|
|
5009
|
-
class AuroMenuOption extends r$
|
|
6860
|
+
class AuroMenuOption extends r$5 {
|
|
5010
6861
|
constructor() {
|
|
5011
6862
|
super();
|
|
5012
6863
|
|
|
5013
6864
|
/**
|
|
5014
6865
|
* Generate unique names for dependency components.
|
|
5015
6866
|
*/
|
|
5016
|
-
const versioning = new AuroDependencyVersioning$
|
|
6867
|
+
const versioning = new AuroDependencyVersioning$2();
|
|
5017
6868
|
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
5018
6869
|
|
|
5019
6870
|
this.selected = false;
|
|
@@ -5028,7 +6879,7 @@ class AuroMenuOption extends r$4 {
|
|
|
5028
6879
|
/**
|
|
5029
6880
|
* @private
|
|
5030
6881
|
*/
|
|
5031
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6882
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
5032
6883
|
}
|
|
5033
6884
|
|
|
5034
6885
|
static get properties() {
|
|
@@ -5072,7 +6923,7 @@ class AuroMenuOption extends r$4 {
|
|
|
5072
6923
|
*
|
|
5073
6924
|
*/
|
|
5074
6925
|
static register(name = "auro-menuoption") {
|
|
5075
|
-
AuroLibraryRuntimeUtils$
|
|
6926
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
|
|
5076
6927
|
}
|
|
5077
6928
|
|
|
5078
6929
|
firstUpdated() {
|
|
@@ -5112,11 +6963,11 @@ class AuroMenuOption extends r$4 {
|
|
|
5112
6963
|
|
|
5113
6964
|
svg.setAttribute('slot', 'svg');
|
|
5114
6965
|
|
|
5115
|
-
return u$
|
|
6966
|
+
return u$4`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
5116
6967
|
}
|
|
5117
6968
|
|
|
5118
6969
|
render() {
|
|
5119
|
-
return u$
|
|
6970
|
+
return u$4`
|
|
5120
6971
|
${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
|
|
5121
6972
|
<slot></slot>
|
|
5122
6973
|
`;
|