@aurodesignsystem/auro-formkit 4.0.0-rc-676.1 → 4.0.0-rc-1002.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +180 -1
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1184 -105
- package/components/bibtemplate/dist/registered.js +1184 -105
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +52 -17
- package/components/checkbox/demo/api.min.js +66 -33
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.min.js +66 -33
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
- package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
- package/components/checkbox/dist/index.js +65 -32
- package/components/checkbox/dist/registered.js +65 -32
- package/components/combobox/README.md +2 -0
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +124 -7
- package/components/combobox/demo/api.min.js +4542 -1330
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +108 -4
- package/components/combobox/demo/index.min.js +4542 -1330
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/demo/readme.md +2 -0
- package/components/combobox/dist/auro-combobox.d.ts +81 -18
- package/components/combobox/dist/index.js +4588 -1520
- package/components/combobox/dist/registered.js +4588 -1520
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +167 -21
- package/components/counter/demo/api.min.js +3621 -866
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +191 -34
- package/components/counter/demo/index.min.js +3621 -866
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/auro-counter-group.d.ts +162 -11
- package/components/counter/dist/auro-counter.d.ts +16 -0
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +3619 -864
- package/components/counter/dist/registered.js +3619 -864
- package/components/datepicker/README.md +2 -1
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +80 -30
- package/components/datepicker/demo/api.min.js +14795 -10365
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +96 -4
- package/components/datepicker/demo/index.min.js +14795 -10365
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/demo/readme.md +2 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +14916 -10486
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +14916 -10486
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +94 -262
- package/components/dropdown/demo/api.min.js +738 -259
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +93 -266
- package/components/dropdown/demo/index.min.js +738 -259
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +710 -231
- package/components/dropdown/dist/registered.js +710 -231
- package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
- package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
- package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.md +1 -1
- package/components/form/demo/api.min.js +3 -3
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +3 -3
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/auro-form.d.ts +1 -1
- package/components/form/dist/index.js +2 -2
- package/components/form/dist/registered.js +2 -2
- package/components/helptext/dist/auro-helptext.d.ts +0 -2
- package/components/helptext/dist/index.js +2 -4
- package/components/helptext/dist/registered.js +2 -4
- package/components/input/README.md +6 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +258 -144
- package/components/input/demo/api.min.js +1550 -497
- package/components/input/demo/index.html +17 -11
- package/components/input/demo/index.md +95 -27
- package/components/input/demo/index.min.js +1549 -496
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +6 -2
- package/components/input/dist/auro-input.d.ts +139 -3
- package/components/input/dist/base-input.d.ts +80 -26
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +1504 -451
- package/components/input/dist/registered.js +1504 -451
- package/components/input/dist/styles/classic/color-css.d.ts +2 -0
- package/components/input/dist/styles/classic/style-css.d.ts +2 -0
- package/components/input/dist/styles/default/borders-css.d.ts +2 -0
- package/components/input/dist/styles/default/color-css.d.ts +2 -0
- package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
- package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
- package/components/input/dist/styles/default/style-css.d.ts +2 -0
- package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
- package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
- package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
- package/components/layoutElement/dist/auroElement.d.ts +34 -0
- package/components/layoutElement/dist/index.d.ts +2 -0
- package/components/layoutElement/dist/index.js +98 -0
- package/components/layoutElement/dist/registered.js +98 -0
- package/components/menu/demo/api.html +17 -10
- package/components/menu/demo/api.md +65 -8
- package/components/menu/demo/api.min.js +304 -65
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +304 -65
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +53 -7
- package/components/menu/dist/auro-menuoption.d.ts +21 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +289 -50
- package/components/menu/dist/registered.js +289 -50
- package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
- package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
- package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
- package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +41 -9
- package/components/radio/demo/api.min.js +93 -95
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +93 -95
- package/components/radio/demo/readme.html +16 -9
- package/components/radio/dist/auro-radio-group.d.ts +1 -1
- package/components/radio/dist/auro-radio.d.ts +11 -12
- package/components/radio/dist/index.js +92 -94
- package/components/radio/dist/registered.js +92 -94
- package/components/select/README.md +1 -0
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +156 -114
- package/components/select/demo/api.min.js +3126 -657
- package/components/select/demo/index.html +17 -10
- package/components/select/demo/index.md +398 -62
- package/components/select/demo/index.min.js +3129 -648
- package/components/select/demo/readme.html +16 -9
- package/components/select/demo/readme.md +1 -0
- package/components/select/dist/auro-select.d.ts +173 -18
- package/components/select/dist/helptextVersion.d.ts +2 -0
- package/components/select/dist/index.js +3128 -791
- package/components/select/dist/registered.js +3128 -791
- package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/select/dist/styles/tokens-css.d.ts +2 -0
- package/package.json +33 -32
- package/packages/build-tools/src/postinstall.mjs +0 -12
- /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
- /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
|
@@ -12,24 +12,37 @@ const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{c
|
|
|
12
12
|
*/
|
|
13
13
|
const a$1=Symbol.for(""),o$4=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$4(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$1=n$2(x);
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* @license
|
|
17
|
+
* Copyright 2017 Google LLC
|
|
18
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
+
*/
|
|
20
|
+
const t$1={ATTRIBUTE:1},e$3=t=>(...e)=>({_$litDirective$:t,values:e});let i$3 = 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)}};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @license
|
|
24
|
+
* Copyright 2018 Google LLC
|
|
25
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
26
|
+
*/const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$1.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(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
|
|
27
|
+
|
|
15
28
|
/**
|
|
16
29
|
* @license
|
|
17
30
|
* Copyright 2019 Google LLC
|
|
18
31
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
32
|
*/
|
|
20
|
-
const t
|
|
33
|
+
const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = 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$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
|
|
21
34
|
|
|
22
35
|
/**
|
|
23
36
|
* @license
|
|
24
37
|
* Copyright 2017 Google LLC
|
|
25
38
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
26
|
-
*/const{is:i$
|
|
39
|
+
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
|
|
27
40
|
|
|
28
41
|
/**
|
|
29
42
|
* @license
|
|
30
43
|
* Copyright 2017 Google LLC
|
|
31
44
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
32
|
-
*/const s=globalThis;
|
|
45
|
+
*/const s=globalThis;class i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
|
|
33
46
|
|
|
34
47
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
35
48
|
// See LICENSE in the project root for license information.
|
|
@@ -621,16 +634,22 @@ const flip$1 = function (options) {
|
|
|
621
634
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
622
635
|
const nextPlacement = placements[nextIndex];
|
|
623
636
|
if (nextPlacement) {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
637
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
638
|
+
if (!ignoreCrossAxisOverflow ||
|
|
639
|
+
// We leave the current main axis only if every placement on that axis
|
|
640
|
+
// overflows the main axis.
|
|
641
|
+
overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
|
|
642
|
+
// Try next placement and re-run the lifecycle.
|
|
643
|
+
return {
|
|
644
|
+
data: {
|
|
645
|
+
index: nextIndex,
|
|
646
|
+
overflows: overflowsData
|
|
647
|
+
},
|
|
648
|
+
reset: {
|
|
649
|
+
placement: nextPlacement
|
|
650
|
+
}
|
|
651
|
+
};
|
|
652
|
+
}
|
|
634
653
|
}
|
|
635
654
|
|
|
636
655
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -1282,6 +1301,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1282
1301
|
scrollTop: 0
|
|
1283
1302
|
};
|
|
1284
1303
|
const offsets = createCoords(0);
|
|
1304
|
+
|
|
1305
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
1306
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
1307
|
+
function setLeftRTLScrollbarOffset() {
|
|
1308
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
1309
|
+
}
|
|
1285
1310
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1286
1311
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1287
1312
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -1291,11 +1316,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1291
1316
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1292
1317
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1293
1318
|
} else if (documentElement) {
|
|
1294
|
-
|
|
1295
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
1296
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
1319
|
+
setLeftRTLScrollbarOffset();
|
|
1297
1320
|
}
|
|
1298
1321
|
}
|
|
1322
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
1323
|
+
setLeftRTLScrollbarOffset();
|
|
1324
|
+
}
|
|
1299
1325
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1300
1326
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1301
1327
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -1472,7 +1498,7 @@ function observeMove(element, onMove) {
|
|
|
1472
1498
|
// Handle <iframe>s
|
|
1473
1499
|
root: root.ownerDocument
|
|
1474
1500
|
});
|
|
1475
|
-
} catch (
|
|
1501
|
+
} catch (_e) {
|
|
1476
1502
|
io = new IntersectionObserver(handleObserve, options);
|
|
1477
1503
|
}
|
|
1478
1504
|
io.observe(element);
|
|
@@ -1704,7 +1730,7 @@ class AuroFloatingUI {
|
|
|
1704
1730
|
*/
|
|
1705
1731
|
mirrorSize() {
|
|
1706
1732
|
// mirror the boxsize from bibSizer
|
|
1707
|
-
if (this.element.bibSizer) {
|
|
1733
|
+
if (this.element.bibSizer && this.element.matchWidth) {
|
|
1708
1734
|
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
1709
1735
|
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
1710
1736
|
if (sizerStyle.width !== '0px') {
|
|
@@ -1840,6 +1866,7 @@ class AuroFloatingUI {
|
|
|
1840
1866
|
this.element.bib.style.left = "0px";
|
|
1841
1867
|
this.element.bib.style.width = '';
|
|
1842
1868
|
this.element.bib.style.height = '';
|
|
1869
|
+
this.element.style.contain = '';
|
|
1843
1870
|
|
|
1844
1871
|
// reset the size that was mirroring `size` css-part
|
|
1845
1872
|
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
@@ -1864,6 +1891,7 @@ class AuroFloatingUI {
|
|
|
1864
1891
|
this.element.bib.style.position = '';
|
|
1865
1892
|
this.element.bib.removeAttribute('isfullscreen');
|
|
1866
1893
|
this.element.isBibFullscreen = false;
|
|
1894
|
+
this.element.style.contain = 'layout';
|
|
1867
1895
|
}
|
|
1868
1896
|
|
|
1869
1897
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -1916,22 +1944,16 @@ class AuroFloatingUI {
|
|
|
1916
1944
|
if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
|
|
1917
1945
|
return;
|
|
1918
1946
|
}
|
|
1919
|
-
|
|
1947
|
+
|
|
1920
1948
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
1921
1949
|
if (this.element.bib.hasAttribute('isfullscreen')) {
|
|
1922
1950
|
return;
|
|
1923
1951
|
}
|
|
1924
1952
|
|
|
1925
|
-
this.hideBib();
|
|
1953
|
+
this.hideBib("keydown");
|
|
1926
1954
|
}
|
|
1927
1955
|
|
|
1928
1956
|
setupHideHandlers() {
|
|
1929
|
-
this.preventFocusLoseOnBibClick = (event) => {
|
|
1930
|
-
event.preventDefault();
|
|
1931
|
-
event.stopPropagation();
|
|
1932
|
-
};
|
|
1933
|
-
this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
|
|
1934
|
-
|
|
1935
1957
|
// Define handlers & store references
|
|
1936
1958
|
this.focusHandler = () => this.handleFocusLoss();
|
|
1937
1959
|
|
|
@@ -1947,7 +1969,7 @@ class AuroFloatingUI {
|
|
|
1947
1969
|
document.expandedAuroFormkitDropdown = null;
|
|
1948
1970
|
document.expandedAuroFloater = this;
|
|
1949
1971
|
} else {
|
|
1950
|
-
this.hideBib();
|
|
1972
|
+
this.hideBib("click");
|
|
1951
1973
|
}
|
|
1952
1974
|
}
|
|
1953
1975
|
};
|
|
@@ -1960,7 +1982,7 @@ class AuroFloatingUI {
|
|
|
1960
1982
|
// if something else is open, let it handle itself
|
|
1961
1983
|
return;
|
|
1962
1984
|
}
|
|
1963
|
-
this.hideBib();
|
|
1985
|
+
this.hideBib("keydown");
|
|
1964
1986
|
}
|
|
1965
1987
|
};
|
|
1966
1988
|
|
|
@@ -1981,11 +2003,6 @@ class AuroFloatingUI {
|
|
|
1981
2003
|
cleanupHideHandlers() {
|
|
1982
2004
|
// Remove event listeners if they exist
|
|
1983
2005
|
|
|
1984
|
-
if (this.preventFocusLoseOnBibClick) {
|
|
1985
|
-
this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
|
|
1986
|
-
delete this.preventFocusLoseOnBibClick;
|
|
1987
|
-
}
|
|
1988
|
-
|
|
1989
2006
|
if (this.focusHandler) {
|
|
1990
2007
|
document.removeEventListener('focusin', this.focusHandler);
|
|
1991
2008
|
this.focusHandler = null;
|
|
@@ -2043,7 +2060,11 @@ class AuroFloatingUI {
|
|
|
2043
2060
|
}
|
|
2044
2061
|
}
|
|
2045
2062
|
|
|
2046
|
-
|
|
2063
|
+
/**
|
|
2064
|
+
* Hides the floating UI element.
|
|
2065
|
+
* @param {String} eventType - The event type that triggered the hiding action.
|
|
2066
|
+
*/
|
|
2067
|
+
hideBib(eventType = "unknown") {
|
|
2047
2068
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
2048
2069
|
this.lockScroll(false);
|
|
2049
2070
|
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
@@ -2054,7 +2075,7 @@ class AuroFloatingUI {
|
|
|
2054
2075
|
if (this.showing) {
|
|
2055
2076
|
this.cleanupHideHandlers();
|
|
2056
2077
|
this.showing = false;
|
|
2057
|
-
this.dispatchEventDropdownToggle();
|
|
2078
|
+
this.dispatchEventDropdownToggle(eventType);
|
|
2058
2079
|
}
|
|
2059
2080
|
}
|
|
2060
2081
|
document.expandedAuroFloater = null;
|
|
@@ -2063,11 +2084,13 @@ class AuroFloatingUI {
|
|
|
2063
2084
|
/**
|
|
2064
2085
|
* @private
|
|
2065
2086
|
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
2087
|
+
* @param {String} eventType - The event type that triggered the toggle action.
|
|
2066
2088
|
*/
|
|
2067
|
-
dispatchEventDropdownToggle() {
|
|
2089
|
+
dispatchEventDropdownToggle(eventType) {
|
|
2068
2090
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
2069
2091
|
detail: {
|
|
2070
2092
|
expanded: this.showing,
|
|
2093
|
+
eventType: eventType || "unknown",
|
|
2071
2094
|
},
|
|
2072
2095
|
composed: true
|
|
2073
2096
|
});
|
|
@@ -2077,7 +2100,7 @@ class AuroFloatingUI {
|
|
|
2077
2100
|
|
|
2078
2101
|
handleClick() {
|
|
2079
2102
|
if (this.element.isPopoverVisible) {
|
|
2080
|
-
this.hideBib();
|
|
2103
|
+
this.hideBib("click");
|
|
2081
2104
|
} else {
|
|
2082
2105
|
this.showBib();
|
|
2083
2106
|
}
|
|
@@ -2100,8 +2123,9 @@ class AuroFloatingUI {
|
|
|
2100
2123
|
// Space is included as it's expected behavior for interactive elements
|
|
2101
2124
|
|
|
2102
2125
|
const origin = event.composedPath()[0];
|
|
2103
|
-
if (event.key === 'Enter' || (
|
|
2104
|
-
|
|
2126
|
+
if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
|
|
2127
|
+
|
|
2128
|
+
event.preventDefault();
|
|
2105
2129
|
this.handleClick();
|
|
2106
2130
|
}
|
|
2107
2131
|
break;
|
|
@@ -2112,7 +2136,7 @@ class AuroFloatingUI {
|
|
|
2112
2136
|
break;
|
|
2113
2137
|
case 'mouseleave':
|
|
2114
2138
|
if (this.element.hoverToggle) {
|
|
2115
|
-
this.hideBib();
|
|
2139
|
+
this.hideBib("mouseleave");
|
|
2116
2140
|
}
|
|
2117
2141
|
break;
|
|
2118
2142
|
case 'focus':
|
|
@@ -2255,6 +2279,267 @@ class AuroFloatingUI {
|
|
|
2255
2279
|
}
|
|
2256
2280
|
}
|
|
2257
2281
|
|
|
2282
|
+
// Selectors for focusable elements
|
|
2283
|
+
const FOCUSABLE_SELECTORS = [
|
|
2284
|
+
'a[href]',
|
|
2285
|
+
'button:not([disabled])',
|
|
2286
|
+
'textarea:not([disabled])',
|
|
2287
|
+
'input:not([disabled])',
|
|
2288
|
+
'select:not([disabled])',
|
|
2289
|
+
'[role="tab"]:not([disabled])',
|
|
2290
|
+
'[role="link"]:not([disabled])',
|
|
2291
|
+
'[role="button"]:not([disabled])',
|
|
2292
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
2293
|
+
'[contenteditable]:not([contenteditable="false"])'
|
|
2294
|
+
];
|
|
2295
|
+
|
|
2296
|
+
// List of custom components that are known to be focusable
|
|
2297
|
+
const FOCUSABLE_COMPONENTS = [
|
|
2298
|
+
'auro-checkbox',
|
|
2299
|
+
'auro-radio',
|
|
2300
|
+
'auro-dropdown',
|
|
2301
|
+
'auro-button',
|
|
2302
|
+
'auro-combobox',
|
|
2303
|
+
'auro-input',
|
|
2304
|
+
'auro-counter',
|
|
2305
|
+
'auro-menu',
|
|
2306
|
+
'auro-select',
|
|
2307
|
+
'auro-datepicker',
|
|
2308
|
+
'auro-hyperlink',
|
|
2309
|
+
'auro-accordion',
|
|
2310
|
+
];
|
|
2311
|
+
|
|
2312
|
+
/**
|
|
2313
|
+
* Determines if a given element is a custom focusable component.
|
|
2314
|
+
* Returns true if the element matches a known focusable component and is not disabled.
|
|
2315
|
+
*
|
|
2316
|
+
* @param {HTMLElement} element The element to check for focusability.
|
|
2317
|
+
* @returns {boolean} True if the element is a focusable custom component, false otherwise.
|
|
2318
|
+
*/
|
|
2319
|
+
function isFocusableComponent(element) {
|
|
2320
|
+
const componentName = element.tagName.toLowerCase();
|
|
2321
|
+
|
|
2322
|
+
// Guard Clause: Element is a focusable component
|
|
2323
|
+
if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
|
|
2324
|
+
|
|
2325
|
+
// Guard Clause: Element is not disabled
|
|
2326
|
+
if (element.hasAttribute('disabled')) return false;
|
|
2327
|
+
|
|
2328
|
+
// Guard Clause: The element is a hyperlink and has no href attribute
|
|
2329
|
+
if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
|
|
2330
|
+
|
|
2331
|
+
// If all guard clauses pass, the element is a focusable component
|
|
2332
|
+
return true;
|
|
2333
|
+
}
|
|
2334
|
+
|
|
2335
|
+
/**
|
|
2336
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
2337
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
2338
|
+
*
|
|
2339
|
+
* @param {HTMLElement} container The container to search within
|
|
2340
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
2341
|
+
*/
|
|
2342
|
+
function getFocusableElements(container) {
|
|
2343
|
+
// Get elements in DOM order by walking the tree
|
|
2344
|
+
const orderedFocusableElements = [];
|
|
2345
|
+
|
|
2346
|
+
// Define a recursive function to collect focusable elements in DOM order
|
|
2347
|
+
const collectFocusableElements = (root) => {
|
|
2348
|
+
// Check if current element is focusable
|
|
2349
|
+
if (root.nodeType === Node.ELEMENT_NODE) {
|
|
2350
|
+
// Check if this is a custom component that is focusable
|
|
2351
|
+
const isComponentFocusable = isFocusableComponent(root);
|
|
2352
|
+
|
|
2353
|
+
if (isComponentFocusable) {
|
|
2354
|
+
// Add the component itself as a focusable element and don't traverse its shadow DOM
|
|
2355
|
+
orderedFocusableElements.push(root);
|
|
2356
|
+
return; // Skip traversing inside this component
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2359
|
+
// Check if the element itself matches any selector
|
|
2360
|
+
for (const selector of FOCUSABLE_SELECTORS) {
|
|
2361
|
+
if (root.matches?.(selector)) {
|
|
2362
|
+
orderedFocusableElements.push(root);
|
|
2363
|
+
break; // Once we know it's focusable, no need to check other selectors
|
|
2364
|
+
}
|
|
2365
|
+
}
|
|
2366
|
+
|
|
2367
|
+
// Process shadow DOM only for non-Auro components
|
|
2368
|
+
if (root.shadowRoot) {
|
|
2369
|
+
// Process shadow DOM children in order
|
|
2370
|
+
if (root.shadowRoot.children) {
|
|
2371
|
+
Array.from(root.shadowRoot.children).forEach(child => {
|
|
2372
|
+
collectFocusableElements(child);
|
|
2373
|
+
});
|
|
2374
|
+
}
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
// Process slots and their assigned nodes in order
|
|
2378
|
+
if (root.tagName === 'SLOT') {
|
|
2379
|
+
const assignedNodes = root.assignedNodes({ flatten: true });
|
|
2380
|
+
for (const node of assignedNodes) {
|
|
2381
|
+
collectFocusableElements(node);
|
|
2382
|
+
}
|
|
2383
|
+
} else {
|
|
2384
|
+
// Process light DOM children in order
|
|
2385
|
+
if (root.children) {
|
|
2386
|
+
Array.from(root.children).forEach(child => {
|
|
2387
|
+
collectFocusableElements(child);
|
|
2388
|
+
});
|
|
2389
|
+
}
|
|
2390
|
+
}
|
|
2391
|
+
}
|
|
2392
|
+
};
|
|
2393
|
+
|
|
2394
|
+
// Start the traversal from the container
|
|
2395
|
+
collectFocusableElements(container);
|
|
2396
|
+
|
|
2397
|
+
// Remove duplicates that might have been collected through different paths
|
|
2398
|
+
// while preserving order
|
|
2399
|
+
const uniqueElements = [];
|
|
2400
|
+
const seen = new Set();
|
|
2401
|
+
|
|
2402
|
+
for (const element of orderedFocusableElements) {
|
|
2403
|
+
if (!seen.has(element)) {
|
|
2404
|
+
seen.add(element);
|
|
2405
|
+
uniqueElements.push(element);
|
|
2406
|
+
}
|
|
2407
|
+
}
|
|
2408
|
+
|
|
2409
|
+
return uniqueElements;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
/**
|
|
2413
|
+
* FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
|
|
2414
|
+
* It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
|
|
2415
|
+
*/
|
|
2416
|
+
class FocusTrap {
|
|
2417
|
+
/**
|
|
2418
|
+
* Creates a new FocusTrap instance for the given container element.
|
|
2419
|
+
* Initializes event listeners and prepares the container for focus management.
|
|
2420
|
+
*
|
|
2421
|
+
* @param {HTMLElement} container The DOM element to trap focus within.
|
|
2422
|
+
* @throws {Error} If the provided container is not a valid HTMLElement.
|
|
2423
|
+
*/
|
|
2424
|
+
constructor(container) {
|
|
2425
|
+
if (!container || !(container instanceof HTMLElement)) {
|
|
2426
|
+
throw new Error("FocusTrap requires a valid HTMLElement.");
|
|
2427
|
+
}
|
|
2428
|
+
|
|
2429
|
+
this.container = container;
|
|
2430
|
+
this.tabDirection = 'forward'; // or 'backward'
|
|
2431
|
+
|
|
2432
|
+
this._init();
|
|
2433
|
+
}
|
|
2434
|
+
|
|
2435
|
+
/**
|
|
2436
|
+
* Initializes the focus trap by setting up event listeners and attributes on the container.
|
|
2437
|
+
* Prepares the container for focus management, including support for shadow DOM and inert attributes.
|
|
2438
|
+
*
|
|
2439
|
+
* @private
|
|
2440
|
+
*/
|
|
2441
|
+
_init() {
|
|
2442
|
+
|
|
2443
|
+
// Add inert attribute to prevent focusing programmatically as well (if supported)
|
|
2444
|
+
if ('inert' in HTMLElement.prototype) {
|
|
2445
|
+
this.container.inert = false; // Ensure the container isn't inert
|
|
2446
|
+
this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
|
|
2447
|
+
}
|
|
2448
|
+
|
|
2449
|
+
// Track tab direction
|
|
2450
|
+
this.container.addEventListener('keydown', this._onKeydown);
|
|
2451
|
+
}
|
|
2452
|
+
|
|
2453
|
+
/**
|
|
2454
|
+
* Handles keydown events to manage tab navigation within the container.
|
|
2455
|
+
* Ensures that focus wraps around when reaching the first or last focusable element.
|
|
2456
|
+
*
|
|
2457
|
+
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
2458
|
+
* @private
|
|
2459
|
+
*/
|
|
2460
|
+
_onKeydown = (e) => {
|
|
2461
|
+
|
|
2462
|
+
if (e.key === 'Tab') {
|
|
2463
|
+
|
|
2464
|
+
// Set the tab direction based on the key pressed
|
|
2465
|
+
this.tabDirection = e.shiftKey ? 'backward' : 'forward';
|
|
2466
|
+
|
|
2467
|
+
// Get the active element(s) in the document and shadow root
|
|
2468
|
+
// This will include the active element in the shadow DOM if it exists
|
|
2469
|
+
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
2470
|
+
let activeElement = document.activeElement;
|
|
2471
|
+
const actives = [activeElement];
|
|
2472
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
2473
|
+
actives.push(activeElement.shadowRoot.activeElement);
|
|
2474
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
2475
|
+
}
|
|
2476
|
+
|
|
2477
|
+
// Update the focusable elements
|
|
2478
|
+
const focusables = this._getFocusableElements();
|
|
2479
|
+
|
|
2480
|
+
// If we're at either end of the focusable elements, wrap around to the other end
|
|
2481
|
+
const focusIndex =
|
|
2482
|
+
(actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
|
|
2483
|
+
? focusables.length - 1
|
|
2484
|
+
: actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
|
|
2485
|
+
? 0
|
|
2486
|
+
: null;
|
|
2487
|
+
|
|
2488
|
+
if (focusIndex !== null) {
|
|
2489
|
+
focusables[focusIndex].focus();
|
|
2490
|
+
e.preventDefault(); // Prevent default tab behavior
|
|
2491
|
+
e.stopPropagation(); // Stop the event from bubbling up
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
};
|
|
2495
|
+
|
|
2496
|
+
/**
|
|
2497
|
+
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
2498
|
+
* Returns a unique, ordered array of elements that can receive focus.
|
|
2499
|
+
*
|
|
2500
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
2501
|
+
* @private
|
|
2502
|
+
*/
|
|
2503
|
+
_getFocusableElements() {
|
|
2504
|
+
// Use the imported utility function to get focusable elements
|
|
2505
|
+
const elements = getFocusableElements(this.container);
|
|
2506
|
+
|
|
2507
|
+
// Filter out any elements with the 'focus-bookend' class
|
|
2508
|
+
return elements;
|
|
2509
|
+
}
|
|
2510
|
+
|
|
2511
|
+
/**
|
|
2512
|
+
* Moves focus to the first focusable element within the container.
|
|
2513
|
+
* Useful for setting initial focus when activating the focus trap.
|
|
2514
|
+
*/
|
|
2515
|
+
focusFirstElement() {
|
|
2516
|
+
const focusables = this._getFocusableElements();
|
|
2517
|
+
if (focusables.length) focusables[0].focus();
|
|
2518
|
+
}
|
|
2519
|
+
|
|
2520
|
+
/**
|
|
2521
|
+
* Moves focus to the last focusable element within the container.
|
|
2522
|
+
* Useful for setting focus when deactivating or cycling focus in reverse.
|
|
2523
|
+
*/
|
|
2524
|
+
focusLastElement() {
|
|
2525
|
+
const focusables = this._getFocusableElements();
|
|
2526
|
+
if (focusables.length) focusables[focusables.length - 1].focus();
|
|
2527
|
+
}
|
|
2528
|
+
|
|
2529
|
+
/**
|
|
2530
|
+
* Removes event listeners and attributes added by the focus trap.
|
|
2531
|
+
* Call this method to clean up when the focus trap is no longer needed.
|
|
2532
|
+
*/
|
|
2533
|
+
disconnect() {
|
|
2534
|
+
|
|
2535
|
+
if (this.container.hasAttribute('data-focus-trap-container')) {
|
|
2536
|
+
this.container.removeAttribute('data-focus-trap-container');
|
|
2537
|
+
}
|
|
2538
|
+
|
|
2539
|
+
this.container.removeEventListener('keydown', this._onKeydown);
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2258
2543
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2259
2544
|
// See LICENSE in the project root for license information.
|
|
2260
2545
|
|
|
@@ -2295,19 +2580,6 @@ class AuroDependencyVersioning {
|
|
|
2295
2580
|
}
|
|
2296
2581
|
}
|
|
2297
2582
|
|
|
2298
|
-
/**
|
|
2299
|
-
* @license
|
|
2300
|
-
* Copyright 2017 Google LLC
|
|
2301
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
2302
|
-
*/
|
|
2303
|
-
const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
2304
|
-
|
|
2305
|
-
/**
|
|
2306
|
-
* @license
|
|
2307
|
-
* Copyright 2018 Google LLC
|
|
2308
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
2309
|
-
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
|
|
2310
|
-
|
|
2311
2583
|
/**
|
|
2312
2584
|
* @license
|
|
2313
2585
|
* Copyright 2018 Google LLC
|
|
@@ -2324,7 +2596,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
2324
2596
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
2325
2597
|
*/
|
|
2326
2598
|
|
|
2327
|
-
class AuroElement extends i
|
|
2599
|
+
let AuroElement$1 = class AuroElement extends i {
|
|
2328
2600
|
|
|
2329
2601
|
// function to define props used within the scope of this component
|
|
2330
2602
|
static get properties() {
|
|
@@ -2348,7 +2620,7 @@ class AuroElement extends i$1 {
|
|
|
2348
2620
|
|
|
2349
2621
|
return 'false'
|
|
2350
2622
|
}
|
|
2351
|
-
}
|
|
2623
|
+
};
|
|
2352
2624
|
|
|
2353
2625
|
var error = {"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>"};
|
|
2354
2626
|
|
|
@@ -2380,7 +2652,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
2380
2652
|
return _fetchMap.get(uri);
|
|
2381
2653
|
};
|
|
2382
2654
|
|
|
2383
|
-
var styleCss$3 = i$
|
|
2655
|
+
var styleCss$3 = i$2`: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}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
2384
2656
|
|
|
2385
2657
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2386
2658
|
// See LICENSE in the project root for license information.
|
|
@@ -2392,7 +2664,7 @@ var styleCss$3 = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
2392
2664
|
*/
|
|
2393
2665
|
|
|
2394
2666
|
// build the component class
|
|
2395
|
-
class BaseIcon extends AuroElement {
|
|
2667
|
+
class BaseIcon extends AuroElement$1 {
|
|
2396
2668
|
constructor() {
|
|
2397
2669
|
super();
|
|
2398
2670
|
this.onDark = false;
|
|
@@ -2422,7 +2694,7 @@ class BaseIcon extends AuroElement {
|
|
|
2422
2694
|
}
|
|
2423
2695
|
|
|
2424
2696
|
static get styles() {
|
|
2425
|
-
return i$
|
|
2697
|
+
return i$2`
|
|
2426
2698
|
${styleCss$3}
|
|
2427
2699
|
`;
|
|
2428
2700
|
}
|
|
@@ -2464,9 +2736,9 @@ class BaseIcon extends AuroElement {
|
|
|
2464
2736
|
}
|
|
2465
2737
|
}
|
|
2466
2738
|
|
|
2467
|
-
var tokensCss$2 = i$
|
|
2739
|
+
var tokensCss$2 = i$2`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
2468
2740
|
|
|
2469
|
-
var colorCss$3 = i$
|
|
2741
|
+
var colorCss$3 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
2470
2742
|
|
|
2471
2743
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2472
2744
|
// See LICENSE in the project root for license information.
|
|
@@ -2585,7 +2857,8 @@ class AuroIcon extends BaseIcon {
|
|
|
2585
2857
|
* Allows custom color to be set.
|
|
2586
2858
|
*/
|
|
2587
2859
|
customColor: {
|
|
2588
|
-
type: Boolean
|
|
2860
|
+
type: Boolean,
|
|
2861
|
+
reflect: true
|
|
2589
2862
|
},
|
|
2590
2863
|
|
|
2591
2864
|
/**
|
|
@@ -2624,9 +2897,9 @@ class AuroIcon extends BaseIcon {
|
|
|
2624
2897
|
static get styles() {
|
|
2625
2898
|
return [
|
|
2626
2899
|
super.styles,
|
|
2627
|
-
i$
|
|
2628
|
-
i$
|
|
2629
|
-
i$
|
|
2900
|
+
i$2`${tokensCss$2}`,
|
|
2901
|
+
i$2`${styleCss$3}`,
|
|
2902
|
+
i$2`${colorCss$3}`
|
|
2630
2903
|
];
|
|
2631
2904
|
}
|
|
2632
2905
|
|
|
@@ -2660,8 +2933,12 @@ class AuroIcon extends BaseIcon {
|
|
|
2660
2933
|
async firstUpdated() {
|
|
2661
2934
|
await super.firstUpdated();
|
|
2662
2935
|
|
|
2663
|
-
|
|
2664
|
-
|
|
2936
|
+
/**
|
|
2937
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
2938
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
2939
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
2940
|
+
*/
|
|
2941
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
2665
2942
|
const svgDesc = this.svg.querySelector('desc');
|
|
2666
2943
|
|
|
2667
2944
|
if (svgDesc) {
|
|
@@ -2685,7 +2962,7 @@ class AuroIcon extends BaseIcon {
|
|
|
2685
2962
|
return x`
|
|
2686
2963
|
<div class="componentWrapper">
|
|
2687
2964
|
<div
|
|
2688
|
-
class="${e(svgClasses)}"
|
|
2965
|
+
class="${e$2(svgClasses)}"
|
|
2689
2966
|
title="${o(this.title || undefined)}">
|
|
2690
2967
|
<span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
|
|
2691
2968
|
${this.customSvg ? x`
|
|
@@ -2697,7 +2974,7 @@ class AuroIcon extends BaseIcon {
|
|
|
2697
2974
|
</span>
|
|
2698
2975
|
</div>
|
|
2699
2976
|
|
|
2700
|
-
<div class="${e(labelClasses)}">
|
|
2977
|
+
<div class="${e$2(labelClasses)}">
|
|
2701
2978
|
<slot></slot>
|
|
2702
2979
|
</div>
|
|
2703
2980
|
</div>
|
|
@@ -2707,11 +2984,11 @@ class AuroIcon extends BaseIcon {
|
|
|
2707
2984
|
|
|
2708
2985
|
var iconVersion = '6.1.2';
|
|
2709
2986
|
|
|
2710
|
-
var styleCss$2 = i$
|
|
2987
|
+
var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}: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;overscroll-behavior:contain}: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}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
|
|
2711
2988
|
|
|
2712
|
-
var colorCss$2 = i$
|
|
2989
|
+
var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
2713
2990
|
|
|
2714
|
-
var tokensCss$1 = i$
|
|
2991
|
+
var tokensCss$1 = i$2`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
2715
2992
|
|
|
2716
2993
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2717
2994
|
// See LICENSE in the project root for license information.
|
|
@@ -2731,8 +3008,8 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
|
2731
3008
|
* @csspart bibContainer - Apply css to the bib container.
|
|
2732
3009
|
*/
|
|
2733
3010
|
|
|
2734
|
-
class AuroDropdownBib extends i
|
|
2735
|
-
|
|
3011
|
+
class AuroDropdownBib extends i {
|
|
3012
|
+
// not extending AuroElement because Bib needs only `shape` prop
|
|
2736
3013
|
constructor() {
|
|
2737
3014
|
super();
|
|
2738
3015
|
|
|
@@ -2742,6 +3019,9 @@ class AuroDropdownBib extends i$1 {
|
|
|
2742
3019
|
this._mobileBreakpointValue = undefined;
|
|
2743
3020
|
|
|
2744
3021
|
AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
|
|
3022
|
+
|
|
3023
|
+
this.shape = "rounded";
|
|
3024
|
+
this.matchWidth = false;
|
|
2745
3025
|
}
|
|
2746
3026
|
|
|
2747
3027
|
static get styles() {
|
|
@@ -2779,6 +3059,15 @@ class AuroDropdownBib extends i$1 {
|
|
|
2779
3059
|
reflect: true
|
|
2780
3060
|
},
|
|
2781
3061
|
|
|
3062
|
+
/**
|
|
3063
|
+
* If declared, the bib width will match the trigger width.
|
|
3064
|
+
* @private
|
|
3065
|
+
*/
|
|
3066
|
+
matchWidth: {
|
|
3067
|
+
type: Boolean,
|
|
3068
|
+
reflect: true
|
|
3069
|
+
},
|
|
3070
|
+
|
|
2782
3071
|
/**
|
|
2783
3072
|
* If declared, will apply border-radius to the bib.
|
|
2784
3073
|
*/
|
|
@@ -2792,6 +3081,11 @@ class AuroDropdownBib extends i$1 {
|
|
|
2792
3081
|
*/
|
|
2793
3082
|
bibTemplate: {
|
|
2794
3083
|
type: Object
|
|
3084
|
+
},
|
|
3085
|
+
|
|
3086
|
+
shape: {
|
|
3087
|
+
type: String,
|
|
3088
|
+
reflect: true
|
|
2795
3089
|
}
|
|
2796
3090
|
};
|
|
2797
3091
|
}
|
|
@@ -2871,8 +3165,16 @@ class AuroDropdownBib extends i$1 {
|
|
|
2871
3165
|
|
|
2872
3166
|
// function that renders the HTML and CSS into the scope of the component
|
|
2873
3167
|
render() {
|
|
3168
|
+
const classes = {
|
|
3169
|
+
container: true
|
|
3170
|
+
};
|
|
3171
|
+
|
|
3172
|
+
// Since this class does not inherit from AuroElement, we apply the shape-related class within the `render` function,
|
|
3173
|
+
// mimicking the class naming convention used in AuroElement.resetShapeClasses.
|
|
3174
|
+
classes[`shape-${this.shape}`] = true;
|
|
3175
|
+
|
|
2874
3176
|
return u$1`
|
|
2875
|
-
<div class="
|
|
3177
|
+
<div class="${e$2(classes)}" part="bibContainer">
|
|
2876
3178
|
<slot></slot>
|
|
2877
3179
|
</div>
|
|
2878
3180
|
`;
|
|
@@ -2881,15 +3183,25 @@ class AuroDropdownBib extends i$1 {
|
|
|
2881
3183
|
|
|
2882
3184
|
var dropdownVersion = '3.0.0';
|
|
2883
3185
|
|
|
2884
|
-
var
|
|
3186
|
+
var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
3187
|
+
|
|
3188
|
+
var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label,:host([onDark]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
3189
|
+
|
|
3190
|
+
var styleCss$1 = i$2`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
2885
3191
|
|
|
2886
|
-
var
|
|
3192
|
+
var classicColorCss = i$2``;
|
|
2887
3193
|
|
|
2888
|
-
var
|
|
3194
|
+
var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
|
|
2889
3195
|
|
|
2890
|
-
var
|
|
3196
|
+
var styleEmphasizedCss = i$2`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
2891
3197
|
|
|
2892
|
-
var
|
|
3198
|
+
var styleSnowflakeCss = i$2`:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .trigger,:host([layout*=snowflake]) .helpText{text-align:center}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3199
|
+
|
|
3200
|
+
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3201
|
+
|
|
3202
|
+
var styleCss = i$2`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{position:relative;display:block}.helptext-wrapper{display:none}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3203
|
+
|
|
3204
|
+
var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
2893
3205
|
|
|
2894
3206
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2895
3207
|
// See LICENSE in the project root for license information.
|
|
@@ -2967,10 +3279,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
2967
3279
|
|
|
2968
3280
|
/**
|
|
2969
3281
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
2970
|
-
*
|
|
2971
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
2972
3282
|
*/
|
|
2973
|
-
class AuroHelpText extends i
|
|
3283
|
+
class AuroHelpText extends i {
|
|
2974
3284
|
|
|
2975
3285
|
constructor() {
|
|
2976
3286
|
super();
|
|
@@ -3084,7 +3394,7 @@ class AuroHelpText extends i$1 {
|
|
|
3084
3394
|
// function that renders the HTML and CSS into the scope of the component
|
|
3085
3395
|
render() {
|
|
3086
3396
|
return x`
|
|
3087
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3397
|
+
<div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
|
|
3088
3398
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3089
3399
|
</div>
|
|
3090
3400
|
`;
|
|
@@ -3093,24 +3403,119 @@ class AuroHelpText extends i$1 {
|
|
|
3093
3403
|
|
|
3094
3404
|
var helpTextVersion = '1.0.0';
|
|
3095
3405
|
|
|
3406
|
+
class AuroElement extends i {
|
|
3407
|
+
static get properties() {
|
|
3408
|
+
return {
|
|
3409
|
+
|
|
3410
|
+
/**
|
|
3411
|
+
* Defines the language of an element.
|
|
3412
|
+
* @default {'default'}
|
|
3413
|
+
*/
|
|
3414
|
+
layout: {
|
|
3415
|
+
type: String,
|
|
3416
|
+
attribute: "layout",
|
|
3417
|
+
reflect: true
|
|
3418
|
+
},
|
|
3419
|
+
|
|
3420
|
+
shape: {
|
|
3421
|
+
type: String,
|
|
3422
|
+
attribute: "shape",
|
|
3423
|
+
reflect: true
|
|
3424
|
+
},
|
|
3425
|
+
|
|
3426
|
+
size: {
|
|
3427
|
+
type: String,
|
|
3428
|
+
attribute: "size",
|
|
3429
|
+
reflect: true
|
|
3430
|
+
},
|
|
3431
|
+
|
|
3432
|
+
onDark: {
|
|
3433
|
+
type: Boolean,
|
|
3434
|
+
attribute: "ondark",
|
|
3435
|
+
reflect: true
|
|
3436
|
+
}
|
|
3437
|
+
};
|
|
3438
|
+
}
|
|
3439
|
+
|
|
3440
|
+
resetShapeClasses() {
|
|
3441
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
3442
|
+
|
|
3443
|
+
if (wrapper) {
|
|
3444
|
+
wrapper.classList.forEach((className) => {
|
|
3445
|
+
if (className.startsWith('shape-')) {
|
|
3446
|
+
wrapper.classList.remove(className);
|
|
3447
|
+
}
|
|
3448
|
+
});
|
|
3449
|
+
|
|
3450
|
+
if (this.shape && this.size) {
|
|
3451
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
3452
|
+
} else {
|
|
3453
|
+
wrapper.classList.add('shape-none');
|
|
3454
|
+
}
|
|
3455
|
+
}
|
|
3456
|
+
|
|
3457
|
+
}
|
|
3458
|
+
|
|
3459
|
+
resetLayoutClasses() {
|
|
3460
|
+
if (this.layout) {
|
|
3461
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
3462
|
+
|
|
3463
|
+
if (wrapper) {
|
|
3464
|
+
wrapper.classList.forEach((className) => {
|
|
3465
|
+
if (className.startsWith('layout-')) {
|
|
3466
|
+
wrapper.classList.remove(className);
|
|
3467
|
+
}
|
|
3468
|
+
});
|
|
3469
|
+
|
|
3470
|
+
wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
3471
|
+
}
|
|
3472
|
+
}
|
|
3473
|
+
}
|
|
3474
|
+
|
|
3475
|
+
updateComponentArchitecture() {
|
|
3476
|
+
this.resetLayoutClasses();
|
|
3477
|
+
this.resetShapeClasses();
|
|
3478
|
+
}
|
|
3479
|
+
|
|
3480
|
+
updated(changedProperties) {
|
|
3481
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
3482
|
+
this.updateComponentArchitecture();
|
|
3483
|
+
}
|
|
3484
|
+
}
|
|
3485
|
+
|
|
3486
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
3487
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
3488
|
+
render() {
|
|
3489
|
+
try {
|
|
3490
|
+
return this.renderLayout();
|
|
3491
|
+
} catch (error) {
|
|
3492
|
+
// failed to get the defined layout
|
|
3493
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
3494
|
+
|
|
3495
|
+
// fallback to the default layout
|
|
3496
|
+
return this.getLayout('default');
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
}
|
|
3500
|
+
|
|
3096
3501
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3097
3502
|
// See LICENSE in the project root for license information.
|
|
3098
3503
|
|
|
3099
3504
|
|
|
3100
|
-
|
|
3101
|
-
|
|
3505
|
+
|
|
3506
|
+
/*
|
|
3102
3507
|
* @slot - Default slot for the popover content.
|
|
3103
|
-
* @slot label - Defines the content of the label.
|
|
3104
3508
|
* @slot helpText - Defines the content of the helpText.
|
|
3105
3509
|
* @slot trigger - Defines the content of the trigger.
|
|
3106
3510
|
* @csspart trigger - The trigger content container.
|
|
3107
3511
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3512
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3108
3513
|
* @csspart helpText - The helpText content container.
|
|
3109
3514
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3110
3515
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
3111
3516
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
3112
3517
|
*/
|
|
3113
|
-
class AuroDropdown extends
|
|
3518
|
+
class AuroDropdown extends AuroElement {
|
|
3114
3519
|
constructor() {
|
|
3115
3520
|
super();
|
|
3116
3521
|
|
|
@@ -3119,26 +3524,33 @@ class AuroDropdown extends i$1 {
|
|
|
3119
3524
|
this.matchWidth = false;
|
|
3120
3525
|
this.noHideOnThisFocusLoss = false;
|
|
3121
3526
|
|
|
3122
|
-
this.
|
|
3527
|
+
this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
|
|
3123
3528
|
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
this.constructor.shadowRootOptions = {
|
|
3129
|
-
...i$1.shadowRootOptions,
|
|
3130
|
-
delegatesFocus: true,
|
|
3131
|
-
};
|
|
3529
|
+
// Layout Config
|
|
3530
|
+
this.layout = undefined;
|
|
3531
|
+
this.shape = undefined;
|
|
3532
|
+
this.size = undefined;
|
|
3132
3533
|
|
|
3133
|
-
|
|
3134
|
-
* @private
|
|
3135
|
-
*/
|
|
3136
|
-
this.triggerContentFocusable = false;
|
|
3534
|
+
this.parentBorder = false;
|
|
3137
3535
|
|
|
3138
|
-
/**
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
this.
|
|
3536
|
+
/** @private */
|
|
3537
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
3538
|
+
|
|
3539
|
+
this.privateDefaults();
|
|
3540
|
+
}
|
|
3541
|
+
|
|
3542
|
+
/**
|
|
3543
|
+
* @private
|
|
3544
|
+
* @returns {object} Class definition for the wrapper element.
|
|
3545
|
+
*/
|
|
3546
|
+
get commonWrapperClasses() {
|
|
3547
|
+
return {
|
|
3548
|
+
'trigger': true,
|
|
3549
|
+
'wrapper': true,
|
|
3550
|
+
'hasFocus': this.hasFocus,
|
|
3551
|
+
'simple': this.simple,
|
|
3552
|
+
'parentBorder': this.parentBorder
|
|
3553
|
+
};
|
|
3142
3554
|
}
|
|
3143
3555
|
|
|
3144
3556
|
/**
|
|
@@ -3146,18 +3558,17 @@ class AuroDropdown extends i$1 {
|
|
|
3146
3558
|
* @returns {void} Internal defaults.
|
|
3147
3559
|
*/
|
|
3148
3560
|
privateDefaults() {
|
|
3149
|
-
this.bordered = false;
|
|
3150
3561
|
this.chevron = false;
|
|
3151
3562
|
this.disabled = false;
|
|
3563
|
+
this.disableFocusTrap = false;
|
|
3152
3564
|
this.error = false;
|
|
3153
|
-
this.inset = false;
|
|
3154
|
-
this.rounded = false;
|
|
3155
3565
|
this.tabIndex = 0;
|
|
3156
3566
|
this.noToggle = false;
|
|
3157
|
-
this.
|
|
3158
|
-
this.labeled = true;
|
|
3159
|
-
this.a11yRole = 'combobox';
|
|
3567
|
+
this.a11yRole = 'button';
|
|
3160
3568
|
this.onDark = false;
|
|
3569
|
+
this.showTriggerBorders = true;
|
|
3570
|
+
this.triggerContentFocusable = false;
|
|
3571
|
+
this.simple = false;
|
|
3161
3572
|
|
|
3162
3573
|
// floaterConfig
|
|
3163
3574
|
this.placement = 'bottom-start';
|
|
@@ -3165,6 +3576,15 @@ class AuroDropdown extends i$1 {
|
|
|
3165
3576
|
this.noFlip = false;
|
|
3166
3577
|
this.autoPlacement = false;
|
|
3167
3578
|
|
|
3579
|
+
/**
|
|
3580
|
+
* @private
|
|
3581
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
3582
|
+
*/
|
|
3583
|
+
this.constructor.shadowRootOptions = {
|
|
3584
|
+
...i.shadowRootOptions,
|
|
3585
|
+
delegatesFocus: true,
|
|
3586
|
+
};
|
|
3587
|
+
|
|
3168
3588
|
/**
|
|
3169
3589
|
* @private
|
|
3170
3590
|
*/
|
|
@@ -3239,6 +3659,18 @@ class AuroDropdown extends i$1 {
|
|
|
3239
3659
|
this.floater.showBib();
|
|
3240
3660
|
}
|
|
3241
3661
|
|
|
3662
|
+
/**
|
|
3663
|
+
* When bib is open, focus on the first element inside of bib.
|
|
3664
|
+
* If not, trigger element will get focus.
|
|
3665
|
+
*/
|
|
3666
|
+
focus() {
|
|
3667
|
+
if (this.isPopoverVisible && this.focusTrap) {
|
|
3668
|
+
this.focusTrap.focusFirstElement();
|
|
3669
|
+
} else {
|
|
3670
|
+
this.trigger.focus();
|
|
3671
|
+
}
|
|
3672
|
+
}
|
|
3673
|
+
|
|
3242
3674
|
// function to define props used within the scope of this component
|
|
3243
3675
|
static get properties() {
|
|
3244
3676
|
return {
|
|
@@ -3252,10 +3684,19 @@ class AuroDropdown extends i$1 {
|
|
|
3252
3684
|
reflect: true
|
|
3253
3685
|
},
|
|
3254
3686
|
|
|
3687
|
+
/**
|
|
3688
|
+
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
3689
|
+
* @default false
|
|
3690
|
+
*/
|
|
3691
|
+
disableEventShow: {
|
|
3692
|
+
type: Boolean,
|
|
3693
|
+
reflect: true
|
|
3694
|
+
},
|
|
3695
|
+
|
|
3255
3696
|
/**
|
|
3256
3697
|
* If declared, applies a border around the trigger slot.
|
|
3257
3698
|
*/
|
|
3258
|
-
|
|
3699
|
+
simple: {
|
|
3259
3700
|
type: Boolean,
|
|
3260
3701
|
reflect: true
|
|
3261
3702
|
},
|
|
@@ -3270,17 +3711,17 @@ class AuroDropdown extends i$1 {
|
|
|
3270
3711
|
},
|
|
3271
3712
|
|
|
3272
3713
|
/**
|
|
3273
|
-
* If declared, the dropdown
|
|
3714
|
+
* If declared, the dropdown is not interactive.
|
|
3274
3715
|
*/
|
|
3275
|
-
|
|
3716
|
+
disabled: {
|
|
3276
3717
|
type: Boolean,
|
|
3277
3718
|
reflect: true
|
|
3278
3719
|
},
|
|
3279
3720
|
|
|
3280
3721
|
/**
|
|
3281
|
-
* If declared, the
|
|
3722
|
+
* If declared, the focus trap inside of bib will be turned off.
|
|
3282
3723
|
*/
|
|
3283
|
-
|
|
3724
|
+
disableFocusTrap: {
|
|
3284
3725
|
type: Boolean,
|
|
3285
3726
|
reflect: true
|
|
3286
3727
|
},
|
|
@@ -3303,7 +3744,7 @@ class AuroDropdown extends i$1 {
|
|
|
3303
3744
|
},
|
|
3304
3745
|
|
|
3305
3746
|
/**
|
|
3306
|
-
* If declared in combination with `
|
|
3747
|
+
* If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
|
|
3307
3748
|
*/
|
|
3308
3749
|
error: {
|
|
3309
3750
|
type: Boolean,
|
|
@@ -3311,25 +3752,16 @@ class AuroDropdown extends i$1 {
|
|
|
3311
3752
|
},
|
|
3312
3753
|
|
|
3313
3754
|
/**
|
|
3314
|
-
*
|
|
3755
|
+
* Contains the help text message for the current validity error.
|
|
3315
3756
|
*/
|
|
3316
|
-
|
|
3317
|
-
type:
|
|
3318
|
-
reflect: true
|
|
3757
|
+
errorMessage: {
|
|
3758
|
+
type: String
|
|
3319
3759
|
},
|
|
3320
3760
|
|
|
3321
3761
|
/**
|
|
3322
|
-
*
|
|
3323
|
-
*/
|
|
3324
|
-
fluid: {
|
|
3325
|
-
type: Boolean,
|
|
3326
|
-
reflect: true
|
|
3327
|
-
},
|
|
3328
|
-
|
|
3329
|
-
/**
|
|
3330
|
-
* If declared, will apply padding around trigger slot content.
|
|
3762
|
+
* If declared, the bib will display when focus is applied to the trigger.
|
|
3331
3763
|
*/
|
|
3332
|
-
|
|
3764
|
+
focusShow: {
|
|
3333
3765
|
type: Boolean,
|
|
3334
3766
|
reflect: true
|
|
3335
3767
|
},
|
|
@@ -3338,7 +3770,9 @@ class AuroDropdown extends i$1 {
|
|
|
3338
3770
|
* If true, the dropdown bib is displayed.
|
|
3339
3771
|
*/
|
|
3340
3772
|
isPopoverVisible: {
|
|
3341
|
-
type: Boolean
|
|
3773
|
+
type: Boolean,
|
|
3774
|
+
reflect: true,
|
|
3775
|
+
attribute: 'open'
|
|
3342
3776
|
},
|
|
3343
3777
|
|
|
3344
3778
|
/**
|
|
@@ -3378,10 +3812,10 @@ class AuroDropdown extends i$1 {
|
|
|
3378
3812
|
},
|
|
3379
3813
|
|
|
3380
3814
|
/**
|
|
3381
|
-
* Defines if
|
|
3815
|
+
* Defines if the trigger should size based on the parent element providing the border UI.
|
|
3382
3816
|
* @private
|
|
3383
3817
|
*/
|
|
3384
|
-
|
|
3818
|
+
parentBorder: {
|
|
3385
3819
|
type: Boolean,
|
|
3386
3820
|
reflect: true
|
|
3387
3821
|
},
|
|
@@ -3437,6 +3871,9 @@ class AuroDropdown extends i$1 {
|
|
|
3437
3871
|
reflect: true
|
|
3438
3872
|
},
|
|
3439
3873
|
|
|
3874
|
+
/**
|
|
3875
|
+
* If declared, and a function is set, that function will execute when the slot content is updated.
|
|
3876
|
+
*/
|
|
3440
3877
|
onSlotChange: {
|
|
3441
3878
|
type: Function,
|
|
3442
3879
|
reflect: false
|
|
@@ -3444,11 +3881,6 @@ class AuroDropdown extends i$1 {
|
|
|
3444
3881
|
|
|
3445
3882
|
/**
|
|
3446
3883
|
* Position where the bib should appear relative to the trigger.
|
|
3447
|
-
* Accepted values:
|
|
3448
|
-
* "top" | "right" | "bottom" | "left" |
|
|
3449
|
-
* "bottom-start" | "top-start" | "top-end" |
|
|
3450
|
-
* "right-start" | "right-end" | "bottom-end" |
|
|
3451
|
-
* "left-start" | "left-end"
|
|
3452
3884
|
* @default bottom-start
|
|
3453
3885
|
*/
|
|
3454
3886
|
placement: {
|
|
@@ -3456,14 +3888,6 @@ class AuroDropdown extends i$1 {
|
|
|
3456
3888
|
reflect: true
|
|
3457
3889
|
},
|
|
3458
3890
|
|
|
3459
|
-
/**
|
|
3460
|
-
* If declared, will apply border-radius to trigger and default slots.
|
|
3461
|
-
*/
|
|
3462
|
-
rounded: {
|
|
3463
|
-
type: Boolean,
|
|
3464
|
-
reflect: true
|
|
3465
|
-
},
|
|
3466
|
-
|
|
3467
3891
|
/**
|
|
3468
3892
|
* @private
|
|
3469
3893
|
*/
|
|
@@ -3478,23 +3902,27 @@ class AuroDropdown extends i$1 {
|
|
|
3478
3902
|
type: String || undefined,
|
|
3479
3903
|
attribute: false,
|
|
3480
3904
|
reflect: false
|
|
3481
|
-
},
|
|
3482
|
-
|
|
3483
|
-
/**
|
|
3484
|
-
* The value for the aria-autocomplete attribute of the trigger element.
|
|
3485
|
-
*/
|
|
3486
|
-
a11yAutocomplete: {
|
|
3487
|
-
type: String,
|
|
3488
|
-
attribute: false,
|
|
3489
3905
|
}
|
|
3490
3906
|
};
|
|
3491
3907
|
}
|
|
3492
3908
|
|
|
3493
3909
|
static get styles() {
|
|
3494
3910
|
return [
|
|
3495
|
-
colorCss$1,
|
|
3496
3911
|
styleCss$1,
|
|
3497
|
-
tokensCss$1
|
|
3912
|
+
tokensCss$1,
|
|
3913
|
+
colorCss$1,
|
|
3914
|
+
|
|
3915
|
+
// default layout
|
|
3916
|
+
classicColorCss,
|
|
3917
|
+
classicLayoutCss,
|
|
3918
|
+
|
|
3919
|
+
// emphasized layout
|
|
3920
|
+
styleEmphasizedCss,
|
|
3921
|
+
|
|
3922
|
+
// snowflake layout
|
|
3923
|
+
styleSnowflakeCss,
|
|
3924
|
+
|
|
3925
|
+
shapeSizeCss
|
|
3498
3926
|
];
|
|
3499
3927
|
}
|
|
3500
3928
|
|
|
@@ -3530,6 +3958,7 @@ class AuroDropdown extends i$1 {
|
|
|
3530
3958
|
}
|
|
3531
3959
|
|
|
3532
3960
|
updated(changedProperties) {
|
|
3961
|
+
super.updated(changedProperties);
|
|
3533
3962
|
this.floater.handleUpdate(changedProperties);
|
|
3534
3963
|
|
|
3535
3964
|
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
@@ -3539,17 +3968,31 @@ class AuroDropdown extends i$1 {
|
|
|
3539
3968
|
}
|
|
3540
3969
|
|
|
3541
3970
|
// when trigger's content is changed without any attribute or node change,
|
|
3542
|
-
// `requestUpdate` needs to be called to update
|
|
3971
|
+
// `requestUpdate` needs to be called to update hasTriggerContent
|
|
3543
3972
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
3544
3973
|
this.handleTriggerContentSlotChange();
|
|
3545
3974
|
}
|
|
3975
|
+
}
|
|
3546
3976
|
|
|
3977
|
+
/**
|
|
3978
|
+
* Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
|
|
3979
|
+
* @private
|
|
3980
|
+
* @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
|
|
3981
|
+
*/
|
|
3982
|
+
handleDropdownToggle(event) {
|
|
3983
|
+
this.updateFocusTrap();
|
|
3984
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
3985
|
+
const eventType = event.detail.eventType || "unknown";
|
|
3986
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
3987
|
+
this.trigger.focus();
|
|
3988
|
+
}
|
|
3547
3989
|
}
|
|
3548
3990
|
|
|
3549
3991
|
firstUpdated() {
|
|
3550
3992
|
|
|
3551
3993
|
// Configure the floater to, this will generate the ID for the bib
|
|
3552
3994
|
this.floater.configure(this, 'auroDropdown');
|
|
3995
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
3553
3996
|
|
|
3554
3997
|
/**
|
|
3555
3998
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -3567,6 +4010,13 @@ class AuroDropdown extends i$1 {
|
|
|
3567
4010
|
|
|
3568
4011
|
// Add the tag name as an attribute if it is different than the component name
|
|
3569
4012
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
4013
|
+
|
|
4014
|
+
this.trigger.addEventListener('click', () => {
|
|
4015
|
+
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
4016
|
+
bubbles: true,
|
|
4017
|
+
composed: true
|
|
4018
|
+
}));
|
|
4019
|
+
});
|
|
3570
4020
|
}
|
|
3571
4021
|
|
|
3572
4022
|
/**
|
|
@@ -3601,66 +4051,47 @@ class AuroDropdown extends i$1 {
|
|
|
3601
4051
|
}
|
|
3602
4052
|
|
|
3603
4053
|
/**
|
|
3604
|
-
*
|
|
4054
|
+
* Function to support @focusin event.
|
|
3605
4055
|
* @private
|
|
3606
|
-
* @
|
|
3607
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
4056
|
+
* @return {void}
|
|
3608
4057
|
*/
|
|
3609
|
-
|
|
3610
|
-
this.
|
|
3611
|
-
|
|
3612
|
-
const nodes = [
|
|
3613
|
-
element,
|
|
3614
|
-
...element.children
|
|
3615
|
-
];
|
|
3616
|
-
|
|
3617
|
-
const focusableElements = [
|
|
3618
|
-
'a',
|
|
3619
|
-
'auro-hyperlink',
|
|
3620
|
-
'button',
|
|
3621
|
-
'auro-button',
|
|
3622
|
-
'input',
|
|
3623
|
-
'auro-input',
|
|
3624
|
-
];
|
|
3625
|
-
|
|
3626
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
3627
|
-
|
|
3628
|
-
const result = nodes.some((node) => {
|
|
3629
|
-
const tagName = node.tagName.toLowerCase();
|
|
3630
|
-
|
|
3631
|
-
if (node.tabIndex > -1) {
|
|
3632
|
-
return true;
|
|
3633
|
-
}
|
|
3634
|
-
|
|
3635
|
-
if (focusableElements.includes(tagName)) {
|
|
3636
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
3637
|
-
return true;
|
|
3638
|
-
}
|
|
3639
|
-
if (!node.hasAttribute('disabled')) {
|
|
3640
|
-
return true;
|
|
3641
|
-
}
|
|
3642
|
-
}
|
|
3643
|
-
|
|
3644
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
3645
|
-
return true;
|
|
3646
|
-
}
|
|
4058
|
+
handleFocusin() {
|
|
4059
|
+
this.hasFocus = true;
|
|
4060
|
+
}
|
|
3647
4061
|
|
|
3648
|
-
|
|
3649
|
-
|
|
4062
|
+
/**
|
|
4063
|
+
* @private
|
|
4064
|
+
*/
|
|
4065
|
+
updateFocusTrap() {
|
|
4066
|
+
// If the dropdown is open, create a focus trap and focus the first element
|
|
4067
|
+
if (this.isPopoverVisible && !this.disableFocusTrap) {
|
|
4068
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
4069
|
+
this.focusTrap.focusFirstElement();
|
|
4070
|
+
return;
|
|
4071
|
+
}
|
|
3650
4072
|
|
|
3651
|
-
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
3655
|
-
});
|
|
4073
|
+
// Guard Clause: Ensure there is a focus trap currently active before continuing
|
|
4074
|
+
if (!this.focusTrap) {
|
|
4075
|
+
return;
|
|
3656
4076
|
}
|
|
3657
4077
|
|
|
3658
|
-
|
|
4078
|
+
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
4079
|
+
this.focusTrap.disconnect();
|
|
4080
|
+
this.focusTrap = undefined;
|
|
3659
4081
|
}
|
|
3660
4082
|
|
|
3661
4083
|
/**
|
|
4084
|
+
* Function to support @focusout event.
|
|
3662
4085
|
* @private
|
|
4086
|
+
* @return {void}
|
|
4087
|
+
*/
|
|
4088
|
+
handleFocusout() {
|
|
4089
|
+
this.hasFocus = false;
|
|
4090
|
+
}
|
|
4091
|
+
|
|
4092
|
+
/**
|
|
3663
4093
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
4094
|
+
* @private
|
|
3664
4095
|
* @param {Event} event - The original focus event.
|
|
3665
4096
|
*/
|
|
3666
4097
|
bindFocusEventToTrigger(event) {
|
|
@@ -3673,9 +4104,9 @@ class AuroDropdown extends i$1 {
|
|
|
3673
4104
|
}
|
|
3674
4105
|
|
|
3675
4106
|
/**
|
|
3676
|
-
* @private
|
|
3677
4107
|
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
3678
4108
|
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|
|
4109
|
+
* @private
|
|
3679
4110
|
*/
|
|
3680
4111
|
setupTriggerFocusEventBinding() {
|
|
3681
4112
|
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
@@ -3751,14 +4182,13 @@ class AuroDropdown extends i$1 {
|
|
|
3751
4182
|
* @returns {void}
|
|
3752
4183
|
*/
|
|
3753
4184
|
handleTriggerContentSlotChange(event) {
|
|
3754
|
-
|
|
3755
4185
|
this.floater.handleTriggerTabIndex();
|
|
3756
4186
|
|
|
3757
4187
|
// Get the trigger
|
|
3758
4188
|
const trigger = this.shadowRoot.querySelector('#trigger');
|
|
3759
4189
|
|
|
3760
4190
|
// Get the trigger slot
|
|
3761
|
-
const triggerSlot = this.shadowRoot.querySelector('.
|
|
4191
|
+
const triggerSlot = this.shadowRoot.querySelector('.triggerContentWrapper slot');
|
|
3762
4192
|
|
|
3763
4193
|
// If there's a trigger slot
|
|
3764
4194
|
if (triggerSlot) {
|
|
@@ -3769,8 +4199,8 @@ class AuroDropdown extends i$1 {
|
|
|
3769
4199
|
// If there are children
|
|
3770
4200
|
if (triggerContentNodes) {
|
|
3771
4201
|
|
|
3772
|
-
// See if any of them are focusable
|
|
3773
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
4202
|
+
// See if any of them are focusable elements
|
|
4203
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
3774
4204
|
|
|
3775
4205
|
// If any of them are focusable elements
|
|
3776
4206
|
if (this.triggerContentFocusable) {
|
|
@@ -3821,7 +4251,6 @@ class AuroDropdown extends i$1 {
|
|
|
3821
4251
|
*
|
|
3822
4252
|
* @private
|
|
3823
4253
|
* @method handleDefaultSlot
|
|
3824
|
-
* @param {Event} event - The event object representing the slot change.
|
|
3825
4254
|
* @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
|
|
3826
4255
|
*/
|
|
3827
4256
|
handleDefaultSlot() {
|
|
@@ -3832,56 +4261,33 @@ class AuroDropdown extends i$1 {
|
|
|
3832
4261
|
}
|
|
3833
4262
|
|
|
3834
4263
|
/**
|
|
4264
|
+
* Returns HTML for the common portion of the layouts.
|
|
3835
4265
|
* @private
|
|
3836
|
-
* @
|
|
3837
|
-
* @
|
|
3838
|
-
* @description Handles the slot change event for the label slot.
|
|
4266
|
+
* @param {Object} helpTextClasses - Classes to apply to the help text container.
|
|
4267
|
+
* @returns {html} - Returns HTML.
|
|
3839
4268
|
*/
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
// Get the nodes from the event
|
|
3843
|
-
const nodes = event.target.assignedNodes();
|
|
3844
|
-
|
|
3845
|
-
// Guard clause for no nodes
|
|
3846
|
-
if (!nodes) {
|
|
3847
|
-
return;
|
|
3848
|
-
}
|
|
3849
|
-
|
|
3850
|
-
// Convert the nodes to a measurable array so we can get the length
|
|
3851
|
-
const nodesArr = Array.from(nodes);
|
|
3852
|
-
|
|
3853
|
-
// If the nodes array has a length, the dropdown is labeled
|
|
3854
|
-
this.labeled = nodesArr.length > 0;
|
|
3855
|
-
}
|
|
3856
|
-
|
|
3857
|
-
// function that renders the HTML and CSS into the scope of the component
|
|
3858
|
-
render() {
|
|
4269
|
+
renderBasicHtml(helpTextClasses) {
|
|
3859
4270
|
return u$1`
|
|
3860
4271
|
<div>
|
|
3861
4272
|
<div
|
|
3862
4273
|
id="trigger"
|
|
3863
|
-
class="
|
|
3864
|
-
|
|
3865
|
-
tabindex="${this.tabIndex}"
|
|
3866
|
-
?showBorder="${this.showTriggerBorders}"
|
|
4274
|
+
class="${e$2(this.commonWrapperClasses)}" part="wrapper"
|
|
4275
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
3867
4276
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
3868
|
-
aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
3869
|
-
aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
4277
|
+
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4278
|
+
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
3870
4279
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
<slot
|
|
3878
|
-
name="trigger"
|
|
3879
|
-
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
3880
|
-
</div>
|
|
4280
|
+
@focusin="${this.handleFocusin}"
|
|
4281
|
+
@blur="${this.handleFocusOut}">
|
|
4282
|
+
<div class="triggerContentWrapper" id="triggerLabel">
|
|
4283
|
+
<slot
|
|
4284
|
+
name="trigger"
|
|
4285
|
+
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
3881
4286
|
</div>
|
|
3882
|
-
${this.chevron
|
|
4287
|
+
${this.chevron ? u$1`
|
|
3883
4288
|
<div
|
|
3884
4289
|
id="showStateIcon"
|
|
4290
|
+
class="chevron"
|
|
3885
4291
|
part="chevron">
|
|
3886
4292
|
<${this.iconTag}
|
|
3887
4293
|
category="interface"
|
|
@@ -3893,19 +4299,15 @@ class AuroDropdown extends i$1 {
|
|
|
3893
4299
|
</div>
|
|
3894
4300
|
` : undefined }
|
|
3895
4301
|
</div>
|
|
3896
|
-
|
|
4302
|
+
<div class="${e$2(helpTextClasses)}">
|
|
3897
4303
|
<slot name="helpText"></slot>
|
|
3898
|
-
|
|
3899
|
-
|
|
4304
|
+
</div>
|
|
3900
4305
|
<div id="bibSizer" part="size"></div>
|
|
3901
4306
|
<${this.dropdownBibTag}
|
|
3902
4307
|
id="bib"
|
|
4308
|
+
shape="${this.shape}"
|
|
3903
4309
|
?data-show="${this.isPopoverVisible}"
|
|
3904
|
-
?isfullscreen="${this.isBibFullscreen}"
|
|
3905
|
-
?common="${this.common}"
|
|
3906
|
-
?rounded="${this.common || this.rounded}"
|
|
3907
|
-
?inset="${this.common || this.inset}"
|
|
3908
|
-
>
|
|
4310
|
+
?isfullscreen="${this.isBibFullscreen}">
|
|
3909
4311
|
<div class="slotContent">
|
|
3910
4312
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
3911
4313
|
</div>
|
|
@@ -3913,6 +4315,83 @@ class AuroDropdown extends i$1 {
|
|
|
3913
4315
|
</div>
|
|
3914
4316
|
`;
|
|
3915
4317
|
}
|
|
4318
|
+
|
|
4319
|
+
/**
|
|
4320
|
+
* Returns HTML for the classic layout. Does not support type="*".
|
|
4321
|
+
* @private
|
|
4322
|
+
* @returns {html} - Returns HTML for the classic layout.
|
|
4323
|
+
*/
|
|
4324
|
+
renderLayoutClassic() {
|
|
4325
|
+
// TODO: check with Doug why this was never used?
|
|
4326
|
+
const helpTextClasses = {
|
|
4327
|
+
'helpText': true
|
|
4328
|
+
};
|
|
4329
|
+
|
|
4330
|
+
return u$1`
|
|
4331
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4332
|
+
`;
|
|
4333
|
+
}
|
|
4334
|
+
|
|
4335
|
+
/**
|
|
4336
|
+
* Returns HTML for the snowflake layout. Does not support type="*".
|
|
4337
|
+
* @private
|
|
4338
|
+
* @returns {html} - Returns HTML for the snowflake layout.
|
|
4339
|
+
*/
|
|
4340
|
+
renderLayoutSnowflake() {
|
|
4341
|
+
const helpTextClasses = {
|
|
4342
|
+
'helpText': true,
|
|
4343
|
+
'leftIndent': true,
|
|
4344
|
+
'rightIndent': true
|
|
4345
|
+
};
|
|
4346
|
+
|
|
4347
|
+
return u$1`
|
|
4348
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4349
|
+
`;
|
|
4350
|
+
}
|
|
4351
|
+
|
|
4352
|
+
/**
|
|
4353
|
+
* Returns HTML for the emphasized layout. Does not support type="*".
|
|
4354
|
+
* @private
|
|
4355
|
+
* @returns {html} - Returns HTML for the emphasized layout.
|
|
4356
|
+
*/
|
|
4357
|
+
renderLayoutEmphasized() {
|
|
4358
|
+
const helpTextClasses = {
|
|
4359
|
+
'helpText': true,
|
|
4360
|
+
'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
|
|
4361
|
+
'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
|
|
4362
|
+
};
|
|
4363
|
+
|
|
4364
|
+
return u$1`
|
|
4365
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4366
|
+
`;
|
|
4367
|
+
}
|
|
4368
|
+
|
|
4369
|
+
/**
|
|
4370
|
+
* Logic to determine the layout of the component.
|
|
4371
|
+
* @private
|
|
4372
|
+
* @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
|
|
4373
|
+
* @returns {HTMLCollection} - Returns the HTML for the layout.
|
|
4374
|
+
*/
|
|
4375
|
+
renderLayout(ForcedLayout) {
|
|
4376
|
+
const layout = ForcedLayout || this.layout;
|
|
4377
|
+
|
|
4378
|
+
switch (layout) {
|
|
4379
|
+
case 'emphasized':
|
|
4380
|
+
return this.renderLayoutEmphasized();
|
|
4381
|
+
case 'emphasized-left':
|
|
4382
|
+
return this.renderLayoutEmphasized();
|
|
4383
|
+
case 'emphasized-right':
|
|
4384
|
+
return this.renderLayoutEmphasized();
|
|
4385
|
+
case 'snowflake':
|
|
4386
|
+
return this.renderLayoutSnowflake();
|
|
4387
|
+
case 'snowflake-left':
|
|
4388
|
+
return this.renderLayoutSnowflake();
|
|
4389
|
+
case 'snowflake-right':
|
|
4390
|
+
return this.renderLayoutSnowflake();
|
|
4391
|
+
default:
|
|
4392
|
+
return this.renderLayoutClassic();
|
|
4393
|
+
}
|
|
4394
|
+
}
|
|
3916
4395
|
}
|
|
3917
4396
|
|
|
3918
4397
|
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|