@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1262 -81
- package/components/bibtemplate/dist/registered.js +1262 -81
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +49 -15
- package/components/checkbox/demo/api.min.js +73 -43
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +73 -43
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
- package/components/checkbox/dist/index.js +72 -42
- package/components/checkbox/dist/registered.js +72 -42
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +115 -8
- package/components/combobox/demo/api.min.js +3102 -921
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +6 -30
- package/components/combobox/demo/index.min.js +3102 -921
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/auro-combobox.d.ts +44 -12
- package/components/combobox/dist/index.js +3080 -995
- package/components/combobox/dist/registered.js +3080 -995
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +158 -21
- package/components/counter/demo/api.min.js +3416 -728
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +185 -34
- package/components/counter/demo/index.min.js +3416 -728
- 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 +161 -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 +3416 -728
- package/components/counter/dist/registered.js +3416 -728
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +59 -28
- package/components/datepicker/demo/api.min.js +8486 -4644
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +75 -8
- package/components/datepicker/demo/index.min.js +8486 -4644
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +7033 -3191
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +7033 -3191
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +82 -275
- package/components/dropdown/demo/api.min.js +451 -260
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +451 -260
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +450 -259
- package/components/dropdown/dist/registered.js +450 -259
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.min.js +2 -2
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +2 -2
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/index.js +1 -1
- package/components/form/dist/registered.js +1 -1
- package/components/helptext/dist/index.js +2 -2
- package/components/helptext/dist/registered.js +2 -2
- package/components/input/README.md +5 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +228 -130
- package/components/input/demo/api.min.js +909 -247
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +48 -32
- package/components/input/demo/index.min.js +909 -247
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +5 -2
- package/components/input/dist/auro-input.d.ts +3 -3
- package/components/input/dist/base-input.d.ts +38 -10
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +908 -246
- package/components/input/dist/registered.js +908 -246
- package/components/layoutElement/dist/index.js +13 -10
- package/components/menu/demo/api.html +32 -10
- package/components/menu/demo/api.md +69 -8
- package/components/menu/demo/api.min.js +239 -48
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +239 -48
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +41 -7
- package/components/menu/dist/auro-menuoption.d.ts +15 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +238 -47
- package/components/menu/dist/registered.js +238 -47
- 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 +39 -9
- package/components/radio/demo/api.min.js +91 -93
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +91 -93
- 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 +9 -12
- package/components/radio/dist/index.js +90 -92
- package/components/radio/dist/registered.js +90 -92
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +150 -121
- package/components/select/demo/api.min.js +2184 -704
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +1066 -259
- package/components/select/demo/index.min.js +2186 -694
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +59 -21
- package/components/select/dist/index.js +2107 -711
- package/components/select/dist/registered.js +2107 -711
- package/package.json +31 -28
- /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
|
@@ -26,7 +26,7 @@ const t$3=globalThis,e$4=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.na
|
|
|
26
26
|
* @license
|
|
27
27
|
* Copyright 2017 Google LLC
|
|
28
28
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
29
|
-
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$2=c$2?c$2.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$4={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$4(t,s),b={attribute:true,type:String,converter:u$4,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$1 = 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$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$2(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(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$3(s));}else void 0!==s&&i.push(c$3(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$4).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$4;this._$Em=e
|
|
29
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$2=c$2?c$2.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$4={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$4(t,s),b={attribute:true,type:String,converter:u$4,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$1 = 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$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$2(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(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$3(s));}else void 0!==s&&i.push(c$3(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$4).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$4;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$1)(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$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$1}),(a$2.reactiveElementVersions??=[]).push("2.1.1");
|
|
30
30
|
|
|
31
31
|
/**
|
|
32
32
|
* @license
|
|
@@ -41,25 +41,25 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
|
|
|
41
41
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
42
42
|
*/const s$2=globalThis;let i$2 = class i extends y$1{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$2._$litElement$=true,i$2["finalized"]=true,s$2.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$2.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$2.litElementVersions??=[]).push("4.2.0");
|
|
43
43
|
|
|
44
|
-
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;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:60px;max-height:60px;background-color:unset}.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:58px;max-height:58px;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;min-height:56px;max-height:56px}.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}.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;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}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;min-height:68px;max-height:68px}.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}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;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}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:
|
|
44
|
+
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;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:60px;max-height:60px;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:58px;max-height:58px;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:56px;max-height:56px}.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-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}`;
|
|
45
45
|
|
|
46
|
-
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
|
|
46
|
+
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.notification{display:flex;align-items:center;justify-content:center}`;
|
|
47
47
|
|
|
48
|
-
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}
|
|
48
|
+
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
49
49
|
|
|
50
|
-
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{color:var(--ds-auro-input-
|
|
50
|
+
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
51
51
|
|
|
52
|
-
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-
|
|
52
|
+
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
53
53
|
|
|
54
|
-
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;
|
|
54
|
+
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{overflow:hidden;cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}.layout-classic .accents.left{padding-right:var(--ds-size-100, 0.5rem)}.layout-classic .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
55
55
|
|
|
56
|
-
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-
|
|
56
|
+
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
57
57
|
|
|
58
|
-
var emphasizedStyleCss = i$5`:host
|
|
58
|
+
var emphasizedStyleCss = i$5`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{display:none;width:100%}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-300, 1.5rem)}`;
|
|
59
59
|
|
|
60
60
|
var emphasizedColorCss = i$5`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
61
61
|
|
|
62
|
-
var snowflakeStyleCss = i$5`:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:24px}.layout-snowflake .accents.left{padding-left:24px}.layout-snowflake .accents.right{padding-right:24px}.helpTextWrapper{text-align:center}`;
|
|
62
|
+
var snowflakeStyleCss = i$5`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
63
63
|
|
|
64
64
|
/**
|
|
65
65
|
* @license
|
|
@@ -161,6 +161,8 @@ const stringsES = {
|
|
|
161
161
|
'dateMM': 'Ingrese una fecha completa en el formato MM',
|
|
162
162
|
'dateDD': 'Ingrese una fecha completa en el formato DD',
|
|
163
163
|
'clearInput': 'Borrar campo de entrada',
|
|
164
|
+
'showPassword': 'Mostrar contraseña',
|
|
165
|
+
'hidePassword': 'Ocultar contraseña'
|
|
164
166
|
};
|
|
165
167
|
|
|
166
168
|
const stringsEN = {
|
|
@@ -185,6 +187,8 @@ const stringsEN = {
|
|
|
185
187
|
'dateMM': 'Please enter a complete date in the format MM',
|
|
186
188
|
'dateDD': 'Please enter a complete date in the format DD',
|
|
187
189
|
'clearInput': 'Clear input field',
|
|
190
|
+
'showPassword': 'Show password',
|
|
191
|
+
'hidePassword': 'Hide password'
|
|
188
192
|
};
|
|
189
193
|
|
|
190
194
|
/**
|
|
@@ -4479,7 +4483,7 @@ const {
|
|
|
4479
4483
|
|
|
4480
4484
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4481
4485
|
|
|
4482
|
-
let AuroLibraryRuntimeUtils$
|
|
4486
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
4483
4487
|
|
|
4484
4488
|
/* eslint-disable jsdoc/require-param */
|
|
4485
4489
|
|
|
@@ -4549,7 +4553,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
4549
4553
|
class AuroFormValidation {
|
|
4550
4554
|
|
|
4551
4555
|
constructor() {
|
|
4552
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4556
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
4553
4557
|
}
|
|
4554
4558
|
|
|
4555
4559
|
/**
|
|
@@ -4609,19 +4613,19 @@ class AuroFormValidation {
|
|
|
4609
4613
|
{
|
|
4610
4614
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
4611
4615
|
validity: 'tooShort',
|
|
4612
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
4616
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
4613
4617
|
},
|
|
4614
4618
|
{
|
|
4615
4619
|
check: (e) => e.value?.length > e.maxLength,
|
|
4616
4620
|
validity: 'tooLong',
|
|
4617
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
4621
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
4618
4622
|
}
|
|
4619
4623
|
],
|
|
4620
4624
|
pattern: [
|
|
4621
4625
|
{
|
|
4622
4626
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
4623
4627
|
validity: 'patternMismatch',
|
|
4624
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
4628
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
4625
4629
|
}
|
|
4626
4630
|
]
|
|
4627
4631
|
},
|
|
@@ -4768,13 +4772,24 @@ class AuroFormValidation {
|
|
|
4768
4772
|
this.getInputElements(elem);
|
|
4769
4773
|
this.getAuroInputs(elem);
|
|
4770
4774
|
|
|
4771
|
-
//
|
|
4775
|
+
// Check if validation should run
|
|
4772
4776
|
let validationShouldRun =
|
|
4777
|
+
|
|
4778
|
+
// If the validation was forced
|
|
4773
4779
|
force ||
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4780
|
+
|
|
4781
|
+
// If the validation should run on input
|
|
4782
|
+
elem.validateOnInput ||
|
|
4783
|
+
|
|
4784
|
+
// State-based checks
|
|
4785
|
+
(
|
|
4786
|
+
// Element is not currently focused
|
|
4787
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
4788
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
4789
|
+
|
|
4790
|
+
// And element has been touched or is untouched but has a value
|
|
4791
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
4792
|
+
);
|
|
4778
4793
|
|
|
4779
4794
|
if (elem.hasAttribute('error')) {
|
|
4780
4795
|
elem.validity = 'customError';
|
|
@@ -4816,10 +4831,10 @@ class AuroFormValidation {
|
|
|
4816
4831
|
if (!hasValue && elem.required && elem.touched) {
|
|
4817
4832
|
elem.validity = 'valueMissing';
|
|
4818
4833
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
4819
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4834
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4820
4835
|
this.validateType(elem);
|
|
4821
4836
|
this.validateElementAttributes(elem);
|
|
4822
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4837
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4823
4838
|
this.validateElementAttributes(elem);
|
|
4824
4839
|
}
|
|
4825
4840
|
}
|
|
@@ -4828,7 +4843,9 @@ class AuroFormValidation {
|
|
|
4828
4843
|
elem.validity = this.auroInputElements[0].validity;
|
|
4829
4844
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
4830
4845
|
|
|
4831
|
-
|
|
4846
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4847
|
+
// combobox's 2nd input will have noValidate set true.
|
|
4848
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
4832
4849
|
elem.validity = this.auroInputElements[1].validity;
|
|
4833
4850
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
4834
4851
|
}
|
|
@@ -4908,7 +4925,7 @@ class AuroFormValidation {
|
|
|
4908
4925
|
}
|
|
4909
4926
|
}
|
|
4910
4927
|
|
|
4911
|
-
let AuroElement$
|
|
4928
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
4912
4929
|
static get properties() {
|
|
4913
4930
|
return {
|
|
4914
4931
|
|
|
@@ -4943,18 +4960,21 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
4943
4960
|
}
|
|
4944
4961
|
|
|
4945
4962
|
resetShapeClasses() {
|
|
4946
|
-
|
|
4947
|
-
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4963
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4948
4964
|
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4965
|
+
if (wrapper) {
|
|
4966
|
+
wrapper.classList.forEach((className) => {
|
|
4967
|
+
if (className.startsWith('shape-')) {
|
|
4968
|
+
wrapper.classList.remove(className);
|
|
4969
|
+
}
|
|
4970
|
+
});
|
|
4955
4971
|
|
|
4956
|
-
|
|
4957
|
-
|
|
4972
|
+
}
|
|
4973
|
+
|
|
4974
|
+
if (this.shape && this.size) {
|
|
4975
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
4976
|
+
} else {
|
|
4977
|
+
wrapper.classList.add('shape-none');
|
|
4958
4978
|
}
|
|
4959
4979
|
}
|
|
4960
4980
|
|
|
@@ -5010,19 +5030,24 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5010
5030
|
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5011
5031
|
* @attr id
|
|
5012
5032
|
*
|
|
5013
|
-
* @slot
|
|
5033
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
5014
5034
|
* @slot label - Sets the label text for the input.
|
|
5035
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5036
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5015
5037
|
*
|
|
5016
5038
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5017
5039
|
* @csspart label - Use for customizing the style of the label element
|
|
5018
5040
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
5041
|
+
* @csspart input - Use for customizing the style of the input element
|
|
5019
5042
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
5020
5043
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
5044
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
5045
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
5021
5046
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
5022
5047
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
5023
5048
|
*/
|
|
5024
5049
|
|
|
5025
|
-
class BaseInput extends AuroElement$
|
|
5050
|
+
class BaseInput extends AuroElement$2 {
|
|
5026
5051
|
|
|
5027
5052
|
constructor() {
|
|
5028
5053
|
super();
|
|
@@ -5115,7 +5140,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5115
5140
|
*/
|
|
5116
5141
|
a11yRole: {
|
|
5117
5142
|
type: String,
|
|
5118
|
-
attribute: true,
|
|
5119
5143
|
reflect: true
|
|
5120
5144
|
},
|
|
5121
5145
|
|
|
@@ -5124,7 +5148,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5124
5148
|
*/
|
|
5125
5149
|
a11yExpanded: {
|
|
5126
5150
|
type: Boolean,
|
|
5127
|
-
attribute: true,
|
|
5128
5151
|
reflect: true
|
|
5129
5152
|
},
|
|
5130
5153
|
|
|
@@ -5133,7 +5156,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5133
5156
|
*/
|
|
5134
5157
|
a11yControls: {
|
|
5135
5158
|
type: String,
|
|
5136
|
-
attribute: true,
|
|
5137
5159
|
reflect: true
|
|
5138
5160
|
},
|
|
5139
5161
|
|
|
@@ -5149,7 +5171,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5149
5171
|
* An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
|
|
5150
5172
|
*/
|
|
5151
5173
|
autocapitalize: {
|
|
5152
|
-
type: String
|
|
5174
|
+
type: String,
|
|
5175
|
+
reflect: true
|
|
5153
5176
|
},
|
|
5154
5177
|
|
|
5155
5178
|
/**
|
|
@@ -5164,7 +5187,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5164
5187
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5165
5188
|
*/
|
|
5166
5189
|
autocorrect: {
|
|
5167
|
-
type: String
|
|
5190
|
+
type: String,
|
|
5191
|
+
reflect: true
|
|
5168
5192
|
},
|
|
5169
5193
|
|
|
5170
5194
|
/**
|
|
@@ -5209,7 +5233,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5209
5233
|
/** Exposes inputmode attribute for input. */
|
|
5210
5234
|
inputmode: {
|
|
5211
5235
|
type: String,
|
|
5212
|
-
attribute: true,
|
|
5213
5236
|
reflect: true
|
|
5214
5237
|
},
|
|
5215
5238
|
|
|
@@ -5217,7 +5240,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5217
5240
|
* Defines the language of an element.
|
|
5218
5241
|
*/
|
|
5219
5242
|
lang: {
|
|
5220
|
-
type: String
|
|
5243
|
+
type: String,
|
|
5244
|
+
reflect: true
|
|
5221
5245
|
},
|
|
5222
5246
|
|
|
5223
5247
|
/**
|
|
@@ -5231,7 +5255,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5231
5255
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5232
5256
|
*/
|
|
5233
5257
|
maxLength: {
|
|
5234
|
-
type: Number
|
|
5258
|
+
type: Number,
|
|
5259
|
+
reflect: true
|
|
5235
5260
|
},
|
|
5236
5261
|
|
|
5237
5262
|
/**
|
|
@@ -5245,14 +5270,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5245
5270
|
* The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.
|
|
5246
5271
|
*/
|
|
5247
5272
|
minLength: {
|
|
5248
|
-
type: Number
|
|
5273
|
+
type: Number,
|
|
5274
|
+
reflect: true
|
|
5249
5275
|
},
|
|
5250
5276
|
|
|
5251
5277
|
/**
|
|
5252
5278
|
* Populates the `name` attribute on the input.
|
|
5253
5279
|
*/
|
|
5254
5280
|
name: {
|
|
5255
|
-
type: String
|
|
5281
|
+
type: String,
|
|
5282
|
+
reflect: true
|
|
5283
|
+
},
|
|
5284
|
+
|
|
5285
|
+
/**
|
|
5286
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5287
|
+
* hides accents.
|
|
5288
|
+
*/
|
|
5289
|
+
nested: {
|
|
5290
|
+
type: Boolean,
|
|
5291
|
+
reflect: true
|
|
5256
5292
|
},
|
|
5257
5293
|
|
|
5258
5294
|
/**
|
|
@@ -5280,10 +5316,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5280
5316
|
},
|
|
5281
5317
|
|
|
5282
5318
|
/**
|
|
5283
|
-
* Define custom placeholder text
|
|
5319
|
+
* Define custom placeholder text.
|
|
5284
5320
|
*/
|
|
5285
5321
|
placeholder: {
|
|
5286
|
-
type: String
|
|
5322
|
+
type: String,
|
|
5323
|
+
reflect: true
|
|
5287
5324
|
},
|
|
5288
5325
|
|
|
5289
5326
|
/**
|
|
@@ -5372,6 +5409,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5372
5409
|
type: String
|
|
5373
5410
|
},
|
|
5374
5411
|
|
|
5412
|
+
/**
|
|
5413
|
+
* Simple makes the input render without a border.
|
|
5414
|
+
*/
|
|
5415
|
+
simple: {
|
|
5416
|
+
type: Boolean,
|
|
5417
|
+
reflect: true
|
|
5418
|
+
},
|
|
5419
|
+
|
|
5375
5420
|
/**
|
|
5376
5421
|
* Custom help text message for email type validity.
|
|
5377
5422
|
*/
|
|
@@ -5383,7 +5428,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5383
5428
|
* An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
|
|
5384
5429
|
*/
|
|
5385
5430
|
spellcheck: {
|
|
5386
|
-
type: String
|
|
5431
|
+
type: String,
|
|
5432
|
+
reflect: true
|
|
5387
5433
|
},
|
|
5388
5434
|
|
|
5389
5435
|
/**
|
|
@@ -5398,7 +5444,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5398
5444
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
5399
5445
|
*/
|
|
5400
5446
|
value: {
|
|
5401
|
-
type: String
|
|
5447
|
+
type: String,
|
|
5448
|
+
reflect: true
|
|
5402
5449
|
},
|
|
5403
5450
|
|
|
5404
5451
|
/**
|
|
@@ -5429,8 +5476,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5429
5476
|
},
|
|
5430
5477
|
|
|
5431
5478
|
/**
|
|
5479
|
+
* The id for input node.
|
|
5432
5480
|
* @private
|
|
5433
|
-
* id for input node
|
|
5434
5481
|
*/
|
|
5435
5482
|
inputId: {
|
|
5436
5483
|
type: String,
|
|
@@ -5454,7 +5501,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5454
5501
|
}
|
|
5455
5502
|
|
|
5456
5503
|
firstUpdated() {
|
|
5457
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5504
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5458
5505
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5459
5506
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5460
5507
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5566,9 +5613,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5566
5613
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5567
5614
|
this.validation.validate(this);
|
|
5568
5615
|
}
|
|
5569
|
-
|
|
5570
|
-
this.notifyValueChanged();
|
|
5571
5616
|
}
|
|
5617
|
+
|
|
5618
|
+
this.notifyValueChanged();
|
|
5572
5619
|
}
|
|
5573
5620
|
|
|
5574
5621
|
if (changedProperties.has('error')) {
|
|
@@ -5678,7 +5725,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5678
5725
|
|
|
5679
5726
|
/**
|
|
5680
5727
|
* Function to set element focus.
|
|
5681
|
-
* @private
|
|
5682
5728
|
* @return {void}
|
|
5683
5729
|
*/
|
|
5684
5730
|
focus() {
|
|
@@ -5694,9 +5740,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5694
5740
|
this.inputElement.value = "";
|
|
5695
5741
|
this.value = "";
|
|
5696
5742
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5743
|
+
this.notifyValueChanged();
|
|
5697
5744
|
this.focus();
|
|
5698
5745
|
this.validation.validate(this);
|
|
5699
|
-
this.notifyValueChanged();
|
|
5700
5746
|
}
|
|
5701
5747
|
|
|
5702
5748
|
/**
|
|
@@ -5791,13 +5837,20 @@ class BaseInput extends AuroElement$1 {
|
|
|
5791
5837
|
}
|
|
5792
5838
|
|
|
5793
5839
|
/**
|
|
5794
|
-
* Resets component to initial state.
|
|
5840
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5795
5841
|
* @returns {void}
|
|
5796
5842
|
*/
|
|
5797
5843
|
reset() {
|
|
5798
5844
|
this.validation.reset(this);
|
|
5799
5845
|
}
|
|
5800
5846
|
|
|
5847
|
+
/**
|
|
5848
|
+
* Clears the input value.
|
|
5849
|
+
*/
|
|
5850
|
+
clear() {
|
|
5851
|
+
this.value = undefined;
|
|
5852
|
+
}
|
|
5853
|
+
|
|
5801
5854
|
/**
|
|
5802
5855
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5803
5856
|
* @private
|
|
@@ -5876,28 +5929,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5876
5929
|
* @returns {void}
|
|
5877
5930
|
*/
|
|
5878
5931
|
getPlaceholder() {
|
|
5879
|
-
|
|
5880
|
-
|
|
5881
|
-
|
|
5882
|
-
|
|
5883
|
-
// console.warn(this.getActiveElement());
|
|
5884
|
-
|
|
5885
|
-
if (!isFocused) {
|
|
5886
|
-
if (this.placeholder) {
|
|
5887
|
-
this.placeholderStr = this.placeholder;
|
|
5888
|
-
// return this.placeholder;
|
|
5889
|
-
} else if (this.type === 'date') {
|
|
5890
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5891
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5892
|
-
}
|
|
5893
|
-
} else {
|
|
5894
|
-
this.placeholderStr = '';
|
|
5932
|
+
if (this.placeholder) {
|
|
5933
|
+
this.placeholderStr = this.placeholder;
|
|
5934
|
+
} else if (this.type === 'date') {
|
|
5935
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5895
5936
|
}
|
|
5896
5937
|
|
|
5897
5938
|
this.requestUpdate();
|
|
5898
5939
|
|
|
5899
|
-
|
|
5900
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5940
|
+
return this.placeholderStr;
|
|
5901
5941
|
}
|
|
5902
5942
|
|
|
5903
5943
|
/**
|
|
@@ -6110,7 +6150,7 @@ class AuroDependencyVersioning {
|
|
|
6110
6150
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6111
6151
|
*/
|
|
6112
6152
|
|
|
6113
|
-
class AuroElement extends i$2 {
|
|
6153
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
6114
6154
|
|
|
6115
6155
|
// function to define props used within the scope of this component
|
|
6116
6156
|
static get properties() {
|
|
@@ -6134,7 +6174,7 @@ class AuroElement extends i$2 {
|
|
|
6134
6174
|
|
|
6135
6175
|
return 'false'
|
|
6136
6176
|
}
|
|
6137
|
-
}
|
|
6177
|
+
};
|
|
6138
6178
|
|
|
6139
6179
|
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>"};
|
|
6140
6180
|
|
|
@@ -6178,7 +6218,7 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6178
6218
|
*/
|
|
6179
6219
|
|
|
6180
6220
|
// build the component class
|
|
6181
|
-
class BaseIcon extends AuroElement {
|
|
6221
|
+
class BaseIcon extends AuroElement$1 {
|
|
6182
6222
|
constructor() {
|
|
6183
6223
|
super();
|
|
6184
6224
|
this.onDark = false;
|
|
@@ -6261,7 +6301,7 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6261
6301
|
|
|
6262
6302
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6263
6303
|
|
|
6264
|
-
let AuroLibraryRuntimeUtils$
|
|
6304
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6265
6305
|
|
|
6266
6306
|
/* eslint-disable jsdoc/require-param */
|
|
6267
6307
|
|
|
@@ -6343,7 +6383,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6343
6383
|
*/
|
|
6344
6384
|
privateDefaults() {
|
|
6345
6385
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6346
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6386
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6347
6387
|
}
|
|
6348
6388
|
|
|
6349
6389
|
// function to define props used within the scope of this component
|
|
@@ -6425,7 +6465,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6425
6465
|
*
|
|
6426
6466
|
*/
|
|
6427
6467
|
static register(name = "auro-icon") {
|
|
6428
|
-
AuroLibraryRuntimeUtils$
|
|
6468
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6429
6469
|
}
|
|
6430
6470
|
|
|
6431
6471
|
connectedCallback() {
|
|
@@ -6446,8 +6486,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6446
6486
|
async firstUpdated() {
|
|
6447
6487
|
await super.firstUpdated();
|
|
6448
6488
|
|
|
6449
|
-
|
|
6450
|
-
|
|
6489
|
+
/**
|
|
6490
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6491
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6492
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6493
|
+
*/
|
|
6494
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6451
6495
|
const svgDesc = this.svg.querySelector('desc');
|
|
6452
6496
|
|
|
6453
6497
|
if (svgDesc) {
|
|
@@ -6491,15 +6535,552 @@ class AuroIcon extends BaseIcon {
|
|
|
6491
6535
|
}
|
|
6492
6536
|
}
|
|
6493
6537
|
|
|
6494
|
-
var iconVersion = '8.0.
|
|
6538
|
+
var iconVersion = '8.0.4';
|
|
6539
|
+
|
|
6540
|
+
/**
|
|
6541
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6542
|
+
*/
|
|
6543
|
+
const _observers = new WeakMap();
|
|
6544
|
+
|
|
6545
|
+
/**
|
|
6546
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6547
|
+
* Structure: {
|
|
6548
|
+
* host: {
|
|
6549
|
+
* matchers: Set<Function>,
|
|
6550
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6551
|
+
* }
|
|
6552
|
+
* }
|
|
6553
|
+
*/
|
|
6554
|
+
const _transportConfig = new WeakMap();
|
|
6555
|
+
|
|
6556
|
+
/**
|
|
6557
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6558
|
+
*
|
|
6559
|
+
* @param {Object} params - The parameters for the function.
|
|
6560
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6561
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6562
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6563
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6564
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6565
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6566
|
+
*/
|
|
6567
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6568
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6569
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6570
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6571
|
+
}
|
|
6572
|
+
|
|
6573
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6574
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6575
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6576
|
+
}
|
|
6577
|
+
|
|
6578
|
+
// Guard Clause: Ensure match is a function
|
|
6579
|
+
if (typeof match !== 'function') {
|
|
6580
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6581
|
+
}
|
|
6495
6582
|
|
|
6496
|
-
|
|
6583
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6584
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6585
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6586
|
+
}
|
|
6587
|
+
|
|
6588
|
+
// Register this transport and get cleanup function
|
|
6589
|
+
return _registerTransport({
|
|
6590
|
+
host,
|
|
6591
|
+
target,
|
|
6592
|
+
matcher: match,
|
|
6593
|
+
removeOriginal
|
|
6594
|
+
});
|
|
6595
|
+
};
|
|
6497
6596
|
|
|
6498
|
-
|
|
6597
|
+
/**
|
|
6598
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6599
|
+
*
|
|
6600
|
+
* @param {Object} params - The parameters object.
|
|
6601
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6602
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6603
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6604
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6605
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6606
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6607
|
+
* @private
|
|
6608
|
+
*/
|
|
6609
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6610
|
+
// Initialize config for this host if it doesn't exist
|
|
6611
|
+
if (!_transportConfig.has(host)) {
|
|
6612
|
+
_transportConfig.set(host, {
|
|
6613
|
+
matchers: new Set(),
|
|
6614
|
+
targets: new Map()
|
|
6615
|
+
});
|
|
6616
|
+
}
|
|
6617
|
+
|
|
6618
|
+
const config = _transportConfig.get(host);
|
|
6619
|
+
|
|
6620
|
+
// Add the matcher to the set of matchers for this host
|
|
6621
|
+
config.matchers.add(matcher);
|
|
6622
|
+
|
|
6623
|
+
// Initialize target entry if it doesn't exist
|
|
6624
|
+
if (!config.targets.has(target)) {
|
|
6625
|
+
config.targets.set(target, new Map());
|
|
6626
|
+
}
|
|
6627
|
+
|
|
6628
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6629
|
+
config.targets.get(target).set(matcher, {
|
|
6630
|
+
removeOriginal,
|
|
6631
|
+
currentAttributes: new Map()
|
|
6632
|
+
});
|
|
6633
|
+
|
|
6634
|
+
// Perform initial attribute transport
|
|
6635
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6636
|
+
|
|
6637
|
+
// Attach observer
|
|
6638
|
+
_attachObserver(host);
|
|
6639
|
+
|
|
6640
|
+
// Return cleanup function and utility functions
|
|
6641
|
+
return {
|
|
6642
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6643
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6644
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6645
|
+
}
|
|
6646
|
+
};
|
|
6499
6647
|
|
|
6500
|
-
|
|
6648
|
+
/**
|
|
6649
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6650
|
+
*
|
|
6651
|
+
* @param {HTMLElement} host - The host element
|
|
6652
|
+
* @param {HTMLElement} target - The target element
|
|
6653
|
+
* @param {Function} matcher - The matcher function
|
|
6654
|
+
* @private
|
|
6655
|
+
*/
|
|
6656
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6657
|
+
const config = _transportConfig.get(host);
|
|
6658
|
+
if (!config) return;
|
|
6659
|
+
|
|
6660
|
+
// Remove this matcher from this target
|
|
6661
|
+
const targetMatchers = config.targets.get(target);
|
|
6662
|
+
if (targetMatchers) {
|
|
6663
|
+
targetMatchers.delete(matcher);
|
|
6664
|
+
|
|
6665
|
+
// If this target has no more matchers, remove it
|
|
6666
|
+
if (targetMatchers.size === 0) {
|
|
6667
|
+
config.targets.delete(target);
|
|
6668
|
+
}
|
|
6669
|
+
}
|
|
6670
|
+
|
|
6671
|
+
// Check if this matcher is still used by any target
|
|
6672
|
+
let matcherStillUsed = false;
|
|
6673
|
+
for (const matcherMap of config.targets.values()) {
|
|
6674
|
+
if (matcherMap.has(matcher)) {
|
|
6675
|
+
matcherStillUsed = true;
|
|
6676
|
+
break;
|
|
6677
|
+
}
|
|
6678
|
+
}
|
|
6679
|
+
|
|
6680
|
+
// If not used anymore, remove from matchers set
|
|
6681
|
+
if (!matcherStillUsed) {
|
|
6682
|
+
config.matchers.delete(matcher);
|
|
6683
|
+
}
|
|
6684
|
+
|
|
6685
|
+
// If no more targets or matchers, detach observer
|
|
6686
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6687
|
+
_detachObserver(host);
|
|
6688
|
+
}
|
|
6689
|
+
};
|
|
6501
6690
|
|
|
6502
|
-
|
|
6691
|
+
/**
|
|
6692
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6693
|
+
*
|
|
6694
|
+
* @param {Object} params - The parameters object.
|
|
6695
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6696
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6697
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6698
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6699
|
+
* @returns {void}
|
|
6700
|
+
* @private
|
|
6701
|
+
*/
|
|
6702
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6703
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6704
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6705
|
+
.filter(attr => matcher(attr))
|
|
6706
|
+
.reduce((acc, attr) => {
|
|
6707
|
+
acc[attr] = host.getAttribute(attr);
|
|
6708
|
+
return acc;
|
|
6709
|
+
}, {});
|
|
6710
|
+
|
|
6711
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6712
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6713
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6714
|
+
target.setAttribute(key, value);
|
|
6715
|
+
if (removeOriginal) {
|
|
6716
|
+
host.removeAttribute(key);
|
|
6717
|
+
}
|
|
6718
|
+
});
|
|
6719
|
+
};
|
|
6720
|
+
|
|
6721
|
+
/**
|
|
6722
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6723
|
+
*
|
|
6724
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6725
|
+
* @returns {MutationObserver} The observer instance.
|
|
6726
|
+
* @private
|
|
6727
|
+
*/
|
|
6728
|
+
const _attachObserver = (host) => {
|
|
6729
|
+
// If an observer for this host already exists, return it
|
|
6730
|
+
if (_observers.has(host)) {
|
|
6731
|
+
return _observers.get(host);
|
|
6732
|
+
}
|
|
6733
|
+
|
|
6734
|
+
// Create a new MutationObserver
|
|
6735
|
+
const observer = new MutationObserver((mutations) => {
|
|
6736
|
+
const config = _transportConfig.get(host);
|
|
6737
|
+
if (!config) return;
|
|
6738
|
+
|
|
6739
|
+
// For each mutation affecting attributes
|
|
6740
|
+
mutations
|
|
6741
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6742
|
+
.forEach(mutation => {
|
|
6743
|
+
const attributeName = mutation.attributeName;
|
|
6744
|
+
|
|
6745
|
+
// Find matchers that care about this attribute
|
|
6746
|
+
for (const matcher of config.matchers) {
|
|
6747
|
+
if (matcher(attributeName)) {
|
|
6748
|
+
// For each target that uses this matcher
|
|
6749
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6750
|
+
if (matcherConfigs.has(matcher)) {
|
|
6751
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6752
|
+
_transportAttributes({
|
|
6753
|
+
host,
|
|
6754
|
+
target,
|
|
6755
|
+
matcher,
|
|
6756
|
+
removeOriginal
|
|
6757
|
+
});
|
|
6758
|
+
}
|
|
6759
|
+
}
|
|
6760
|
+
}
|
|
6761
|
+
}
|
|
6762
|
+
});
|
|
6763
|
+
});
|
|
6764
|
+
|
|
6765
|
+
// Start observing attribute changes
|
|
6766
|
+
observer.observe(host, { attributes: true });
|
|
6767
|
+
|
|
6768
|
+
// Store the observer
|
|
6769
|
+
_observers.set(host, observer);
|
|
6770
|
+
|
|
6771
|
+
return observer;
|
|
6772
|
+
};
|
|
6773
|
+
|
|
6774
|
+
/**
|
|
6775
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6776
|
+
*
|
|
6777
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6778
|
+
* @private
|
|
6779
|
+
*/
|
|
6780
|
+
const _detachObserver = (host) => {
|
|
6781
|
+
if (_observers.has(host)) {
|
|
6782
|
+
const observer = _observers.get(host);
|
|
6783
|
+
observer.disconnect();
|
|
6784
|
+
_observers.delete(host);
|
|
6785
|
+
}
|
|
6786
|
+
|
|
6787
|
+
// Clean up the transport config as well
|
|
6788
|
+
if (_transportConfig.has(host)) {
|
|
6789
|
+
_transportConfig.delete(host);
|
|
6790
|
+
}
|
|
6791
|
+
};
|
|
6792
|
+
|
|
6793
|
+
/**
|
|
6794
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6795
|
+
* @param {HTMLElement} host - The host element
|
|
6796
|
+
* @param {HTMLElement} target - The target element
|
|
6797
|
+
* @param {Function} matcher - The matcher function
|
|
6798
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6799
|
+
* @private
|
|
6800
|
+
*/
|
|
6801
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6802
|
+
const config = _transportConfig.get(host);
|
|
6803
|
+
if (!config) return undefined;
|
|
6804
|
+
|
|
6805
|
+
const targetMatchers = config.targets.get(target);
|
|
6806
|
+
if (!targetMatchers) return undefined;
|
|
6807
|
+
|
|
6808
|
+
return targetMatchers.get(matcher);
|
|
6809
|
+
};
|
|
6810
|
+
|
|
6811
|
+
/**
|
|
6812
|
+
* Sets an observed attribute value
|
|
6813
|
+
* @param {HTMLElement} host - The host element
|
|
6814
|
+
* @param {HTMLElement} target - The target element
|
|
6815
|
+
* @param {Function} matcher - The matcher function
|
|
6816
|
+
* @param {string} key - The attribute name
|
|
6817
|
+
* @param {string} value - The attribute value
|
|
6818
|
+
* @private
|
|
6819
|
+
*/
|
|
6820
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6821
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6822
|
+
if (matcherConfig) {
|
|
6823
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6824
|
+
}
|
|
6825
|
+
};
|
|
6826
|
+
|
|
6827
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6828
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6829
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6830
|
+
return undefined;
|
|
6831
|
+
};
|
|
6832
|
+
|
|
6833
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6834
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6835
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6836
|
+
return [];
|
|
6837
|
+
};
|
|
6838
|
+
|
|
6839
|
+
const _matchers = {
|
|
6840
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6841
|
+
'role': attr => attr.match(/^role$/)
|
|
6842
|
+
};
|
|
6843
|
+
|
|
6844
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6845
|
+
return transportAttributes({
|
|
6846
|
+
host,
|
|
6847
|
+
target,
|
|
6848
|
+
match: attr => {
|
|
6849
|
+
for (const key in _matchers) {
|
|
6850
|
+
if (_matchers[key](attr)) return true;
|
|
6851
|
+
}
|
|
6852
|
+
return false;
|
|
6853
|
+
},
|
|
6854
|
+
removeOriginal
|
|
6855
|
+
});
|
|
6856
|
+
};
|
|
6857
|
+
|
|
6858
|
+
class AuroElement extends i$2 {
|
|
6859
|
+
|
|
6860
|
+
/**
|
|
6861
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6862
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6863
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6864
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6865
|
+
* @private
|
|
6866
|
+
*/
|
|
6867
|
+
attributeWatcher;
|
|
6868
|
+
|
|
6869
|
+
static get properties() {
|
|
6870
|
+
return {
|
|
6871
|
+
|
|
6872
|
+
/**
|
|
6873
|
+
* Defines the layout of an element.
|
|
6874
|
+
* @default {'default'}
|
|
6875
|
+
*/
|
|
6876
|
+
layout: {
|
|
6877
|
+
type: String,
|
|
6878
|
+
attribute: "layout",
|
|
6879
|
+
reflect: true
|
|
6880
|
+
},
|
|
6881
|
+
|
|
6882
|
+
/**
|
|
6883
|
+
* Defines the shape of an element.
|
|
6884
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6885
|
+
* @default {'default'}
|
|
6886
|
+
*/
|
|
6887
|
+
shape: {
|
|
6888
|
+
type: String,
|
|
6889
|
+
attribute: "shape",
|
|
6890
|
+
reflect: true
|
|
6891
|
+
},
|
|
6892
|
+
|
|
6893
|
+
/**
|
|
6894
|
+
* Defines the size of an element.
|
|
6895
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6896
|
+
* @default {'md'}
|
|
6897
|
+
*/
|
|
6898
|
+
size: {
|
|
6899
|
+
type: String,
|
|
6900
|
+
attribute: "size",
|
|
6901
|
+
reflect: true
|
|
6902
|
+
},
|
|
6903
|
+
|
|
6904
|
+
/**
|
|
6905
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6906
|
+
* @default {false}
|
|
6907
|
+
*/
|
|
6908
|
+
onDark: {
|
|
6909
|
+
type: Boolean,
|
|
6910
|
+
attribute: "ondark",
|
|
6911
|
+
reflect: true
|
|
6912
|
+
},
|
|
6913
|
+
|
|
6914
|
+
/**
|
|
6915
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
6916
|
+
* This is used to apply layout and shape classes dynamically.
|
|
6917
|
+
* @type {HTMLElement|null}
|
|
6918
|
+
* @default {null}
|
|
6919
|
+
* @private
|
|
6920
|
+
*/
|
|
6921
|
+
wrapper: {
|
|
6922
|
+
attribute: false,
|
|
6923
|
+
reflect: false
|
|
6924
|
+
}
|
|
6925
|
+
};
|
|
6926
|
+
}
|
|
6927
|
+
|
|
6928
|
+
|
|
6929
|
+
|
|
6930
|
+
resetShapeClasses() {
|
|
6931
|
+
if (this.shape && this.size) {
|
|
6932
|
+
|
|
6933
|
+
if (this.wrapper) {
|
|
6934
|
+
this.wrapper.classList.forEach((className) => {
|
|
6935
|
+
if (className.startsWith('shape-')) {
|
|
6936
|
+
this.wrapper.classList.remove(className);
|
|
6937
|
+
}
|
|
6938
|
+
});
|
|
6939
|
+
|
|
6940
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
6941
|
+
}
|
|
6942
|
+
}
|
|
6943
|
+
}
|
|
6944
|
+
|
|
6945
|
+
resetLayoutClasses() {
|
|
6946
|
+
if (this.layout) {
|
|
6947
|
+
if (this.wrapper) {
|
|
6948
|
+
this.wrapper.classList.forEach((className) => {
|
|
6949
|
+
if (className.startsWith('layout-')) {
|
|
6950
|
+
this.wrapper.classList.remove(className);
|
|
6951
|
+
}
|
|
6952
|
+
});
|
|
6953
|
+
|
|
6954
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
6955
|
+
}
|
|
6956
|
+
}
|
|
6957
|
+
}
|
|
6958
|
+
|
|
6959
|
+
updateComponentArchitecture() {
|
|
6960
|
+
this.resetLayoutClasses();
|
|
6961
|
+
this.resetShapeClasses();
|
|
6962
|
+
}
|
|
6963
|
+
|
|
6964
|
+
updated(changedProperties) {
|
|
6965
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
6966
|
+
this.updateComponentArchitecture();
|
|
6967
|
+
}
|
|
6968
|
+
}
|
|
6969
|
+
|
|
6970
|
+
firstUpdated() {
|
|
6971
|
+
super.firstUpdated();
|
|
6972
|
+
|
|
6973
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
6974
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
6975
|
+
|
|
6976
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
6977
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
6978
|
+
}
|
|
6979
|
+
|
|
6980
|
+
disconnectedCallback() {
|
|
6981
|
+
super.disconnectedCallback();
|
|
6982
|
+
|
|
6983
|
+
// Cleanup the ARIA observer if it exists
|
|
6984
|
+
if (this.attributeWatcher) {
|
|
6985
|
+
this.attributeWatcher.cleanup();
|
|
6986
|
+
this.attributeWatcher = null;
|
|
6987
|
+
}
|
|
6988
|
+
}
|
|
6989
|
+
|
|
6990
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
6991
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
6992
|
+
render() {
|
|
6993
|
+
try {
|
|
6994
|
+
return this.renderLayout();
|
|
6995
|
+
} catch (error) {
|
|
6996
|
+
// failed to get the defined layout
|
|
6997
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
6998
|
+
|
|
6999
|
+
// fallback to the default layout
|
|
7000
|
+
return this.getLayout('default');
|
|
7001
|
+
}
|
|
7002
|
+
}
|
|
7003
|
+
}
|
|
7004
|
+
|
|
7005
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.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-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-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-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)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset{padding-inline:var(--ds-size-150, 0.75rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-150, 0.75rem)*2)}:host([size=sm]) .inset{padding-inline:var(--ds-size-200, 1rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-200, 1rem)*2)}:host([size=md]) .inset{padding-inline:var(--ds-size-300, 1.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-300, 1.5rem)*2)}:host([size=lg]) .inset{padding-inline:var(--ds-size-400, 2rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-400, 2rem)*2)}:host([size=xl]) .inset{padding-inline:var(--ds-size-500, 2.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-500, 2.5rem)*2)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}`;
|
|
7006
|
+
|
|
7007
|
+
var colorCss$2 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus,.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=tertiary]:focus,.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=ghost]:focus,.auro-button:not([ondark])[variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus,.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus,.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus,.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus,.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent}.auro-button[ondark][variant=ghost]:focus,.auro-button[ondark][variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus,.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
7008
|
+
|
|
7009
|
+
var tokensCss$2 = i$5`:host(:not([onDark])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color: transparent}:host([onDark]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color: transparent}`;
|
|
7010
|
+
|
|
7011
|
+
var shapeSize = i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;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;overflow:hidden;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;overflow:hidden;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-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;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-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.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;overflow:hidden;border-radius:24px 0 0 24px}.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;overflow:hidden;border-radius:0 24px 24px 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}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}`;
|
|
7012
|
+
|
|
7013
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
7014
|
+
// See LICENSE in the project root for license information.
|
|
7015
|
+
|
|
7016
|
+
// ---------------------------------------------------------------------
|
|
7017
|
+
|
|
7018
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7019
|
+
|
|
7020
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
7021
|
+
|
|
7022
|
+
/* eslint-disable jsdoc/require-param */
|
|
7023
|
+
|
|
7024
|
+
/**
|
|
7025
|
+
* This will register a new custom element with the browser.
|
|
7026
|
+
* @param {String} name - The name of the custom element.
|
|
7027
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
7028
|
+
* @returns {void}
|
|
7029
|
+
*/
|
|
7030
|
+
registerComponent(name, componentClass) {
|
|
7031
|
+
if (!customElements.get(name)) {
|
|
7032
|
+
customElements.define(name, class extends componentClass {});
|
|
7033
|
+
}
|
|
7034
|
+
}
|
|
7035
|
+
|
|
7036
|
+
/**
|
|
7037
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
7038
|
+
* @returns {void}
|
|
7039
|
+
*/
|
|
7040
|
+
closestElement(
|
|
7041
|
+
selector, // selector like in .closest()
|
|
7042
|
+
base = this, // extra functionality to skip a parent
|
|
7043
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
7044
|
+
!el || el === document || el === window
|
|
7045
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
7046
|
+
: found
|
|
7047
|
+
? found // found a selector INside this element
|
|
7048
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
7049
|
+
) {
|
|
7050
|
+
return __Closest(base);
|
|
7051
|
+
}
|
|
7052
|
+
/* eslint-enable jsdoc/require-param */
|
|
7053
|
+
|
|
7054
|
+
/**
|
|
7055
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
7056
|
+
* @param {Object} elem - The element to check.
|
|
7057
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
7058
|
+
* @returns {void}
|
|
7059
|
+
*/
|
|
7060
|
+
handleComponentTagRename(elem, tagName) {
|
|
7061
|
+
const tag = tagName.toLowerCase();
|
|
7062
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7063
|
+
|
|
7064
|
+
if (elemTag !== tag) {
|
|
7065
|
+
elem.setAttribute(tag, true);
|
|
7066
|
+
}
|
|
7067
|
+
}
|
|
7068
|
+
|
|
7069
|
+
/**
|
|
7070
|
+
* Validates if an element is a specific Auro component.
|
|
7071
|
+
* @param {Object} elem - The element to validate.
|
|
7072
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7073
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7074
|
+
*/
|
|
7075
|
+
elementMatch(elem, tagName) {
|
|
7076
|
+
const tag = tagName.toLowerCase();
|
|
7077
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7078
|
+
|
|
7079
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7080
|
+
}
|
|
7081
|
+
};
|
|
7082
|
+
|
|
7083
|
+
var styleCss$1 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.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-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-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-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)}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}`;
|
|
6503
7084
|
|
|
6504
7085
|
var colorCss$1 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
6505
7086
|
|
|
@@ -6531,7 +7112,7 @@ class AuroLoader extends i$2 {
|
|
|
6531
7112
|
/**
|
|
6532
7113
|
* @private
|
|
6533
7114
|
*/
|
|
6534
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
7115
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
6535
7116
|
|
|
6536
7117
|
this.orbit = false;
|
|
6537
7118
|
this.ringworm = false;
|
|
@@ -6594,7 +7175,7 @@ class AuroLoader extends i$2 {
|
|
|
6594
7175
|
*
|
|
6595
7176
|
*/
|
|
6596
7177
|
static register(name = "auro-loader") {
|
|
6597
|
-
AuroLibraryRuntimeUtils$
|
|
7178
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
6598
7179
|
}
|
|
6599
7180
|
|
|
6600
7181
|
firstUpdated() {
|
|
@@ -6632,7 +7213,7 @@ class AuroLoader extends i$2 {
|
|
|
6632
7213
|
<span part="element" class="loader node-${idx}"></span>
|
|
6633
7214
|
`)}
|
|
6634
7215
|
|
|
6635
|
-
<div class="no-animation">Loading...</div>
|
|
7216
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6636
7217
|
|
|
6637
7218
|
${this.ringworm ? x`
|
|
6638
7219
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6644,25 +7225,32 @@ class AuroLoader extends i$2 {
|
|
|
6644
7225
|
}
|
|
6645
7226
|
}
|
|
6646
7227
|
|
|
6647
|
-
var loaderVersion = '5.
|
|
7228
|
+
var loaderVersion = '5.1.0';
|
|
6648
7229
|
|
|
6649
|
-
/* eslint-disable max-lines */
|
|
6650
7230
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6651
7231
|
// See LICENSE in the project root for license information.
|
|
6652
7232
|
|
|
6653
7233
|
|
|
6654
7234
|
/**
|
|
6655
7235
|
* @slot - Default slot for the text of the button.
|
|
6656
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6657
7236
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6658
7237
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6659
7238
|
* @csspart text - Apply CSS to text slot.
|
|
6660
7239
|
* @csspart icon - Apply CSS to icon slot.
|
|
6661
7240
|
*/
|
|
6662
7241
|
|
|
6663
|
-
|
|
7242
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6664
7243
|
|
|
6665
|
-
|
|
7244
|
+
/**
|
|
7245
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7246
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7247
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7248
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7249
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7250
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7251
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7252
|
+
*/
|
|
7253
|
+
class AuroButton extends AuroElement {
|
|
6666
7254
|
|
|
6667
7255
|
/**
|
|
6668
7256
|
* Enables form association for this element.
|
|
@@ -6677,15 +7265,13 @@ class AuroButton extends i$2 {
|
|
|
6677
7265
|
super();
|
|
6678
7266
|
this.autofocus = false;
|
|
6679
7267
|
this.disabled = false;
|
|
6680
|
-
this.iconOnly = false;
|
|
6681
7268
|
this.loading = false;
|
|
7269
|
+
this.size = "md";
|
|
7270
|
+
this.shape = "rounded";
|
|
6682
7271
|
this.onDark = false;
|
|
6683
|
-
this.secondary = false;
|
|
6684
|
-
this.tertiary = false;
|
|
6685
|
-
this.rounded = false;
|
|
6686
|
-
this.slim = false;
|
|
6687
7272
|
this.fluid = false;
|
|
6688
7273
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7274
|
+
this.variant = 'primary';
|
|
6689
7275
|
|
|
6690
7276
|
// Support for HTML5 forms
|
|
6691
7277
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6706,49 +7292,59 @@ class AuroButton extends i$2 {
|
|
|
6706
7292
|
* @private
|
|
6707
7293
|
*/
|
|
6708
7294
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7295
|
+
|
|
7296
|
+
/**
|
|
7297
|
+
* @private
|
|
7298
|
+
*/
|
|
7299
|
+
this.buttonHref = undefined;
|
|
7300
|
+
|
|
7301
|
+
/**
|
|
7302
|
+
* @private
|
|
7303
|
+
*/
|
|
7304
|
+
this.buttonTarget = undefined;
|
|
7305
|
+
|
|
7306
|
+
/**
|
|
7307
|
+
* @private
|
|
7308
|
+
*/
|
|
7309
|
+
this.buttonRel = undefined;
|
|
6709
7310
|
}
|
|
6710
7311
|
|
|
6711
7312
|
static get styles() {
|
|
6712
7313
|
return [
|
|
6713
7314
|
tokensCss$2,
|
|
6714
7315
|
styleCss$2,
|
|
6715
|
-
colorCss$2
|
|
7316
|
+
colorCss$2,
|
|
7317
|
+
shapeSize
|
|
6716
7318
|
];
|
|
6717
7319
|
}
|
|
6718
7320
|
|
|
6719
7321
|
static get properties() {
|
|
6720
7322
|
return {
|
|
6721
7323
|
|
|
6722
|
-
|
|
6723
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6724
|
-
*/
|
|
6725
|
-
autofocus: {
|
|
6726
|
-
type: Boolean,
|
|
6727
|
-
reflect: true
|
|
6728
|
-
},
|
|
7324
|
+
...super.properties,
|
|
6729
7325
|
|
|
6730
7326
|
/**
|
|
6731
|
-
*
|
|
7327
|
+
* Override layout since it isn't used in this component.
|
|
7328
|
+
* @private
|
|
6732
7329
|
*/
|
|
6733
|
-
|
|
7330
|
+
layout: {
|
|
6734
7331
|
type: Boolean,
|
|
6735
|
-
|
|
7332
|
+
attribute: false,
|
|
7333
|
+
reflect: false
|
|
6736
7334
|
},
|
|
6737
7335
|
|
|
6738
7336
|
/**
|
|
6739
|
-
*
|
|
6740
|
-
* @deprecated
|
|
7337
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6741
7338
|
*/
|
|
6742
|
-
|
|
7339
|
+
autofocus: {
|
|
6743
7340
|
type: Boolean,
|
|
6744
7341
|
reflect: true
|
|
6745
7342
|
},
|
|
6746
7343
|
|
|
6747
7344
|
/**
|
|
6748
|
-
*
|
|
6749
|
-
* @deprecated
|
|
7345
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6750
7346
|
*/
|
|
6751
|
-
|
|
7347
|
+
disabled: {
|
|
6752
7348
|
type: Boolean,
|
|
6753
7349
|
reflect: true
|
|
6754
7350
|
},
|
|
@@ -6756,15 +7352,7 @@ class AuroButton extends i$2 {
|
|
|
6756
7352
|
/**
|
|
6757
7353
|
* Alters the shape of the button to be full width of its parent container.
|
|
6758
7354
|
*/
|
|
6759
|
-
fluid:
|
|
6760
|
-
type: Boolean,
|
|
6761
|
-
reflect: true
|
|
6762
|
-
},
|
|
6763
|
-
|
|
6764
|
-
/**
|
|
6765
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
6766
|
-
*/
|
|
6767
|
-
iconOnly: {
|
|
7355
|
+
fluid: {
|
|
6768
7356
|
type: Boolean,
|
|
6769
7357
|
reflect: true
|
|
6770
7358
|
},
|
|
@@ -6772,7 +7360,7 @@ class AuroButton extends i$2 {
|
|
|
6772
7360
|
/**
|
|
6773
7361
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6774
7362
|
*/
|
|
6775
|
-
loading:
|
|
7363
|
+
loading: {
|
|
6776
7364
|
type: Boolean,
|
|
6777
7365
|
reflect: true
|
|
6778
7366
|
},
|
|
@@ -6780,36 +7368,12 @@ class AuroButton extends i$2 {
|
|
|
6780
7368
|
/**
|
|
6781
7369
|
* Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
|
|
6782
7370
|
*/
|
|
6783
|
-
loadingText:
|
|
7371
|
+
loadingText: {
|
|
6784
7372
|
type: String
|
|
6785
7373
|
},
|
|
6786
7374
|
|
|
6787
7375
|
/**
|
|
6788
|
-
*
|
|
6789
|
-
*/
|
|
6790
|
-
onDark: {
|
|
6791
|
-
type: Boolean,
|
|
6792
|
-
reflect: true
|
|
6793
|
-
},
|
|
6794
|
-
|
|
6795
|
-
/**
|
|
6796
|
-
* If set to true, the button will have a rounded shape.
|
|
6797
|
-
*/
|
|
6798
|
-
rounded: {
|
|
6799
|
-
type: Boolean,
|
|
6800
|
-
reflect: true
|
|
6801
|
-
},
|
|
6802
|
-
|
|
6803
|
-
/**
|
|
6804
|
-
* Set value for slim version of auro-button.
|
|
6805
|
-
*/
|
|
6806
|
-
slim: {
|
|
6807
|
-
type: Boolean,
|
|
6808
|
-
reflect: true
|
|
6809
|
-
},
|
|
6810
|
-
|
|
6811
|
-
/**
|
|
6812
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
7376
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6813
7377
|
*/
|
|
6814
7378
|
tIndex: {
|
|
6815
7379
|
type: String,
|
|
@@ -6817,75 +7381,68 @@ class AuroButton extends i$2 {
|
|
|
6817
7381
|
},
|
|
6818
7382
|
|
|
6819
7383
|
/**
|
|
6820
|
-
* Populates
|
|
7384
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7385
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7386
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6821
7387
|
*/
|
|
6822
|
-
|
|
7388
|
+
tabindex: {
|
|
6823
7389
|
type: String,
|
|
6824
|
-
reflect:
|
|
7390
|
+
reflect: false
|
|
6825
7391
|
},
|
|
6826
7392
|
|
|
6827
7393
|
/**
|
|
6828
|
-
*
|
|
6829
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
6830
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
7394
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6831
7395
|
*/
|
|
6832
|
-
|
|
7396
|
+
title: {
|
|
6833
7397
|
type: String,
|
|
6834
7398
|
reflect: true
|
|
6835
7399
|
},
|
|
6836
7400
|
|
|
6837
7401
|
/**
|
|
6838
|
-
*
|
|
6839
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
6840
|
-
* List multiple element IDs in a space delimited fashion.
|
|
7402
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6841
7403
|
*/
|
|
6842
|
-
|
|
7404
|
+
type: {
|
|
6843
7405
|
type: String,
|
|
6844
7406
|
reflect: true
|
|
6845
7407
|
},
|
|
6846
7408
|
|
|
6847
7409
|
/**
|
|
6848
|
-
*
|
|
6849
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6850
|
-
* This is an optional attribute for buttons.
|
|
7410
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6851
7411
|
*/
|
|
6852
|
-
|
|
6853
|
-
type:
|
|
7412
|
+
value: {
|
|
7413
|
+
type: String,
|
|
6854
7414
|
reflect: true
|
|
6855
7415
|
},
|
|
6856
7416
|
|
|
6857
7417
|
/**
|
|
6858
|
-
* Sets
|
|
7418
|
+
* Sets button variant option.
|
|
7419
|
+
* @default primary
|
|
6859
7420
|
*/
|
|
6860
|
-
|
|
7421
|
+
variant: {
|
|
6861
7422
|
type: String,
|
|
6862
7423
|
reflect: true
|
|
6863
7424
|
},
|
|
6864
7425
|
|
|
6865
7426
|
/**
|
|
6866
|
-
*
|
|
7427
|
+
* @private
|
|
6867
7428
|
*/
|
|
6868
|
-
|
|
7429
|
+
buttonHref: {
|
|
6869
7430
|
type: String,
|
|
6870
|
-
reflect: true
|
|
6871
7431
|
},
|
|
6872
7432
|
|
|
6873
7433
|
/**
|
|
6874
|
-
*
|
|
7434
|
+
* @private
|
|
6875
7435
|
*/
|
|
6876
|
-
|
|
7436
|
+
buttonTarget: {
|
|
6877
7437
|
type: String,
|
|
6878
|
-
reflect: true
|
|
6879
7438
|
},
|
|
6880
7439
|
|
|
6881
7440
|
/**
|
|
6882
|
-
*
|
|
7441
|
+
* @private
|
|
6883
7442
|
*/
|
|
6884
|
-
|
|
7443
|
+
buttonRel: {
|
|
6885
7444
|
type: String,
|
|
6886
|
-
reflect: true
|
|
6887
7445
|
},
|
|
6888
|
-
ready: { type: Boolean },
|
|
6889
7446
|
};
|
|
6890
7447
|
}
|
|
6891
7448
|
|
|
@@ -6898,7 +7455,7 @@ class AuroButton extends i$2 {
|
|
|
6898
7455
|
*
|
|
6899
7456
|
*/
|
|
6900
7457
|
static register(name = "auro-button") {
|
|
6901
|
-
AuroLibraryRuntimeUtils$
|
|
7458
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6902
7459
|
}
|
|
6903
7460
|
|
|
6904
7461
|
/**
|
|
@@ -6910,17 +7467,6 @@ class AuroButton extends i$2 {
|
|
|
6910
7467
|
this.renderRoot.querySelector('button').focus();
|
|
6911
7468
|
}
|
|
6912
7469
|
|
|
6913
|
-
updated() {
|
|
6914
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
6915
|
-
if (this.secondary) {
|
|
6916
|
-
this.setAttribute('variant', 'secondary');
|
|
6917
|
-
}
|
|
6918
|
-
|
|
6919
|
-
if (this.tertiary) {
|
|
6920
|
-
this.setAttribute('variant', 'tertiary');
|
|
6921
|
-
}
|
|
6922
|
-
}
|
|
6923
|
-
|
|
6924
7470
|
/**
|
|
6925
7471
|
* Submits the form that this button is associated with.
|
|
6926
7472
|
* @private
|
|
@@ -6941,28 +7487,115 @@ class AuroButton extends i$2 {
|
|
|
6941
7487
|
return this.internals ? this.internals.form : null;
|
|
6942
7488
|
}
|
|
6943
7489
|
|
|
6944
|
-
|
|
7490
|
+
/**
|
|
7491
|
+
* @private
|
|
7492
|
+
* @returns {Boolean}
|
|
7493
|
+
*/
|
|
7494
|
+
get showText() {
|
|
7495
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7496
|
+
}
|
|
7497
|
+
|
|
7498
|
+
/**
|
|
7499
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7500
|
+
* @returns {string | undefined}
|
|
7501
|
+
* @private
|
|
7502
|
+
*/
|
|
7503
|
+
get currentAriaLabel() {
|
|
7504
|
+
if (!this.attributeWatcher) return undefined;
|
|
7505
|
+
|
|
7506
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7507
|
+
return ariaLabel || undefined;
|
|
7508
|
+
}
|
|
7509
|
+
|
|
7510
|
+
/**
|
|
7511
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7512
|
+
* @returns {string | undefined}
|
|
7513
|
+
* @private
|
|
7514
|
+
*/
|
|
7515
|
+
get currentAriaLabelledBy() {
|
|
7516
|
+
if (!this.attributeWatcher) return undefined;
|
|
7517
|
+
|
|
7518
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7519
|
+
return ariaLabelledBy || undefined;
|
|
7520
|
+
}
|
|
7521
|
+
|
|
7522
|
+
/**
|
|
7523
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7524
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7525
|
+
* @private
|
|
7526
|
+
*/
|
|
7527
|
+
get iconOnly() {
|
|
7528
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7529
|
+
}
|
|
7530
|
+
|
|
7531
|
+
/**
|
|
7532
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7533
|
+
* @returns {string} - The font size class name.
|
|
7534
|
+
* @private
|
|
7535
|
+
*/
|
|
7536
|
+
getFontSize() {
|
|
7537
|
+
|
|
7538
|
+
// Size map for standard buttons
|
|
7539
|
+
const standardButtonSizeMap = {
|
|
7540
|
+
xs: 'body-xs',
|
|
7541
|
+
sm: 'body-sm',
|
|
7542
|
+
md: 'body-default',
|
|
7543
|
+
lg: 'body-lg',
|
|
7544
|
+
xl: 'body-lg'
|
|
7545
|
+
};
|
|
7546
|
+
|
|
7547
|
+
// Size map for icon-only buttons
|
|
7548
|
+
const iconOnlyButtonSizeMap = {
|
|
7549
|
+
xs: 'heading-xs',
|
|
7550
|
+
sm: 'heading-sm',
|
|
7551
|
+
md: 'heading-sm',
|
|
7552
|
+
lg: 'heading-md',
|
|
7553
|
+
xl: 'heading-lg'
|
|
7554
|
+
};
|
|
7555
|
+
|
|
7556
|
+
// Determine which map to use based on the shape
|
|
7557
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7558
|
+
|
|
7559
|
+
// Return the font size based on the button size and shape
|
|
7560
|
+
return sizeMap[this.size] || 'body-default';
|
|
7561
|
+
}
|
|
7562
|
+
|
|
7563
|
+
/**
|
|
7564
|
+
* Renders the default layout for the button.
|
|
7565
|
+
* @returns {TemplateResult}
|
|
7566
|
+
* @private
|
|
7567
|
+
*/
|
|
7568
|
+
renderLayoutDefault() {
|
|
7569
|
+
|
|
7570
|
+
const fontSize = this.getFontSize();
|
|
7571
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
7572
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7573
|
+
|
|
6945
7574
|
const classes = {
|
|
6946
|
-
|
|
6947
|
-
|
|
6948
|
-
|
|
6949
|
-
|
|
6950
|
-
|
|
6951
|
-
|
|
6952
|
-
|
|
6953
|
-
'
|
|
7575
|
+
"auro-button": true,
|
|
7576
|
+
"inset": this.showText,
|
|
7577
|
+
wrapper: true,
|
|
7578
|
+
loading: this.loading,
|
|
7579
|
+
[`${fontSize}`]: true,
|
|
7580
|
+
|
|
7581
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7582
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7583
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7584
|
+
};
|
|
7585
|
+
|
|
7586
|
+
const contentClasses = {
|
|
7587
|
+
"contentWrapper": true,
|
|
7588
|
+
"util_displayHiddenVisually": this.loading
|
|
6954
7589
|
};
|
|
6955
7590
|
|
|
6956
7591
|
return u$2`
|
|
6957
|
-
|
|
6958
|
-
part="
|
|
6959
|
-
aria-
|
|
6960
|
-
aria-
|
|
6961
|
-
|
|
6962
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
6963
|
-
tabIndex="${o(this.tIndex)}"
|
|
7592
|
+
<${tag}
|
|
7593
|
+
part="${part}"
|
|
7594
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7595
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7596
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
6964
7597
|
?autofocus="${this.autofocus}"
|
|
6965
|
-
class
|
|
7598
|
+
class=${e(classes)}
|
|
6966
7599
|
?disabled="${this.disabled || this.loading}"
|
|
6967
7600
|
?onDark="${this.onDark}"
|
|
6968
7601
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -6971,28 +7604,36 @@ class AuroButton extends i$2 {
|
|
|
6971
7604
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
6972
7605
|
.value="${o(this.value ? this.value : undefined)}"
|
|
6973
7606
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7607
|
+
href="${o(this.buttonHref || undefined)}"
|
|
7608
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
7609
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
6974
7610
|
>
|
|
6975
7611
|
${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6976
7612
|
|
|
6977
|
-
<span class="
|
|
7613
|
+
<span class="${e(contentClasses)}">
|
|
6978
7614
|
<span class="textSlot" part="text">
|
|
6979
|
-
|
|
6980
|
-
</span>
|
|
6981
|
-
|
|
6982
|
-
<span part="icon">
|
|
6983
|
-
<slot name="icon"></slot>
|
|
7615
|
+
<slot></slot>
|
|
6984
7616
|
</span>
|
|
6985
7617
|
</span>
|
|
6986
|
-
|
|
7618
|
+
</${tag}>
|
|
6987
7619
|
`;
|
|
6988
7620
|
}
|
|
7621
|
+
|
|
7622
|
+
/**
|
|
7623
|
+
* Renders the layout of the button.
|
|
7624
|
+
* @returns {TemplateResult}
|
|
7625
|
+
* @private
|
|
7626
|
+
*/
|
|
7627
|
+
renderLayout() {
|
|
7628
|
+
return this.renderLayoutDefault();
|
|
7629
|
+
}
|
|
6989
7630
|
}
|
|
6990
7631
|
|
|
6991
|
-
var buttonVersion = '
|
|
7632
|
+
var buttonVersion = '11.0.0';
|
|
6992
7633
|
|
|
6993
|
-
var colorCss = i$5`: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-
|
|
7634
|
+
var colorCss = i$5`: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-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6994
7635
|
|
|
6995
|
-
var styleCss = i$5
|
|
7636
|
+
var styleCss = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6996
7637
|
|
|
6997
7638
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6998
7639
|
|
|
@@ -7256,6 +7897,7 @@ class AuroInput extends BaseInput {
|
|
|
7256
7897
|
*/
|
|
7257
7898
|
get commonLabelClasses() {
|
|
7258
7899
|
return {
|
|
7900
|
+
'is-disabled': this.disabled,
|
|
7259
7901
|
'withValue': this.value && this.value.length > 0,
|
|
7260
7902
|
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7261
7903
|
};
|
|
@@ -7268,30 +7910,30 @@ class AuroInput extends BaseInput {
|
|
|
7268
7910
|
*/
|
|
7269
7911
|
get commonInputClasses() {
|
|
7270
7912
|
return {
|
|
7271
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7913
|
+
'util_displayHiddenVisually': (this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === '')),
|
|
7272
7914
|
};
|
|
7273
7915
|
}
|
|
7274
7916
|
|
|
7275
7917
|
/**
|
|
7276
7918
|
* Returns classmap configuration for html5 inputs in each layout.
|
|
7277
7919
|
* @private
|
|
7278
|
-
* @
|
|
7920
|
+
* @returns {object} - Returns classmap.
|
|
7279
7921
|
*/
|
|
7280
7922
|
get legacyInputClasses() {
|
|
7281
7923
|
return {
|
|
7282
|
-
...this.commonInputClasses
|
|
7283
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
7924
|
+
...this.commonInputClasses
|
|
7284
7925
|
};
|
|
7285
7926
|
}
|
|
7286
7927
|
|
|
7287
7928
|
/**
|
|
7288
7929
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
7289
7930
|
* @private
|
|
7290
|
-
* @
|
|
7931
|
+
* @returns {object} - Returns classmap.
|
|
7291
7932
|
*/
|
|
7292
7933
|
get commonWrapperClasses() {
|
|
7293
7934
|
return {
|
|
7294
7935
|
'wrapper': true,
|
|
7936
|
+
'simple': this.simple,
|
|
7295
7937
|
'withValue': this.value && this.value.length > 0,
|
|
7296
7938
|
'hasFocus': this.hasFocus
|
|
7297
7939
|
};
|
|
@@ -7300,7 +7942,7 @@ class AuroInput extends BaseInput {
|
|
|
7300
7942
|
/**
|
|
7301
7943
|
* Returns classmap configuration for helpText elements in each layout.
|
|
7302
7944
|
* @private
|
|
7303
|
-
* @
|
|
7945
|
+
* @returns {object} - Returns classmap.
|
|
7304
7946
|
*/
|
|
7305
7947
|
get helpTextClasses() {
|
|
7306
7948
|
return {
|
|
@@ -7319,7 +7961,7 @@ class AuroInput extends BaseInput {
|
|
|
7319
7961
|
*
|
|
7320
7962
|
*/
|
|
7321
7963
|
static register(name = "auro-input") {
|
|
7322
|
-
AuroLibraryRuntimeUtils$
|
|
7964
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7323
7965
|
}
|
|
7324
7966
|
|
|
7325
7967
|
/**
|
|
@@ -7341,7 +7983,12 @@ class AuroInput extends BaseInput {
|
|
|
7341
7983
|
* @returns {void}
|
|
7342
7984
|
*/
|
|
7343
7985
|
checkDisplayValueSlotChange() {
|
|
7344
|
-
|
|
7986
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
7987
|
+
|
|
7988
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
7989
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
7990
|
+
nodes = nodes[0].assignedNodes();
|
|
7991
|
+
}
|
|
7345
7992
|
|
|
7346
7993
|
let hasContent = false;
|
|
7347
7994
|
|
|
@@ -7392,28 +8039,34 @@ class AuroInput extends BaseInput {
|
|
|
7392
8039
|
: this.commonInputClasses;
|
|
7393
8040
|
|
|
7394
8041
|
return u$2`
|
|
7395
|
-
<label for=${this.
|
|
8042
|
+
<label for=${this.inputId} class="${e(this.commonLabelClasses)}" part="label">
|
|
7396
8043
|
<slot name="label">
|
|
7397
8044
|
${this.label}
|
|
7398
8045
|
</slot>
|
|
8046
|
+
${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7399
8047
|
</label>
|
|
8048
|
+
|
|
8049
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7400
8050
|
<input
|
|
7401
8051
|
@blur="${this.handleBlur}"
|
|
7402
8052
|
@focusin="${this.handleFocusin}"
|
|
7403
8053
|
@focusout="${this.handleFocusout}"
|
|
7404
8054
|
@input="${this.handleInput}"
|
|
8055
|
+
.placeholder=${this.placeholderStr}
|
|
8056
|
+
.role=${this.a11yRole}
|
|
7405
8057
|
?activeLabel="${this.activeLabel}"
|
|
7406
8058
|
?disabled="${this.disabled}"
|
|
7407
8059
|
?required="${this.required}"
|
|
7408
|
-
|
|
8060
|
+
aria-controls=${o(this.a11yControls)}
|
|
7409
8061
|
aria-describedby="${this.uniqueId}"
|
|
8062
|
+
aria-expanded=${o(this.a11yExpanded)}
|
|
7410
8063
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7411
|
-
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7412
8064
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8065
|
+
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7413
8066
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7414
8067
|
class="${e(inputOverrideClasses)}"
|
|
7415
8068
|
id="${this.inputId}"
|
|
7416
|
-
|
|
8069
|
+
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
7417
8070
|
lang="${o(this.lang)}"
|
|
7418
8071
|
maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
|
|
7419
8072
|
minlength="${o(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7421,7 +8074,8 @@ class AuroInput extends BaseInput {
|
|
|
7421
8074
|
part="input"
|
|
7422
8075
|
pattern="${o(this.definePattern())}"
|
|
7423
8076
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7424
|
-
type="${this.type ===
|
|
8077
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8078
|
+
/>
|
|
7425
8079
|
<div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7426
8080
|
<div class="displayValueWrapper">
|
|
7427
8081
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7443,11 +8097,12 @@ class AuroInput extends BaseInput {
|
|
|
7443
8097
|
?onDark="${this.onDark}"
|
|
7444
8098
|
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7445
8099
|
class="notificationBtn clearBtn"
|
|
7446
|
-
|
|
7447
|
-
|
|
8100
|
+
shape="circle"
|
|
8101
|
+
size="sm"
|
|
8102
|
+
variant="ghost">
|
|
7448
8103
|
<${this.iconTag}
|
|
8104
|
+
?customColor="${this.onDark}"
|
|
7449
8105
|
category="interface"
|
|
7450
|
-
customColor
|
|
7451
8106
|
name="x-lg"
|
|
7452
8107
|
>
|
|
7453
8108
|
</${this.iconTag}>
|
|
@@ -7465,22 +8120,23 @@ class AuroInput extends BaseInput {
|
|
|
7465
8120
|
return u$2`
|
|
7466
8121
|
<div class="notification">
|
|
7467
8122
|
<${this.buttonTag}
|
|
7468
|
-
@click="${this.handleClickShowPassword}
|
|
8123
|
+
@click="${this.handleClickShowPassword}"
|
|
7469
8124
|
?onDark="${this.onDark}"
|
|
7470
|
-
aria-hidden="true"
|
|
7471
8125
|
class="notificationBtn passwordBtn"
|
|
7472
|
-
|
|
7473
|
-
|
|
8126
|
+
aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
|
|
8127
|
+
shape="circle"
|
|
8128
|
+
size="sm"
|
|
8129
|
+
variant="ghost">
|
|
7474
8130
|
<${this.iconTag}
|
|
8131
|
+
?customColor="${this.onDark}"
|
|
7475
8132
|
?hidden=${!this.showPassword}
|
|
7476
8133
|
category="interface"
|
|
7477
|
-
customColor
|
|
7478
8134
|
name="hide-password-stroke">
|
|
7479
8135
|
</${this.iconTag}>
|
|
7480
8136
|
<${this.iconTag}
|
|
8137
|
+
?customColor="${this.onDark}"
|
|
7481
8138
|
?hidden=${this.showPassword}
|
|
7482
8139
|
category="interface"
|
|
7483
|
-
customColor
|
|
7484
8140
|
name="view-password-stroke">
|
|
7485
8141
|
</${this.iconTag}>
|
|
7486
8142
|
</${this.buttonTag}>
|
|
@@ -7539,7 +8195,7 @@ class AuroInput extends BaseInput {
|
|
|
7539
8195
|
? u$2`
|
|
7540
8196
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7541
8197
|
<p id="${this.uniqueId}" part="helpText">
|
|
7542
|
-
<slot name="
|
|
8198
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7543
8199
|
</p>
|
|
7544
8200
|
</${this.helpTextTag}>
|
|
7545
8201
|
`
|
|
@@ -7560,19 +8216,25 @@ class AuroInput extends BaseInput {
|
|
|
7560
8216
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7561
8217
|
*/
|
|
7562
8218
|
renderLayoutClassic() {
|
|
8219
|
+
const classicClassMap = {
|
|
8220
|
+
...this.commonWrapperClasses,
|
|
8221
|
+
'thin': !this.simple
|
|
8222
|
+
};
|
|
8223
|
+
|
|
7563
8224
|
return u$2`
|
|
7564
8225
|
<div
|
|
7565
8226
|
@click="${this.handleClick}"
|
|
7566
|
-
class="${e(
|
|
8227
|
+
class="${e(classicClassMap)}"
|
|
7567
8228
|
part="wrapper">
|
|
7568
|
-
<div class="accents left">
|
|
8229
|
+
<div part="accent-left" class="accents left">
|
|
7569
8230
|
${this.renderHtmlTypeIcon()}
|
|
7570
8231
|
</div>
|
|
7571
8232
|
<div class="mainContent">
|
|
7572
8233
|
${this.renderHtmlInput(true)}
|
|
7573
8234
|
</div>
|
|
7574
|
-
<div class="accents right">
|
|
8235
|
+
<div part="accent-right" class="accents right">
|
|
7575
8236
|
${this.renderValidationErrorIconHtml()}
|
|
8237
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7576
8238
|
${this.hasValue ? u$2`
|
|
7577
8239
|
${!this.disabled && !this.readonly ? u$2`
|
|
7578
8240
|
${this.renderHtmlActionClear()}
|