@aurodesignsystem/auro-formkit 2.0.0-beta.30 → 2.0.0-beta.32
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/02882630667e46f8-meta.json +1 -0
- package/.turbo/cache/02882630667e46f8.tar.zst +0 -0
- package/.turbo/cache/0899fc2ef909db30-meta.json +1 -0
- package/.turbo/cache/0899fc2ef909db30.tar.zst +0 -0
- package/.turbo/cache/1d4280429ff4222f-meta.json +1 -1
- package/.turbo/cache/1e094164b4932553-meta.json +1 -0
- package/.turbo/cache/1e094164b4932553.tar.zst +0 -0
- package/.turbo/cache/1e3f844e58a3d4f2-meta.json +1 -0
- package/.turbo/cache/1e3f844e58a3d4f2.tar.zst +0 -0
- package/.turbo/cache/251ba344c6338ba3-meta.json +1 -1
- package/.turbo/cache/28fe2121c9ba81e2-meta.json +1 -0
- package/.turbo/cache/28fe2121c9ba81e2.tar.zst +0 -0
- package/.turbo/cache/298b6ff0272e6226-meta.json +1 -1
- package/.turbo/cache/2abb5400a01a1694-meta.json +1 -1
- package/.turbo/cache/30fda91ef83677e4-meta.json +1 -1
- package/.turbo/cache/3221d91a94756c26-meta.json +1 -1
- package/.turbo/cache/3ab09fe7cf32b3bf-meta.json +1 -1
- package/.turbo/cache/3f1b3db13386acdc-meta.json +1 -1
- package/.turbo/cache/430c124614841675-meta.json +1 -1
- package/.turbo/cache/45bdeb0396723b25-meta.json +1 -1
- package/.turbo/cache/4e8248fc9e1e3e8f-meta.json +1 -0
- package/.turbo/cache/4e8248fc9e1e3e8f.tar.zst +0 -0
- package/.turbo/cache/4e9c9a5dd62c50a4-meta.json +1 -1
- package/.turbo/cache/5326b73ddda05291-meta.json +1 -0
- package/.turbo/cache/5326b73ddda05291.tar.zst +0 -0
- package/.turbo/cache/5fc9a7a072827b7b-meta.json +1 -1
- package/.turbo/cache/62214e9883afcc4d-meta.json +1 -0
- package/.turbo/cache/62e73e98c9b176ea-meta.json +1 -0
- package/.turbo/cache/{5a78bd07d371dd47.tar.zst → 62e73e98c9b176ea.tar.zst} +0 -0
- package/.turbo/cache/6e0b3da6e3ff3718-meta.json +1 -0
- package/.turbo/cache/6e0b3da6e3ff3718.tar.zst +0 -0
- package/.turbo/cache/721262daa6b8164a-meta.json +1 -0
- package/.turbo/cache/721262daa6b8164a.tar.zst +0 -0
- package/.turbo/cache/753b119a389426be-meta.json +1 -1
- package/.turbo/cache/7593109ea54e7505-meta.json +1 -0
- package/.turbo/cache/7629bef0037115af-meta.json +1 -0
- package/.turbo/cache/76667a5d27a45c7a-meta.json +1 -0
- package/.turbo/cache/{559b052d8150dd3f.tar.zst → 76667a5d27a45c7a.tar.zst} +0 -0
- package/.turbo/cache/785960dbbde053b6-meta.json +1 -0
- package/.turbo/cache/785960dbbde053b6.tar.zst +0 -0
- package/.turbo/cache/91c75fdf2c775926-meta.json +1 -0
- package/.turbo/cache/92b4b6ba93458685-meta.json +1 -0
- package/.turbo/cache/9c15f2276d1905d6-meta.json +1 -0
- package/.turbo/cache/9c15f2276d1905d6.tar.zst +0 -0
- package/.turbo/cache/a263932c5b42ec4f-meta.json +1 -0
- package/.turbo/cache/{63f832b4947ecf9d.tar.zst → a263932c5b42ec4f.tar.zst} +0 -0
- package/.turbo/cache/b10915c26145587e-meta.json +1 -0
- package/.turbo/cache/b10915c26145587e.tar.zst +0 -0
- package/.turbo/cache/b169402fda42f218-meta.json +1 -0
- package/.turbo/cache/b169402fda42f218.tar.zst +0 -0
- package/.turbo/cache/b1f20257439cbded-meta.json +1 -0
- package/.turbo/cache/{e06dedab4c19ae2a.tar.zst → b1f20257439cbded.tar.zst} +0 -0
- package/.turbo/cache/bed01678759af66e-meta.json +1 -0
- package/.turbo/cache/{8cd5a06a396632cf.tar.zst → bed01678759af66e.tar.zst} +0 -0
- package/.turbo/cache/bf154f26b6bb6f24-meta.json +1 -0
- package/.turbo/cache/bf154f26b6bb6f24.tar.zst +0 -0
- package/.turbo/cache/bf3d1eace5e676f9-meta.json +1 -1
- package/.turbo/cache/c103542625831d7c-meta.json +1 -0
- package/.turbo/cache/c103542625831d7c.tar.zst +0 -0
- package/.turbo/cache/c860cecd25be20af-meta.json +1 -0
- package/.turbo/cache/ca9625ba0a5cd272-meta.json +1 -0
- package/.turbo/cache/ca9625ba0a5cd272.tar.zst +0 -0
- package/.turbo/cache/cbcd9db8ac9a2d52-meta.json +1 -1
- package/.turbo/cache/d3afdb9a7db9eacc-meta.json +1 -1
- package/.turbo/cache/d8ecdff9c663c38e-meta.json +1 -1
- package/.turbo/cache/de494df6a3006101-meta.json +1 -1
- package/.turbo/cache/e14312dd3d4148f7-meta.json +1 -0
- package/.turbo/cache/e56a9865641ec3e8-meta.json +1 -1
- package/.turbo/cache/e7ed9e7056d80938-meta.json +1 -1
- package/.turbo/cache/e837827cd24834c4-meta.json +1 -1
- package/.turbo/cache/e9ff93179777aa26-meta.json +1 -1
- package/.turbo/cache/ed455be2856be7ac-meta.json +1 -0
- package/.turbo/cache/f2e689c8cdd1aafe-meta.json +1 -0
- package/.turbo/cache/f473f3d9902768db-meta.json +1 -0
- package/.turbo/cache/f7ab9a13f9acc0ab-meta.json +1 -1
- package/.turbo/cache/ff3c8a3042cab66e-meta.json +1 -1
- package/CHANGELOG.md +15 -0
- package/components/checkbox/.turbo/turbo-build.log +3 -3
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/combobox/.turbo/turbo-build.log +3 -3
- package/components/combobox/README.md +4 -4
- package/components/combobox/demo/api.min.js +2 -2
- package/components/combobox/demo/index.min.js +2 -2
- package/components/combobox/dist/index.js +2 -2
- package/components/counter/.turbo/turbo-build.log +3 -12
- package/components/counter/.turbo/turbo-bundler.log +3 -3
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.min.js +3354 -170
- package/components/counter/demo/index.min.js +3354 -170
- package/components/counter/dist/index.js +3354 -170
- package/components/counter/package.json +1 -0
- package/components/datepicker/.turbo/turbo-build.log +3 -3
- package/components/datepicker/README.md +6 -6
- package/components/datepicker/demo/api.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/package.json +2 -2
- package/components/datepicker/src/styles/style-css.js +1 -1
- package/components/datepicker/src/styles/style.css +55 -29
- package/components/datepicker/src/styles/style.scss +45 -7
- package/components/dropdown/.turbo/turbo-build.log +2 -2
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +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/helptext/.turbo/turbo-build.log +1 -1
- package/components/helptext/.turbo/turbo-bundler.log +1 -1
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/src/styles/style-css.js +1 -1
- package/components/helptext/src/styles/style.css +5 -2
- package/components/helptext/src/styles/style.scss +5 -2
- package/components/input/.turbo/turbo-build.log +2 -2
- package/components/input/README.md +1 -1
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/menu/.turbo/turbo-build.log +3 -3
- package/components/menu/.turbo/turbo-bundler.log +3 -3
- package/components/menu/README.md +1 -1
- package/components/radio/.turbo/turbo-build.log +3 -3
- package/components/radio/README.md +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/select/.turbo/turbo-build.log +3 -3
- package/components/select/README.md +3 -3
- package/components/select/demo/api.min.js +1 -1
- package/components/select/demo/index.min.js +1 -1
- package/components/select/dist/index.js +1 -1
- package/package.json +1 -1
- package/.turbo/cache/019608f754b4fd0c-meta.json +0 -1
- package/.turbo/cache/019608f754b4fd0c.tar.zst +0 -0
- package/.turbo/cache/111ea1a7d5e86aac-meta.json +0 -1
- package/.turbo/cache/18ce0cc67c14e0c9-meta.json +0 -1
- package/.turbo/cache/18ce0cc67c14e0c9.tar.zst +0 -0
- package/.turbo/cache/3d05fb6e2d593287-meta.json +0 -1
- package/.turbo/cache/559b052d8150dd3f-meta.json +0 -1
- package/.turbo/cache/5748467be5ef9c07-meta.json +0 -1
- package/.turbo/cache/5748467be5ef9c07.tar.zst +0 -0
- package/.turbo/cache/59481fd7f6f355ed-meta.json +0 -1
- package/.turbo/cache/59481fd7f6f355ed.tar.zst +0 -0
- package/.turbo/cache/5a78bd07d371dd47-meta.json +0 -1
- package/.turbo/cache/63f832b4947ecf9d-meta.json +0 -1
- package/.turbo/cache/6a5dc307d8619c06-meta.json +0 -1
- package/.turbo/cache/6a5dc307d8619c06.tar.zst +0 -0
- package/.turbo/cache/6ed764f60d634993-meta.json +0 -1
- package/.turbo/cache/80ece7354266e40f-meta.json +0 -1
- package/.turbo/cache/80ece7354266e40f.tar.zst +0 -0
- package/.turbo/cache/846bade4a9a3eba9-meta.json +0 -1
- package/.turbo/cache/846bade4a9a3eba9.tar.zst +0 -0
- package/.turbo/cache/8ac38d70a60381cb-meta.json +0 -1
- package/.turbo/cache/8ac38d70a60381cb.tar.zst +0 -0
- package/.turbo/cache/8c637a8d4c2166c5-meta.json +0 -1
- package/.turbo/cache/8c637a8d4c2166c5.tar.zst +0 -0
- package/.turbo/cache/8cd5a06a396632cf-meta.json +0 -1
- package/.turbo/cache/970ba88c4c4092cd-meta.json +0 -1
- package/.turbo/cache/970ba88c4c4092cd.tar.zst +0 -0
- package/.turbo/cache/9db5147195c32672-meta.json +0 -1
- package/.turbo/cache/a002bc214179bedc-meta.json +0 -1
- package/.turbo/cache/a02c2bc2a4638817-meta.json +0 -1
- package/.turbo/cache/a02c2bc2a4638817.tar.zst +0 -0
- package/.turbo/cache/a7004571f6307848-meta.json +0 -1
- package/.turbo/cache/a7dea1f1ae1fdc27-meta.json +0 -1
- package/.turbo/cache/a7dea1f1ae1fdc27.tar.zst +0 -0
- package/.turbo/cache/a8307dcc447702ad-meta.json +0 -1
- package/.turbo/cache/a9dc1069fcd851ff-meta.json +0 -1
- package/.turbo/cache/a9dc1069fcd851ff.tar.zst +0 -0
- package/.turbo/cache/b4de0d19f9eeaceb-meta.json +0 -1
- package/.turbo/cache/b4de0d19f9eeaceb.tar.zst +0 -0
- package/.turbo/cache/b682d4cec0741fa1-meta.json +0 -1
- package/.turbo/cache/b682d4cec0741fa1.tar.zst +0 -0
- package/.turbo/cache/c27d47351838ceb1-meta.json +0 -1
- package/.turbo/cache/c7d435ade46f3c1e-meta.json +0 -1
- package/.turbo/cache/d0c4bf3a3a3840fd-meta.json +0 -1
- package/.turbo/cache/e06dedab4c19ae2a-meta.json +0 -1
- package/.turbo/cache/f6220a9af06bee74-meta.json +0 -1
- package/.turbo/cache/f6220a9af06bee74.tar.zst +0 -0
- /package/.turbo/cache/{111ea1a7d5e86aac.tar.zst → 62214e9883afcc4d.tar.zst} +0 -0
- /package/.turbo/cache/{9db5147195c32672.tar.zst → 7593109ea54e7505.tar.zst} +0 -0
- /package/.turbo/cache/{3d05fb6e2d593287.tar.zst → 7629bef0037115af.tar.zst} +0 -0
- /package/.turbo/cache/{c7d435ade46f3c1e.tar.zst → 91c75fdf2c775926.tar.zst} +0 -0
- /package/.turbo/cache/{d0c4bf3a3a3840fd.tar.zst → 92b4b6ba93458685.tar.zst} +0 -0
- /package/.turbo/cache/{a7004571f6307848.tar.zst → c860cecd25be20af.tar.zst} +0 -0
- /package/.turbo/cache/{a002bc214179bedc.tar.zst → e14312dd3d4148f7.tar.zst} +0 -0
- /package/.turbo/cache/{6ed764f60d634993.tar.zst → ed455be2856be7ac.tar.zst} +0 -0
- /package/.turbo/cache/{a8307dcc447702ad.tar.zst → f2e689c8cdd1aafe.tar.zst} +0 -0
- /package/.turbo/cache/{c27d47351838ceb1.tar.zst → f473f3d9902768db.tar.zst} +0 -0
|
@@ -1,68 +1,66 @@
|
|
|
1
|
-
import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* @license
|
|
5
3
|
* Copyright 2019 Google LLC
|
|
6
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
7
5
|
*/
|
|
8
|
-
const t$
|
|
6
|
+
const t$7=globalThis,e$c=t$7.ShadowRoot&&(undefined===t$7.ShadyCSS||t$7.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$c=new WeakMap;let n$a = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$7)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$c&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$c.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$c.set(s,t));}return t}toString(){return this.cssText}};const r$b=t=>new n$a("string"==typeof t?t:t+"",undefined,s$7),i$f=(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$a(o,t,s$7)},S$5=(s,o)=>{if(e$c)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$7.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$8=e$c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$b(e)})(t):t;
|
|
9
7
|
|
|
10
8
|
/**
|
|
11
9
|
* @license
|
|
12
10
|
* Copyright 2017 Google LLC
|
|
13
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
14
|
-
*/const{is:i$
|
|
12
|
+
*/const{is:i$e,defineProperty:e$b,getOwnPropertyDescriptor:r$a,getOwnPropertyNames:h$5,getOwnPropertySymbols:o$b,getPrototypeOf:n$9}=Object,a$7=globalThis,c$7=a$7.trustedTypes,l$7=c$7?c$7.emptyScript:"",p$5=a$7.reactiveElementPolyfillSupport,d$5=(t,s)=>t,u$7={toAttribute(t,s){switch(s){case Boolean:t=t?l$7: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$5=(t,s)=>!i$e(t,s),y$5={attribute:true,type:String,converter:u$7,reflect:false,hasChanged:f$5};Symbol.metadata??=Symbol("metadata"),a$7.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$5){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$b(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$a(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$5}static _$Ei(){if(this.hasOwnProperty(d$5("elementProperties")))return;const t=n$9(this);t.finalize(),undefined!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$5("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$5("properties"))){const t=this.properties,s=[...h$5(t),...o$b(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$8(s));}else undefined!==s&&i.push(c$8(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$5(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$7).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$7;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$5)(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$5("elementProperties")]=new Map,b$2[d$5("finalized")]=new Map,p$5?.({ReactiveElement:b$2}),(a$7.reactiveElementVersions??=[]).push("2.0.4");
|
|
15
13
|
|
|
16
14
|
/**
|
|
17
15
|
* @license
|
|
18
16
|
* Copyright 2017 Google LLC
|
|
19
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
20
18
|
*/
|
|
21
|
-
const t$
|
|
19
|
+
const t$6=globalThis,i$d=t$6.trustedTypes,s$6=i$d?i$d.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$a="$lit$",h$4=`lit$${Math.random().toFixed(9).slice(2)}$`,o$a="?"+h$4,n$8=`<${o$a}>`,r$9=document,l$6=()=>r$9.createComment(""),c$6=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$6=Array.isArray,u$6=t=>a$6(t)||"function"==typeof t?.[Symbol.iterator],d$4="[ \t\n\f\r]",f$4=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$2=/>/g,m$2=RegExp(`>|${d$4}(?:([^\\s"'>=/]+)(${d$4}*=${d$4}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$4=/'/g,g$2=/"/g,$$2=/^(?:script|style|textarea|title)$/i,y$4=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$4(1),T$2=Symbol.for("lit-noChange"),E$2=Symbol.for("lit-nothing"),A$2=new WeakMap,C$2=r$9.createTreeWalker(r$9,129);function P$2(t,i){if(!a$6(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s$6?s$6.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$4;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$4?"!--"===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$4,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$4):c===g$2||c===p$4?c=m$2:c===v$2||c===_$2?c=f$4:(c=m$2,r=undefined);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$4?s+n$8:d>=0?(o.push(a),s.slice(0,d)+e$a+s.slice(d)+h$4+x):s+h$4+(-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$a)){const i=v[a++],s=r.getAttribute(t).split(h$4),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$4)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$2.test(r.tagName)){const t=r.textContent.split(h$4),s=t.length-1;if(s>0){r.textContent=i$d?i$d.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$6()),C$2.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$6());}}}else if(8===r.nodeType)if(r.data===o$a)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$4,t+1));)d.push({type:7,index:c}),t+=h$4.length-1;}c++;}}static createElement(t,i){const s=r$9.createElement("template");return s.innerHTML=t,s}};function S$4(t,i,s=t,e){if(i===T$2)return i;let h=undefined!==e?s._$Co?.[e]:s._$Cl;const o=c$6(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$4(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$9).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$9,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$4(this,t,i),c$6(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$6(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$6(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$9.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$6(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$6()),this.O(l$6()),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$4(this,t,i,0),o=!c$6(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$4(this,e[s+n],i,n),r===T$2&&(r=this._$AH[n]),o||=!c$6(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$4(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$4(this,t);}};const j$2=t$6.litHtmlPolyfillSupport;j$2?.(N$2,R$2),(t$6.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$6(),t),t,undefined,s??{});}return h._$AI(t),h};
|
|
22
20
|
|
|
23
21
|
/**
|
|
24
22
|
* @license
|
|
25
23
|
* Copyright 2017 Google LLC
|
|
26
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/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$
|
|
25
|
+
*/let r$8 = 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$8._$litElement$=true,r$8["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$8});const i$c=globalThis.litElementPolyfillSupport;i$c?.({LitElement:r$8});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
28
26
|
|
|
29
27
|
/**
|
|
30
28
|
* @license
|
|
31
29
|
* Copyright 2020 Google LLC
|
|
32
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
33
31
|
*/
|
|
34
|
-
const a=Symbol.for(""),o$
|
|
32
|
+
const a$5=Symbol.for(""),o$9=t=>{if(t?.r===a$5)return t?._$litStatic$},s$5=t=>({_$litStatic$:t,r:a$5}),i$b=(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$5}),l$5=new Map,n$7=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$9(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$5.get(t))&&(n.raw=n,l$5.set(t,r=n)),e=u;}return t(r,...e)},u$5=n$7(x$2);
|
|
35
33
|
|
|
36
|
-
var styleButtonTokenCss = i$
|
|
34
|
+
var styleButtonTokenCss = i$f`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;
|
|
37
35
|
|
|
38
|
-
var styleButtonColorCss = i$
|
|
36
|
+
var styleButtonColorCss = i$f`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-color:var(--ds-auro-counter-control-border-active)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;
|
|
39
37
|
|
|
40
|
-
var styleButtonCss = i$
|
|
38
|
+
var styleButtonCss = i$f`*,*: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_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem);transform:unset}`;
|
|
41
39
|
|
|
42
40
|
/**
|
|
43
41
|
* @license
|
|
44
42
|
* Copyright 2017 Google LLC
|
|
45
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
46
44
|
*/
|
|
47
|
-
const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$
|
|
45
|
+
const t$5={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$9=t=>(...e)=>({_$litDirective$:t,values:e});let i$a = 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)}};
|
|
48
46
|
|
|
49
47
|
/**
|
|
50
48
|
* @license
|
|
51
49
|
* Copyright 2018 Google LLC
|
|
52
50
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
|
-
*/const e=e$
|
|
51
|
+
*/const e$8=e$9(class extends i$a{constructor(t){if(super(t),t.type!==t$5.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}});
|
|
54
52
|
|
|
55
53
|
/**
|
|
56
54
|
* @license
|
|
57
55
|
* Copyright 2018 Google LLC
|
|
58
56
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
|
-
*/const o=o=>o??E;
|
|
57
|
+
*/const o$8=o=>o??E$2;
|
|
60
58
|
|
|
61
59
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
62
60
|
// See LICENSE in the project root for license information.
|
|
63
61
|
|
|
64
62
|
|
|
65
|
-
class AuroDependencyVersioning {
|
|
63
|
+
let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
66
64
|
|
|
67
65
|
/**
|
|
68
66
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -88,7 +86,7 @@ class AuroDependencyVersioning {
|
|
|
88
86
|
*/
|
|
89
87
|
generateTag(baseName, version, tagClass) {
|
|
90
88
|
const elementName = this.generateElementName(baseName, version);
|
|
91
|
-
const tag = i$
|
|
89
|
+
const tag = i$b`${s$5(elementName)}`;
|
|
92
90
|
|
|
93
91
|
if (!customElements.get(elementName)) {
|
|
94
92
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -96,7 +94,7 @@ class AuroDependencyVersioning {
|
|
|
96
94
|
|
|
97
95
|
return tag;
|
|
98
96
|
}
|
|
99
|
-
}
|
|
97
|
+
};
|
|
100
98
|
|
|
101
99
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
102
100
|
// See LICENSE in the project root for license information.
|
|
@@ -105,7 +103,7 @@ class AuroDependencyVersioning {
|
|
|
105
103
|
|
|
106
104
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
107
105
|
|
|
108
|
-
class AuroLibraryRuntimeUtils {
|
|
106
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
109
107
|
|
|
110
108
|
/* eslint-disable jsdoc/require-param */
|
|
111
109
|
|
|
@@ -166,19 +164,19 @@ class AuroLibraryRuntimeUtils {
|
|
|
166
164
|
|
|
167
165
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
168
166
|
}
|
|
169
|
-
}
|
|
167
|
+
};
|
|
170
168
|
|
|
171
|
-
var styleCss$
|
|
169
|
+
var styleCss$9 = i$f`*,*: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_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
172
170
|
|
|
173
|
-
var colorCss$4 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
171
|
+
var colorCss$8 = i$f`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
174
172
|
|
|
175
|
-
var tokensCss$
|
|
173
|
+
var tokensCss$6 = i$f`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
|
|
176
174
|
|
|
177
|
-
var styleCss$
|
|
175
|
+
var styleCss$8 = i$f`*,*: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,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
178
176
|
|
|
179
|
-
var colorCss$
|
|
177
|
+
var colorCss$7 = i$f`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
180
178
|
|
|
181
|
-
var tokensCss$
|
|
179
|
+
var tokensCss$5 = i$f`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
|
|
182
180
|
|
|
183
181
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
184
182
|
// See LICENSE in the project root for license information.
|
|
@@ -203,7 +201,7 @@ var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds
|
|
|
203
201
|
*/
|
|
204
202
|
|
|
205
203
|
// build the component class
|
|
206
|
-
class AuroLoader extends r {
|
|
204
|
+
class AuroLoader extends r$8 {
|
|
207
205
|
constructor() {
|
|
208
206
|
super();
|
|
209
207
|
|
|
@@ -225,7 +223,7 @@ class AuroLoader extends r {
|
|
|
225
223
|
/**
|
|
226
224
|
* @private
|
|
227
225
|
*/
|
|
228
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
226
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
229
227
|
|
|
230
228
|
this.orbit = false;
|
|
231
229
|
this.ringworm = false;
|
|
@@ -257,9 +255,9 @@ class AuroLoader extends r {
|
|
|
257
255
|
|
|
258
256
|
static get styles() {
|
|
259
257
|
return [
|
|
260
|
-
i$
|
|
261
|
-
i$
|
|
262
|
-
i$
|
|
258
|
+
i$f`${styleCss$8}`,
|
|
259
|
+
i$f`${colorCss$7}`,
|
|
260
|
+
i$f`${tokensCss$5}`
|
|
263
261
|
];
|
|
264
262
|
}
|
|
265
263
|
|
|
@@ -272,7 +270,7 @@ class AuroLoader extends r {
|
|
|
272
270
|
*
|
|
273
271
|
*/
|
|
274
272
|
static register(name = "auro-loader") {
|
|
275
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
273
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
|
|
276
274
|
}
|
|
277
275
|
|
|
278
276
|
firstUpdated() {
|
|
@@ -305,14 +303,14 @@ class AuroLoader extends r {
|
|
|
305
303
|
|
|
306
304
|
// function that renders the HTML and CSS into the scope of the component
|
|
307
305
|
render() {
|
|
308
|
-
return x`
|
|
309
|
-
${this.defineTemplate().map((idx) => x`
|
|
306
|
+
return x$2`
|
|
307
|
+
${this.defineTemplate().map((idx) => x$2`
|
|
310
308
|
<span part="element" class="loader node-${idx}"></span>
|
|
311
309
|
`)}
|
|
312
310
|
|
|
313
311
|
<div class="no-animation">Loading...</div>
|
|
314
312
|
|
|
315
|
-
${this.ringworm ? x`
|
|
313
|
+
${this.ringworm ? x$2`
|
|
316
314
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
317
315
|
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
318
316
|
</svg>`
|
|
@@ -358,7 +356,7 @@ var loaderVersion = '3.1.1';
|
|
|
358
356
|
|
|
359
357
|
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
360
358
|
|
|
361
|
-
class AuroButton extends r {
|
|
359
|
+
class AuroButton extends r$8 {
|
|
362
360
|
|
|
363
361
|
constructor() {
|
|
364
362
|
super();
|
|
@@ -377,7 +375,7 @@ class AuroButton extends r {
|
|
|
377
375
|
/**
|
|
378
376
|
* Generate unique names for dependency components.
|
|
379
377
|
*/
|
|
380
|
-
const versioning = new AuroDependencyVersioning();
|
|
378
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
381
379
|
|
|
382
380
|
/**
|
|
383
381
|
* @private
|
|
@@ -387,9 +385,9 @@ class AuroButton extends r {
|
|
|
387
385
|
|
|
388
386
|
static get styles() {
|
|
389
387
|
return [
|
|
390
|
-
tokensCss$
|
|
391
|
-
styleCss$
|
|
392
|
-
colorCss$
|
|
388
|
+
tokensCss$6,
|
|
389
|
+
styleCss$9,
|
|
390
|
+
colorCss$8
|
|
393
391
|
];
|
|
394
392
|
}
|
|
395
393
|
|
|
@@ -472,7 +470,7 @@ class AuroButton extends r {
|
|
|
472
470
|
*
|
|
473
471
|
*/
|
|
474
472
|
static register(name = "auro-button") {
|
|
475
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
473
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
|
|
476
474
|
}
|
|
477
475
|
|
|
478
476
|
/**
|
|
@@ -526,27 +524,27 @@ class AuroButton extends r {
|
|
|
526
524
|
'loading': this.loading
|
|
527
525
|
};
|
|
528
526
|
|
|
529
|
-
return u`
|
|
527
|
+
return u$5`
|
|
530
528
|
<button
|
|
531
529
|
part="button"
|
|
532
|
-
aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
|
|
533
|
-
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
530
|
+
aria-label="${o$8(this.arialabel ? this.arialabel : undefined)}"
|
|
531
|
+
aria-labelledby="${o$8(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
534
532
|
?autofocus="${this.autofocus}"
|
|
535
|
-
class="${e(classes)}"
|
|
533
|
+
class="${e$8(classes)}"
|
|
536
534
|
?disabled="${this.disabled || this.loading}"
|
|
537
535
|
?onDark="${this.onDark}"
|
|
538
|
-
title="${o(this.title ? this.title : undefined)}"
|
|
539
|
-
name="${o(this.name ? this.name : undefined)}"
|
|
540
|
-
type="${o(this.type ? this.type : undefined)}"
|
|
541
|
-
variant="${o(this.variant ? this.variant : undefined)}"
|
|
542
|
-
.value="${o(this.value ? this.value : undefined)}"
|
|
536
|
+
title="${o$8(this.title ? this.title : undefined)}"
|
|
537
|
+
name="${o$8(this.name ? this.name : undefined)}"
|
|
538
|
+
type="${o$8(this.type ? this.type : undefined)}"
|
|
539
|
+
variant="${o$8(this.variant ? this.variant : undefined)}"
|
|
540
|
+
.value="${o$8(this.value ? this.value : undefined)}"
|
|
543
541
|
@click="${() => {}}"
|
|
544
542
|
>
|
|
545
|
-
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
543
|
+
${o$8(this.loading ? u$5`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
546
544
|
|
|
547
545
|
<span class="contentWrapper">
|
|
548
546
|
<span class="textSlot" part="text">
|
|
549
|
-
${this.iconOnly ? undefined : u`<slot></slot>`}
|
|
547
|
+
${this.iconOnly ? undefined : u$5`<slot></slot>`}
|
|
550
548
|
</span>
|
|
551
549
|
|
|
552
550
|
<span part="icon">
|
|
@@ -582,7 +580,7 @@ class AuroCounterButton extends AuroButton {
|
|
|
582
580
|
*
|
|
583
581
|
*/
|
|
584
582
|
static register(name = "auro-counter-button") {
|
|
585
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounterButton);
|
|
583
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroCounterButton);
|
|
586
584
|
}
|
|
587
585
|
}
|
|
588
586
|
|
|
@@ -602,7 +600,7 @@ if (!customElements.get("auro-counter-button")) {
|
|
|
602
600
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
603
601
|
*/
|
|
604
602
|
|
|
605
|
-
class AuroElement extends r {
|
|
603
|
+
let AuroElement$1 = class AuroElement extends r$8 {
|
|
606
604
|
|
|
607
605
|
// function to define props used within the scope of this component
|
|
608
606
|
static get properties() {
|
|
@@ -626,13 +624,13 @@ class AuroElement extends r {
|
|
|
626
624
|
|
|
627
625
|
return 'false'
|
|
628
626
|
}
|
|
629
|
-
}
|
|
627
|
+
};
|
|
630
628
|
|
|
631
|
-
var error = {"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>"};
|
|
629
|
+
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>"};
|
|
632
630
|
|
|
633
631
|
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
634
632
|
|
|
635
|
-
const _fetchMap = new Map();
|
|
633
|
+
const _fetchMap$1 = new Map();
|
|
636
634
|
|
|
637
635
|
/**
|
|
638
636
|
* A callback to parse Response body.
|
|
@@ -650,15 +648,15 @@ const _fetchMap = new Map();
|
|
|
650
648
|
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
651
649
|
* @returns {Promise}
|
|
652
650
|
*/
|
|
653
|
-
const cacheFetch = (uri, options = {}) => {
|
|
651
|
+
const cacheFetch$1 = (uri, options = {}) => {
|
|
654
652
|
const responseParser = options.responseParser || ((response) => response.text());
|
|
655
|
-
if (!_fetchMap.has(uri)) {
|
|
656
|
-
_fetchMap.set(uri, fetch(uri).then(responseParser));
|
|
653
|
+
if (!_fetchMap$1.has(uri)) {
|
|
654
|
+
_fetchMap$1.set(uri, fetch(uri).then(responseParser));
|
|
657
655
|
}
|
|
658
|
-
return _fetchMap.get(uri);
|
|
656
|
+
return _fetchMap$1.get(uri);
|
|
659
657
|
};
|
|
660
658
|
|
|
661
|
-
var styleCss$
|
|
659
|
+
var styleCss$7 = i$f`*,*: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}`;
|
|
662
660
|
|
|
663
661
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
664
662
|
// See LICENSE in the project root for license information.
|
|
@@ -671,7 +669,7 @@ var styleCss$3 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-red
|
|
|
671
669
|
*/
|
|
672
670
|
|
|
673
671
|
// build the component class
|
|
674
|
-
class BaseIcon extends AuroElement {
|
|
672
|
+
let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
675
673
|
constructor() {
|
|
676
674
|
super();
|
|
677
675
|
this.onDark = false;
|
|
@@ -697,8 +695,8 @@ class BaseIcon extends AuroElement {
|
|
|
697
695
|
}
|
|
698
696
|
|
|
699
697
|
static get styles() {
|
|
700
|
-
return i$
|
|
701
|
-
${styleCss$
|
|
698
|
+
return i$f`
|
|
699
|
+
${styleCss$7}
|
|
702
700
|
`;
|
|
703
701
|
}
|
|
704
702
|
|
|
@@ -713,9 +711,9 @@ class BaseIcon extends AuroElement {
|
|
|
713
711
|
let iconHTML = '';
|
|
714
712
|
|
|
715
713
|
if (category === 'logos') {
|
|
716
|
-
iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
|
|
714
|
+
iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`);
|
|
717
715
|
} else {
|
|
718
|
-
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
716
|
+
iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
|
|
719
717
|
}
|
|
720
718
|
|
|
721
719
|
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
@@ -731,17 +729,17 @@ class BaseIcon extends AuroElement {
|
|
|
731
729
|
if (svg) {
|
|
732
730
|
this.svg = svg;
|
|
733
731
|
} else if (!svg) {
|
|
734
|
-
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
732
|
+
const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
|
|
735
733
|
|
|
736
734
|
this.svg = penDOM.body.firstChild;
|
|
737
735
|
}
|
|
738
736
|
}
|
|
739
737
|
}
|
|
740
|
-
}
|
|
738
|
+
};
|
|
741
739
|
|
|
742
|
-
var tokensCss$
|
|
740
|
+
var tokensCss$4 = i$f`: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)}`;
|
|
743
741
|
|
|
744
|
-
var colorCss$
|
|
742
|
+
var colorCss$6 = i$f`: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)}`;
|
|
745
743
|
|
|
746
744
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
747
745
|
// See LICENSE in the project root for license information.
|
|
@@ -774,7 +772,7 @@ var colorCss$2 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
774
772
|
*/
|
|
775
773
|
|
|
776
774
|
// build the component class
|
|
777
|
-
class AuroIcon extends BaseIcon {
|
|
775
|
+
let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
778
776
|
constructor() {
|
|
779
777
|
super();
|
|
780
778
|
|
|
@@ -803,7 +801,7 @@ class AuroIcon extends BaseIcon {
|
|
|
803
801
|
this.success = false;
|
|
804
802
|
this.tertiary = false;
|
|
805
803
|
this.warning = false;
|
|
806
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
804
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
807
805
|
}
|
|
808
806
|
|
|
809
807
|
// function to define props used within the scope of this component
|
|
@@ -885,9 +883,9 @@ class AuroIcon extends BaseIcon {
|
|
|
885
883
|
static get styles() {
|
|
886
884
|
return [
|
|
887
885
|
super.styles,
|
|
888
|
-
i$
|
|
889
|
-
i$
|
|
890
|
-
i$
|
|
886
|
+
i$f`${tokensCss$4}`,
|
|
887
|
+
i$f`${styleCss$7}`,
|
|
888
|
+
i$f`${colorCss$6}`
|
|
891
889
|
];
|
|
892
890
|
}
|
|
893
891
|
|
|
@@ -900,7 +898,7 @@ class AuroIcon extends BaseIcon {
|
|
|
900
898
|
*
|
|
901
899
|
*/
|
|
902
900
|
static register(name = "auro-icon") {
|
|
903
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
901
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
904
902
|
}
|
|
905
903
|
|
|
906
904
|
connectedCallback() {
|
|
@@ -929,28 +927,28 @@ class AuroIcon extends BaseIcon {
|
|
|
929
927
|
'wrapper': true,
|
|
930
928
|
};
|
|
931
929
|
|
|
932
|
-
return x`
|
|
930
|
+
return x$2`
|
|
933
931
|
<div
|
|
934
|
-
class="${e(classes)}"
|
|
935
|
-
title="${o(this.title || undefined)}">
|
|
936
|
-
<span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
937
|
-
${this.customSvg ? x`
|
|
932
|
+
class="${e$8(classes)}"
|
|
933
|
+
title="${o$8(this.title || undefined)}">
|
|
934
|
+
<span aria-hidden="${o$8(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
935
|
+
${this.customSvg ? x$2`
|
|
938
936
|
<slot name="svg"></slot>
|
|
939
|
-
` : x`
|
|
937
|
+
` : x$2`
|
|
940
938
|
${this.svg}
|
|
941
939
|
`
|
|
942
940
|
}
|
|
943
941
|
</span>
|
|
944
942
|
|
|
945
|
-
<div class="${e(a11y)}">
|
|
943
|
+
<div class="${e$8(a11y)}">
|
|
946
944
|
<slot></slot>
|
|
947
945
|
</div>
|
|
948
946
|
</div>
|
|
949
947
|
`;
|
|
950
948
|
}
|
|
951
|
-
}
|
|
949
|
+
};
|
|
952
950
|
|
|
953
|
-
var iconVersion = '6.1.2';
|
|
951
|
+
var iconVersion$1 = '6.1.2';
|
|
954
952
|
|
|
955
953
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
956
954
|
// See LICENSE in the project root for license information.
|
|
@@ -958,7 +956,7 @@ var iconVersion = '6.1.2';
|
|
|
958
956
|
|
|
959
957
|
class AuroFormValidation {
|
|
960
958
|
constructor() {
|
|
961
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
959
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
962
960
|
}
|
|
963
961
|
|
|
964
962
|
/**
|
|
@@ -1285,7 +1283,7 @@ class IconUtil {
|
|
|
1285
1283
|
|
|
1286
1284
|
svg.setAttribute('slot', 'svg');
|
|
1287
1285
|
|
|
1288
|
-
return u`${svg}`;
|
|
1286
|
+
return u$5`${svg}`;
|
|
1289
1287
|
}
|
|
1290
1288
|
}
|
|
1291
1289
|
|
|
@@ -1293,11 +1291,11 @@ var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width"
|
|
|
1293
1291
|
|
|
1294
1292
|
var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","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":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" 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/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
|
|
1295
1293
|
|
|
1296
|
-
var tokensCss = i$
|
|
1294
|
+
var tokensCss$3 = i$f`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8)}`;
|
|
1297
1295
|
|
|
1298
|
-
var colorCss$
|
|
1296
|
+
var colorCss$5 = i$f`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;
|
|
1299
1297
|
|
|
1300
|
-
var styleCss$
|
|
1298
|
+
var styleCss$6 = i$f`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;line-height:0}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
|
|
1301
1299
|
|
|
1302
1300
|
/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
|
|
1303
1301
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -1315,7 +1313,7 @@ var styleCss$2 = i$5`.counter{display:flex;align-items:center;justify-content:sp
|
|
|
1315
1313
|
* @slot Default - Main label content for the counter.
|
|
1316
1314
|
* @slot description - Descriptive content for the counter.
|
|
1317
1315
|
*/
|
|
1318
|
-
class AuroCounter extends r {
|
|
1316
|
+
class AuroCounter extends r$8 {
|
|
1319
1317
|
constructor() {
|
|
1320
1318
|
super();
|
|
1321
1319
|
|
|
@@ -1336,14 +1334,14 @@ class AuroCounter extends r {
|
|
|
1336
1334
|
* Generate unique names for dependency components.
|
|
1337
1335
|
* @private
|
|
1338
1336
|
*/
|
|
1339
|
-
const versioning = new AuroDependencyVersioning();
|
|
1337
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
1340
1338
|
|
|
1341
1339
|
/**
|
|
1342
1340
|
* Dynamically generated icon tag for counter buttons.
|
|
1343
1341
|
* @private
|
|
1344
1342
|
* @type {string}
|
|
1345
1343
|
*/
|
|
1346
|
-
this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
|
|
1344
|
+
this.iconTag = versioning.generateTag("auro-icon", iconVersion$1, AuroIcon$1);
|
|
1347
1345
|
}
|
|
1348
1346
|
|
|
1349
1347
|
/**
|
|
@@ -1417,14 +1415,14 @@ class AuroCounter extends r {
|
|
|
1417
1415
|
* AuroCounter.register("custom-counter") // registers <custom-counter/>
|
|
1418
1416
|
*/
|
|
1419
1417
|
static register(name = "auro-counter") {
|
|
1420
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounter);
|
|
1418
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroCounter);
|
|
1421
1419
|
}
|
|
1422
1420
|
|
|
1423
1421
|
static get styles() {
|
|
1424
1422
|
return [
|
|
1425
|
-
tokensCss,
|
|
1426
|
-
colorCss$
|
|
1427
|
-
styleCss$
|
|
1423
|
+
tokensCss$3,
|
|
1424
|
+
colorCss$5,
|
|
1425
|
+
styleCss$6
|
|
1428
1426
|
];
|
|
1429
1427
|
}
|
|
1430
1428
|
|
|
@@ -1550,7 +1548,7 @@ class AuroCounter extends r {
|
|
|
1550
1548
|
}
|
|
1551
1549
|
|
|
1552
1550
|
render() {
|
|
1553
|
-
return u`
|
|
1551
|
+
return u$5`
|
|
1554
1552
|
<div class="counter">
|
|
1555
1553
|
<div class="content" >
|
|
1556
1554
|
<label class="label"><slot></slot></label>
|
|
@@ -1583,102 +1581,3288 @@ class AuroCounter extends r {
|
|
|
1583
1581
|
}
|
|
1584
1582
|
}
|
|
1585
1583
|
|
|
1586
|
-
var styleCss$
|
|
1584
|
+
var styleCss$5 = i$f`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:auto;text-overflow:ellipsis}[auro-dropdown]{display:block}`;
|
|
1587
1585
|
|
|
1588
|
-
|
|
1586
|
+
/**
|
|
1587
|
+
* @license
|
|
1588
|
+
* Copyright 2017 Google LLC
|
|
1589
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1590
|
+
*/
|
|
1591
|
+
const t$4=globalThis,i$9=t$4.trustedTypes,s$4=i$9?i$9.createPolicy("lit-html",{createHTML:t=>t}):undefined,e$7="$lit$",h$3=`lit$${Math.random().toFixed(9).slice(2)}$`,o$7="?"+h$3,n$6=`<${o$7}>`,r$7=document,l$4=()=>r$7.createComment(""),c$5=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$4=Array.isArray,u$4=t=>a$4(t)||"function"==typeof t?.[Symbol.iterator],d$3="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$1=RegExp(`>|${d$3}(?:([^\\s"'>=/]+)(${d$3}*=${d$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$3(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$7.createTreeWalker(r$7,129);function P$1(t,i){if(!a$4(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s$4?s$4.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$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$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$3,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$3):c===g$1||c===p$3?c=m$1:c===v$1||c===_$1?c=f$3:(c=m$1,r=undefined);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$6:d>=0?(o.push(a),s.slice(0,d)+e$7+s.slice(d)+h$3+x):s+h$3+(-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$7)){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$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$3)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$3),s=t.length-1;if(s>0){r.textContent=i$9?i$9.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$4()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$4());}}}else if(8===r.nodeType)if(r.data===o$7)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$7.createElement("template");return s.innerHTML=t,s}};function S$3(t,i,s=t,e){if(i===T$1)return i;let h=undefined!==e?s._$Co?.[e]:s._$Cl;const o=c$5(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$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$7).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$7,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$3(this,t,i),c$5(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$4(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$5(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$7.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$4(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$4()),this.O(l$4()),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$3(this,t,i,0),o=!c$5(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$3(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$5(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$3(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$3(this,t);}};const j$1=t$4.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$4.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$4(),t),t,undefined,s??{});}return h._$AI(t),h};
|
|
1592
|
+
|
|
1593
|
+
/**
|
|
1594
|
+
* @license
|
|
1595
|
+
* Copyright 2020 Google LLC
|
|
1596
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1597
|
+
*/
|
|
1598
|
+
const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({_$litStatic$:t,r:a$3}),i$8=(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$3}),l$3=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$6(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$3.get(t))&&(n.raw=n,l$3.set(t,r=n)),e=u;}return t(r,...e)},u$3=n$5(x$1);
|
|
1599
|
+
|
|
1600
|
+
/**
|
|
1601
|
+
* @license
|
|
1602
|
+
* Copyright 2019 Google LLC
|
|
1603
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1604
|
+
*/
|
|
1605
|
+
const t$3=globalThis,e$6=t$3.ShadowRoot&&(undefined===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$5=new WeakMap;let n$4 = 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$6&&undefined===t){const e=undefined!==s&&1===s.length;e&&(t=o$5.get(s)),undefined===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$6=t=>new n$4("string"==typeof t?t:t+"",undefined,s$2),i$7=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$4(o,t,s$2)},S$2=(s,o)=>{if(e$6)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;undefined!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$4=e$6?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$6(e)})(t):t;
|
|
1589
1606
|
|
|
1590
|
-
|
|
1607
|
+
/**
|
|
1608
|
+
* @license
|
|
1609
|
+
* Copyright 2017 Google LLC
|
|
1610
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1611
|
+
*/const{is:i$6,defineProperty:e$5,getOwnPropertyDescriptor:r$5,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$3}=Object,a$2=globalThis,c$3=a$2.trustedTypes,l$2=c$3?c$3.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$2=(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$2=(t,s)=>!i$6(t,s),y$2={attribute:true,type:String,converter:u$2,reflect:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2.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$5(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$5(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$3(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$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(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$4(s));}else undefined!==s&&i.push(c$4(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$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$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$2.reactiveElementVersions??=[]).push("2.0.4");
|
|
1591
1612
|
|
|
1592
|
-
|
|
1613
|
+
/**
|
|
1614
|
+
* @license
|
|
1615
|
+
* Copyright 2017 Google LLC
|
|
1616
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1617
|
+
*/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$5=globalThis.litElementPolyfillSupport;i$5?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
1593
1618
|
|
|
1594
|
-
// Copyright (c)
|
|
1619
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1595
1620
|
// See LICENSE in the project root for license information.
|
|
1596
1621
|
|
|
1622
|
+
// ---------------------------------------------------------------------
|
|
1597
1623
|
|
|
1598
|
-
|
|
1599
|
-
* Auro Counter Wrapper is a group of counter components.
|
|
1600
|
-
*
|
|
1601
|
-
* This web component provides a flexible interface for grouping multiple counters, supporting
|
|
1602
|
-
* validation, custom validity messages, and disabled states based on the group's value.
|
|
1603
|
-
*
|
|
1604
|
-
* @element auro-counter-group
|
|
1605
|
-
* @extends LitElement
|
|
1606
|
-
* @slot Default - Slot for counter elements.
|
|
1607
|
-
*/
|
|
1608
|
-
class AuroCounterWrapper extends r {
|
|
1624
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1609
1625
|
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1626
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
1627
|
+
|
|
1628
|
+
/* eslint-disable jsdoc/require-param */
|
|
1629
|
+
|
|
1630
|
+
/**
|
|
1631
|
+
* This will register a new custom element with the browser.
|
|
1632
|
+
* @param {String} name - The name of the custom element.
|
|
1633
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1634
|
+
* @returns {void}
|
|
1635
|
+
*/
|
|
1636
|
+
registerComponent(name, componentClass) {
|
|
1637
|
+
if (!customElements.get(name)) {
|
|
1638
|
+
customElements.define(name, class extends componentClass {});
|
|
1639
|
+
}
|
|
1615
1640
|
}
|
|
1616
1641
|
|
|
1617
1642
|
/**
|
|
1618
|
-
*
|
|
1619
|
-
* @
|
|
1620
|
-
* @example
|
|
1621
|
-
* AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
|
|
1643
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1644
|
+
* @returns {void}
|
|
1622
1645
|
*/
|
|
1623
|
-
|
|
1624
|
-
|
|
1646
|
+
closestElement(
|
|
1647
|
+
selector, // selector like in .closest()
|
|
1648
|
+
base = this, // extra functionality to skip a parent
|
|
1649
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1650
|
+
!el || el === document || el === window
|
|
1651
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1652
|
+
: found
|
|
1653
|
+
? found // found a selector INside this element
|
|
1654
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1655
|
+
) {
|
|
1656
|
+
return __Closest(base);
|
|
1625
1657
|
}
|
|
1658
|
+
/* eslint-enable jsdoc/require-param */
|
|
1626
1659
|
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1660
|
+
/**
|
|
1661
|
+
* 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.
|
|
1662
|
+
* @param {Object} elem - The element to check.
|
|
1663
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1664
|
+
* @returns {void}
|
|
1665
|
+
*/
|
|
1666
|
+
handleComponentTagRename(elem, tagName) {
|
|
1667
|
+
const tag = tagName.toLowerCase();
|
|
1668
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1669
|
+
|
|
1670
|
+
if (elemTag !== tag) {
|
|
1671
|
+
elem.setAttribute(tag, true);
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
/**
|
|
1676
|
+
* Validates if an element is a specific Auro component.
|
|
1677
|
+
* @param {Object} elem - The element to validate.
|
|
1678
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1679
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1680
|
+
*/
|
|
1681
|
+
elementMatch(elem, tagName) {
|
|
1682
|
+
const tag = tagName.toLowerCase();
|
|
1683
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1684
|
+
|
|
1685
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1686
|
+
}
|
|
1687
|
+
};
|
|
1688
|
+
|
|
1689
|
+
/**
|
|
1690
|
+
* Custom positioning reference element.
|
|
1691
|
+
* @see https://floating-ui.com/docs/virtual-elements
|
|
1692
|
+
*/
|
|
1693
|
+
|
|
1694
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
1695
|
+
const alignments = ['start', 'end'];
|
|
1696
|
+
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
1697
|
+
const min = Math.min;
|
|
1698
|
+
const max = Math.max;
|
|
1699
|
+
const round = Math.round;
|
|
1700
|
+
const floor = Math.floor;
|
|
1701
|
+
const createCoords = v => ({
|
|
1702
|
+
x: v,
|
|
1703
|
+
y: v
|
|
1704
|
+
});
|
|
1705
|
+
const oppositeSideMap = {
|
|
1706
|
+
left: 'right',
|
|
1707
|
+
right: 'left',
|
|
1708
|
+
bottom: 'top',
|
|
1709
|
+
top: 'bottom'
|
|
1710
|
+
};
|
|
1711
|
+
const oppositeAlignmentMap = {
|
|
1712
|
+
start: 'end',
|
|
1713
|
+
end: 'start'
|
|
1714
|
+
};
|
|
1715
|
+
function evaluate(value, param) {
|
|
1716
|
+
return typeof value === 'function' ? value(param) : value;
|
|
1717
|
+
}
|
|
1718
|
+
function getSide(placement) {
|
|
1719
|
+
return placement.split('-')[0];
|
|
1720
|
+
}
|
|
1721
|
+
function getAlignment(placement) {
|
|
1722
|
+
return placement.split('-')[1];
|
|
1723
|
+
}
|
|
1724
|
+
function getOppositeAxis(axis) {
|
|
1725
|
+
return axis === 'x' ? 'y' : 'x';
|
|
1726
|
+
}
|
|
1727
|
+
function getAxisLength(axis) {
|
|
1728
|
+
return axis === 'y' ? 'height' : 'width';
|
|
1729
|
+
}
|
|
1730
|
+
function getSideAxis(placement) {
|
|
1731
|
+
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
|
1732
|
+
}
|
|
1733
|
+
function getAlignmentAxis(placement) {
|
|
1734
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
1735
|
+
}
|
|
1736
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
1737
|
+
if (rtl === undefined) {
|
|
1738
|
+
rtl = false;
|
|
1739
|
+
}
|
|
1740
|
+
const alignment = getAlignment(placement);
|
|
1741
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
1742
|
+
const length = getAxisLength(alignmentAxis);
|
|
1743
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
1744
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
1745
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
1746
|
+
}
|
|
1747
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
1748
|
+
}
|
|
1749
|
+
function getExpandedPlacements(placement) {
|
|
1750
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
1751
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
1752
|
+
}
|
|
1753
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
1754
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
1755
|
+
}
|
|
1756
|
+
function getSideList(side, isStart, rtl) {
|
|
1757
|
+
const lr = ['left', 'right'];
|
|
1758
|
+
const rl = ['right', 'left'];
|
|
1759
|
+
const tb = ['top', 'bottom'];
|
|
1760
|
+
const bt = ['bottom', 'top'];
|
|
1761
|
+
switch (side) {
|
|
1762
|
+
case 'top':
|
|
1763
|
+
case 'bottom':
|
|
1764
|
+
if (rtl) return isStart ? rl : lr;
|
|
1765
|
+
return isStart ? lr : rl;
|
|
1766
|
+
case 'left':
|
|
1767
|
+
case 'right':
|
|
1768
|
+
return isStart ? tb : bt;
|
|
1769
|
+
default:
|
|
1770
|
+
return [];
|
|
1771
|
+
}
|
|
1772
|
+
}
|
|
1773
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
1774
|
+
const alignment = getAlignment(placement);
|
|
1775
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
1776
|
+
if (alignment) {
|
|
1777
|
+
list = list.map(side => side + "-" + alignment);
|
|
1778
|
+
if (flipAlignment) {
|
|
1779
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
1780
|
+
}
|
|
1630
1781
|
}
|
|
1782
|
+
return list;
|
|
1783
|
+
}
|
|
1784
|
+
function getOppositePlacement(placement) {
|
|
1785
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
1786
|
+
}
|
|
1787
|
+
function expandPaddingObject(padding) {
|
|
1788
|
+
return {
|
|
1789
|
+
top: 0,
|
|
1790
|
+
right: 0,
|
|
1791
|
+
bottom: 0,
|
|
1792
|
+
left: 0,
|
|
1793
|
+
...padding
|
|
1794
|
+
};
|
|
1795
|
+
}
|
|
1796
|
+
function getPaddingObject(padding) {
|
|
1797
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
1798
|
+
top: padding,
|
|
1799
|
+
right: padding,
|
|
1800
|
+
bottom: padding,
|
|
1801
|
+
left: padding
|
|
1802
|
+
};
|
|
1803
|
+
}
|
|
1804
|
+
function rectToClientRect(rect) {
|
|
1805
|
+
const {
|
|
1806
|
+
x,
|
|
1807
|
+
y,
|
|
1808
|
+
width,
|
|
1809
|
+
height
|
|
1810
|
+
} = rect;
|
|
1811
|
+
return {
|
|
1812
|
+
width,
|
|
1813
|
+
height,
|
|
1814
|
+
top: y,
|
|
1815
|
+
left: x,
|
|
1816
|
+
right: x + width,
|
|
1817
|
+
bottom: y + height,
|
|
1818
|
+
x,
|
|
1819
|
+
y
|
|
1820
|
+
};
|
|
1631
1821
|
}
|
|
1632
1822
|
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1823
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
1824
|
+
let {
|
|
1825
|
+
reference,
|
|
1826
|
+
floating
|
|
1827
|
+
} = _ref;
|
|
1828
|
+
const sideAxis = getSideAxis(placement);
|
|
1829
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
1830
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
1831
|
+
const side = getSide(placement);
|
|
1832
|
+
const isVertical = sideAxis === 'y';
|
|
1833
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
1834
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
1835
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
1836
|
+
let coords;
|
|
1837
|
+
switch (side) {
|
|
1838
|
+
case 'top':
|
|
1839
|
+
coords = {
|
|
1840
|
+
x: commonX,
|
|
1841
|
+
y: reference.y - floating.height
|
|
1842
|
+
};
|
|
1843
|
+
break;
|
|
1844
|
+
case 'bottom':
|
|
1845
|
+
coords = {
|
|
1846
|
+
x: commonX,
|
|
1847
|
+
y: reference.y + reference.height
|
|
1848
|
+
};
|
|
1849
|
+
break;
|
|
1850
|
+
case 'right':
|
|
1851
|
+
coords = {
|
|
1852
|
+
x: reference.x + reference.width,
|
|
1853
|
+
y: commonY
|
|
1854
|
+
};
|
|
1855
|
+
break;
|
|
1856
|
+
case 'left':
|
|
1857
|
+
coords = {
|
|
1858
|
+
x: reference.x - floating.width,
|
|
1859
|
+
y: commonY
|
|
1860
|
+
};
|
|
1861
|
+
break;
|
|
1862
|
+
default:
|
|
1863
|
+
coords = {
|
|
1864
|
+
x: reference.x,
|
|
1865
|
+
y: reference.y
|
|
1866
|
+
};
|
|
1867
|
+
}
|
|
1868
|
+
switch (getAlignment(placement)) {
|
|
1869
|
+
case 'start':
|
|
1870
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1871
|
+
break;
|
|
1872
|
+
case 'end':
|
|
1873
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1874
|
+
break;
|
|
1875
|
+
}
|
|
1876
|
+
return coords;
|
|
1637
1877
|
}
|
|
1638
1878
|
|
|
1639
|
-
|
|
1879
|
+
/**
|
|
1880
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
1881
|
+
* next to a given reference element.
|
|
1882
|
+
*
|
|
1883
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
1884
|
+
* write one for the platform you are using Floating UI with.
|
|
1885
|
+
*/
|
|
1886
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
1887
|
+
const {
|
|
1888
|
+
placement = 'bottom',
|
|
1889
|
+
strategy = 'absolute',
|
|
1890
|
+
middleware = [],
|
|
1891
|
+
platform
|
|
1892
|
+
} = config;
|
|
1893
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
1894
|
+
const rtl = await (platform.isRTL == null ? undefined : platform.isRTL(floating));
|
|
1895
|
+
let rects = await platform.getElementRects({
|
|
1896
|
+
reference,
|
|
1897
|
+
floating,
|
|
1898
|
+
strategy
|
|
1899
|
+
});
|
|
1900
|
+
let {
|
|
1901
|
+
x,
|
|
1902
|
+
y
|
|
1903
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
1904
|
+
let statefulPlacement = placement;
|
|
1905
|
+
let middlewareData = {};
|
|
1906
|
+
let resetCount = 0;
|
|
1907
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
1908
|
+
const {
|
|
1909
|
+
name,
|
|
1910
|
+
fn
|
|
1911
|
+
} = validMiddleware[i];
|
|
1912
|
+
const {
|
|
1913
|
+
x: nextX,
|
|
1914
|
+
y: nextY,
|
|
1915
|
+
data,
|
|
1916
|
+
reset
|
|
1917
|
+
} = await fn({
|
|
1918
|
+
x,
|
|
1919
|
+
y,
|
|
1920
|
+
initialPlacement: placement,
|
|
1921
|
+
placement: statefulPlacement,
|
|
1922
|
+
strategy,
|
|
1923
|
+
middlewareData,
|
|
1924
|
+
rects,
|
|
1925
|
+
platform,
|
|
1926
|
+
elements: {
|
|
1927
|
+
reference,
|
|
1928
|
+
floating
|
|
1929
|
+
}
|
|
1930
|
+
});
|
|
1931
|
+
x = nextX != null ? nextX : x;
|
|
1932
|
+
y = nextY != null ? nextY : y;
|
|
1933
|
+
middlewareData = {
|
|
1934
|
+
...middlewareData,
|
|
1935
|
+
[name]: {
|
|
1936
|
+
...middlewareData[name],
|
|
1937
|
+
...data
|
|
1938
|
+
}
|
|
1939
|
+
};
|
|
1940
|
+
if (reset && resetCount <= 50) {
|
|
1941
|
+
resetCount++;
|
|
1942
|
+
if (typeof reset === 'object') {
|
|
1943
|
+
if (reset.placement) {
|
|
1944
|
+
statefulPlacement = reset.placement;
|
|
1945
|
+
}
|
|
1946
|
+
if (reset.rects) {
|
|
1947
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
1948
|
+
reference,
|
|
1949
|
+
floating,
|
|
1950
|
+
strategy
|
|
1951
|
+
}) : reset.rects;
|
|
1952
|
+
}
|
|
1953
|
+
({
|
|
1954
|
+
x,
|
|
1955
|
+
y
|
|
1956
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
1957
|
+
}
|
|
1958
|
+
i = -1;
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1961
|
+
return {
|
|
1962
|
+
x,
|
|
1963
|
+
y,
|
|
1964
|
+
placement: statefulPlacement,
|
|
1965
|
+
strategy,
|
|
1966
|
+
middlewareData
|
|
1967
|
+
};
|
|
1968
|
+
};
|
|
1640
1969
|
|
|
1970
|
+
/**
|
|
1971
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
1972
|
+
* element is overflowing a given clipping boundary on each side.
|
|
1973
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
1974
|
+
* - negative = how many pixels left before it will overflow
|
|
1975
|
+
* - 0 = lies flush with the boundary
|
|
1976
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
1977
|
+
*/
|
|
1978
|
+
async function detectOverflow(state, options) {
|
|
1979
|
+
var _await$platform$isEle;
|
|
1980
|
+
if (options === undefined) {
|
|
1981
|
+
options = {};
|
|
1982
|
+
}
|
|
1983
|
+
const {
|
|
1984
|
+
x,
|
|
1985
|
+
y,
|
|
1986
|
+
platform,
|
|
1987
|
+
rects,
|
|
1988
|
+
elements,
|
|
1989
|
+
strategy
|
|
1990
|
+
} = state;
|
|
1991
|
+
const {
|
|
1992
|
+
boundary = 'clippingAncestors',
|
|
1993
|
+
rootBoundary = 'viewport',
|
|
1994
|
+
elementContext = 'floating',
|
|
1995
|
+
altBoundary = false,
|
|
1996
|
+
padding = 0
|
|
1997
|
+
} = evaluate(options, state);
|
|
1998
|
+
const paddingObject = getPaddingObject(padding);
|
|
1999
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
2000
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
2001
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
2002
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? undefined : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? undefined : platform.getDocumentElement(elements.floating))),
|
|
2003
|
+
boundary,
|
|
2004
|
+
rootBoundary,
|
|
2005
|
+
strategy
|
|
2006
|
+
}));
|
|
2007
|
+
const rect = elementContext === 'floating' ? {
|
|
2008
|
+
x,
|
|
2009
|
+
y,
|
|
2010
|
+
width: rects.floating.width,
|
|
2011
|
+
height: rects.floating.height
|
|
2012
|
+
} : rects.reference;
|
|
2013
|
+
const offsetParent = await (platform.getOffsetParent == null ? undefined : platform.getOffsetParent(elements.floating));
|
|
2014
|
+
const offsetScale = (await (platform.isElement == null ? undefined : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? undefined : platform.getScale(offsetParent))) || {
|
|
2015
|
+
x: 1,
|
|
2016
|
+
y: 1
|
|
2017
|
+
} : {
|
|
2018
|
+
x: 1,
|
|
2019
|
+
y: 1
|
|
2020
|
+
};
|
|
2021
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
2022
|
+
elements,
|
|
2023
|
+
rect,
|
|
2024
|
+
offsetParent,
|
|
2025
|
+
strategy
|
|
2026
|
+
}) : rect);
|
|
2027
|
+
return {
|
|
2028
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
2029
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
2030
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
2031
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
2032
|
+
};
|
|
2033
|
+
}
|
|
1641
2034
|
|
|
2035
|
+
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
2036
|
+
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
2037
|
+
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
2038
|
+
if (alignment) {
|
|
2039
|
+
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
2040
|
+
}
|
|
2041
|
+
return true;
|
|
2042
|
+
});
|
|
2043
|
+
}
|
|
1642
2044
|
/**
|
|
1643
|
-
*
|
|
1644
|
-
*
|
|
1645
|
-
*
|
|
1646
|
-
*
|
|
1647
|
-
*
|
|
1648
|
-
* @element auro-counter-group
|
|
1649
|
-
* @extends LitElement
|
|
1650
|
-
* @slot Default - Slot for counter elements.
|
|
1651
|
-
* @slot Label - Dropdown label content. Only used when `isDropdown` is true.
|
|
1652
|
-
* @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
|
|
1653
|
-
* @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
|
|
2045
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
2046
|
+
* that has the most space available automatically, without needing to specify a
|
|
2047
|
+
* preferred placement. Alternative to `flip`.
|
|
2048
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
1654
2049
|
*/
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
2050
|
+
const autoPlacement$1 = function (options) {
|
|
2051
|
+
if (options === undefined) {
|
|
2052
|
+
options = {};
|
|
2053
|
+
}
|
|
2054
|
+
return {
|
|
2055
|
+
name: 'autoPlacement',
|
|
2056
|
+
options,
|
|
2057
|
+
async fn(state) {
|
|
2058
|
+
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
2059
|
+
const {
|
|
2060
|
+
rects,
|
|
2061
|
+
middlewareData,
|
|
2062
|
+
placement,
|
|
2063
|
+
platform,
|
|
2064
|
+
elements
|
|
2065
|
+
} = state;
|
|
2066
|
+
const {
|
|
2067
|
+
crossAxis = false,
|
|
2068
|
+
alignment,
|
|
2069
|
+
allowedPlacements = placements,
|
|
2070
|
+
autoAlignment = true,
|
|
2071
|
+
...detectOverflowOptions
|
|
2072
|
+
} = evaluate(options, state);
|
|
2073
|
+
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
2074
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
2075
|
+
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? undefined : _middlewareData$autoP.index) || 0;
|
|
2076
|
+
const currentPlacement = placements$1[currentIndex];
|
|
2077
|
+
if (currentPlacement == null) {
|
|
2078
|
+
return {};
|
|
2079
|
+
}
|
|
2080
|
+
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? undefined : platform.isRTL(elements.floating)));
|
|
1658
2081
|
|
|
1659
|
-
|
|
2082
|
+
// Make `computeCoords` start from the right place.
|
|
2083
|
+
if (placement !== currentPlacement) {
|
|
2084
|
+
return {
|
|
2085
|
+
reset: {
|
|
2086
|
+
placement: placements$1[0]
|
|
2087
|
+
}
|
|
2088
|
+
};
|
|
2089
|
+
}
|
|
2090
|
+
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
2091
|
+
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? undefined : _middlewareData$autoP2.overflows) || []), {
|
|
2092
|
+
placement: currentPlacement,
|
|
2093
|
+
overflows: currentOverflows
|
|
2094
|
+
}];
|
|
2095
|
+
const nextPlacement = placements$1[currentIndex + 1];
|
|
2096
|
+
|
|
2097
|
+
// There are more placements to check.
|
|
2098
|
+
if (nextPlacement) {
|
|
2099
|
+
return {
|
|
2100
|
+
data: {
|
|
2101
|
+
index: currentIndex + 1,
|
|
2102
|
+
overflows: allOverflows
|
|
2103
|
+
},
|
|
2104
|
+
reset: {
|
|
2105
|
+
placement: nextPlacement
|
|
2106
|
+
}
|
|
2107
|
+
};
|
|
2108
|
+
}
|
|
2109
|
+
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
2110
|
+
const alignment = getAlignment(d.placement);
|
|
2111
|
+
return [d.placement, alignment && crossAxis ?
|
|
2112
|
+
// Check along the mainAxis and main crossAxis side.
|
|
2113
|
+
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
2114
|
+
// Check only the mainAxis.
|
|
2115
|
+
d.overflows[0], d.overflows];
|
|
2116
|
+
}).sort((a, b) => a[1] - b[1]);
|
|
2117
|
+
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
2118
|
+
// Aligned placements should not check their opposite crossAxis
|
|
2119
|
+
// side.
|
|
2120
|
+
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
2121
|
+
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? undefined : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
2122
|
+
if (resetPlacement !== placement) {
|
|
2123
|
+
return {
|
|
2124
|
+
data: {
|
|
2125
|
+
index: currentIndex + 1,
|
|
2126
|
+
overflows: allOverflows
|
|
2127
|
+
},
|
|
2128
|
+
reset: {
|
|
2129
|
+
placement: resetPlacement
|
|
2130
|
+
}
|
|
2131
|
+
};
|
|
2132
|
+
}
|
|
2133
|
+
return {};
|
|
2134
|
+
}
|
|
2135
|
+
};
|
|
2136
|
+
};
|
|
1660
2137
|
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
2138
|
+
/**
|
|
2139
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
2140
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
2141
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
2142
|
+
* @see https://floating-ui.com/docs/flip
|
|
2143
|
+
*/
|
|
2144
|
+
const flip$1 = function (options) {
|
|
2145
|
+
if (options === undefined) {
|
|
2146
|
+
options = {};
|
|
2147
|
+
}
|
|
2148
|
+
return {
|
|
2149
|
+
name: 'flip',
|
|
2150
|
+
options,
|
|
2151
|
+
async fn(state) {
|
|
2152
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
2153
|
+
const {
|
|
2154
|
+
placement,
|
|
2155
|
+
middlewareData,
|
|
2156
|
+
rects,
|
|
2157
|
+
initialPlacement,
|
|
2158
|
+
platform,
|
|
2159
|
+
elements
|
|
2160
|
+
} = state;
|
|
2161
|
+
const {
|
|
2162
|
+
mainAxis: checkMainAxis = true,
|
|
2163
|
+
crossAxis: checkCrossAxis = true,
|
|
2164
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
2165
|
+
fallbackStrategy = 'bestFit',
|
|
2166
|
+
fallbackAxisSideDirection = 'none',
|
|
2167
|
+
flipAlignment = true,
|
|
2168
|
+
...detectOverflowOptions
|
|
2169
|
+
} = evaluate(options, state);
|
|
2170
|
+
|
|
2171
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
2172
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
2173
|
+
// work.
|
|
2174
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
2175
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
2176
|
+
return {};
|
|
2177
|
+
}
|
|
2178
|
+
const side = getSide(placement);
|
|
2179
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
2180
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
2181
|
+
const rtl = await (platform.isRTL == null ? undefined : platform.isRTL(elements.floating));
|
|
2182
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
2183
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
2184
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
2185
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
2186
|
+
}
|
|
2187
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
2188
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
2189
|
+
const overflows = [];
|
|
2190
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? undefined : _middlewareData$flip.overflows) || [];
|
|
2191
|
+
if (checkMainAxis) {
|
|
2192
|
+
overflows.push(overflow[side]);
|
|
2193
|
+
}
|
|
2194
|
+
if (checkCrossAxis) {
|
|
2195
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
2196
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
2197
|
+
}
|
|
2198
|
+
overflowsData = [...overflowsData, {
|
|
2199
|
+
placement,
|
|
2200
|
+
overflows
|
|
2201
|
+
}];
|
|
2202
|
+
|
|
2203
|
+
// One or more sides is overflowing.
|
|
2204
|
+
if (!overflows.every(side => side <= 0)) {
|
|
2205
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
2206
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? undefined : _middlewareData$flip2.index) || 0) + 1;
|
|
2207
|
+
const nextPlacement = placements[nextIndex];
|
|
2208
|
+
if (nextPlacement) {
|
|
2209
|
+
// Try next placement and re-run the lifecycle.
|
|
2210
|
+
return {
|
|
2211
|
+
data: {
|
|
2212
|
+
index: nextIndex,
|
|
2213
|
+
overflows: overflowsData
|
|
2214
|
+
},
|
|
2215
|
+
reset: {
|
|
2216
|
+
placement: nextPlacement
|
|
2217
|
+
}
|
|
2218
|
+
};
|
|
2219
|
+
}
|
|
1666
2220
|
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
2221
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
2222
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
2223
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? undefined : _overflowsData$filter.placement;
|
|
2224
|
+
|
|
2225
|
+
// Otherwise fallback.
|
|
2226
|
+
if (!resetPlacement) {
|
|
2227
|
+
switch (fallbackStrategy) {
|
|
2228
|
+
case 'bestFit':
|
|
2229
|
+
{
|
|
2230
|
+
var _overflowsData$filter2;
|
|
2231
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
2232
|
+
if (hasFallbackAxisSideDirection) {
|
|
2233
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
2234
|
+
return currentSideAxis === initialSideAxis ||
|
|
2235
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
2236
|
+
// reading directions favoring greater width.
|
|
2237
|
+
currentSideAxis === 'y';
|
|
2238
|
+
}
|
|
2239
|
+
return true;
|
|
2240
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? undefined : _overflowsData$filter2[0];
|
|
2241
|
+
if (placement) {
|
|
2242
|
+
resetPlacement = placement;
|
|
2243
|
+
}
|
|
2244
|
+
break;
|
|
2245
|
+
}
|
|
2246
|
+
case 'initialPlacement':
|
|
2247
|
+
resetPlacement = initialPlacement;
|
|
2248
|
+
break;
|
|
2249
|
+
}
|
|
2250
|
+
}
|
|
2251
|
+
if (placement !== resetPlacement) {
|
|
2252
|
+
return {
|
|
2253
|
+
reset: {
|
|
2254
|
+
placement: resetPlacement
|
|
2255
|
+
}
|
|
2256
|
+
};
|
|
2257
|
+
}
|
|
2258
|
+
}
|
|
2259
|
+
return {};
|
|
2260
|
+
}
|
|
2261
|
+
};
|
|
2262
|
+
};
|
|
1671
2263
|
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
2264
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
2265
|
+
// Derivable.
|
|
2266
|
+
|
|
2267
|
+
async function convertValueToCoords(state, options) {
|
|
2268
|
+
const {
|
|
2269
|
+
placement,
|
|
2270
|
+
platform,
|
|
2271
|
+
elements
|
|
2272
|
+
} = state;
|
|
2273
|
+
const rtl = await (platform.isRTL == null ? undefined : platform.isRTL(elements.floating));
|
|
2274
|
+
const side = getSide(placement);
|
|
2275
|
+
const alignment = getAlignment(placement);
|
|
2276
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
2277
|
+
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
2278
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
2279
|
+
const rawValue = evaluate(options, state);
|
|
2280
|
+
|
|
2281
|
+
// eslint-disable-next-line prefer-const
|
|
2282
|
+
let {
|
|
2283
|
+
mainAxis,
|
|
2284
|
+
crossAxis,
|
|
2285
|
+
alignmentAxis
|
|
2286
|
+
} = typeof rawValue === 'number' ? {
|
|
2287
|
+
mainAxis: rawValue,
|
|
2288
|
+
crossAxis: 0,
|
|
2289
|
+
alignmentAxis: null
|
|
2290
|
+
} : {
|
|
2291
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
2292
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
2293
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
2294
|
+
};
|
|
2295
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
2296
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
2297
|
+
}
|
|
2298
|
+
return isVertical ? {
|
|
2299
|
+
x: crossAxis * crossAxisMulti,
|
|
2300
|
+
y: mainAxis * mainAxisMulti
|
|
2301
|
+
} : {
|
|
2302
|
+
x: mainAxis * mainAxisMulti,
|
|
2303
|
+
y: crossAxis * crossAxisMulti
|
|
2304
|
+
};
|
|
2305
|
+
}
|
|
1676
2306
|
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
2307
|
+
/**
|
|
2308
|
+
* Modifies the placement by translating the floating element along the
|
|
2309
|
+
* specified axes.
|
|
2310
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
2311
|
+
* object may be passed.
|
|
2312
|
+
* @see https://floating-ui.com/docs/offset
|
|
2313
|
+
*/
|
|
2314
|
+
const offset$1 = function (options) {
|
|
2315
|
+
if (options === undefined) {
|
|
2316
|
+
options = 0;
|
|
2317
|
+
}
|
|
2318
|
+
return {
|
|
2319
|
+
name: 'offset',
|
|
2320
|
+
options,
|
|
2321
|
+
async fn(state) {
|
|
2322
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
2323
|
+
const {
|
|
2324
|
+
x,
|
|
2325
|
+
y,
|
|
2326
|
+
placement,
|
|
2327
|
+
middlewareData
|
|
2328
|
+
} = state;
|
|
2329
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
2330
|
+
|
|
2331
|
+
// If the placement is the same and the arrow caused an alignment offset
|
|
2332
|
+
// then we don't need to change the positioning coordinates.
|
|
2333
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? undefined : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
2334
|
+
return {};
|
|
2335
|
+
}
|
|
2336
|
+
return {
|
|
2337
|
+
x: x + diffCoords.x,
|
|
2338
|
+
y: y + diffCoords.y,
|
|
2339
|
+
data: {
|
|
2340
|
+
...diffCoords,
|
|
2341
|
+
placement
|
|
2342
|
+
}
|
|
2343
|
+
};
|
|
2344
|
+
}
|
|
2345
|
+
};
|
|
2346
|
+
};
|
|
2347
|
+
|
|
2348
|
+
function hasWindow() {
|
|
2349
|
+
return typeof window !== 'undefined';
|
|
2350
|
+
}
|
|
2351
|
+
function getNodeName(node) {
|
|
2352
|
+
if (isNode(node)) {
|
|
2353
|
+
return (node.nodeName || '').toLowerCase();
|
|
2354
|
+
}
|
|
2355
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
2356
|
+
// returning `#document` an infinite loop won't occur.
|
|
2357
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
2358
|
+
return '#document';
|
|
2359
|
+
}
|
|
2360
|
+
function getWindow(node) {
|
|
2361
|
+
var _node$ownerDocument;
|
|
2362
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? undefined : _node$ownerDocument.defaultView) || window;
|
|
2363
|
+
}
|
|
2364
|
+
function getDocumentElement(node) {
|
|
2365
|
+
var _ref;
|
|
2366
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? undefined : _ref.documentElement;
|
|
2367
|
+
}
|
|
2368
|
+
function isNode(value) {
|
|
2369
|
+
if (!hasWindow()) {
|
|
2370
|
+
return false;
|
|
2371
|
+
}
|
|
2372
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
2373
|
+
}
|
|
2374
|
+
function isElement(value) {
|
|
2375
|
+
if (!hasWindow()) {
|
|
2376
|
+
return false;
|
|
2377
|
+
}
|
|
2378
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
2379
|
+
}
|
|
2380
|
+
function isHTMLElement(value) {
|
|
2381
|
+
if (!hasWindow()) {
|
|
2382
|
+
return false;
|
|
2383
|
+
}
|
|
2384
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
2385
|
+
}
|
|
2386
|
+
function isShadowRoot(value) {
|
|
2387
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
2388
|
+
return false;
|
|
2389
|
+
}
|
|
2390
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
2391
|
+
}
|
|
2392
|
+
function isOverflowElement(element) {
|
|
2393
|
+
const {
|
|
2394
|
+
overflow,
|
|
2395
|
+
overflowX,
|
|
2396
|
+
overflowY,
|
|
2397
|
+
display
|
|
2398
|
+
} = getComputedStyle$1(element);
|
|
2399
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
2400
|
+
}
|
|
2401
|
+
function isTableElement(element) {
|
|
2402
|
+
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
2403
|
+
}
|
|
2404
|
+
function isTopLayer(element) {
|
|
2405
|
+
return [':popover-open', ':modal'].some(selector => {
|
|
2406
|
+
try {
|
|
2407
|
+
return element.matches(selector);
|
|
2408
|
+
} catch (e) {
|
|
2409
|
+
return false;
|
|
2410
|
+
}
|
|
2411
|
+
});
|
|
2412
|
+
}
|
|
2413
|
+
function isContainingBlock(elementOrCss) {
|
|
2414
|
+
const webkit = isWebKit();
|
|
2415
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
2416
|
+
|
|
2417
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2418
|
+
return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
|
|
2419
|
+
}
|
|
2420
|
+
function getContainingBlock(element) {
|
|
2421
|
+
let currentNode = getParentNode(element);
|
|
2422
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
2423
|
+
if (isContainingBlock(currentNode)) {
|
|
2424
|
+
return currentNode;
|
|
2425
|
+
} else if (isTopLayer(currentNode)) {
|
|
2426
|
+
return null;
|
|
2427
|
+
}
|
|
2428
|
+
currentNode = getParentNode(currentNode);
|
|
2429
|
+
}
|
|
2430
|
+
return null;
|
|
2431
|
+
}
|
|
2432
|
+
function isWebKit() {
|
|
2433
|
+
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
2434
|
+
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
2435
|
+
}
|
|
2436
|
+
function isLastTraversableNode(node) {
|
|
2437
|
+
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
2438
|
+
}
|
|
2439
|
+
function getComputedStyle$1(element) {
|
|
2440
|
+
return getWindow(element).getComputedStyle(element);
|
|
2441
|
+
}
|
|
2442
|
+
function getNodeScroll(element) {
|
|
2443
|
+
if (isElement(element)) {
|
|
2444
|
+
return {
|
|
2445
|
+
scrollLeft: element.scrollLeft,
|
|
2446
|
+
scrollTop: element.scrollTop
|
|
2447
|
+
};
|
|
2448
|
+
}
|
|
2449
|
+
return {
|
|
2450
|
+
scrollLeft: element.scrollX,
|
|
2451
|
+
scrollTop: element.scrollY
|
|
2452
|
+
};
|
|
2453
|
+
}
|
|
2454
|
+
function getParentNode(node) {
|
|
2455
|
+
if (getNodeName(node) === 'html') {
|
|
2456
|
+
return node;
|
|
2457
|
+
}
|
|
2458
|
+
const result =
|
|
2459
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
2460
|
+
node.assignedSlot ||
|
|
2461
|
+
// DOM Element detected.
|
|
2462
|
+
node.parentNode ||
|
|
2463
|
+
// ShadowRoot detected.
|
|
2464
|
+
isShadowRoot(node) && node.host ||
|
|
2465
|
+
// Fallback.
|
|
2466
|
+
getDocumentElement(node);
|
|
2467
|
+
return isShadowRoot(result) ? result.host : result;
|
|
2468
|
+
}
|
|
2469
|
+
function getNearestOverflowAncestor(node) {
|
|
2470
|
+
const parentNode = getParentNode(node);
|
|
2471
|
+
if (isLastTraversableNode(parentNode)) {
|
|
2472
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
2473
|
+
}
|
|
2474
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
2475
|
+
return parentNode;
|
|
2476
|
+
}
|
|
2477
|
+
return getNearestOverflowAncestor(parentNode);
|
|
2478
|
+
}
|
|
2479
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
2480
|
+
var _node$ownerDocument2;
|
|
2481
|
+
if (list === undefined) {
|
|
2482
|
+
list = [];
|
|
2483
|
+
}
|
|
2484
|
+
if (traverseIframes === undefined) {
|
|
2485
|
+
traverseIframes = true;
|
|
2486
|
+
}
|
|
2487
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
2488
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? undefined : _node$ownerDocument2.body);
|
|
2489
|
+
const win = getWindow(scrollableAncestor);
|
|
2490
|
+
if (isBody) {
|
|
2491
|
+
const frameElement = getFrameElement(win);
|
|
2492
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
2493
|
+
}
|
|
2494
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
2495
|
+
}
|
|
2496
|
+
function getFrameElement(win) {
|
|
2497
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
2498
|
+
}
|
|
2499
|
+
|
|
2500
|
+
function getCssDimensions(element) {
|
|
2501
|
+
const css = getComputedStyle$1(element);
|
|
2502
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
2503
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
2504
|
+
let width = parseFloat(css.width) || 0;
|
|
2505
|
+
let height = parseFloat(css.height) || 0;
|
|
2506
|
+
const hasOffset = isHTMLElement(element);
|
|
2507
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
2508
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
2509
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
2510
|
+
if (shouldFallback) {
|
|
2511
|
+
width = offsetWidth;
|
|
2512
|
+
height = offsetHeight;
|
|
2513
|
+
}
|
|
2514
|
+
return {
|
|
2515
|
+
width,
|
|
2516
|
+
height,
|
|
2517
|
+
$: shouldFallback
|
|
2518
|
+
};
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
function unwrapElement(element) {
|
|
2522
|
+
return !isElement(element) ? element.contextElement : element;
|
|
2523
|
+
}
|
|
2524
|
+
|
|
2525
|
+
function getScale(element) {
|
|
2526
|
+
const domElement = unwrapElement(element);
|
|
2527
|
+
if (!isHTMLElement(domElement)) {
|
|
2528
|
+
return createCoords(1);
|
|
2529
|
+
}
|
|
2530
|
+
const rect = domElement.getBoundingClientRect();
|
|
2531
|
+
const {
|
|
2532
|
+
width,
|
|
2533
|
+
height,
|
|
2534
|
+
$
|
|
2535
|
+
} = getCssDimensions(domElement);
|
|
2536
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
2537
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
2538
|
+
|
|
2539
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
2540
|
+
|
|
2541
|
+
if (!x || !Number.isFinite(x)) {
|
|
2542
|
+
x = 1;
|
|
2543
|
+
}
|
|
2544
|
+
if (!y || !Number.isFinite(y)) {
|
|
2545
|
+
y = 1;
|
|
2546
|
+
}
|
|
2547
|
+
return {
|
|
2548
|
+
x,
|
|
2549
|
+
y
|
|
2550
|
+
};
|
|
2551
|
+
}
|
|
2552
|
+
|
|
2553
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
2554
|
+
function getVisualOffsets(element) {
|
|
2555
|
+
const win = getWindow(element);
|
|
2556
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
2557
|
+
return noOffsets;
|
|
2558
|
+
}
|
|
2559
|
+
return {
|
|
2560
|
+
x: win.visualViewport.offsetLeft,
|
|
2561
|
+
y: win.visualViewport.offsetTop
|
|
2562
|
+
};
|
|
2563
|
+
}
|
|
2564
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
2565
|
+
if (isFixed === undefined) {
|
|
2566
|
+
isFixed = false;
|
|
2567
|
+
}
|
|
2568
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
2569
|
+
return false;
|
|
2570
|
+
}
|
|
2571
|
+
return isFixed;
|
|
2572
|
+
}
|
|
2573
|
+
|
|
2574
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
2575
|
+
if (includeScale === undefined) {
|
|
2576
|
+
includeScale = false;
|
|
2577
|
+
}
|
|
2578
|
+
if (isFixedStrategy === undefined) {
|
|
2579
|
+
isFixedStrategy = false;
|
|
2580
|
+
}
|
|
2581
|
+
const clientRect = element.getBoundingClientRect();
|
|
2582
|
+
const domElement = unwrapElement(element);
|
|
2583
|
+
let scale = createCoords(1);
|
|
2584
|
+
if (includeScale) {
|
|
2585
|
+
if (offsetParent) {
|
|
2586
|
+
if (isElement(offsetParent)) {
|
|
2587
|
+
scale = getScale(offsetParent);
|
|
2588
|
+
}
|
|
2589
|
+
} else {
|
|
2590
|
+
scale = getScale(element);
|
|
2591
|
+
}
|
|
2592
|
+
}
|
|
2593
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
2594
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
2595
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
2596
|
+
let width = clientRect.width / scale.x;
|
|
2597
|
+
let height = clientRect.height / scale.y;
|
|
2598
|
+
if (domElement) {
|
|
2599
|
+
const win = getWindow(domElement);
|
|
2600
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
2601
|
+
let currentWin = win;
|
|
2602
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
2603
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
2604
|
+
const iframeScale = getScale(currentIFrame);
|
|
2605
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
2606
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
2607
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
2608
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
2609
|
+
x *= iframeScale.x;
|
|
2610
|
+
y *= iframeScale.y;
|
|
2611
|
+
width *= iframeScale.x;
|
|
2612
|
+
height *= iframeScale.y;
|
|
2613
|
+
x += left;
|
|
2614
|
+
y += top;
|
|
2615
|
+
currentWin = getWindow(currentIFrame);
|
|
2616
|
+
currentIFrame = getFrameElement(currentWin);
|
|
2617
|
+
}
|
|
2618
|
+
}
|
|
2619
|
+
return rectToClientRect({
|
|
2620
|
+
width,
|
|
2621
|
+
height,
|
|
2622
|
+
x,
|
|
2623
|
+
y
|
|
2624
|
+
});
|
|
2625
|
+
}
|
|
2626
|
+
|
|
2627
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
2628
|
+
// incorrect for RTL.
|
|
2629
|
+
function getWindowScrollBarX(element, rect) {
|
|
2630
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
2631
|
+
if (!rect) {
|
|
2632
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
2633
|
+
}
|
|
2634
|
+
return rect.left + leftScroll;
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2637
|
+
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
|
|
2638
|
+
if (ignoreScrollbarX === undefined) {
|
|
2639
|
+
ignoreScrollbarX = false;
|
|
2640
|
+
}
|
|
2641
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
2642
|
+
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
|
|
2643
|
+
// RTL <body> scrollbar.
|
|
2644
|
+
getWindowScrollBarX(documentElement, htmlRect));
|
|
2645
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
2646
|
+
return {
|
|
2647
|
+
x,
|
|
2648
|
+
y
|
|
2649
|
+
};
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
2653
|
+
let {
|
|
2654
|
+
elements,
|
|
2655
|
+
rect,
|
|
2656
|
+
offsetParent,
|
|
2657
|
+
strategy
|
|
2658
|
+
} = _ref;
|
|
2659
|
+
const isFixed = strategy === 'fixed';
|
|
2660
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
2661
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
2662
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
2663
|
+
return rect;
|
|
2664
|
+
}
|
|
2665
|
+
let scroll = {
|
|
2666
|
+
scrollLeft: 0,
|
|
2667
|
+
scrollTop: 0
|
|
2668
|
+
};
|
|
2669
|
+
let scale = createCoords(1);
|
|
2670
|
+
const offsets = createCoords(0);
|
|
2671
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2672
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2673
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2674
|
+
scroll = getNodeScroll(offsetParent);
|
|
2675
|
+
}
|
|
2676
|
+
if (isHTMLElement(offsetParent)) {
|
|
2677
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
2678
|
+
scale = getScale(offsetParent);
|
|
2679
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2680
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2681
|
+
}
|
|
2682
|
+
}
|
|
2683
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
|
|
2684
|
+
return {
|
|
2685
|
+
width: rect.width * scale.x,
|
|
2686
|
+
height: rect.height * scale.y,
|
|
2687
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
2688
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
2689
|
+
};
|
|
2690
|
+
}
|
|
2691
|
+
|
|
2692
|
+
function getClientRects(element) {
|
|
2693
|
+
return Array.from(element.getClientRects());
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
2697
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
2698
|
+
function getDocumentRect(element) {
|
|
2699
|
+
const html = getDocumentElement(element);
|
|
2700
|
+
const scroll = getNodeScroll(element);
|
|
2701
|
+
const body = element.ownerDocument.body;
|
|
2702
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
2703
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
2704
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
2705
|
+
const y = -scroll.scrollTop;
|
|
2706
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
2707
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
2708
|
+
}
|
|
2709
|
+
return {
|
|
2710
|
+
width,
|
|
2711
|
+
height,
|
|
2712
|
+
x,
|
|
2713
|
+
y
|
|
2714
|
+
};
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
function getViewportRect(element, strategy) {
|
|
2718
|
+
const win = getWindow(element);
|
|
2719
|
+
const html = getDocumentElement(element);
|
|
2720
|
+
const visualViewport = win.visualViewport;
|
|
2721
|
+
let width = html.clientWidth;
|
|
2722
|
+
let height = html.clientHeight;
|
|
2723
|
+
let x = 0;
|
|
2724
|
+
let y = 0;
|
|
2725
|
+
if (visualViewport) {
|
|
2726
|
+
width = visualViewport.width;
|
|
2727
|
+
height = visualViewport.height;
|
|
2728
|
+
const visualViewportBased = isWebKit();
|
|
2729
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
2730
|
+
x = visualViewport.offsetLeft;
|
|
2731
|
+
y = visualViewport.offsetTop;
|
|
2732
|
+
}
|
|
2733
|
+
}
|
|
2734
|
+
return {
|
|
2735
|
+
width,
|
|
2736
|
+
height,
|
|
2737
|
+
x,
|
|
2738
|
+
y
|
|
2739
|
+
};
|
|
2740
|
+
}
|
|
2741
|
+
|
|
2742
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
2743
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
2744
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
2745
|
+
const top = clientRect.top + element.clientTop;
|
|
2746
|
+
const left = clientRect.left + element.clientLeft;
|
|
2747
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
2748
|
+
const width = element.clientWidth * scale.x;
|
|
2749
|
+
const height = element.clientHeight * scale.y;
|
|
2750
|
+
const x = left * scale.x;
|
|
2751
|
+
const y = top * scale.y;
|
|
2752
|
+
return {
|
|
2753
|
+
width,
|
|
2754
|
+
height,
|
|
2755
|
+
x,
|
|
2756
|
+
y
|
|
2757
|
+
};
|
|
2758
|
+
}
|
|
2759
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
2760
|
+
let rect;
|
|
2761
|
+
if (clippingAncestor === 'viewport') {
|
|
2762
|
+
rect = getViewportRect(element, strategy);
|
|
2763
|
+
} else if (clippingAncestor === 'document') {
|
|
2764
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
2765
|
+
} else if (isElement(clippingAncestor)) {
|
|
2766
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
2767
|
+
} else {
|
|
2768
|
+
const visualOffsets = getVisualOffsets(element);
|
|
2769
|
+
rect = {
|
|
2770
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
2771
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
2772
|
+
width: clippingAncestor.width,
|
|
2773
|
+
height: clippingAncestor.height
|
|
2774
|
+
};
|
|
2775
|
+
}
|
|
2776
|
+
return rectToClientRect(rect);
|
|
2777
|
+
}
|
|
2778
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
2779
|
+
const parentNode = getParentNode(element);
|
|
2780
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
2781
|
+
return false;
|
|
2782
|
+
}
|
|
2783
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
2784
|
+
}
|
|
2785
|
+
|
|
2786
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
2787
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
2788
|
+
// of the given element up the tree.
|
|
2789
|
+
function getClippingElementAncestors(element, cache) {
|
|
2790
|
+
const cachedResult = cache.get(element);
|
|
2791
|
+
if (cachedResult) {
|
|
2792
|
+
return cachedResult;
|
|
2793
|
+
}
|
|
2794
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
2795
|
+
let currentContainingBlockComputedStyle = null;
|
|
2796
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
2797
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
2798
|
+
|
|
2799
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2800
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
2801
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
2802
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
2803
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
2804
|
+
currentContainingBlockComputedStyle = null;
|
|
2805
|
+
}
|
|
2806
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
2807
|
+
if (shouldDropCurrentNode) {
|
|
2808
|
+
// Drop non-containing blocks.
|
|
2809
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
2810
|
+
} else {
|
|
2811
|
+
// Record last containing block for next iteration.
|
|
2812
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
2813
|
+
}
|
|
2814
|
+
currentNode = getParentNode(currentNode);
|
|
2815
|
+
}
|
|
2816
|
+
cache.set(element, result);
|
|
2817
|
+
return result;
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
2821
|
+
// clipping ancestors.
|
|
2822
|
+
function getClippingRect(_ref) {
|
|
2823
|
+
let {
|
|
2824
|
+
element,
|
|
2825
|
+
boundary,
|
|
2826
|
+
rootBoundary,
|
|
2827
|
+
strategy
|
|
2828
|
+
} = _ref;
|
|
2829
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
2830
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
2831
|
+
const firstClippingAncestor = clippingAncestors[0];
|
|
2832
|
+
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
2833
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
2834
|
+
accRect.top = max(rect.top, accRect.top);
|
|
2835
|
+
accRect.right = min(rect.right, accRect.right);
|
|
2836
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
2837
|
+
accRect.left = max(rect.left, accRect.left);
|
|
2838
|
+
return accRect;
|
|
2839
|
+
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
2840
|
+
return {
|
|
2841
|
+
width: clippingRect.right - clippingRect.left,
|
|
2842
|
+
height: clippingRect.bottom - clippingRect.top,
|
|
2843
|
+
x: clippingRect.left,
|
|
2844
|
+
y: clippingRect.top
|
|
2845
|
+
};
|
|
2846
|
+
}
|
|
2847
|
+
|
|
2848
|
+
function getDimensions(element) {
|
|
2849
|
+
const {
|
|
2850
|
+
width,
|
|
2851
|
+
height
|
|
2852
|
+
} = getCssDimensions(element);
|
|
2853
|
+
return {
|
|
2854
|
+
width,
|
|
2855
|
+
height
|
|
2856
|
+
};
|
|
2857
|
+
}
|
|
2858
|
+
|
|
2859
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
2860
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2861
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
2862
|
+
const isFixed = strategy === 'fixed';
|
|
2863
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
2864
|
+
let scroll = {
|
|
2865
|
+
scrollLeft: 0,
|
|
2866
|
+
scrollTop: 0
|
|
2867
|
+
};
|
|
2868
|
+
const offsets = createCoords(0);
|
|
2869
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2870
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2871
|
+
scroll = getNodeScroll(offsetParent);
|
|
2872
|
+
}
|
|
2873
|
+
if (isOffsetParentAnElement) {
|
|
2874
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
2875
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2876
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2877
|
+
} else if (documentElement) {
|
|
2878
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
2879
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2880
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
2881
|
+
}
|
|
2882
|
+
}
|
|
2883
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2884
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
2885
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
2886
|
+
return {
|
|
2887
|
+
x,
|
|
2888
|
+
y,
|
|
2889
|
+
width: rect.width,
|
|
2890
|
+
height: rect.height
|
|
2891
|
+
};
|
|
2892
|
+
}
|
|
2893
|
+
|
|
2894
|
+
function isStaticPositioned(element) {
|
|
2895
|
+
return getComputedStyle$1(element).position === 'static';
|
|
2896
|
+
}
|
|
2897
|
+
|
|
2898
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
2899
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
2900
|
+
return null;
|
|
2901
|
+
}
|
|
2902
|
+
if (polyfill) {
|
|
2903
|
+
return polyfill(element);
|
|
2904
|
+
}
|
|
2905
|
+
let rawOffsetParent = element.offsetParent;
|
|
2906
|
+
|
|
2907
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
2908
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
2909
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
2910
|
+
// non-static.
|
|
2911
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
2912
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
2913
|
+
}
|
|
2914
|
+
return rawOffsetParent;
|
|
2915
|
+
}
|
|
2916
|
+
|
|
2917
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
2918
|
+
// such as table ancestors and cross browser bugs.
|
|
2919
|
+
function getOffsetParent(element, polyfill) {
|
|
2920
|
+
const win = getWindow(element);
|
|
2921
|
+
if (isTopLayer(element)) {
|
|
2922
|
+
return win;
|
|
2923
|
+
}
|
|
2924
|
+
if (!isHTMLElement(element)) {
|
|
2925
|
+
let svgOffsetParent = getParentNode(element);
|
|
2926
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
2927
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
2928
|
+
return svgOffsetParent;
|
|
2929
|
+
}
|
|
2930
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
2931
|
+
}
|
|
2932
|
+
return win;
|
|
2933
|
+
}
|
|
2934
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
2935
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
2936
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
2937
|
+
}
|
|
2938
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
2939
|
+
return win;
|
|
2940
|
+
}
|
|
2941
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
const getElementRects = async function (data) {
|
|
2945
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
2946
|
+
const getDimensionsFn = this.getDimensions;
|
|
2947
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
2948
|
+
return {
|
|
2949
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
2950
|
+
floating: {
|
|
2951
|
+
x: 0,
|
|
2952
|
+
y: 0,
|
|
2953
|
+
width: floatingDimensions.width,
|
|
2954
|
+
height: floatingDimensions.height
|
|
2955
|
+
}
|
|
2956
|
+
};
|
|
2957
|
+
};
|
|
2958
|
+
|
|
2959
|
+
function isRTL(element) {
|
|
2960
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
2961
|
+
}
|
|
2962
|
+
|
|
2963
|
+
const platform = {
|
|
2964
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
2965
|
+
getDocumentElement,
|
|
2966
|
+
getClippingRect,
|
|
2967
|
+
getOffsetParent,
|
|
2968
|
+
getElementRects,
|
|
2969
|
+
getClientRects,
|
|
2970
|
+
getDimensions,
|
|
2971
|
+
getScale,
|
|
2972
|
+
isElement,
|
|
2973
|
+
isRTL
|
|
2974
|
+
};
|
|
2975
|
+
|
|
2976
|
+
// https://samthor.au/2021/observing-dom/
|
|
2977
|
+
function observeMove(element, onMove) {
|
|
2978
|
+
let io = null;
|
|
2979
|
+
let timeoutId;
|
|
2980
|
+
const root = getDocumentElement(element);
|
|
2981
|
+
function cleanup() {
|
|
2982
|
+
var _io;
|
|
2983
|
+
clearTimeout(timeoutId);
|
|
2984
|
+
(_io = io) == null || _io.disconnect();
|
|
2985
|
+
io = null;
|
|
2986
|
+
}
|
|
2987
|
+
function refresh(skip, threshold) {
|
|
2988
|
+
if (skip === undefined) {
|
|
2989
|
+
skip = false;
|
|
2990
|
+
}
|
|
2991
|
+
if (threshold === undefined) {
|
|
2992
|
+
threshold = 1;
|
|
2993
|
+
}
|
|
2994
|
+
cleanup();
|
|
2995
|
+
const {
|
|
2996
|
+
left,
|
|
2997
|
+
top,
|
|
2998
|
+
width,
|
|
2999
|
+
height
|
|
3000
|
+
} = element.getBoundingClientRect();
|
|
3001
|
+
if (!skip) {
|
|
3002
|
+
onMove();
|
|
3003
|
+
}
|
|
3004
|
+
if (!width || !height) {
|
|
3005
|
+
return;
|
|
3006
|
+
}
|
|
3007
|
+
const insetTop = floor(top);
|
|
3008
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
3009
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
3010
|
+
const insetLeft = floor(left);
|
|
3011
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
3012
|
+
const options = {
|
|
3013
|
+
rootMargin,
|
|
3014
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
3015
|
+
};
|
|
3016
|
+
let isFirstUpdate = true;
|
|
3017
|
+
function handleObserve(entries) {
|
|
3018
|
+
const ratio = entries[0].intersectionRatio;
|
|
3019
|
+
if (ratio !== threshold) {
|
|
3020
|
+
if (!isFirstUpdate) {
|
|
3021
|
+
return refresh();
|
|
3022
|
+
}
|
|
3023
|
+
if (!ratio) {
|
|
3024
|
+
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
3025
|
+
// to prevent an infinite loop of updates.
|
|
3026
|
+
timeoutId = setTimeout(() => {
|
|
3027
|
+
refresh(false, 1e-7);
|
|
3028
|
+
}, 1000);
|
|
3029
|
+
} else {
|
|
3030
|
+
refresh(false, ratio);
|
|
3031
|
+
}
|
|
3032
|
+
}
|
|
3033
|
+
isFirstUpdate = false;
|
|
3034
|
+
}
|
|
3035
|
+
|
|
3036
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
3037
|
+
// error.
|
|
3038
|
+
try {
|
|
3039
|
+
io = new IntersectionObserver(handleObserve, {
|
|
3040
|
+
...options,
|
|
3041
|
+
// Handle <iframe>s
|
|
3042
|
+
root: root.ownerDocument
|
|
3043
|
+
});
|
|
3044
|
+
} catch (e) {
|
|
3045
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
3046
|
+
}
|
|
3047
|
+
io.observe(element);
|
|
3048
|
+
}
|
|
3049
|
+
refresh(true);
|
|
3050
|
+
return cleanup;
|
|
3051
|
+
}
|
|
3052
|
+
|
|
3053
|
+
/**
|
|
3054
|
+
* Automatically updates the position of the floating element when necessary.
|
|
3055
|
+
* Should only be called when the floating element is mounted on the DOM or
|
|
3056
|
+
* visible on the screen.
|
|
3057
|
+
* @returns cleanup function that should be invoked when the floating element is
|
|
3058
|
+
* removed from the DOM or hidden from the screen.
|
|
3059
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
3060
|
+
*/
|
|
3061
|
+
function autoUpdate(reference, floating, update, options) {
|
|
3062
|
+
if (options === undefined) {
|
|
3063
|
+
options = {};
|
|
3064
|
+
}
|
|
3065
|
+
const {
|
|
3066
|
+
ancestorScroll = true,
|
|
3067
|
+
ancestorResize = true,
|
|
3068
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
3069
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
3070
|
+
animationFrame = false
|
|
3071
|
+
} = options;
|
|
3072
|
+
const referenceEl = unwrapElement(reference);
|
|
3073
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
3074
|
+
ancestors.forEach(ancestor => {
|
|
3075
|
+
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
3076
|
+
passive: true
|
|
3077
|
+
});
|
|
3078
|
+
ancestorResize && ancestor.addEventListener('resize', update);
|
|
3079
|
+
});
|
|
3080
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
3081
|
+
let reobserveFrame = -1;
|
|
3082
|
+
let resizeObserver = null;
|
|
3083
|
+
if (elementResize) {
|
|
3084
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
3085
|
+
let [firstEntry] = _ref;
|
|
3086
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
3087
|
+
// Prevent update loops when using the `size` middleware.
|
|
3088
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
3089
|
+
resizeObserver.unobserve(floating);
|
|
3090
|
+
cancelAnimationFrame(reobserveFrame);
|
|
3091
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
3092
|
+
var _resizeObserver;
|
|
3093
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
3094
|
+
});
|
|
3095
|
+
}
|
|
3096
|
+
update();
|
|
3097
|
+
});
|
|
3098
|
+
if (referenceEl && !animationFrame) {
|
|
3099
|
+
resizeObserver.observe(referenceEl);
|
|
3100
|
+
}
|
|
3101
|
+
resizeObserver.observe(floating);
|
|
3102
|
+
}
|
|
3103
|
+
let frameId;
|
|
3104
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
3105
|
+
if (animationFrame) {
|
|
3106
|
+
frameLoop();
|
|
3107
|
+
}
|
|
3108
|
+
function frameLoop() {
|
|
3109
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
3110
|
+
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
3111
|
+
update();
|
|
3112
|
+
}
|
|
3113
|
+
prevRefRect = nextRefRect;
|
|
3114
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
3115
|
+
}
|
|
3116
|
+
update();
|
|
3117
|
+
return () => {
|
|
3118
|
+
var _resizeObserver2;
|
|
3119
|
+
ancestors.forEach(ancestor => {
|
|
3120
|
+
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
3121
|
+
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
3122
|
+
});
|
|
3123
|
+
cleanupIo == null || cleanupIo();
|
|
3124
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
3125
|
+
resizeObserver = null;
|
|
3126
|
+
if (animationFrame) {
|
|
3127
|
+
cancelAnimationFrame(frameId);
|
|
3128
|
+
}
|
|
3129
|
+
};
|
|
3130
|
+
}
|
|
3131
|
+
|
|
3132
|
+
/**
|
|
3133
|
+
* Modifies the placement by translating the floating element along the
|
|
3134
|
+
* specified axes.
|
|
3135
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
3136
|
+
* object may be passed.
|
|
3137
|
+
* @see https://floating-ui.com/docs/offset
|
|
3138
|
+
*/
|
|
3139
|
+
const offset = offset$1;
|
|
3140
|
+
|
|
3141
|
+
/**
|
|
3142
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
3143
|
+
* that has the most space available automatically, without needing to specify a
|
|
3144
|
+
* preferred placement. Alternative to `flip`.
|
|
3145
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
3146
|
+
*/
|
|
3147
|
+
const autoPlacement = autoPlacement$1;
|
|
3148
|
+
|
|
3149
|
+
/**
|
|
3150
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
3151
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
3152
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
3153
|
+
* @see https://floating-ui.com/docs/flip
|
|
3154
|
+
*/
|
|
3155
|
+
const flip = flip$1;
|
|
3156
|
+
|
|
3157
|
+
/**
|
|
3158
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
3159
|
+
* next to a given reference element.
|
|
3160
|
+
*/
|
|
3161
|
+
const computePosition = (reference, floating, options) => {
|
|
3162
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
3163
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
3164
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
3165
|
+
const cache = new Map();
|
|
3166
|
+
const mergedOptions = {
|
|
3167
|
+
platform,
|
|
3168
|
+
...options
|
|
3169
|
+
};
|
|
3170
|
+
const platformWithCache = {
|
|
3171
|
+
...mergedOptions.platform,
|
|
3172
|
+
_c: cache
|
|
3173
|
+
};
|
|
3174
|
+
return computePosition$1(reference, floating, {
|
|
3175
|
+
...mergedOptions,
|
|
3176
|
+
platform: platformWithCache
|
|
3177
|
+
});
|
|
3178
|
+
};
|
|
3179
|
+
|
|
3180
|
+
/* eslint-disable line-comment-position, no-inline-comments */
|
|
3181
|
+
|
|
3182
|
+
|
|
3183
|
+
class AuroFloatingUI {
|
|
3184
|
+
constructor() {
|
|
3185
|
+
// Store event listener references for cleanup
|
|
3186
|
+
this.focusHandler = null;
|
|
3187
|
+
this.clickHandler = null;
|
|
3188
|
+
this.keyDownHandler = null;
|
|
3189
|
+
|
|
3190
|
+
/**
|
|
3191
|
+
* @private
|
|
3192
|
+
*/
|
|
3193
|
+
this.eventPrefix = undefined;
|
|
3194
|
+
}
|
|
3195
|
+
|
|
3196
|
+
/**
|
|
3197
|
+
* @private
|
|
3198
|
+
* Adjusts the size of the bib content based on the bibSizer dimensions.
|
|
3199
|
+
*
|
|
3200
|
+
* This method retrieves the computed styles of the bibSizer element and applies them to the bib content.
|
|
3201
|
+
* If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it
|
|
3202
|
+
* mirrors the width and height from the bibSizer, ensuring that they are not set to zero.
|
|
3203
|
+
*
|
|
3204
|
+
* @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode.
|
|
3205
|
+
* If true, the bib content dimensions are cleared; if false, they are set
|
|
3206
|
+
* based on the bibSizer's computed styles.
|
|
3207
|
+
*/
|
|
3208
|
+
mirrorSize(fullscreen) {
|
|
3209
|
+
// mirror the boxsize from bibSizer
|
|
3210
|
+
if (this.element.bibSizer) {
|
|
3211
|
+
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
3212
|
+
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
3213
|
+
if (fullscreen) {
|
|
3214
|
+
bibContent.style.width = '';
|
|
3215
|
+
bibContent.style.height = '';
|
|
3216
|
+
bibContent.style.maxWidth = '';
|
|
3217
|
+
bibContent.style.maxHeight = '';
|
|
3218
|
+
} else {
|
|
3219
|
+
if (sizerStyle.width !== '0px') {
|
|
3220
|
+
bibContent.style.width = sizerStyle.width;
|
|
3221
|
+
}
|
|
3222
|
+
if (sizerStyle.height !== '0px') {
|
|
3223
|
+
bibContent.style.height = sizerStyle.height;
|
|
3224
|
+
}
|
|
3225
|
+
bibContent.style.maxWidth = sizerStyle.maxWidth;
|
|
3226
|
+
bibContent.style.maxHeight = sizerStyle.maxHeight;
|
|
3227
|
+
}
|
|
3228
|
+
}
|
|
3229
|
+
}
|
|
3230
|
+
|
|
3231
|
+
/**
|
|
3232
|
+
* @private
|
|
3233
|
+
* Determines the positioning strategy based on the current viewport size and mobile breakpoint.
|
|
3234
|
+
*
|
|
3235
|
+
* This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
|
|
3236
|
+
* defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
|
|
3237
|
+
*
|
|
3238
|
+
* @returns {String} The positioning strategy, either 'fullscreen' or 'floating'.
|
|
3239
|
+
*/
|
|
3240
|
+
getPositioningStrategy() {
|
|
3241
|
+
let strategy = 'floating';
|
|
3242
|
+
if (this.element.bib.mobileFullscreenBreakpoint) {
|
|
3243
|
+
const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
|
|
3244
|
+
if (isMobile) {
|
|
3245
|
+
strategy = 'fullscreen';
|
|
3246
|
+
}
|
|
3247
|
+
}
|
|
3248
|
+
return strategy;
|
|
3249
|
+
}
|
|
3250
|
+
|
|
3251
|
+
/**
|
|
3252
|
+
* @private
|
|
3253
|
+
* Positions the bib element based on the current configuration and positioning strategy.
|
|
3254
|
+
*
|
|
3255
|
+
* This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
|
|
3256
|
+
* It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
|
|
3257
|
+
* and applies the calculated position to the bib's style.
|
|
3258
|
+
*/
|
|
3259
|
+
position() {
|
|
3260
|
+
const strategy = this.getPositioningStrategy();
|
|
3261
|
+
if (strategy === 'fullscreen') {
|
|
3262
|
+
this.configureBibFullscreen(true);
|
|
3263
|
+
this.mirrorSize(true);
|
|
3264
|
+
} else {
|
|
3265
|
+
this.configureBibFullscreen(false);
|
|
3266
|
+
this.mirrorSize(false);
|
|
3267
|
+
|
|
3268
|
+
// Define the middlware for the floater configuration
|
|
3269
|
+
const middleware = [
|
|
3270
|
+
offset(this.element.floaterConfig.offset || 0),
|
|
3271
|
+
...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled
|
|
3272
|
+
...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled
|
|
3273
|
+
];
|
|
3274
|
+
|
|
3275
|
+
// Compute the position of the bib
|
|
3276
|
+
computePosition(this.element.trigger, this.element.bib, {
|
|
3277
|
+
placement: this.element.floaterConfig.placement || 'bottom',
|
|
3278
|
+
middleware: middleware
|
|
3279
|
+
}).then(({x, y}) => { // eslint-disable-line id-length
|
|
3280
|
+
Object.assign(this.element.bib.style, {
|
|
3281
|
+
left: `${x}px`,
|
|
3282
|
+
top: `${y}px`,
|
|
3283
|
+
});
|
|
3284
|
+
});
|
|
3285
|
+
}
|
|
3286
|
+
}
|
|
3287
|
+
|
|
3288
|
+
/**
|
|
3289
|
+
* @private
|
|
3290
|
+
* Configures the bib element for fullscreen mode based on the mobile status.
|
|
3291
|
+
*
|
|
3292
|
+
* This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true,
|
|
3293
|
+
* and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the
|
|
3294
|
+
* 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode.
|
|
3295
|
+
*
|
|
3296
|
+
* @param {boolean} isMobile - A flag indicating whether the current device is mobile.
|
|
3297
|
+
*/
|
|
3298
|
+
configureBibFullscreen(isMobile) {
|
|
3299
|
+
if (isMobile) {
|
|
3300
|
+
this.element.bib.setAttribute('isFullscreen', "true");
|
|
3301
|
+
// reset the prev position
|
|
3302
|
+
this.element.bib.style.top = "0px";
|
|
3303
|
+
this.element.bib.style.left = "0px";
|
|
3304
|
+
} else {
|
|
3305
|
+
this.element.bib.removeAttribute('isFullscreen');
|
|
3306
|
+
}
|
|
3307
|
+
}
|
|
3308
|
+
|
|
3309
|
+
updateState() {
|
|
3310
|
+
const isVisible = this.element.isPopoverVisible;
|
|
3311
|
+
this.element.trigger.setAttribute('aria-expanded', isVisible);
|
|
3312
|
+
|
|
3313
|
+
if (isVisible) {
|
|
3314
|
+
this.element.bib.setAttribute('data-show', true);
|
|
3315
|
+
} else {
|
|
3316
|
+
this.element.bib.removeAttribute('data-show');
|
|
3317
|
+
}
|
|
3318
|
+
|
|
3319
|
+
if (!isVisible) {
|
|
3320
|
+
this.cleanupHideHandlers();
|
|
3321
|
+
try {
|
|
3322
|
+
this.element.cleanup?.();
|
|
3323
|
+
} catch (error) {
|
|
3324
|
+
// Do nothing
|
|
3325
|
+
}
|
|
3326
|
+
}
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3329
|
+
handleFocusLoss() {
|
|
3330
|
+
if (this.element.noHideOnThisFocusLoss ||
|
|
3331
|
+
this.element.hasAttribute('noHideOnThisFocusLoss')) {
|
|
3332
|
+
return;
|
|
3333
|
+
}
|
|
3334
|
+
|
|
3335
|
+
const {activeElement} = document;
|
|
3336
|
+
if (activeElement === document.querySelector('body') ||
|
|
3337
|
+
this.element.contains(activeElement) ||
|
|
3338
|
+
this.element.bibContent?.contains(activeElement)) {
|
|
3339
|
+
return;
|
|
3340
|
+
}
|
|
3341
|
+
|
|
3342
|
+
this.hideBib();
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3345
|
+
setupHideHandlers() {
|
|
3346
|
+
// Define handlers & store references
|
|
3347
|
+
this.focusHandler = () => this.handleFocusLoss();
|
|
3348
|
+
|
|
3349
|
+
this.clickHandler = (evt) => {
|
|
3350
|
+
if (!evt.composedPath().includes(this.element.trigger) &&
|
|
3351
|
+
!evt.composedPath().includes(this.element.bibContent)) {
|
|
3352
|
+
this.hideBib();
|
|
3353
|
+
}
|
|
3354
|
+
};
|
|
3355
|
+
|
|
3356
|
+
// ESC key handler
|
|
3357
|
+
this.keyDownHandler = (evt) => {
|
|
3358
|
+
if (evt.key === 'Escape' && this.element.isPopoverVisible) {
|
|
3359
|
+
this.hideBib();
|
|
3360
|
+
}
|
|
3361
|
+
};
|
|
3362
|
+
|
|
3363
|
+
// Add event listeners using the stored references
|
|
3364
|
+
document.addEventListener('focusin', this.focusHandler);
|
|
3365
|
+
window.addEventListener('click', this.clickHandler);
|
|
3366
|
+
document.addEventListener('keydown', this.keyDownHandler);
|
|
3367
|
+
}
|
|
3368
|
+
|
|
3369
|
+
cleanupHideHandlers() {
|
|
3370
|
+
// Remove event listeners if they exist
|
|
3371
|
+
if (this.focusHandler) {
|
|
3372
|
+
document.removeEventListener('focusin', this.focusHandler);
|
|
3373
|
+
this.focusHandler = null;
|
|
3374
|
+
}
|
|
3375
|
+
|
|
3376
|
+
if (this.clickHandler) {
|
|
3377
|
+
window.removeEventListener('click', this.clickHandler);
|
|
3378
|
+
this.clickHandler = null;
|
|
3379
|
+
}
|
|
3380
|
+
|
|
3381
|
+
if (this.keyDownHandler) {
|
|
3382
|
+
document.removeEventListener('keydown', this.keyDownHandler);
|
|
3383
|
+
this.keyDownHandler = null;
|
|
3384
|
+
}
|
|
3385
|
+
}
|
|
3386
|
+
|
|
3387
|
+
handleUpdate(changedProperties) {
|
|
3388
|
+
if (changedProperties.has('isPopoverVisible')) {
|
|
3389
|
+
this.updateState();
|
|
3390
|
+
}
|
|
3391
|
+
}
|
|
3392
|
+
|
|
3393
|
+
updateCurrentExpandedDropdown() {
|
|
3394
|
+
// Close any other dropdown that is already open
|
|
3395
|
+
if (document.expandedAuroDropdown) {
|
|
3396
|
+
this.hideBib(document.expandedAuroDropdown);
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3399
|
+
document.expandedAuroDropdown = this;
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
showBib() {
|
|
3403
|
+
if (!this.element.disabled && !this.element.isPopoverVisible) {
|
|
3404
|
+
this.updateCurrentExpandedDropdown();
|
|
3405
|
+
this.element.isPopoverVisible = true;
|
|
3406
|
+
this.element.triggerChevron?.setAttribute('data-expanded', true);
|
|
3407
|
+
this.dispatchEventDropdownToggle();
|
|
3408
|
+
this.position();
|
|
3409
|
+
|
|
3410
|
+
// Clean up any existing handlers before setting up new ones
|
|
3411
|
+
this.cleanupHideHandlers();
|
|
3412
|
+
this.setupHideHandlers();
|
|
3413
|
+
|
|
3414
|
+
// Setup auto update to handle resize and scroll
|
|
3415
|
+
this.element.cleanup = autoUpdate(this.element.trigger, this.element.bib, () => {
|
|
3416
|
+
this.position();
|
|
3417
|
+
});
|
|
3418
|
+
}
|
|
3419
|
+
}
|
|
3420
|
+
|
|
3421
|
+
hideBib() {
|
|
3422
|
+
if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
|
|
3423
|
+
this.element.isPopoverVisible = false;
|
|
3424
|
+
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
3425
|
+
this.dispatchEventDropdownToggle();
|
|
3426
|
+
}
|
|
3427
|
+
}
|
|
3428
|
+
|
|
3429
|
+
/**
|
|
3430
|
+
* @private
|
|
3431
|
+
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
3432
|
+
*/
|
|
3433
|
+
dispatchEventDropdownToggle() {
|
|
3434
|
+
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
3435
|
+
detail: {
|
|
3436
|
+
expanded: this.isPopoverVisible,
|
|
3437
|
+
},
|
|
3438
|
+
composed: true
|
|
3439
|
+
});
|
|
3440
|
+
|
|
3441
|
+
this.element.dispatchEvent(event);
|
|
3442
|
+
}
|
|
3443
|
+
|
|
3444
|
+
handleClick() {
|
|
3445
|
+
if (this.element.isPopoverVisible) {
|
|
3446
|
+
this.hideBib();
|
|
3447
|
+
} else {
|
|
3448
|
+
this.showBib();
|
|
3449
|
+
}
|
|
3450
|
+
|
|
3451
|
+
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
|
|
3452
|
+
composed: true,
|
|
3453
|
+
details: {
|
|
3454
|
+
expanded: this.element.isPopoverVisible
|
|
3455
|
+
}
|
|
3456
|
+
});
|
|
3457
|
+
|
|
3458
|
+
this.element.dispatchEvent(event);
|
|
3459
|
+
}
|
|
3460
|
+
|
|
3461
|
+
handleEvent(event) {
|
|
3462
|
+
if (!this.element.disableEventShow) {
|
|
3463
|
+
switch (event.type) {
|
|
3464
|
+
case 'keydown':
|
|
3465
|
+
// Support both Enter and Space keys for accessibility
|
|
3466
|
+
// Space is included as it's expected behavior for interactive elements
|
|
3467
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3468
|
+
event.preventDefault(); // Prevent page scroll on space
|
|
3469
|
+
this.handleClick();
|
|
3470
|
+
}
|
|
3471
|
+
break;
|
|
3472
|
+
case 'mouseenter':
|
|
3473
|
+
if (this.element.hoverToggle) {
|
|
3474
|
+
this.showBib();
|
|
3475
|
+
}
|
|
3476
|
+
break;
|
|
3477
|
+
case 'mouseleave':
|
|
3478
|
+
if (this.element.hoverToggle) {
|
|
3479
|
+
this.hideBib();
|
|
3480
|
+
}
|
|
3481
|
+
break;
|
|
3482
|
+
case 'focus':
|
|
3483
|
+
if (this.element.focusShow) {
|
|
3484
|
+
/*
|
|
3485
|
+
This needs to better handle clicking that gives focus -
|
|
3486
|
+
currently it shows and then immediately hides the bib
|
|
3487
|
+
*/
|
|
3488
|
+
this.showBib();
|
|
3489
|
+
}
|
|
3490
|
+
break;
|
|
3491
|
+
case 'blur':
|
|
3492
|
+
this.handleFocusLoss();
|
|
3493
|
+
break;
|
|
3494
|
+
case 'click':
|
|
3495
|
+
if (document.activeElement === document.body) {
|
|
3496
|
+
event.currentTarget.focus();
|
|
3497
|
+
}
|
|
3498
|
+
this.handleClick();
|
|
3499
|
+
break;
|
|
3500
|
+
// Do nothing
|
|
3501
|
+
}
|
|
3502
|
+
}
|
|
3503
|
+
}
|
|
3504
|
+
|
|
3505
|
+
handleTriggerTabIndex() {
|
|
3506
|
+
const focusableElementSelectors = [
|
|
3507
|
+
'a',
|
|
3508
|
+
'button',
|
|
3509
|
+
'input:not([type="hidden"])',
|
|
3510
|
+
'select',
|
|
3511
|
+
'textarea',
|
|
3512
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
3513
|
+
'auro-button',
|
|
3514
|
+
'auro-input',
|
|
3515
|
+
'auro-hyperlink'
|
|
3516
|
+
];
|
|
3517
|
+
|
|
3518
|
+
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
3519
|
+
const triggerNodeTagName = triggerNode.tagName.toLowerCase();
|
|
3520
|
+
|
|
3521
|
+
focusableElementSelectors.forEach((selector) => {
|
|
3522
|
+
// Check if the trigger node element is focusable
|
|
3523
|
+
if (triggerNodeTagName === selector) {
|
|
3524
|
+
this.element.tabIndex = -1;
|
|
3525
|
+
return;
|
|
3526
|
+
}
|
|
3527
|
+
|
|
3528
|
+
// Check if any child is focusable
|
|
3529
|
+
if (triggerNode.querySelector(selector)) {
|
|
3530
|
+
this.element.tabIndex = -1;
|
|
3531
|
+
}
|
|
3532
|
+
});
|
|
3533
|
+
}
|
|
3534
|
+
|
|
3535
|
+
configure(elem, eventPrefix) {
|
|
3536
|
+
this.eventPrefix = eventPrefix;
|
|
3537
|
+
this.element = elem;
|
|
3538
|
+
this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
|
|
3539
|
+
this.element.bib = this.element.shadowRoot.querySelector('#bib');
|
|
3540
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
|
|
3541
|
+
this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
|
|
3542
|
+
|
|
3543
|
+
document.body.append(this.element.bib);
|
|
3544
|
+
|
|
3545
|
+
this.handleTriggerTabIndex();
|
|
3546
|
+
|
|
3547
|
+
this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event));
|
|
3548
|
+
this.element.trigger.addEventListener('click', (event) => this.handleEvent(event));
|
|
3549
|
+
this.element.trigger.addEventListener('mouseenter', (event) => this.handleEvent(event));
|
|
3550
|
+
this.element.trigger.addEventListener('mouseleave', (event) => this.handleEvent(event));
|
|
3551
|
+
this.element.trigger.addEventListener('focus', (event) => this.handleEvent(event));
|
|
3552
|
+
this.element.trigger.addEventListener('blur', (event) => this.handleEvent(event));
|
|
3553
|
+
}
|
|
3554
|
+
|
|
3555
|
+
disconnect() {
|
|
3556
|
+
this.cleanupHideHandlers();
|
|
3557
|
+
this.element.cleanup?.();
|
|
3558
|
+
|
|
3559
|
+
// Remove event & keyboard listeners
|
|
3560
|
+
if (this.element?.trigger) {
|
|
3561
|
+
this.element.trigger.removeEventListener('keydown', (event) => this.handleEvent(event));
|
|
3562
|
+
this.element.trigger.removeEventListener('click', (event) => this.handleEvent(event));
|
|
3563
|
+
this.element.trigger.removeEventListener('mouseenter', (event) => this.handleEvent(event));
|
|
3564
|
+
this.element.trigger.removeEventListener('mouseleave', (event) => this.handleEvent(event));
|
|
3565
|
+
this.element.trigger.removeEventListener('focus', (event) => this.handleEvent(event));
|
|
3566
|
+
this.element.trigger.removeEventListener('blur', (event) => this.handleEvent(event));
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
}
|
|
3570
|
+
|
|
3571
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3572
|
+
// See LICENSE in the project root for license information.
|
|
3573
|
+
|
|
3574
|
+
|
|
3575
|
+
class AuroDependencyVersioning {
|
|
3576
|
+
|
|
3577
|
+
/**
|
|
3578
|
+
* Generates a unique string to be used for child auro element naming.
|
|
3579
|
+
* @private
|
|
3580
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
3581
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
3582
|
+
* @returns {string} - Unique string to be used for naming.
|
|
3583
|
+
*/
|
|
3584
|
+
generateElementName(baseName, version) {
|
|
3585
|
+
let result = baseName;
|
|
3586
|
+
|
|
3587
|
+
result += '-';
|
|
3588
|
+
result += version.replace(/[.]/g, '_');
|
|
3589
|
+
|
|
3590
|
+
return result;
|
|
3591
|
+
}
|
|
3592
|
+
|
|
3593
|
+
/**
|
|
3594
|
+
* Generates a unique string to be used for child auro element naming.
|
|
3595
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
3596
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
3597
|
+
* @returns {string} - Unique string to be used for naming.
|
|
3598
|
+
*/
|
|
3599
|
+
generateTag(baseName, version, tagClass) {
|
|
3600
|
+
const elementName = this.generateElementName(baseName, version);
|
|
3601
|
+
const tag = i$8`${s$3(elementName)}`;
|
|
3602
|
+
|
|
3603
|
+
if (!customElements.get(elementName)) {
|
|
3604
|
+
customElements.define(elementName, class extends tagClass {});
|
|
3605
|
+
}
|
|
3606
|
+
|
|
3607
|
+
return tag;
|
|
3608
|
+
}
|
|
3609
|
+
}
|
|
3610
|
+
|
|
3611
|
+
/**
|
|
3612
|
+
* @license
|
|
3613
|
+
* Copyright 2017 Google LLC
|
|
3614
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3615
|
+
*/
|
|
3616
|
+
const t$2={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$4=t=>(...e)=>({_$litDirective$:t,values:e});let i$4 = 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)}};
|
|
3617
|
+
|
|
3618
|
+
/**
|
|
3619
|
+
* @license
|
|
3620
|
+
* Copyright 2018 Google LLC
|
|
3621
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3622
|
+
*/const e$3=e$4(class extends i$4{constructor(t){if(super(t),t.type!==t$2.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$1}});
|
|
3623
|
+
|
|
3624
|
+
/**
|
|
3625
|
+
* @license
|
|
3626
|
+
* Copyright 2018 Google LLC
|
|
3627
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3628
|
+
*/const o$3=o=>o??E$1;
|
|
3629
|
+
|
|
3630
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3631
|
+
// See LICENSE in the project root for license information.
|
|
3632
|
+
|
|
3633
|
+
|
|
3634
|
+
/**
|
|
3635
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
3636
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
3637
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
3638
|
+
*/
|
|
3639
|
+
|
|
3640
|
+
class AuroElement extends r$4 {
|
|
3641
|
+
|
|
3642
|
+
// function to define props used within the scope of this component
|
|
3643
|
+
static get properties() {
|
|
3644
|
+
return {
|
|
3645
|
+
hidden: { type: Boolean,
|
|
3646
|
+
reflect: true },
|
|
3647
|
+
hiddenVisually: { type: Boolean,
|
|
3648
|
+
reflect: true },
|
|
3649
|
+
hiddenAudible: { type: Boolean,
|
|
3650
|
+
reflect: true },
|
|
3651
|
+
};
|
|
3652
|
+
}
|
|
3653
|
+
|
|
3654
|
+
/**
|
|
3655
|
+
* @private Function that determines state of aria-hidden
|
|
3656
|
+
*/
|
|
3657
|
+
hideAudible(value) {
|
|
3658
|
+
if (value) {
|
|
3659
|
+
return 'true'
|
|
3660
|
+
}
|
|
3661
|
+
|
|
3662
|
+
return 'false'
|
|
3663
|
+
}
|
|
3664
|
+
}
|
|
3665
|
+
|
|
3666
|
+
var error = {"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>"};
|
|
3667
|
+
|
|
3668
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
3669
|
+
|
|
3670
|
+
const _fetchMap = new Map();
|
|
3671
|
+
|
|
3672
|
+
/**
|
|
3673
|
+
* A callback to parse Response body.
|
|
3674
|
+
*
|
|
3675
|
+
* @callback ResponseParser
|
|
3676
|
+
* @param {Fetch.Response} response
|
|
3677
|
+
* @returns {Promise}
|
|
3678
|
+
*/
|
|
3679
|
+
|
|
3680
|
+
/**
|
|
3681
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
3682
|
+
*
|
|
3683
|
+
* @param {String} uri
|
|
3684
|
+
* @param {Object} [options={}]
|
|
3685
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
3686
|
+
* @returns {Promise}
|
|
3687
|
+
*/
|
|
3688
|
+
const cacheFetch = (uri, options = {}) => {
|
|
3689
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
3690
|
+
if (!_fetchMap.has(uri)) {
|
|
3691
|
+
_fetchMap.set(uri, fetch(uri).then(responseParser));
|
|
3692
|
+
}
|
|
3693
|
+
return _fetchMap.get(uri);
|
|
3694
|
+
};
|
|
3695
|
+
|
|
3696
|
+
var styleCss$3 = i$7`*,*: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}`;
|
|
3697
|
+
|
|
3698
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3699
|
+
// See LICENSE in the project root for license information.
|
|
3700
|
+
|
|
3701
|
+
|
|
3702
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
3703
|
+
/**
|
|
3704
|
+
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
3705
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
3706
|
+
*/
|
|
3707
|
+
|
|
3708
|
+
// build the component class
|
|
3709
|
+
class BaseIcon extends AuroElement {
|
|
3710
|
+
constructor() {
|
|
3711
|
+
super();
|
|
3712
|
+
this.onDark = false;
|
|
3713
|
+
}
|
|
3714
|
+
|
|
3715
|
+
// function to define props used within the scope of this component
|
|
3716
|
+
static get properties() {
|
|
3717
|
+
return {
|
|
3718
|
+
...super.properties,
|
|
3719
|
+
onDark: {
|
|
3720
|
+
type: Boolean,
|
|
3721
|
+
reflect: true
|
|
3722
|
+
},
|
|
3723
|
+
|
|
3724
|
+
/**
|
|
3725
|
+
* @private
|
|
3726
|
+
*/
|
|
3727
|
+
svg: {
|
|
3728
|
+
attribute: false,
|
|
3729
|
+
reflect: true
|
|
3730
|
+
}
|
|
3731
|
+
};
|
|
3732
|
+
}
|
|
3733
|
+
|
|
3734
|
+
static get styles() {
|
|
3735
|
+
return i$7`
|
|
3736
|
+
${styleCss$3}
|
|
3737
|
+
`;
|
|
3738
|
+
}
|
|
3739
|
+
|
|
3740
|
+
/**
|
|
3741
|
+
* Async function to fetch requested icon from npm CDN.
|
|
3742
|
+
* @private
|
|
3743
|
+
* @param {string} category - Icon category.
|
|
3744
|
+
* @param {string} name - Icon name.
|
|
3745
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
3746
|
+
*/
|
|
3747
|
+
async fetchIcon(category, name) {
|
|
3748
|
+
let iconHTML = '';
|
|
3749
|
+
|
|
3750
|
+
if (category === 'logos') {
|
|
3751
|
+
iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
|
|
3752
|
+
} else {
|
|
3753
|
+
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
3754
|
+
}
|
|
3755
|
+
|
|
3756
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
3757
|
+
|
|
3758
|
+
return dom.body.querySelector('svg');
|
|
3759
|
+
}
|
|
3760
|
+
|
|
3761
|
+
// lifecycle function
|
|
3762
|
+
async firstUpdated() {
|
|
3763
|
+
if (!this.customSvg) {
|
|
3764
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
3765
|
+
|
|
3766
|
+
if (svg) {
|
|
3767
|
+
this.svg = svg;
|
|
3768
|
+
} else if (!svg) {
|
|
3769
|
+
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
3770
|
+
|
|
3771
|
+
this.svg = penDOM.body.firstChild;
|
|
3772
|
+
}
|
|
3773
|
+
}
|
|
3774
|
+
}
|
|
3775
|
+
}
|
|
3776
|
+
|
|
3777
|
+
var tokensCss$2 = i$7`: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)}`;
|
|
3778
|
+
|
|
3779
|
+
var colorCss$3 = i$7`: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)}`;
|
|
3780
|
+
|
|
3781
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3782
|
+
// See LICENSE in the project root for license information.
|
|
3783
|
+
|
|
3784
|
+
|
|
3785
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
3786
|
+
/**
|
|
3787
|
+
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
3788
|
+
*
|
|
3789
|
+
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
3790
|
+
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
3791
|
+
* @attr {Boolean} customColor - Removes primary selector.
|
|
3792
|
+
* @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
|
|
3793
|
+
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
3794
|
+
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
3795
|
+
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
3796
|
+
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
3797
|
+
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
3798
|
+
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
3799
|
+
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
3800
|
+
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
3801
|
+
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
3802
|
+
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
3803
|
+
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
3804
|
+
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
3805
|
+
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
3806
|
+
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
3807
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
3808
|
+
* @slot svg - Used for custom SVG content.
|
|
3809
|
+
*/
|
|
3810
|
+
|
|
3811
|
+
// build the component class
|
|
3812
|
+
class AuroIcon extends BaseIcon {
|
|
3813
|
+
constructor() {
|
|
3814
|
+
super();
|
|
3815
|
+
|
|
3816
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
3817
|
+
|
|
3818
|
+
this.privateDefaults();
|
|
3819
|
+
}
|
|
3820
|
+
|
|
3821
|
+
/**
|
|
3822
|
+
* Internal Defaults.
|
|
3823
|
+
* @private
|
|
3824
|
+
* @returns {void}
|
|
3825
|
+
*/
|
|
3826
|
+
privateDefaults() {
|
|
3827
|
+
this.accent = false;
|
|
3828
|
+
this.customColor = false;
|
|
3829
|
+
this.customSvg = false;
|
|
3830
|
+
this.disabled = false;
|
|
3831
|
+
this.emphasis = false;
|
|
3832
|
+
this.error = false;
|
|
3833
|
+
this.info = false;
|
|
3834
|
+
this.label = false;
|
|
3835
|
+
this.primary = false;
|
|
3836
|
+
this.secondary = false;
|
|
3837
|
+
this.subtle = false;
|
|
3838
|
+
this.success = false;
|
|
3839
|
+
this.tertiary = false;
|
|
3840
|
+
this.warning = false;
|
|
3841
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
3842
|
+
}
|
|
3843
|
+
|
|
3844
|
+
// function to define props used within the scope of this component
|
|
3845
|
+
static get properties() {
|
|
3846
|
+
return {
|
|
3847
|
+
...super.properties,
|
|
3848
|
+
accent: {
|
|
3849
|
+
type: Boolean,
|
|
3850
|
+
reflect: true
|
|
3851
|
+
},
|
|
3852
|
+
ariaHidden: {
|
|
3853
|
+
type: String,
|
|
3854
|
+
reflect: true
|
|
3855
|
+
},
|
|
3856
|
+
category: {
|
|
3857
|
+
type: String,
|
|
3858
|
+
reflect: true
|
|
3859
|
+
},
|
|
3860
|
+
customColor: {
|
|
3861
|
+
type: Boolean
|
|
3862
|
+
},
|
|
3863
|
+
customSvg: {
|
|
3864
|
+
type: Boolean
|
|
3865
|
+
},
|
|
3866
|
+
disabled: {
|
|
3867
|
+
type: Boolean,
|
|
3868
|
+
reflect: true
|
|
3869
|
+
},
|
|
3870
|
+
emphasis: {
|
|
3871
|
+
type: Boolean,
|
|
3872
|
+
reflect: true
|
|
3873
|
+
},
|
|
3874
|
+
error: {
|
|
3875
|
+
type: Boolean,
|
|
3876
|
+
reflect: true
|
|
3877
|
+
},
|
|
3878
|
+
info: {
|
|
3879
|
+
type: Boolean,
|
|
3880
|
+
reflect: true
|
|
3881
|
+
},
|
|
3882
|
+
label: {
|
|
3883
|
+
type: Boolean,
|
|
3884
|
+
reflect: true
|
|
3885
|
+
},
|
|
3886
|
+
name: {
|
|
3887
|
+
type: String,
|
|
3888
|
+
reflect: true
|
|
3889
|
+
},
|
|
3890
|
+
primary: {
|
|
3891
|
+
type: Boolean,
|
|
3892
|
+
reflect: true
|
|
3893
|
+
},
|
|
3894
|
+
secondary: {
|
|
3895
|
+
type: Boolean,
|
|
3896
|
+
reflect: true
|
|
3897
|
+
},
|
|
3898
|
+
subtle: {
|
|
3899
|
+
type: Boolean,
|
|
3900
|
+
reflect: true
|
|
3901
|
+
},
|
|
3902
|
+
success: {
|
|
3903
|
+
type: Boolean,
|
|
3904
|
+
reflect: true
|
|
3905
|
+
},
|
|
3906
|
+
tertiary: {
|
|
3907
|
+
type: Boolean,
|
|
3908
|
+
reflect: true
|
|
3909
|
+
},
|
|
3910
|
+
uri: {
|
|
3911
|
+
type: String
|
|
3912
|
+
},
|
|
3913
|
+
warning: {
|
|
3914
|
+
type: Boolean,
|
|
3915
|
+
reflect: true
|
|
3916
|
+
}
|
|
3917
|
+
};
|
|
3918
|
+
}
|
|
3919
|
+
|
|
3920
|
+
static get styles() {
|
|
3921
|
+
return [
|
|
3922
|
+
super.styles,
|
|
3923
|
+
i$7`${tokensCss$2}`,
|
|
3924
|
+
i$7`${styleCss$3}`,
|
|
3925
|
+
i$7`${colorCss$3}`
|
|
3926
|
+
];
|
|
3927
|
+
}
|
|
3928
|
+
|
|
3929
|
+
/**
|
|
3930
|
+
* This will register this element with the browser.
|
|
3931
|
+
* @param {string} [name="auro-icon"] - The name of element that you want to register to.
|
|
3932
|
+
*
|
|
3933
|
+
* @example
|
|
3934
|
+
* AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
|
|
3935
|
+
*
|
|
3936
|
+
*/
|
|
3937
|
+
static register(name = "auro-icon") {
|
|
3938
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
|
|
3939
|
+
}
|
|
3940
|
+
|
|
3941
|
+
connectedCallback() {
|
|
3942
|
+
super.connectedCallback();
|
|
3943
|
+
|
|
3944
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
3945
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
3946
|
+
}
|
|
3947
|
+
|
|
3948
|
+
/**
|
|
3949
|
+
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
3950
|
+
*/
|
|
3951
|
+
exposeCssParts() {
|
|
3952
|
+
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
3953
|
+
}
|
|
3954
|
+
|
|
3955
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
3956
|
+
render() {
|
|
3957
|
+
const a11y = {
|
|
3958
|
+
'labelContainer': true,
|
|
3959
|
+
'util_displayHiddenVisually': !this.label
|
|
3960
|
+
};
|
|
3961
|
+
|
|
3962
|
+
const classes = {
|
|
3963
|
+
'label': this.label,
|
|
3964
|
+
'wrapper': true,
|
|
3965
|
+
};
|
|
3966
|
+
|
|
3967
|
+
return x$1`
|
|
3968
|
+
<div
|
|
3969
|
+
class="${e$3(classes)}"
|
|
3970
|
+
title="${o$3(this.title || undefined)}">
|
|
3971
|
+
<span aria-hidden="${o$3(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
3972
|
+
${this.customSvg ? x$1`
|
|
3973
|
+
<slot name="svg"></slot>
|
|
3974
|
+
` : x$1`
|
|
3975
|
+
${this.svg}
|
|
3976
|
+
`
|
|
3977
|
+
}
|
|
3978
|
+
</span>
|
|
3979
|
+
|
|
3980
|
+
<div class="${e$3(a11y)}">
|
|
3981
|
+
<slot></slot>
|
|
3982
|
+
</div>
|
|
3983
|
+
</div>
|
|
3984
|
+
`;
|
|
3985
|
+
}
|
|
3986
|
+
}
|
|
3987
|
+
|
|
3988
|
+
var iconVersion = '6.1.2';
|
|
3989
|
+
|
|
3990
|
+
var styleCss$2 = i$7`: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)}: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)}`;
|
|
3991
|
+
|
|
3992
|
+
var colorCss$2 = i$7`.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))}: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-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)}`;
|
|
3993
|
+
|
|
3994
|
+
var tokensCss$1 = i$7`:host{--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)}`;
|
|
3995
|
+
|
|
3996
|
+
/**
|
|
3997
|
+
* @license
|
|
3998
|
+
* Copyright 2019 Google LLC
|
|
3999
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4000
|
+
*/
|
|
4001
|
+
const t$1=globalThis,e$2=t$1.ShadowRoot&&(undefined===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)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$2&&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$3=t=>new n$2("string"==typeof t?t:t+"",undefined,s$1),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$2(o,t,s$1)},S$1=(s,o)=>{if(e$2)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$2=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
|
|
4002
|
+
|
|
4003
|
+
/**
|
|
4004
|
+
* @license
|
|
4005
|
+
* Copyright 2017 Google LLC
|
|
4006
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4007
|
+
*/const{is:i$2,defineProperty:e$1,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1: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$2(t,s),y$1={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.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$1(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$1(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$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$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$1).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$1;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$1.reactiveElementVersions??=[]).push("2.0.4");
|
|
4008
|
+
|
|
4009
|
+
/**
|
|
4010
|
+
* @license
|
|
4011
|
+
* Copyright 2017 Google LLC
|
|
4012
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4013
|
+
*/
|
|
4014
|
+
const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):undefined,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o="?"+h,n=`<${o}>`,r$1=document,l=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(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(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return undefined!==s?s.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:d>=0?(o.push(a),s.slice(0,d)+e+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)){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$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o)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(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(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()),this.O(l()),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.litHtmlPolyfillSupport;j?.(N,R),(t.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(),t),t,undefined,s??{});}return h._$AI(t),h};
|
|
4015
|
+
|
|
4016
|
+
/**
|
|
4017
|
+
* @license
|
|
4018
|
+
* Copyright 2017 Google LLC
|
|
4019
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
4020
|
+
*/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=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
4021
|
+
|
|
4022
|
+
var colorCss$1 = i$3`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4023
|
+
|
|
4024
|
+
var styleCss$1 = i$3`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
4025
|
+
|
|
4026
|
+
var tokensCss = i$3`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
|
|
4027
|
+
|
|
4028
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
4029
|
+
// See LICENSE in the project root for license information.
|
|
4030
|
+
|
|
4031
|
+
// ---------------------------------------------------------------------
|
|
4032
|
+
|
|
4033
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4034
|
+
|
|
4035
|
+
class AuroLibraryRuntimeUtils {
|
|
4036
|
+
|
|
4037
|
+
/* eslint-disable jsdoc/require-param */
|
|
4038
|
+
|
|
4039
|
+
/**
|
|
4040
|
+
* This will register a new custom element with the browser.
|
|
4041
|
+
* @param {String} name - The name of the custom element.
|
|
4042
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
4043
|
+
* @returns {void}
|
|
4044
|
+
*/
|
|
4045
|
+
registerComponent(name, componentClass) {
|
|
4046
|
+
if (!customElements.get(name)) {
|
|
4047
|
+
customElements.define(name, class extends componentClass {});
|
|
4048
|
+
}
|
|
4049
|
+
}
|
|
4050
|
+
|
|
4051
|
+
/**
|
|
4052
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
4053
|
+
* @returns {void}
|
|
4054
|
+
*/
|
|
4055
|
+
closestElement(
|
|
4056
|
+
selector, // selector like in .closest()
|
|
4057
|
+
base = this, // extra functionality to skip a parent
|
|
4058
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
4059
|
+
!el || el === document || el === window
|
|
4060
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
4061
|
+
: found
|
|
4062
|
+
? found // found a selector INside this element
|
|
4063
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
4064
|
+
) {
|
|
4065
|
+
return __Closest(base);
|
|
4066
|
+
}
|
|
4067
|
+
/* eslint-enable jsdoc/require-param */
|
|
4068
|
+
|
|
4069
|
+
/**
|
|
4070
|
+
* 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.
|
|
4071
|
+
* @param {Object} elem - The element to check.
|
|
4072
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
4073
|
+
* @returns {void}
|
|
4074
|
+
*/
|
|
4075
|
+
handleComponentTagRename(elem, tagName) {
|
|
4076
|
+
const tag = tagName.toLowerCase();
|
|
4077
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
4078
|
+
|
|
4079
|
+
if (elemTag !== tag) {
|
|
4080
|
+
elem.setAttribute(tag, true);
|
|
4081
|
+
}
|
|
4082
|
+
}
|
|
4083
|
+
|
|
4084
|
+
/**
|
|
4085
|
+
* Validates if an element is a specific Auro component.
|
|
4086
|
+
* @param {Object} elem - The element to validate.
|
|
4087
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
4088
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
4089
|
+
*/
|
|
4090
|
+
elementMatch(elem, tagName) {
|
|
4091
|
+
const tag = tagName.toLowerCase();
|
|
4092
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
4093
|
+
|
|
4094
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
4095
|
+
}
|
|
4096
|
+
}
|
|
4097
|
+
|
|
4098
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4099
|
+
// See LICENSE in the project root for license information.
|
|
4100
|
+
|
|
4101
|
+
|
|
4102
|
+
/**
|
|
4103
|
+
* Displays help text or error messages within form elements - Internal Use Only.
|
|
4104
|
+
*
|
|
4105
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
4106
|
+
*/
|
|
4107
|
+
class AuroHelpText extends r {
|
|
4108
|
+
|
|
4109
|
+
constructor() {
|
|
4110
|
+
super();
|
|
4111
|
+
|
|
4112
|
+
this.error = false;
|
|
4113
|
+
this.hasTextContent = false;
|
|
4114
|
+
}
|
|
4115
|
+
|
|
4116
|
+
static get styles() {
|
|
4117
|
+
return [
|
|
4118
|
+
colorCss$1,
|
|
4119
|
+
styleCss$1,
|
|
4120
|
+
tokensCss
|
|
4121
|
+
];
|
|
4122
|
+
}
|
|
4123
|
+
|
|
4124
|
+
// function to define props used within the scope of this component
|
|
4125
|
+
static get properties() {
|
|
4126
|
+
return {
|
|
4127
|
+
|
|
4128
|
+
/**
|
|
4129
|
+
* @private
|
|
4130
|
+
*/
|
|
4131
|
+
slotNodes: {
|
|
4132
|
+
type: Boolean,
|
|
4133
|
+
},
|
|
4134
|
+
|
|
4135
|
+
/**
|
|
4136
|
+
* @private
|
|
4137
|
+
*/
|
|
4138
|
+
hasTextContent: {
|
|
4139
|
+
type: Boolean,
|
|
4140
|
+
},
|
|
4141
|
+
|
|
4142
|
+
/**
|
|
4143
|
+
* If declared, make font color red.
|
|
4144
|
+
*/
|
|
4145
|
+
error: {
|
|
4146
|
+
type: Boolean,
|
|
4147
|
+
reflect: true,
|
|
4148
|
+
},
|
|
4149
|
+
};
|
|
4150
|
+
}
|
|
4151
|
+
|
|
4152
|
+
/**
|
|
4153
|
+
* This will register this element with the browser.
|
|
4154
|
+
* @param {string} [name="auro-helptext"] - The name of element that you want to register to.
|
|
4155
|
+
*
|
|
4156
|
+
* @example
|
|
4157
|
+
* AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
|
|
4158
|
+
*
|
|
4159
|
+
*/
|
|
4160
|
+
static register(name = "auro-helptext") {
|
|
4161
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
|
|
4162
|
+
}
|
|
4163
|
+
|
|
4164
|
+
updated() {
|
|
4165
|
+
this.handleSlotChange();
|
|
4166
|
+
}
|
|
4167
|
+
|
|
4168
|
+
handleSlotChange(event) {
|
|
4169
|
+
if (event) {
|
|
4170
|
+
this.slotNodes = event.target.assignedNodes();
|
|
4171
|
+
}
|
|
4172
|
+
|
|
4173
|
+
this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
|
|
4174
|
+
}
|
|
4175
|
+
|
|
4176
|
+
/**
|
|
4177
|
+
* Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
|
|
4178
|
+
*
|
|
4179
|
+
* @param {NodeList|Array} nodes - The list of nodes to check for content.
|
|
4180
|
+
* @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
|
|
4181
|
+
* @private
|
|
4182
|
+
*/
|
|
4183
|
+
checkSlotsForContent(nodes) {
|
|
4184
|
+
if (!nodes) {
|
|
4185
|
+
return false;
|
|
4186
|
+
}
|
|
4187
|
+
|
|
4188
|
+
return nodes.some((node) => {
|
|
4189
|
+
if (node.textContent.trim()) {
|
|
4190
|
+
return true;
|
|
4191
|
+
}
|
|
4192
|
+
|
|
4193
|
+
if (!node.querySelector) {
|
|
4194
|
+
return false;
|
|
4195
|
+
}
|
|
4196
|
+
|
|
4197
|
+
const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
|
|
4198
|
+
if (!nestedSlot) {
|
|
4199
|
+
return false;
|
|
4200
|
+
}
|
|
4201
|
+
|
|
4202
|
+
const nestedSlotNodes = nestedSlot.assignedNodes();
|
|
4203
|
+
return this.checkSlotsForContent(nestedSlotNodes);
|
|
4204
|
+
});
|
|
4205
|
+
}
|
|
4206
|
+
|
|
4207
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4208
|
+
render() {
|
|
4209
|
+
return x`
|
|
4210
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
4211
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
4212
|
+
</div>
|
|
4213
|
+
`;
|
|
4214
|
+
}
|
|
4215
|
+
}
|
|
4216
|
+
|
|
4217
|
+
AuroHelpText.register();
|
|
4218
|
+
|
|
4219
|
+
var styleCss$4 = i$7`: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}`;
|
|
4220
|
+
|
|
4221
|
+
var colorCss$4 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
4222
|
+
|
|
4223
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4224
|
+
// See LICENSE in the project root for license information.
|
|
4225
|
+
|
|
4226
|
+
|
|
4227
|
+
|
|
4228
|
+
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
4229
|
+
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
4230
|
+
'lg',
|
|
4231
|
+
'md',
|
|
4232
|
+
'sm',
|
|
4233
|
+
'xs',
|
|
4234
|
+
];
|
|
4235
|
+
|
|
4236
|
+
/**
|
|
4237
|
+
* @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4238
|
+
* @csspart bibContainer - Apply css to the bib container.
|
|
4239
|
+
*/
|
|
4240
|
+
|
|
4241
|
+
class AuroDropdownBib extends r$4 {
|
|
4242
|
+
|
|
4243
|
+
constructor() {
|
|
4244
|
+
super();
|
|
4245
|
+
|
|
4246
|
+
/**
|
|
4247
|
+
* @private
|
|
4248
|
+
*/
|
|
4249
|
+
this._mobileBreakpointValue = undefined;
|
|
4250
|
+
}
|
|
4251
|
+
|
|
4252
|
+
static get styles() {
|
|
4253
|
+
return [
|
|
4254
|
+
styleCss$4,
|
|
4255
|
+
colorCss$4,
|
|
4256
|
+
tokensCss$1
|
|
4257
|
+
];
|
|
4258
|
+
}
|
|
4259
|
+
|
|
4260
|
+
static get properties() {
|
|
4261
|
+
return {
|
|
4262
|
+
|
|
4263
|
+
/**
|
|
4264
|
+
* If declared, will apply all styles for the common theme.
|
|
4265
|
+
*/
|
|
4266
|
+
common: {
|
|
4267
|
+
type: Boolean,
|
|
4268
|
+
reflect: true
|
|
4269
|
+
},
|
|
4270
|
+
|
|
4271
|
+
/**
|
|
4272
|
+
* If declared, will apply extra padding to bib content.
|
|
4273
|
+
*/
|
|
4274
|
+
inset: {
|
|
4275
|
+
type: Boolean,
|
|
4276
|
+
reflect: true
|
|
4277
|
+
},
|
|
4278
|
+
|
|
4279
|
+
/**
|
|
4280
|
+
* If declared, will apply border-radius to the bib.
|
|
4281
|
+
*/
|
|
4282
|
+
rounded: {
|
|
4283
|
+
type: Boolean,
|
|
4284
|
+
reflect: true
|
|
4285
|
+
},
|
|
4286
|
+
};
|
|
4287
|
+
}
|
|
4288
|
+
|
|
4289
|
+
set mobileFullscreenBreakpoint(value) {
|
|
4290
|
+
// verify the defined breakpoint is valid and exit out if not
|
|
4291
|
+
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
4292
|
+
if (!validatedValue) {
|
|
4293
|
+
this._mobileBreakpointValue = undefined;
|
|
4294
|
+
} else {
|
|
4295
|
+
// get the pixel value for the defined breakpoint
|
|
4296
|
+
const docStyle = getComputedStyle(document.documentElement);
|
|
4297
|
+
this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
|
|
4298
|
+
}
|
|
4299
|
+
}
|
|
4300
|
+
|
|
4301
|
+
get mobileFullscreenBreakpoint() {
|
|
4302
|
+
return this._mobileBreakpointValue;
|
|
4303
|
+
}
|
|
4304
|
+
|
|
4305
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4306
|
+
render() {
|
|
4307
|
+
return u$3`
|
|
4308
|
+
<div class="container" part="bibContainer">
|
|
4309
|
+
<slot></slot>
|
|
4310
|
+
</div>
|
|
4311
|
+
`;
|
|
4312
|
+
}
|
|
4313
|
+
}
|
|
4314
|
+
|
|
4315
|
+
// default internal definition
|
|
4316
|
+
if (!customElements.get("auro-dropdownbib")) {
|
|
4317
|
+
customElements.define("auro-dropdownbib", AuroDropdownBib);
|
|
4318
|
+
}
|
|
4319
|
+
|
|
4320
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4321
|
+
// See LICENSE in the project root for license information.
|
|
4322
|
+
|
|
4323
|
+
|
|
4324
|
+
/**
|
|
4325
|
+
* @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
|
|
4326
|
+
* @slot - Default slot for the popover content.
|
|
4327
|
+
* @slot label - Defines the content of the label.
|
|
4328
|
+
* @slot helpText - Defines the content of the helpText.
|
|
4329
|
+
* @slot trigger - Defines the content of the trigger.
|
|
4330
|
+
* @csspart trigger - The trigger content container.
|
|
4331
|
+
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4332
|
+
* @csspart helpText - The helpText content container.
|
|
4333
|
+
* @csspart popover - The bib content container.
|
|
4334
|
+
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4335
|
+
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
4336
|
+
*/
|
|
4337
|
+
class AuroDropdown extends r$4 {
|
|
4338
|
+
constructor() {
|
|
4339
|
+
super();
|
|
4340
|
+
|
|
4341
|
+
this.isPopoverVisible = false;
|
|
4342
|
+
this.matchWidth = false;
|
|
4343
|
+
this.noHideOnThisFocusLoss = false;
|
|
4344
|
+
|
|
4345
|
+
this.privateDefaults();
|
|
4346
|
+
}
|
|
4347
|
+
|
|
4348
|
+
/**
|
|
4349
|
+
* @private
|
|
4350
|
+
* @returns {void} Internal defaults.
|
|
4351
|
+
*/
|
|
4352
|
+
privateDefaults() {
|
|
4353
|
+
this.bordered = false;
|
|
4354
|
+
this.chevron = false;
|
|
4355
|
+
this.disabled = false;
|
|
4356
|
+
this.error = false;
|
|
4357
|
+
this.inset = false;
|
|
4358
|
+
this.placement = 'bottom-start';
|
|
4359
|
+
this.rounded = false;
|
|
4360
|
+
this.tabIndex = 0;
|
|
4361
|
+
this.noToggle = false;
|
|
4362
|
+
|
|
4363
|
+
/**
|
|
4364
|
+
* @private
|
|
4365
|
+
*/
|
|
4366
|
+
this.hasTriggerContent = false;
|
|
4367
|
+
|
|
4368
|
+
/**
|
|
4369
|
+
* @private
|
|
4370
|
+
*/
|
|
4371
|
+
this.triggerContentSlot = undefined;
|
|
4372
|
+
|
|
4373
|
+
/**
|
|
4374
|
+
* @private
|
|
4375
|
+
*/
|
|
4376
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
4377
|
+
|
|
4378
|
+
/**
|
|
4379
|
+
* @private
|
|
4380
|
+
*/
|
|
4381
|
+
this.floater = new AuroFloatingUI();
|
|
4382
|
+
|
|
4383
|
+
/**
|
|
4384
|
+
* @private
|
|
4385
|
+
*/
|
|
4386
|
+
this.floaterConfig = {
|
|
4387
|
+
placement: 'bottom-start',
|
|
4388
|
+
flip: true,
|
|
4389
|
+
autoPlacement: false,
|
|
4390
|
+
offset: 0,
|
|
4391
|
+
};
|
|
4392
|
+
|
|
4393
|
+
/**
|
|
4394
|
+
* Generate unique names for dependency components.
|
|
4395
|
+
*/
|
|
4396
|
+
const versioning = new AuroDependencyVersioning();
|
|
4397
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
4398
|
+
}
|
|
4399
|
+
|
|
4400
|
+
/**
|
|
4401
|
+
* Public method to hide the dropdown.
|
|
4402
|
+
* @returns {void}
|
|
4403
|
+
*/
|
|
4404
|
+
hide() {
|
|
4405
|
+
this.floater.hideBib();
|
|
4406
|
+
}
|
|
4407
|
+
|
|
4408
|
+
/**
|
|
4409
|
+
* Public method to show the dropdown.
|
|
4410
|
+
* @returns {void}
|
|
4411
|
+
*/
|
|
4412
|
+
show() {
|
|
4413
|
+
this.floater.showBib();
|
|
4414
|
+
}
|
|
4415
|
+
|
|
4416
|
+
// function to define props used within the scope of this component
|
|
4417
|
+
static get properties() {
|
|
4418
|
+
return {
|
|
4419
|
+
|
|
4420
|
+
/**
|
|
4421
|
+
* If declared, applies a border around the trigger slot.
|
|
4422
|
+
*/
|
|
4423
|
+
bordered: {
|
|
4424
|
+
type: Boolean,
|
|
4425
|
+
reflect: true
|
|
4426
|
+
},
|
|
4427
|
+
|
|
4428
|
+
/**
|
|
4429
|
+
* If declared, the dropdown displays a chevron on the right.
|
|
4430
|
+
* @attr {Boolean} chevron
|
|
4431
|
+
*/
|
|
4432
|
+
chevron: {
|
|
4433
|
+
type: Boolean,
|
|
4434
|
+
reflect: true
|
|
4435
|
+
},
|
|
4436
|
+
|
|
4437
|
+
/**
|
|
4438
|
+
* If declared, the dropdown will be styled with the common theme.
|
|
4439
|
+
*/
|
|
4440
|
+
common: {
|
|
4441
|
+
type: Boolean,
|
|
4442
|
+
reflect: true
|
|
4443
|
+
},
|
|
4444
|
+
|
|
4445
|
+
/**
|
|
4446
|
+
* If declared, the dropdown is not interactive.
|
|
4447
|
+
*/
|
|
4448
|
+
disabled: {
|
|
4449
|
+
type: Boolean,
|
|
4450
|
+
reflect: true
|
|
4451
|
+
},
|
|
4452
|
+
|
|
4453
|
+
/**
|
|
4454
|
+
* @private
|
|
4455
|
+
*/
|
|
4456
|
+
dropdownWidth: {
|
|
4457
|
+
type: Number
|
|
4458
|
+
},
|
|
4459
|
+
|
|
4460
|
+
/**
|
|
4461
|
+
* If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
|
|
4462
|
+
*/
|
|
4463
|
+
error: {
|
|
4464
|
+
type: Boolean,
|
|
4465
|
+
reflect: true
|
|
4466
|
+
},
|
|
4467
|
+
|
|
4468
|
+
/**
|
|
4469
|
+
* If declared, the bib will display when focus is applied to the trigger.
|
|
4470
|
+
*/
|
|
4471
|
+
focusShow: {
|
|
4472
|
+
type: Boolean,
|
|
4473
|
+
reflect: true
|
|
4474
|
+
},
|
|
4475
|
+
|
|
4476
|
+
/**
|
|
4477
|
+
* Makes the trigger to be full width of its parent container.
|
|
4478
|
+
*/
|
|
4479
|
+
fluid: {
|
|
4480
|
+
type: Boolean,
|
|
4481
|
+
reflect: true
|
|
4482
|
+
},
|
|
4483
|
+
|
|
4484
|
+
/**
|
|
4485
|
+
* If declared, will apply padding around trigger slot content.
|
|
4486
|
+
*/
|
|
4487
|
+
inset: {
|
|
4488
|
+
type: Boolean,
|
|
4489
|
+
reflect: true
|
|
4490
|
+
},
|
|
4491
|
+
|
|
4492
|
+
/**
|
|
4493
|
+
* If true, the dropdown bib is displayed.
|
|
4494
|
+
*/
|
|
4495
|
+
isPopoverVisible: {
|
|
4496
|
+
type: Boolean
|
|
4497
|
+
},
|
|
4498
|
+
|
|
4499
|
+
/**
|
|
4500
|
+
* If declared, the trigger will toggle the dropdown on mouseover/mouseout.
|
|
4501
|
+
*/
|
|
4502
|
+
hoverToggle: {
|
|
4503
|
+
type: Boolean,
|
|
4504
|
+
reflect: true
|
|
4505
|
+
},
|
|
4506
|
+
|
|
4507
|
+
/**
|
|
4508
|
+
* @private
|
|
4509
|
+
*/
|
|
4510
|
+
hasTriggerContent: {
|
|
4511
|
+
type: Boolean
|
|
4512
|
+
},
|
|
4513
|
+
|
|
4514
|
+
/**
|
|
4515
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4516
|
+
*/
|
|
4517
|
+
mobileFullscreenBreakpoint: {
|
|
4518
|
+
type: String,
|
|
4519
|
+
reflect: true
|
|
4520
|
+
},
|
|
4521
|
+
|
|
4522
|
+
/**
|
|
4523
|
+
* If declared, the popover and trigger will be set to the same width.
|
|
4524
|
+
*/
|
|
4525
|
+
matchWidth: {
|
|
4526
|
+
type: Boolean,
|
|
4527
|
+
reflect: true
|
|
4528
|
+
},
|
|
4529
|
+
|
|
4530
|
+
/**
|
|
4531
|
+
* If declared, the dropdown will not hide when moving focus outside the element.
|
|
4532
|
+
*/
|
|
4533
|
+
noHideOnThisFocusLoss: {
|
|
4534
|
+
type: Boolean,
|
|
4535
|
+
reflect: true
|
|
4536
|
+
},
|
|
4537
|
+
|
|
4538
|
+
/**
|
|
4539
|
+
* If declared, the trigger will only show the dropdown bib.
|
|
4540
|
+
*/
|
|
4541
|
+
noToggle: {
|
|
4542
|
+
type: Boolean,
|
|
4543
|
+
reflect: true
|
|
4544
|
+
},
|
|
4545
|
+
|
|
4546
|
+
onSlotChange: {
|
|
4547
|
+
type: Function,
|
|
4548
|
+
reflect: false
|
|
4549
|
+
},
|
|
4550
|
+
|
|
4551
|
+
/**
|
|
4552
|
+
* @private
|
|
4553
|
+
*/
|
|
4554
|
+
placement: {
|
|
4555
|
+
type: String
|
|
4556
|
+
},
|
|
4557
|
+
|
|
4558
|
+
/**
|
|
4559
|
+
* If declared, will apply border-radius to trigger and default slots.
|
|
4560
|
+
*/
|
|
4561
|
+
rounded: {
|
|
4562
|
+
type: Boolean,
|
|
4563
|
+
reflect: true
|
|
4564
|
+
},
|
|
4565
|
+
|
|
4566
|
+
/**
|
|
4567
|
+
* @private
|
|
4568
|
+
*/
|
|
4569
|
+
tabIndex: {
|
|
4570
|
+
type: Number
|
|
4571
|
+
}
|
|
4572
|
+
};
|
|
4573
|
+
}
|
|
4574
|
+
|
|
4575
|
+
static get styles() {
|
|
4576
|
+
return [
|
|
4577
|
+
colorCss$2,
|
|
4578
|
+
styleCss$2,
|
|
4579
|
+
tokensCss$1
|
|
4580
|
+
];
|
|
4581
|
+
}
|
|
4582
|
+
|
|
4583
|
+
/**
|
|
4584
|
+
* This will register this element with the browser.
|
|
4585
|
+
* @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
|
|
4586
|
+
*
|
|
4587
|
+
* @example
|
|
4588
|
+
* AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
|
|
4589
|
+
*
|
|
4590
|
+
*/
|
|
4591
|
+
static register(name = "auro-dropdown") {
|
|
4592
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
|
|
4593
|
+
}
|
|
4594
|
+
|
|
4595
|
+
connectedCallback() {
|
|
4596
|
+
super.connectedCallback();
|
|
4597
|
+
}
|
|
4598
|
+
|
|
4599
|
+
disconnectedCallback() {
|
|
4600
|
+
super.disconnectedCallback();
|
|
4601
|
+
}
|
|
4602
|
+
|
|
4603
|
+
updated(changedProperties) {
|
|
4604
|
+
this.floater.handleUpdate(changedProperties);
|
|
4605
|
+
|
|
4606
|
+
if (changedProperties.has('mobileFullscreenBreakpoint')) {
|
|
4607
|
+
this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
|
|
4608
|
+
}
|
|
4609
|
+
|
|
4610
|
+
// when trigger's content is changed without any attribute or node change,
|
|
4611
|
+
// `requestUpdate` needs to be called to update hasTriggerContnet
|
|
4612
|
+
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
4613
|
+
this.handleTriggerContentSlotChange();
|
|
4614
|
+
}
|
|
4615
|
+
}
|
|
4616
|
+
|
|
4617
|
+
firstUpdated() {
|
|
4618
|
+
this.floater.configure(this, 'auroDropdown');
|
|
4619
|
+
this.bibContent = this.floater.element.bib;
|
|
4620
|
+
|
|
4621
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
4622
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
4623
|
+
}
|
|
4624
|
+
|
|
4625
|
+
/**
|
|
4626
|
+
* Exposes CSS parts for styling from parent components.
|
|
4627
|
+
* @private
|
|
4628
|
+
* @returns {void}
|
|
4629
|
+
*/
|
|
4630
|
+
exposeCssParts() {
|
|
4631
|
+
this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
|
|
4632
|
+
}
|
|
4633
|
+
|
|
4634
|
+
/**
|
|
4635
|
+
* Determines if content is within a custom slot.
|
|
4636
|
+
* @private
|
|
4637
|
+
* @param {HTMLElement} element - The element to check.
|
|
4638
|
+
* @returns {Boolean}
|
|
4639
|
+
*/
|
|
4640
|
+
isCustomSlotContent(element) {
|
|
4641
|
+
let currentElement = element;
|
|
4642
|
+
|
|
4643
|
+
let inCustomSlot = false;
|
|
4644
|
+
|
|
4645
|
+
while (currentElement) {
|
|
4646
|
+
currentElement = currentElement.parentElement;
|
|
4647
|
+
|
|
4648
|
+
if (currentElement && currentElement.hasAttribute('slot')) {
|
|
4649
|
+
inCustomSlot = true;
|
|
4650
|
+
break;
|
|
4651
|
+
}
|
|
4652
|
+
}
|
|
4653
|
+
|
|
4654
|
+
return inCustomSlot;
|
|
4655
|
+
}
|
|
4656
|
+
|
|
4657
|
+
/**
|
|
4658
|
+
* Handles changes to the trigger content slot and updates related properties.
|
|
4659
|
+
*
|
|
4660
|
+
* It first updates the floater settings
|
|
4661
|
+
* Then, it retrieves the assigned nodes from the event target and checks if any of
|
|
4662
|
+
* the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
|
|
4663
|
+
*
|
|
4664
|
+
* @private
|
|
4665
|
+
* @method handleTriggerContentSlotChange
|
|
4666
|
+
* @param {Event} event - native slotchange event
|
|
4667
|
+
* @returns {void}
|
|
4668
|
+
*/
|
|
4669
|
+
handleTriggerContentSlotChange(event) {
|
|
4670
|
+
this.floater.handleTriggerTabIndex();
|
|
4671
|
+
|
|
4672
|
+
if (event) {
|
|
4673
|
+
this.triggerNode = event.target;
|
|
4674
|
+
this.triggerContentSlot = event.target.assignedNodes();
|
|
4675
|
+
}
|
|
4676
|
+
|
|
4677
|
+
if (this.triggerContentSlot) {
|
|
4678
|
+
this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
|
|
4679
|
+
if (slot.textContent.trim()) {
|
|
4680
|
+
return true;
|
|
4681
|
+
}
|
|
4682
|
+
const slotInSlot = slot.querySelector('slot');
|
|
4683
|
+
if (!slotInSlot) {
|
|
4684
|
+
return false;
|
|
4685
|
+
}
|
|
4686
|
+
const slotsInSlotNodes = slotInSlot.assignedNodes();
|
|
4687
|
+
return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
|
|
4688
|
+
});
|
|
4689
|
+
} else {
|
|
4690
|
+
this.hasTriggerContent = false;
|
|
4691
|
+
}
|
|
4692
|
+
}
|
|
4693
|
+
|
|
4694
|
+
/**
|
|
4695
|
+
* Handles the default slot change event and updates the content.
|
|
4696
|
+
*
|
|
4697
|
+
* This method retrieves all nodes assigned to the default slot of the event target and appends them
|
|
4698
|
+
* to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
|
|
4699
|
+
* notify about the slot change.
|
|
4700
|
+
*
|
|
4701
|
+
* @private
|
|
4702
|
+
* @method handleDefaultSlot
|
|
4703
|
+
* @param {Event} event - The event object representing the slot change.
|
|
4704
|
+
* @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
|
|
4705
|
+
*/
|
|
4706
|
+
handleDefaultSlot(event) {
|
|
4707
|
+
[...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
|
|
4708
|
+
|
|
4709
|
+
if (this.onSlotChange) {
|
|
4710
|
+
this.onSlotChange();
|
|
4711
|
+
}
|
|
4712
|
+
}
|
|
4713
|
+
|
|
4714
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4715
|
+
render() {
|
|
4716
|
+
return u$3`
|
|
4717
|
+
<div>
|
|
4718
|
+
<div
|
|
4719
|
+
id="trigger"
|
|
4720
|
+
class="trigger"
|
|
4721
|
+
part="trigger"
|
|
4722
|
+
role="button"
|
|
4723
|
+
aria-labelledby="triggerLabel"
|
|
4724
|
+
aria-controls="popover"
|
|
4725
|
+
tabindex="${this.tabIndex}"
|
|
4726
|
+
>
|
|
4727
|
+
<div class="triggerContentWrapper">
|
|
4728
|
+
<label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
|
|
4729
|
+
<slot name="label"></slot>
|
|
4730
|
+
</label>
|
|
4731
|
+
<div class="triggerContent">
|
|
4732
|
+
<slot
|
|
4733
|
+
name="trigger"
|
|
4734
|
+
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
4735
|
+
</div>
|
|
4736
|
+
</div>
|
|
4737
|
+
${this.chevron || this.common ? u$3`
|
|
4738
|
+
<div
|
|
4739
|
+
id="showStateIcon"
|
|
4740
|
+
part="chevron">
|
|
4741
|
+
<${this.iconTag}
|
|
4742
|
+
category="interface"
|
|
4743
|
+
name="chevron-down"
|
|
4744
|
+
customColor
|
|
4745
|
+
?disabled=${this.disabled}
|
|
4746
|
+
>
|
|
4747
|
+
</${this.iconTag}>
|
|
4748
|
+
</div>
|
|
4749
|
+
` : undefined }
|
|
4750
|
+
</div>
|
|
4751
|
+
<auro-helptext part="helpText" ?error="${this.error}">
|
|
4752
|
+
<slot name="helpText"></slot>
|
|
4753
|
+
</auro-helptext>
|
|
4754
|
+
<div class="slotContent">
|
|
4755
|
+
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
4756
|
+
</div>
|
|
4757
|
+
<div id="bibSizer" part="size"></div>
|
|
4758
|
+
<auro-dropdownbib
|
|
4759
|
+
id="bib"
|
|
4760
|
+
role="tooltip"
|
|
4761
|
+
?common="${this.common}"
|
|
4762
|
+
?rounded="${this.common || this.rounded}"
|
|
4763
|
+
?inset="${this.common || this.inset}">
|
|
4764
|
+
</auro-dropdownbib>
|
|
4765
|
+
</div>
|
|
4766
|
+
`;
|
|
4767
|
+
}
|
|
4768
|
+
}
|
|
4769
|
+
|
|
4770
|
+
AuroDropdown.register();
|
|
4771
|
+
|
|
4772
|
+
var dropdownVersion = '3.0.0';
|
|
4773
|
+
|
|
4774
|
+
var styleCss = i$f`:host{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}:host ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}:host([isindropdown]){padding:var(--ds-size-300, 1.5rem)}`;
|
|
4775
|
+
|
|
4776
|
+
var colorCss = i$f`:host ::slotted(*:not(:first-child)){border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12))}`;
|
|
4777
|
+
|
|
4778
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4779
|
+
// See LICENSE in the project root for license information.
|
|
4780
|
+
|
|
4781
|
+
|
|
4782
|
+
/**
|
|
4783
|
+
* Auro Counter Wrapper is a group of counter components.
|
|
4784
|
+
*
|
|
4785
|
+
* This web component provides a flexible interface for grouping multiple counters, supporting
|
|
4786
|
+
* validation, custom validity messages, and disabled states based on the group's value.
|
|
4787
|
+
*
|
|
4788
|
+
* @element auro-counter-group
|
|
4789
|
+
* @extends LitElement
|
|
4790
|
+
* @slot Default - Slot for counter elements.
|
|
4791
|
+
*/
|
|
4792
|
+
class AuroCounterWrapper extends r$8 {
|
|
4793
|
+
|
|
4794
|
+
static get styles() {
|
|
4795
|
+
return [
|
|
4796
|
+
colorCss,
|
|
4797
|
+
styleCss
|
|
4798
|
+
];
|
|
4799
|
+
}
|
|
4800
|
+
|
|
4801
|
+
/**
|
|
4802
|
+
* Registers the custom element with the browser.
|
|
4803
|
+
* @param {string} [name="auro-counter-wrapper"] - Custom element name to register.
|
|
4804
|
+
* @example
|
|
4805
|
+
* AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
|
|
4806
|
+
*/
|
|
4807
|
+
static register(name = "auro-counter-wrapper") {
|
|
4808
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroCounterWrapper);
|
|
4809
|
+
}
|
|
4810
|
+
|
|
4811
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
4812
|
+
render() {
|
|
4813
|
+
return u$5`<slot></slot>`;
|
|
4814
|
+
}
|
|
4815
|
+
}
|
|
4816
|
+
|
|
4817
|
+
/* istanbul ignore else */
|
|
4818
|
+
// define the name of the custom component
|
|
4819
|
+
if (!customElements.get("auro-counter-wrapper")) {
|
|
4820
|
+
customElements.define("auro-counter-wrapper", AuroCounterWrapper);
|
|
4821
|
+
}
|
|
4822
|
+
|
|
4823
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
4824
|
+
|
|
4825
|
+
|
|
4826
|
+
/**
|
|
4827
|
+
* Auro Counter Group is a group of counter components.
|
|
4828
|
+
*
|
|
4829
|
+
* This web component provides a flexible interface for grouping multiple counters, supporting
|
|
4830
|
+
* validation, custom validity messages, and disabled states based on the group's value.
|
|
4831
|
+
*
|
|
4832
|
+
* @element auro-counter-group
|
|
4833
|
+
* @extends LitElement
|
|
4834
|
+
* @slot Default - Slot for counter elements.
|
|
4835
|
+
* @slot Label - Dropdown label content. Only used when `isDropdown` is true.
|
|
4836
|
+
* @slot ValueText - Dropdown value text display. Only used when `isDropdown` is true.
|
|
4837
|
+
* @slot HelpText - Dropdown help text content. Only used when `isDropdown` is true.
|
|
4838
|
+
*/
|
|
4839
|
+
class AuroCounterGroup extends r$8 {
|
|
4840
|
+
constructor() {
|
|
4841
|
+
super();
|
|
4842
|
+
|
|
4843
|
+
this.isDropdown = false;
|
|
4844
|
+
|
|
4845
|
+
this.max = undefined;
|
|
4846
|
+
this.min = undefined;
|
|
4847
|
+
this.total = undefined;
|
|
4848
|
+
this.validity = undefined;
|
|
4849
|
+
this.value = undefined;
|
|
4850
|
+
|
|
4851
|
+
/**
|
|
4852
|
+
* @private
|
|
4853
|
+
*/
|
|
4854
|
+
this.counters = undefined;
|
|
4855
|
+
|
|
4856
|
+
/**
|
|
4857
|
+
* @private
|
|
4858
|
+
*/
|
|
4859
|
+
this.validation = new AuroFormValidation();
|
|
4860
|
+
|
|
4861
|
+
/**
|
|
4862
|
+
* Generate unique names for dependency components.
|
|
4863
|
+
* @private
|
|
4864
|
+
*/
|
|
4865
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
1682
4866
|
|
|
1683
4867
|
/**
|
|
1684
4868
|
* Dynamically generated dropdown tag.
|
|
@@ -1689,7 +4873,7 @@ class AuroCounterGroup extends r {
|
|
|
1689
4873
|
}
|
|
1690
4874
|
|
|
1691
4875
|
static get styles() {
|
|
1692
|
-
return [styleCss$
|
|
4876
|
+
return [styleCss$5];
|
|
1693
4877
|
}
|
|
1694
4878
|
|
|
1695
4879
|
static get properties() {
|
|
@@ -1861,14 +5045,14 @@ class AuroCounterGroup extends r {
|
|
|
1861
5045
|
* AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
|
|
1862
5046
|
*/
|
|
1863
5047
|
static register(name = "auro-counter-group") {
|
|
1864
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounterGroup);
|
|
5048
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroCounterGroup);
|
|
1865
5049
|
}
|
|
1866
5050
|
|
|
1867
5051
|
// function that renders the HTML and CSS into the scope of the component
|
|
1868
5052
|
render() {
|
|
1869
|
-
return u`
|
|
5053
|
+
return u$5`
|
|
1870
5054
|
${this.isDropdown
|
|
1871
|
-
? u`<${this.dropdownTag} common chevron>
|
|
5055
|
+
? u$5`<${this.dropdownTag} common chevron>
|
|
1872
5056
|
<div slot="trigger"><slot name="valueText">
|
|
1873
5057
|
${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.shadowRoot.querySelector('.label slot').assignedNodes()[0].textContent}${index !== this.counters.length - 1 ? ', ' : ''}`)}
|
|
1874
5058
|
</slot></div>
|
|
@@ -1878,7 +5062,7 @@ class AuroCounterGroup extends r {
|
|
|
1878
5062
|
</auro-counter-wrapper>
|
|
1879
5063
|
</${this.dropdownTag}>
|
|
1880
5064
|
<slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
|
|
1881
|
-
: u`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
|
|
5065
|
+
: u$5`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
|
|
1882
5066
|
}`;
|
|
1883
5067
|
}
|
|
1884
5068
|
}
|