@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
|
@@ -101,7 +101,7 @@ const t$3=globalThis,e$4=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.na
|
|
|
101
101
|
* @license
|
|
102
102
|
* Copyright 2017 Google LLC
|
|
103
103
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
104
|
-
*/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
|
|
104
|
+
*/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");
|
|
105
105
|
|
|
106
106
|
/**
|
|
107
107
|
* @license
|
|
@@ -116,25 +116,25 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
|
|
|
116
116
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
117
117
|
*/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");
|
|
118
118
|
|
|
119
|
-
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:
|
|
119
|
+
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}`;
|
|
120
120
|
|
|
121
|
-
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}`;
|
|
121
|
+
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}`;
|
|
122
122
|
|
|
123
|
-
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}
|
|
123
|
+
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}`;
|
|
124
124
|
|
|
125
|
-
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-
|
|
125
|
+
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)}`;
|
|
126
126
|
|
|
127
|
-
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-
|
|
127
|
+
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}`;
|
|
128
128
|
|
|
129
|
-
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;
|
|
129
|
+
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}`;
|
|
130
130
|
|
|
131
|
-
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-
|
|
131
|
+
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)}`;
|
|
132
132
|
|
|
133
|
-
var emphasizedStyleCss = i$5`:host
|
|
133
|
+
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)}`;
|
|
134
134
|
|
|
135
135
|
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)}`;
|
|
136
136
|
|
|
137
|
-
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}`;
|
|
137
|
+
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}`;
|
|
138
138
|
|
|
139
139
|
/**
|
|
140
140
|
* @license
|
|
@@ -236,6 +236,8 @@ const stringsES = {
|
|
|
236
236
|
'dateMM': 'Ingrese una fecha completa en el formato MM',
|
|
237
237
|
'dateDD': 'Ingrese una fecha completa en el formato DD',
|
|
238
238
|
'clearInput': 'Borrar campo de entrada',
|
|
239
|
+
'showPassword': 'Mostrar contraseña',
|
|
240
|
+
'hidePassword': 'Ocultar contraseña'
|
|
239
241
|
};
|
|
240
242
|
|
|
241
243
|
const stringsEN = {
|
|
@@ -260,6 +262,8 @@ const stringsEN = {
|
|
|
260
262
|
'dateMM': 'Please enter a complete date in the format MM',
|
|
261
263
|
'dateDD': 'Please enter a complete date in the format DD',
|
|
262
264
|
'clearInput': 'Clear input field',
|
|
265
|
+
'showPassword': 'Show password',
|
|
266
|
+
'hidePassword': 'Hide password'
|
|
263
267
|
};
|
|
264
268
|
|
|
265
269
|
/**
|
|
@@ -4554,7 +4558,7 @@ const {
|
|
|
4554
4558
|
|
|
4555
4559
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4556
4560
|
|
|
4557
|
-
let AuroLibraryRuntimeUtils$
|
|
4561
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
4558
4562
|
|
|
4559
4563
|
/* eslint-disable jsdoc/require-param */
|
|
4560
4564
|
|
|
@@ -4624,7 +4628,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
4624
4628
|
class AuroFormValidation {
|
|
4625
4629
|
|
|
4626
4630
|
constructor() {
|
|
4627
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4631
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
4628
4632
|
}
|
|
4629
4633
|
|
|
4630
4634
|
/**
|
|
@@ -4684,19 +4688,19 @@ class AuroFormValidation {
|
|
|
4684
4688
|
{
|
|
4685
4689
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
4686
4690
|
validity: 'tooShort',
|
|
4687
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
4691
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
4688
4692
|
},
|
|
4689
4693
|
{
|
|
4690
4694
|
check: (e) => e.value?.length > e.maxLength,
|
|
4691
4695
|
validity: 'tooLong',
|
|
4692
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
4696
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
4693
4697
|
}
|
|
4694
4698
|
],
|
|
4695
4699
|
pattern: [
|
|
4696
4700
|
{
|
|
4697
4701
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
4698
4702
|
validity: 'patternMismatch',
|
|
4699
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
4703
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
4700
4704
|
}
|
|
4701
4705
|
]
|
|
4702
4706
|
},
|
|
@@ -4843,13 +4847,24 @@ class AuroFormValidation {
|
|
|
4843
4847
|
this.getInputElements(elem);
|
|
4844
4848
|
this.getAuroInputs(elem);
|
|
4845
4849
|
|
|
4846
|
-
//
|
|
4850
|
+
// Check if validation should run
|
|
4847
4851
|
let validationShouldRun =
|
|
4852
|
+
|
|
4853
|
+
// If the validation was forced
|
|
4848
4854
|
force ||
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4855
|
+
|
|
4856
|
+
// If the validation should run on input
|
|
4857
|
+
elem.validateOnInput ||
|
|
4858
|
+
|
|
4859
|
+
// State-based checks
|
|
4860
|
+
(
|
|
4861
|
+
// Element is not currently focused
|
|
4862
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
4863
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
4864
|
+
|
|
4865
|
+
// And element has been touched or is untouched but has a value
|
|
4866
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
4867
|
+
);
|
|
4853
4868
|
|
|
4854
4869
|
if (elem.hasAttribute('error')) {
|
|
4855
4870
|
elem.validity = 'customError';
|
|
@@ -4891,10 +4906,10 @@ class AuroFormValidation {
|
|
|
4891
4906
|
if (!hasValue && elem.required && elem.touched) {
|
|
4892
4907
|
elem.validity = 'valueMissing';
|
|
4893
4908
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
4894
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4909
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4895
4910
|
this.validateType(elem);
|
|
4896
4911
|
this.validateElementAttributes(elem);
|
|
4897
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4912
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4898
4913
|
this.validateElementAttributes(elem);
|
|
4899
4914
|
}
|
|
4900
4915
|
}
|
|
@@ -4903,7 +4918,9 @@ class AuroFormValidation {
|
|
|
4903
4918
|
elem.validity = this.auroInputElements[0].validity;
|
|
4904
4919
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
4905
4920
|
|
|
4906
|
-
|
|
4921
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4922
|
+
// combobox's 2nd input will have noValidate set true.
|
|
4923
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
4907
4924
|
elem.validity = this.auroInputElements[1].validity;
|
|
4908
4925
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
4909
4926
|
}
|
|
@@ -4983,7 +5000,7 @@ class AuroFormValidation {
|
|
|
4983
5000
|
}
|
|
4984
5001
|
}
|
|
4985
5002
|
|
|
4986
|
-
let AuroElement$
|
|
5003
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
4987
5004
|
static get properties() {
|
|
4988
5005
|
return {
|
|
4989
5006
|
|
|
@@ -5018,18 +5035,21 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5018
5035
|
}
|
|
5019
5036
|
|
|
5020
5037
|
resetShapeClasses() {
|
|
5021
|
-
|
|
5022
|
-
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5038
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5023
5039
|
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
|
|
5040
|
+
if (wrapper) {
|
|
5041
|
+
wrapper.classList.forEach((className) => {
|
|
5042
|
+
if (className.startsWith('shape-')) {
|
|
5043
|
+
wrapper.classList.remove(className);
|
|
5044
|
+
}
|
|
5045
|
+
});
|
|
5030
5046
|
|
|
5031
|
-
|
|
5032
|
-
|
|
5047
|
+
}
|
|
5048
|
+
|
|
5049
|
+
if (this.shape && this.size) {
|
|
5050
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
5051
|
+
} else {
|
|
5052
|
+
wrapper.classList.add('shape-none');
|
|
5033
5053
|
}
|
|
5034
5054
|
}
|
|
5035
5055
|
|
|
@@ -5085,19 +5105,24 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5085
5105
|
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5086
5106
|
* @attr id
|
|
5087
5107
|
*
|
|
5088
|
-
* @slot
|
|
5108
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
5089
5109
|
* @slot label - Sets the label text for the input.
|
|
5110
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5111
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5090
5112
|
*
|
|
5091
5113
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5092
5114
|
* @csspart label - Use for customizing the style of the label element
|
|
5093
5115
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
5116
|
+
* @csspart input - Use for customizing the style of the input element
|
|
5094
5117
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
5095
5118
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
5119
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
5120
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
5096
5121
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
5097
5122
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
5098
5123
|
*/
|
|
5099
5124
|
|
|
5100
|
-
class BaseInput extends AuroElement$
|
|
5125
|
+
class BaseInput extends AuroElement$2 {
|
|
5101
5126
|
|
|
5102
5127
|
constructor() {
|
|
5103
5128
|
super();
|
|
@@ -5190,7 +5215,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5190
5215
|
*/
|
|
5191
5216
|
a11yRole: {
|
|
5192
5217
|
type: String,
|
|
5193
|
-
attribute: true,
|
|
5194
5218
|
reflect: true
|
|
5195
5219
|
},
|
|
5196
5220
|
|
|
@@ -5199,7 +5223,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5199
5223
|
*/
|
|
5200
5224
|
a11yExpanded: {
|
|
5201
5225
|
type: Boolean,
|
|
5202
|
-
attribute: true,
|
|
5203
5226
|
reflect: true
|
|
5204
5227
|
},
|
|
5205
5228
|
|
|
@@ -5208,7 +5231,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5208
5231
|
*/
|
|
5209
5232
|
a11yControls: {
|
|
5210
5233
|
type: String,
|
|
5211
|
-
attribute: true,
|
|
5212
5234
|
reflect: true
|
|
5213
5235
|
},
|
|
5214
5236
|
|
|
@@ -5224,7 +5246,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5224
5246
|
* 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].
|
|
5225
5247
|
*/
|
|
5226
5248
|
autocapitalize: {
|
|
5227
|
-
type: String
|
|
5249
|
+
type: String,
|
|
5250
|
+
reflect: true
|
|
5228
5251
|
},
|
|
5229
5252
|
|
|
5230
5253
|
/**
|
|
@@ -5239,7 +5262,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5239
5262
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5240
5263
|
*/
|
|
5241
5264
|
autocorrect: {
|
|
5242
|
-
type: String
|
|
5265
|
+
type: String,
|
|
5266
|
+
reflect: true
|
|
5243
5267
|
},
|
|
5244
5268
|
|
|
5245
5269
|
/**
|
|
@@ -5284,7 +5308,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5284
5308
|
/** Exposes inputmode attribute for input. */
|
|
5285
5309
|
inputmode: {
|
|
5286
5310
|
type: String,
|
|
5287
|
-
attribute: true,
|
|
5288
5311
|
reflect: true
|
|
5289
5312
|
},
|
|
5290
5313
|
|
|
@@ -5292,7 +5315,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5292
5315
|
* Defines the language of an element.
|
|
5293
5316
|
*/
|
|
5294
5317
|
lang: {
|
|
5295
|
-
type: String
|
|
5318
|
+
type: String,
|
|
5319
|
+
reflect: true
|
|
5296
5320
|
},
|
|
5297
5321
|
|
|
5298
5322
|
/**
|
|
@@ -5306,7 +5330,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5306
5330
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5307
5331
|
*/
|
|
5308
5332
|
maxLength: {
|
|
5309
|
-
type: Number
|
|
5333
|
+
type: Number,
|
|
5334
|
+
reflect: true
|
|
5310
5335
|
},
|
|
5311
5336
|
|
|
5312
5337
|
/**
|
|
@@ -5320,14 +5345,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5320
5345
|
* 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`.
|
|
5321
5346
|
*/
|
|
5322
5347
|
minLength: {
|
|
5323
|
-
type: Number
|
|
5348
|
+
type: Number,
|
|
5349
|
+
reflect: true
|
|
5324
5350
|
},
|
|
5325
5351
|
|
|
5326
5352
|
/**
|
|
5327
5353
|
* Populates the `name` attribute on the input.
|
|
5328
5354
|
*/
|
|
5329
5355
|
name: {
|
|
5330
|
-
type: String
|
|
5356
|
+
type: String,
|
|
5357
|
+
reflect: true
|
|
5358
|
+
},
|
|
5359
|
+
|
|
5360
|
+
/**
|
|
5361
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5362
|
+
* hides accents.
|
|
5363
|
+
*/
|
|
5364
|
+
nested: {
|
|
5365
|
+
type: Boolean,
|
|
5366
|
+
reflect: true
|
|
5331
5367
|
},
|
|
5332
5368
|
|
|
5333
5369
|
/**
|
|
@@ -5355,10 +5391,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5355
5391
|
},
|
|
5356
5392
|
|
|
5357
5393
|
/**
|
|
5358
|
-
* Define custom placeholder text
|
|
5394
|
+
* Define custom placeholder text.
|
|
5359
5395
|
*/
|
|
5360
5396
|
placeholder: {
|
|
5361
|
-
type: String
|
|
5397
|
+
type: String,
|
|
5398
|
+
reflect: true
|
|
5362
5399
|
},
|
|
5363
5400
|
|
|
5364
5401
|
/**
|
|
@@ -5447,6 +5484,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5447
5484
|
type: String
|
|
5448
5485
|
},
|
|
5449
5486
|
|
|
5487
|
+
/**
|
|
5488
|
+
* Simple makes the input render without a border.
|
|
5489
|
+
*/
|
|
5490
|
+
simple: {
|
|
5491
|
+
type: Boolean,
|
|
5492
|
+
reflect: true
|
|
5493
|
+
},
|
|
5494
|
+
|
|
5450
5495
|
/**
|
|
5451
5496
|
* Custom help text message for email type validity.
|
|
5452
5497
|
*/
|
|
@@ -5458,7 +5503,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5458
5503
|
* 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`.
|
|
5459
5504
|
*/
|
|
5460
5505
|
spellcheck: {
|
|
5461
|
-
type: String
|
|
5506
|
+
type: String,
|
|
5507
|
+
reflect: true
|
|
5462
5508
|
},
|
|
5463
5509
|
|
|
5464
5510
|
/**
|
|
@@ -5473,7 +5519,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5473
5519
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
5474
5520
|
*/
|
|
5475
5521
|
value: {
|
|
5476
|
-
type: String
|
|
5522
|
+
type: String,
|
|
5523
|
+
reflect: true
|
|
5477
5524
|
},
|
|
5478
5525
|
|
|
5479
5526
|
/**
|
|
@@ -5504,8 +5551,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5504
5551
|
},
|
|
5505
5552
|
|
|
5506
5553
|
/**
|
|
5554
|
+
* The id for input node.
|
|
5507
5555
|
* @private
|
|
5508
|
-
* id for input node
|
|
5509
5556
|
*/
|
|
5510
5557
|
inputId: {
|
|
5511
5558
|
type: String,
|
|
@@ -5529,7 +5576,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5529
5576
|
}
|
|
5530
5577
|
|
|
5531
5578
|
firstUpdated() {
|
|
5532
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5579
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5533
5580
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5534
5581
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5535
5582
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5641,9 +5688,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5641
5688
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5642
5689
|
this.validation.validate(this);
|
|
5643
5690
|
}
|
|
5644
|
-
|
|
5645
|
-
this.notifyValueChanged();
|
|
5646
5691
|
}
|
|
5692
|
+
|
|
5693
|
+
this.notifyValueChanged();
|
|
5647
5694
|
}
|
|
5648
5695
|
|
|
5649
5696
|
if (changedProperties.has('error')) {
|
|
@@ -5753,7 +5800,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5753
5800
|
|
|
5754
5801
|
/**
|
|
5755
5802
|
* Function to set element focus.
|
|
5756
|
-
* @private
|
|
5757
5803
|
* @return {void}
|
|
5758
5804
|
*/
|
|
5759
5805
|
focus() {
|
|
@@ -5769,9 +5815,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5769
5815
|
this.inputElement.value = "";
|
|
5770
5816
|
this.value = "";
|
|
5771
5817
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5818
|
+
this.notifyValueChanged();
|
|
5772
5819
|
this.focus();
|
|
5773
5820
|
this.validation.validate(this);
|
|
5774
|
-
this.notifyValueChanged();
|
|
5775
5821
|
}
|
|
5776
5822
|
|
|
5777
5823
|
/**
|
|
@@ -5866,13 +5912,20 @@ class BaseInput extends AuroElement$1 {
|
|
|
5866
5912
|
}
|
|
5867
5913
|
|
|
5868
5914
|
/**
|
|
5869
|
-
* Resets component to initial state.
|
|
5915
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5870
5916
|
* @returns {void}
|
|
5871
5917
|
*/
|
|
5872
5918
|
reset() {
|
|
5873
5919
|
this.validation.reset(this);
|
|
5874
5920
|
}
|
|
5875
5921
|
|
|
5922
|
+
/**
|
|
5923
|
+
* Clears the input value.
|
|
5924
|
+
*/
|
|
5925
|
+
clear() {
|
|
5926
|
+
this.value = undefined;
|
|
5927
|
+
}
|
|
5928
|
+
|
|
5876
5929
|
/**
|
|
5877
5930
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5878
5931
|
* @private
|
|
@@ -5951,28 +6004,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5951
6004
|
* @returns {void}
|
|
5952
6005
|
*/
|
|
5953
6006
|
getPlaceholder() {
|
|
5954
|
-
|
|
5955
|
-
|
|
5956
|
-
|
|
5957
|
-
|
|
5958
|
-
// console.warn(this.getActiveElement());
|
|
5959
|
-
|
|
5960
|
-
if (!isFocused) {
|
|
5961
|
-
if (this.placeholder) {
|
|
5962
|
-
this.placeholderStr = this.placeholder;
|
|
5963
|
-
// return this.placeholder;
|
|
5964
|
-
} else if (this.type === 'date') {
|
|
5965
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5966
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5967
|
-
}
|
|
5968
|
-
} else {
|
|
5969
|
-
this.placeholderStr = '';
|
|
6007
|
+
if (this.placeholder) {
|
|
6008
|
+
this.placeholderStr = this.placeholder;
|
|
6009
|
+
} else if (this.type === 'date') {
|
|
6010
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5970
6011
|
}
|
|
5971
6012
|
|
|
5972
6013
|
this.requestUpdate();
|
|
5973
6014
|
|
|
5974
|
-
|
|
5975
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
6015
|
+
return this.placeholderStr;
|
|
5976
6016
|
}
|
|
5977
6017
|
|
|
5978
6018
|
/**
|
|
@@ -6185,7 +6225,7 @@ class AuroDependencyVersioning {
|
|
|
6185
6225
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6186
6226
|
*/
|
|
6187
6227
|
|
|
6188
|
-
class AuroElement extends i$2 {
|
|
6228
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
6189
6229
|
|
|
6190
6230
|
// function to define props used within the scope of this component
|
|
6191
6231
|
static get properties() {
|
|
@@ -6209,7 +6249,7 @@ class AuroElement extends i$2 {
|
|
|
6209
6249
|
|
|
6210
6250
|
return 'false'
|
|
6211
6251
|
}
|
|
6212
|
-
}
|
|
6252
|
+
};
|
|
6213
6253
|
|
|
6214
6254
|
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>"};
|
|
6215
6255
|
|
|
@@ -6253,7 +6293,7 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6253
6293
|
*/
|
|
6254
6294
|
|
|
6255
6295
|
// build the component class
|
|
6256
|
-
class BaseIcon extends AuroElement {
|
|
6296
|
+
class BaseIcon extends AuroElement$1 {
|
|
6257
6297
|
constructor() {
|
|
6258
6298
|
super();
|
|
6259
6299
|
this.onDark = false;
|
|
@@ -6336,7 +6376,7 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6336
6376
|
|
|
6337
6377
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6338
6378
|
|
|
6339
|
-
let AuroLibraryRuntimeUtils$
|
|
6379
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6340
6380
|
|
|
6341
6381
|
/* eslint-disable jsdoc/require-param */
|
|
6342
6382
|
|
|
@@ -6418,7 +6458,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6418
6458
|
*/
|
|
6419
6459
|
privateDefaults() {
|
|
6420
6460
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6421
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6461
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6422
6462
|
}
|
|
6423
6463
|
|
|
6424
6464
|
// function to define props used within the scope of this component
|
|
@@ -6500,7 +6540,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6500
6540
|
*
|
|
6501
6541
|
*/
|
|
6502
6542
|
static register(name = "auro-icon") {
|
|
6503
|
-
AuroLibraryRuntimeUtils$
|
|
6543
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6504
6544
|
}
|
|
6505
6545
|
|
|
6506
6546
|
connectedCallback() {
|
|
@@ -6521,8 +6561,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6521
6561
|
async firstUpdated() {
|
|
6522
6562
|
await super.firstUpdated();
|
|
6523
6563
|
|
|
6524
|
-
|
|
6525
|
-
|
|
6564
|
+
/**
|
|
6565
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6566
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6567
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6568
|
+
*/
|
|
6569
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6526
6570
|
const svgDesc = this.svg.querySelector('desc');
|
|
6527
6571
|
|
|
6528
6572
|
if (svgDesc) {
|
|
@@ -6566,15 +6610,552 @@ class AuroIcon extends BaseIcon {
|
|
|
6566
6610
|
}
|
|
6567
6611
|
}
|
|
6568
6612
|
|
|
6569
|
-
var iconVersion = '8.0.
|
|
6613
|
+
var iconVersion = '8.0.4';
|
|
6614
|
+
|
|
6615
|
+
/**
|
|
6616
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6617
|
+
*/
|
|
6618
|
+
const _observers = new WeakMap();
|
|
6619
|
+
|
|
6620
|
+
/**
|
|
6621
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6622
|
+
* Structure: {
|
|
6623
|
+
* host: {
|
|
6624
|
+
* matchers: Set<Function>,
|
|
6625
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6626
|
+
* }
|
|
6627
|
+
* }
|
|
6628
|
+
*/
|
|
6629
|
+
const _transportConfig = new WeakMap();
|
|
6630
|
+
|
|
6631
|
+
/**
|
|
6632
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6633
|
+
*
|
|
6634
|
+
* @param {Object} params - The parameters for the function.
|
|
6635
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6636
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6637
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6638
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6639
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6640
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6641
|
+
*/
|
|
6642
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6643
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6644
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6645
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6646
|
+
}
|
|
6647
|
+
|
|
6648
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6649
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6650
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6651
|
+
}
|
|
6652
|
+
|
|
6653
|
+
// Guard Clause: Ensure match is a function
|
|
6654
|
+
if (typeof match !== 'function') {
|
|
6655
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6656
|
+
}
|
|
6657
|
+
|
|
6658
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6659
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6660
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6661
|
+
}
|
|
6662
|
+
|
|
6663
|
+
// Register this transport and get cleanup function
|
|
6664
|
+
return _registerTransport({
|
|
6665
|
+
host,
|
|
6666
|
+
target,
|
|
6667
|
+
matcher: match,
|
|
6668
|
+
removeOriginal
|
|
6669
|
+
});
|
|
6670
|
+
};
|
|
6671
|
+
|
|
6672
|
+
/**
|
|
6673
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6674
|
+
*
|
|
6675
|
+
* @param {Object} params - The parameters object.
|
|
6676
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6677
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6678
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6679
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6680
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6681
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6682
|
+
* @private
|
|
6683
|
+
*/
|
|
6684
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6685
|
+
// Initialize config for this host if it doesn't exist
|
|
6686
|
+
if (!_transportConfig.has(host)) {
|
|
6687
|
+
_transportConfig.set(host, {
|
|
6688
|
+
matchers: new Set(),
|
|
6689
|
+
targets: new Map()
|
|
6690
|
+
});
|
|
6691
|
+
}
|
|
6692
|
+
|
|
6693
|
+
const config = _transportConfig.get(host);
|
|
6694
|
+
|
|
6695
|
+
// Add the matcher to the set of matchers for this host
|
|
6696
|
+
config.matchers.add(matcher);
|
|
6697
|
+
|
|
6698
|
+
// Initialize target entry if it doesn't exist
|
|
6699
|
+
if (!config.targets.has(target)) {
|
|
6700
|
+
config.targets.set(target, new Map());
|
|
6701
|
+
}
|
|
6702
|
+
|
|
6703
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6704
|
+
config.targets.get(target).set(matcher, {
|
|
6705
|
+
removeOriginal,
|
|
6706
|
+
currentAttributes: new Map()
|
|
6707
|
+
});
|
|
6708
|
+
|
|
6709
|
+
// Perform initial attribute transport
|
|
6710
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6711
|
+
|
|
6712
|
+
// Attach observer
|
|
6713
|
+
_attachObserver(host);
|
|
6714
|
+
|
|
6715
|
+
// Return cleanup function and utility functions
|
|
6716
|
+
return {
|
|
6717
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6718
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6719
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6720
|
+
}
|
|
6721
|
+
};
|
|
6722
|
+
|
|
6723
|
+
/**
|
|
6724
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6725
|
+
*
|
|
6726
|
+
* @param {HTMLElement} host - The host element
|
|
6727
|
+
* @param {HTMLElement} target - The target element
|
|
6728
|
+
* @param {Function} matcher - The matcher function
|
|
6729
|
+
* @private
|
|
6730
|
+
*/
|
|
6731
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6732
|
+
const config = _transportConfig.get(host);
|
|
6733
|
+
if (!config) return;
|
|
6734
|
+
|
|
6735
|
+
// Remove this matcher from this target
|
|
6736
|
+
const targetMatchers = config.targets.get(target);
|
|
6737
|
+
if (targetMatchers) {
|
|
6738
|
+
targetMatchers.delete(matcher);
|
|
6739
|
+
|
|
6740
|
+
// If this target has no more matchers, remove it
|
|
6741
|
+
if (targetMatchers.size === 0) {
|
|
6742
|
+
config.targets.delete(target);
|
|
6743
|
+
}
|
|
6744
|
+
}
|
|
6745
|
+
|
|
6746
|
+
// Check if this matcher is still used by any target
|
|
6747
|
+
let matcherStillUsed = false;
|
|
6748
|
+
for (const matcherMap of config.targets.values()) {
|
|
6749
|
+
if (matcherMap.has(matcher)) {
|
|
6750
|
+
matcherStillUsed = true;
|
|
6751
|
+
break;
|
|
6752
|
+
}
|
|
6753
|
+
}
|
|
6754
|
+
|
|
6755
|
+
// If not used anymore, remove from matchers set
|
|
6756
|
+
if (!matcherStillUsed) {
|
|
6757
|
+
config.matchers.delete(matcher);
|
|
6758
|
+
}
|
|
6759
|
+
|
|
6760
|
+
// If no more targets or matchers, detach observer
|
|
6761
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6762
|
+
_detachObserver(host);
|
|
6763
|
+
}
|
|
6764
|
+
};
|
|
6765
|
+
|
|
6766
|
+
/**
|
|
6767
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6768
|
+
*
|
|
6769
|
+
* @param {Object} params - The parameters object.
|
|
6770
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6771
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6772
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6773
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6774
|
+
* @returns {void}
|
|
6775
|
+
* @private
|
|
6776
|
+
*/
|
|
6777
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6778
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6779
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6780
|
+
.filter(attr => matcher(attr))
|
|
6781
|
+
.reduce((acc, attr) => {
|
|
6782
|
+
acc[attr] = host.getAttribute(attr);
|
|
6783
|
+
return acc;
|
|
6784
|
+
}, {});
|
|
6785
|
+
|
|
6786
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6787
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6788
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6789
|
+
target.setAttribute(key, value);
|
|
6790
|
+
if (removeOriginal) {
|
|
6791
|
+
host.removeAttribute(key);
|
|
6792
|
+
}
|
|
6793
|
+
});
|
|
6794
|
+
};
|
|
6795
|
+
|
|
6796
|
+
/**
|
|
6797
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6798
|
+
*
|
|
6799
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6800
|
+
* @returns {MutationObserver} The observer instance.
|
|
6801
|
+
* @private
|
|
6802
|
+
*/
|
|
6803
|
+
const _attachObserver = (host) => {
|
|
6804
|
+
// If an observer for this host already exists, return it
|
|
6805
|
+
if (_observers.has(host)) {
|
|
6806
|
+
return _observers.get(host);
|
|
6807
|
+
}
|
|
6808
|
+
|
|
6809
|
+
// Create a new MutationObserver
|
|
6810
|
+
const observer = new MutationObserver((mutations) => {
|
|
6811
|
+
const config = _transportConfig.get(host);
|
|
6812
|
+
if (!config) return;
|
|
6813
|
+
|
|
6814
|
+
// For each mutation affecting attributes
|
|
6815
|
+
mutations
|
|
6816
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6817
|
+
.forEach(mutation => {
|
|
6818
|
+
const attributeName = mutation.attributeName;
|
|
6819
|
+
|
|
6820
|
+
// Find matchers that care about this attribute
|
|
6821
|
+
for (const matcher of config.matchers) {
|
|
6822
|
+
if (matcher(attributeName)) {
|
|
6823
|
+
// For each target that uses this matcher
|
|
6824
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6825
|
+
if (matcherConfigs.has(matcher)) {
|
|
6826
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6827
|
+
_transportAttributes({
|
|
6828
|
+
host,
|
|
6829
|
+
target,
|
|
6830
|
+
matcher,
|
|
6831
|
+
removeOriginal
|
|
6832
|
+
});
|
|
6833
|
+
}
|
|
6834
|
+
}
|
|
6835
|
+
}
|
|
6836
|
+
}
|
|
6837
|
+
});
|
|
6838
|
+
});
|
|
6839
|
+
|
|
6840
|
+
// Start observing attribute changes
|
|
6841
|
+
observer.observe(host, { attributes: true });
|
|
6842
|
+
|
|
6843
|
+
// Store the observer
|
|
6844
|
+
_observers.set(host, observer);
|
|
6845
|
+
|
|
6846
|
+
return observer;
|
|
6847
|
+
};
|
|
6848
|
+
|
|
6849
|
+
/**
|
|
6850
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6851
|
+
*
|
|
6852
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6853
|
+
* @private
|
|
6854
|
+
*/
|
|
6855
|
+
const _detachObserver = (host) => {
|
|
6856
|
+
if (_observers.has(host)) {
|
|
6857
|
+
const observer = _observers.get(host);
|
|
6858
|
+
observer.disconnect();
|
|
6859
|
+
_observers.delete(host);
|
|
6860
|
+
}
|
|
6861
|
+
|
|
6862
|
+
// Clean up the transport config as well
|
|
6863
|
+
if (_transportConfig.has(host)) {
|
|
6864
|
+
_transportConfig.delete(host);
|
|
6865
|
+
}
|
|
6866
|
+
};
|
|
6867
|
+
|
|
6868
|
+
/**
|
|
6869
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6870
|
+
* @param {HTMLElement} host - The host element
|
|
6871
|
+
* @param {HTMLElement} target - The target element
|
|
6872
|
+
* @param {Function} matcher - The matcher function
|
|
6873
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6874
|
+
* @private
|
|
6875
|
+
*/
|
|
6876
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6877
|
+
const config = _transportConfig.get(host);
|
|
6878
|
+
if (!config) return undefined;
|
|
6879
|
+
|
|
6880
|
+
const targetMatchers = config.targets.get(target);
|
|
6881
|
+
if (!targetMatchers) return undefined;
|
|
6882
|
+
|
|
6883
|
+
return targetMatchers.get(matcher);
|
|
6884
|
+
};
|
|
6885
|
+
|
|
6886
|
+
/**
|
|
6887
|
+
* Sets an observed attribute value
|
|
6888
|
+
* @param {HTMLElement} host - The host element
|
|
6889
|
+
* @param {HTMLElement} target - The target element
|
|
6890
|
+
* @param {Function} matcher - The matcher function
|
|
6891
|
+
* @param {string} key - The attribute name
|
|
6892
|
+
* @param {string} value - The attribute value
|
|
6893
|
+
* @private
|
|
6894
|
+
*/
|
|
6895
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6896
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6897
|
+
if (matcherConfig) {
|
|
6898
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6899
|
+
}
|
|
6900
|
+
};
|
|
6901
|
+
|
|
6902
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6903
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6904
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6905
|
+
return undefined;
|
|
6906
|
+
};
|
|
6907
|
+
|
|
6908
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6909
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6910
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6911
|
+
return [];
|
|
6912
|
+
};
|
|
6913
|
+
|
|
6914
|
+
const _matchers = {
|
|
6915
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6916
|
+
'role': attr => attr.match(/^role$/)
|
|
6917
|
+
};
|
|
6918
|
+
|
|
6919
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6920
|
+
return transportAttributes({
|
|
6921
|
+
host,
|
|
6922
|
+
target,
|
|
6923
|
+
match: attr => {
|
|
6924
|
+
for (const key in _matchers) {
|
|
6925
|
+
if (_matchers[key](attr)) return true;
|
|
6926
|
+
}
|
|
6927
|
+
return false;
|
|
6928
|
+
},
|
|
6929
|
+
removeOriginal
|
|
6930
|
+
});
|
|
6931
|
+
};
|
|
6932
|
+
|
|
6933
|
+
class AuroElement extends i$2 {
|
|
6934
|
+
|
|
6935
|
+
/**
|
|
6936
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6937
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6938
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6939
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6940
|
+
* @private
|
|
6941
|
+
*/
|
|
6942
|
+
attributeWatcher;
|
|
6943
|
+
|
|
6944
|
+
static get properties() {
|
|
6945
|
+
return {
|
|
6946
|
+
|
|
6947
|
+
/**
|
|
6948
|
+
* Defines the layout of an element.
|
|
6949
|
+
* @default {'default'}
|
|
6950
|
+
*/
|
|
6951
|
+
layout: {
|
|
6952
|
+
type: String,
|
|
6953
|
+
attribute: "layout",
|
|
6954
|
+
reflect: true
|
|
6955
|
+
},
|
|
6956
|
+
|
|
6957
|
+
/**
|
|
6958
|
+
* Defines the shape of an element.
|
|
6959
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6960
|
+
* @default {'default'}
|
|
6961
|
+
*/
|
|
6962
|
+
shape: {
|
|
6963
|
+
type: String,
|
|
6964
|
+
attribute: "shape",
|
|
6965
|
+
reflect: true
|
|
6966
|
+
},
|
|
6967
|
+
|
|
6968
|
+
/**
|
|
6969
|
+
* Defines the size of an element.
|
|
6970
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6971
|
+
* @default {'md'}
|
|
6972
|
+
*/
|
|
6973
|
+
size: {
|
|
6974
|
+
type: String,
|
|
6975
|
+
attribute: "size",
|
|
6976
|
+
reflect: true
|
|
6977
|
+
},
|
|
6978
|
+
|
|
6979
|
+
/**
|
|
6980
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6981
|
+
* @default {false}
|
|
6982
|
+
*/
|
|
6983
|
+
onDark: {
|
|
6984
|
+
type: Boolean,
|
|
6985
|
+
attribute: "ondark",
|
|
6986
|
+
reflect: true
|
|
6987
|
+
},
|
|
6988
|
+
|
|
6989
|
+
/**
|
|
6990
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
6991
|
+
* This is used to apply layout and shape classes dynamically.
|
|
6992
|
+
* @type {HTMLElement|null}
|
|
6993
|
+
* @default {null}
|
|
6994
|
+
* @private
|
|
6995
|
+
*/
|
|
6996
|
+
wrapper: {
|
|
6997
|
+
attribute: false,
|
|
6998
|
+
reflect: false
|
|
6999
|
+
}
|
|
7000
|
+
};
|
|
7001
|
+
}
|
|
7002
|
+
|
|
7003
|
+
|
|
7004
|
+
|
|
7005
|
+
resetShapeClasses() {
|
|
7006
|
+
if (this.shape && this.size) {
|
|
7007
|
+
|
|
7008
|
+
if (this.wrapper) {
|
|
7009
|
+
this.wrapper.classList.forEach((className) => {
|
|
7010
|
+
if (className.startsWith('shape-')) {
|
|
7011
|
+
this.wrapper.classList.remove(className);
|
|
7012
|
+
}
|
|
7013
|
+
});
|
|
7014
|
+
|
|
7015
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
7016
|
+
}
|
|
7017
|
+
}
|
|
7018
|
+
}
|
|
7019
|
+
|
|
7020
|
+
resetLayoutClasses() {
|
|
7021
|
+
if (this.layout) {
|
|
7022
|
+
if (this.wrapper) {
|
|
7023
|
+
this.wrapper.classList.forEach((className) => {
|
|
7024
|
+
if (className.startsWith('layout-')) {
|
|
7025
|
+
this.wrapper.classList.remove(className);
|
|
7026
|
+
}
|
|
7027
|
+
});
|
|
7028
|
+
|
|
7029
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
7030
|
+
}
|
|
7031
|
+
}
|
|
7032
|
+
}
|
|
7033
|
+
|
|
7034
|
+
updateComponentArchitecture() {
|
|
7035
|
+
this.resetLayoutClasses();
|
|
7036
|
+
this.resetShapeClasses();
|
|
7037
|
+
}
|
|
7038
|
+
|
|
7039
|
+
updated(changedProperties) {
|
|
7040
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
7041
|
+
this.updateComponentArchitecture();
|
|
7042
|
+
}
|
|
7043
|
+
}
|
|
7044
|
+
|
|
7045
|
+
firstUpdated() {
|
|
7046
|
+
super.firstUpdated();
|
|
7047
|
+
|
|
7048
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
7049
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
7050
|
+
|
|
7051
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
7052
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
7053
|
+
}
|
|
7054
|
+
|
|
7055
|
+
disconnectedCallback() {
|
|
7056
|
+
super.disconnectedCallback();
|
|
7057
|
+
|
|
7058
|
+
// Cleanup the ARIA observer if it exists
|
|
7059
|
+
if (this.attributeWatcher) {
|
|
7060
|
+
this.attributeWatcher.cleanup();
|
|
7061
|
+
this.attributeWatcher = null;
|
|
7062
|
+
}
|
|
7063
|
+
}
|
|
7064
|
+
|
|
7065
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
7066
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
7067
|
+
render() {
|
|
7068
|
+
try {
|
|
7069
|
+
return this.renderLayout();
|
|
7070
|
+
} catch (error) {
|
|
7071
|
+
// failed to get the defined layout
|
|
7072
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
7073
|
+
|
|
7074
|
+
// fallback to the default layout
|
|
7075
|
+
return this.getLayout('default');
|
|
7076
|
+
}
|
|
7077
|
+
}
|
|
7078
|
+
}
|
|
7079
|
+
|
|
7080
|
+
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}`;
|
|
7081
|
+
|
|
7082
|
+
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)}`;
|
|
7083
|
+
|
|
7084
|
+
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}`;
|
|
7085
|
+
|
|
7086
|
+
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}`;
|
|
7087
|
+
|
|
7088
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
7089
|
+
// See LICENSE in the project root for license information.
|
|
7090
|
+
|
|
7091
|
+
// ---------------------------------------------------------------------
|
|
7092
|
+
|
|
7093
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7094
|
+
|
|
7095
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
7096
|
+
|
|
7097
|
+
/* eslint-disable jsdoc/require-param */
|
|
7098
|
+
|
|
7099
|
+
/**
|
|
7100
|
+
* This will register a new custom element with the browser.
|
|
7101
|
+
* @param {String} name - The name of the custom element.
|
|
7102
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
7103
|
+
* @returns {void}
|
|
7104
|
+
*/
|
|
7105
|
+
registerComponent(name, componentClass) {
|
|
7106
|
+
if (!customElements.get(name)) {
|
|
7107
|
+
customElements.define(name, class extends componentClass {});
|
|
7108
|
+
}
|
|
7109
|
+
}
|
|
7110
|
+
|
|
7111
|
+
/**
|
|
7112
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
7113
|
+
* @returns {void}
|
|
7114
|
+
*/
|
|
7115
|
+
closestElement(
|
|
7116
|
+
selector, // selector like in .closest()
|
|
7117
|
+
base = this, // extra functionality to skip a parent
|
|
7118
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
7119
|
+
!el || el === document || el === window
|
|
7120
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
7121
|
+
: found
|
|
7122
|
+
? found // found a selector INside this element
|
|
7123
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
7124
|
+
) {
|
|
7125
|
+
return __Closest(base);
|
|
7126
|
+
}
|
|
7127
|
+
/* eslint-enable jsdoc/require-param */
|
|
6570
7128
|
|
|
6571
|
-
|
|
7129
|
+
/**
|
|
7130
|
+
* 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.
|
|
7131
|
+
* @param {Object} elem - The element to check.
|
|
7132
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
7133
|
+
* @returns {void}
|
|
7134
|
+
*/
|
|
7135
|
+
handleComponentTagRename(elem, tagName) {
|
|
7136
|
+
const tag = tagName.toLowerCase();
|
|
7137
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6572
7138
|
|
|
6573
|
-
|
|
7139
|
+
if (elemTag !== tag) {
|
|
7140
|
+
elem.setAttribute(tag, true);
|
|
7141
|
+
}
|
|
7142
|
+
}
|
|
6574
7143
|
|
|
6575
|
-
|
|
7144
|
+
/**
|
|
7145
|
+
* Validates if an element is a specific Auro component.
|
|
7146
|
+
* @param {Object} elem - The element to validate.
|
|
7147
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7148
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7149
|
+
*/
|
|
7150
|
+
elementMatch(elem, tagName) {
|
|
7151
|
+
const tag = tagName.toLowerCase();
|
|
7152
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6576
7153
|
|
|
6577
|
-
|
|
7154
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7155
|
+
}
|
|
7156
|
+
};
|
|
7157
|
+
|
|
7158
|
+
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}}`;
|
|
6578
7159
|
|
|
6579
7160
|
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}`;
|
|
6580
7161
|
|
|
@@ -6606,7 +7187,7 @@ class AuroLoader extends i$2 {
|
|
|
6606
7187
|
/**
|
|
6607
7188
|
* @private
|
|
6608
7189
|
*/
|
|
6609
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
7190
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
6610
7191
|
|
|
6611
7192
|
this.orbit = false;
|
|
6612
7193
|
this.ringworm = false;
|
|
@@ -6669,7 +7250,7 @@ class AuroLoader extends i$2 {
|
|
|
6669
7250
|
*
|
|
6670
7251
|
*/
|
|
6671
7252
|
static register(name = "auro-loader") {
|
|
6672
|
-
AuroLibraryRuntimeUtils$
|
|
7253
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
6673
7254
|
}
|
|
6674
7255
|
|
|
6675
7256
|
firstUpdated() {
|
|
@@ -6707,7 +7288,7 @@ class AuroLoader extends i$2 {
|
|
|
6707
7288
|
<span part="element" class="loader node-${idx}"></span>
|
|
6708
7289
|
`)}
|
|
6709
7290
|
|
|
6710
|
-
<div class="no-animation">Loading...</div>
|
|
7291
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6711
7292
|
|
|
6712
7293
|
${this.ringworm ? x`
|
|
6713
7294
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6719,25 +7300,32 @@ class AuroLoader extends i$2 {
|
|
|
6719
7300
|
}
|
|
6720
7301
|
}
|
|
6721
7302
|
|
|
6722
|
-
var loaderVersion = '5.
|
|
7303
|
+
var loaderVersion = '5.1.0';
|
|
6723
7304
|
|
|
6724
|
-
/* eslint-disable max-lines */
|
|
6725
7305
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6726
7306
|
// See LICENSE in the project root for license information.
|
|
6727
7307
|
|
|
6728
7308
|
|
|
6729
7309
|
/**
|
|
6730
7310
|
* @slot - Default slot for the text of the button.
|
|
6731
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6732
7311
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6733
7312
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6734
7313
|
* @csspart text - Apply CSS to text slot.
|
|
6735
7314
|
* @csspart icon - Apply CSS to icon slot.
|
|
6736
7315
|
*/
|
|
6737
7316
|
|
|
6738
|
-
|
|
7317
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6739
7318
|
|
|
6740
|
-
|
|
7319
|
+
/**
|
|
7320
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7321
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7322
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7323
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7324
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7325
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7326
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7327
|
+
*/
|
|
7328
|
+
class AuroButton extends AuroElement {
|
|
6741
7329
|
|
|
6742
7330
|
/**
|
|
6743
7331
|
* Enables form association for this element.
|
|
@@ -6752,15 +7340,13 @@ class AuroButton extends i$2 {
|
|
|
6752
7340
|
super();
|
|
6753
7341
|
this.autofocus = false;
|
|
6754
7342
|
this.disabled = false;
|
|
6755
|
-
this.iconOnly = false;
|
|
6756
7343
|
this.loading = false;
|
|
7344
|
+
this.size = "md";
|
|
7345
|
+
this.shape = "rounded";
|
|
6757
7346
|
this.onDark = false;
|
|
6758
|
-
this.secondary = false;
|
|
6759
|
-
this.tertiary = false;
|
|
6760
|
-
this.rounded = false;
|
|
6761
|
-
this.slim = false;
|
|
6762
7347
|
this.fluid = false;
|
|
6763
7348
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7349
|
+
this.variant = 'primary';
|
|
6764
7350
|
|
|
6765
7351
|
// Support for HTML5 forms
|
|
6766
7352
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6781,49 +7367,59 @@ class AuroButton extends i$2 {
|
|
|
6781
7367
|
* @private
|
|
6782
7368
|
*/
|
|
6783
7369
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7370
|
+
|
|
7371
|
+
/**
|
|
7372
|
+
* @private
|
|
7373
|
+
*/
|
|
7374
|
+
this.buttonHref = undefined;
|
|
7375
|
+
|
|
7376
|
+
/**
|
|
7377
|
+
* @private
|
|
7378
|
+
*/
|
|
7379
|
+
this.buttonTarget = undefined;
|
|
7380
|
+
|
|
7381
|
+
/**
|
|
7382
|
+
* @private
|
|
7383
|
+
*/
|
|
7384
|
+
this.buttonRel = undefined;
|
|
6784
7385
|
}
|
|
6785
7386
|
|
|
6786
7387
|
static get styles() {
|
|
6787
7388
|
return [
|
|
6788
7389
|
tokensCss$2,
|
|
6789
7390
|
styleCss$2,
|
|
6790
|
-
colorCss$2
|
|
7391
|
+
colorCss$2,
|
|
7392
|
+
shapeSize
|
|
6791
7393
|
];
|
|
6792
7394
|
}
|
|
6793
7395
|
|
|
6794
7396
|
static get properties() {
|
|
6795
7397
|
return {
|
|
6796
7398
|
|
|
6797
|
-
|
|
6798
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6799
|
-
*/
|
|
6800
|
-
autofocus: {
|
|
6801
|
-
type: Boolean,
|
|
6802
|
-
reflect: true
|
|
6803
|
-
},
|
|
7399
|
+
...super.properties,
|
|
6804
7400
|
|
|
6805
7401
|
/**
|
|
6806
|
-
*
|
|
7402
|
+
* Override layout since it isn't used in this component.
|
|
7403
|
+
* @private
|
|
6807
7404
|
*/
|
|
6808
|
-
|
|
7405
|
+
layout: {
|
|
6809
7406
|
type: Boolean,
|
|
6810
|
-
|
|
7407
|
+
attribute: false,
|
|
7408
|
+
reflect: false
|
|
6811
7409
|
},
|
|
6812
7410
|
|
|
6813
7411
|
/**
|
|
6814
|
-
*
|
|
6815
|
-
* @deprecated
|
|
7412
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6816
7413
|
*/
|
|
6817
|
-
|
|
7414
|
+
autofocus: {
|
|
6818
7415
|
type: Boolean,
|
|
6819
7416
|
reflect: true
|
|
6820
7417
|
},
|
|
6821
7418
|
|
|
6822
7419
|
/**
|
|
6823
|
-
*
|
|
6824
|
-
* @deprecated
|
|
7420
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6825
7421
|
*/
|
|
6826
|
-
|
|
7422
|
+
disabled: {
|
|
6827
7423
|
type: Boolean,
|
|
6828
7424
|
reflect: true
|
|
6829
7425
|
},
|
|
@@ -6831,15 +7427,7 @@ class AuroButton extends i$2 {
|
|
|
6831
7427
|
/**
|
|
6832
7428
|
* Alters the shape of the button to be full width of its parent container.
|
|
6833
7429
|
*/
|
|
6834
|
-
fluid:
|
|
6835
|
-
type: Boolean,
|
|
6836
|
-
reflect: true
|
|
6837
|
-
},
|
|
6838
|
-
|
|
6839
|
-
/**
|
|
6840
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
6841
|
-
*/
|
|
6842
|
-
iconOnly: {
|
|
7430
|
+
fluid: {
|
|
6843
7431
|
type: Boolean,
|
|
6844
7432
|
reflect: true
|
|
6845
7433
|
},
|
|
@@ -6847,7 +7435,7 @@ class AuroButton extends i$2 {
|
|
|
6847
7435
|
/**
|
|
6848
7436
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6849
7437
|
*/
|
|
6850
|
-
loading:
|
|
7438
|
+
loading: {
|
|
6851
7439
|
type: Boolean,
|
|
6852
7440
|
reflect: true
|
|
6853
7441
|
},
|
|
@@ -6855,36 +7443,12 @@ class AuroButton extends i$2 {
|
|
|
6855
7443
|
/**
|
|
6856
7444
|
* 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.
|
|
6857
7445
|
*/
|
|
6858
|
-
loadingText:
|
|
7446
|
+
loadingText: {
|
|
6859
7447
|
type: String
|
|
6860
7448
|
},
|
|
6861
7449
|
|
|
6862
7450
|
/**
|
|
6863
|
-
*
|
|
6864
|
-
*/
|
|
6865
|
-
onDark: {
|
|
6866
|
-
type: Boolean,
|
|
6867
|
-
reflect: true
|
|
6868
|
-
},
|
|
6869
|
-
|
|
6870
|
-
/**
|
|
6871
|
-
* If set to true, the button will have a rounded shape.
|
|
6872
|
-
*/
|
|
6873
|
-
rounded: {
|
|
6874
|
-
type: Boolean,
|
|
6875
|
-
reflect: true
|
|
6876
|
-
},
|
|
6877
|
-
|
|
6878
|
-
/**
|
|
6879
|
-
* Set value for slim version of auro-button.
|
|
6880
|
-
*/
|
|
6881
|
-
slim: {
|
|
6882
|
-
type: Boolean,
|
|
6883
|
-
reflect: true
|
|
6884
|
-
},
|
|
6885
|
-
|
|
6886
|
-
/**
|
|
6887
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
7451
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6888
7452
|
*/
|
|
6889
7453
|
tIndex: {
|
|
6890
7454
|
type: String,
|
|
@@ -6892,75 +7456,68 @@ class AuroButton extends i$2 {
|
|
|
6892
7456
|
},
|
|
6893
7457
|
|
|
6894
7458
|
/**
|
|
6895
|
-
* Populates
|
|
7459
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7460
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7461
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6896
7462
|
*/
|
|
6897
|
-
|
|
7463
|
+
tabindex: {
|
|
6898
7464
|
type: String,
|
|
6899
|
-
reflect:
|
|
7465
|
+
reflect: false
|
|
6900
7466
|
},
|
|
6901
7467
|
|
|
6902
7468
|
/**
|
|
6903
|
-
*
|
|
6904
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
6905
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
7469
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6906
7470
|
*/
|
|
6907
|
-
|
|
7471
|
+
title: {
|
|
6908
7472
|
type: String,
|
|
6909
7473
|
reflect: true
|
|
6910
7474
|
},
|
|
6911
7475
|
|
|
6912
7476
|
/**
|
|
6913
|
-
*
|
|
6914
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
6915
|
-
* List multiple element IDs in a space delimited fashion.
|
|
7477
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6916
7478
|
*/
|
|
6917
|
-
|
|
7479
|
+
type: {
|
|
6918
7480
|
type: String,
|
|
6919
7481
|
reflect: true
|
|
6920
7482
|
},
|
|
6921
7483
|
|
|
6922
7484
|
/**
|
|
6923
|
-
*
|
|
6924
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6925
|
-
* This is an optional attribute for buttons.
|
|
7485
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6926
7486
|
*/
|
|
6927
|
-
|
|
6928
|
-
type:
|
|
7487
|
+
value: {
|
|
7488
|
+
type: String,
|
|
6929
7489
|
reflect: true
|
|
6930
7490
|
},
|
|
6931
7491
|
|
|
6932
7492
|
/**
|
|
6933
|
-
* Sets
|
|
7493
|
+
* Sets button variant option.
|
|
7494
|
+
* @default primary
|
|
6934
7495
|
*/
|
|
6935
|
-
|
|
7496
|
+
variant: {
|
|
6936
7497
|
type: String,
|
|
6937
7498
|
reflect: true
|
|
6938
7499
|
},
|
|
6939
7500
|
|
|
6940
7501
|
/**
|
|
6941
|
-
*
|
|
7502
|
+
* @private
|
|
6942
7503
|
*/
|
|
6943
|
-
|
|
7504
|
+
buttonHref: {
|
|
6944
7505
|
type: String,
|
|
6945
|
-
reflect: true
|
|
6946
7506
|
},
|
|
6947
7507
|
|
|
6948
7508
|
/**
|
|
6949
|
-
*
|
|
7509
|
+
* @private
|
|
6950
7510
|
*/
|
|
6951
|
-
|
|
7511
|
+
buttonTarget: {
|
|
6952
7512
|
type: String,
|
|
6953
|
-
reflect: true
|
|
6954
7513
|
},
|
|
6955
7514
|
|
|
6956
7515
|
/**
|
|
6957
|
-
*
|
|
7516
|
+
* @private
|
|
6958
7517
|
*/
|
|
6959
|
-
|
|
7518
|
+
buttonRel: {
|
|
6960
7519
|
type: String,
|
|
6961
|
-
reflect: true
|
|
6962
7520
|
},
|
|
6963
|
-
ready: { type: Boolean },
|
|
6964
7521
|
};
|
|
6965
7522
|
}
|
|
6966
7523
|
|
|
@@ -6973,7 +7530,7 @@ class AuroButton extends i$2 {
|
|
|
6973
7530
|
*
|
|
6974
7531
|
*/
|
|
6975
7532
|
static register(name = "auro-button") {
|
|
6976
|
-
AuroLibraryRuntimeUtils$
|
|
7533
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6977
7534
|
}
|
|
6978
7535
|
|
|
6979
7536
|
/**
|
|
@@ -6985,17 +7542,6 @@ class AuroButton extends i$2 {
|
|
|
6985
7542
|
this.renderRoot.querySelector('button').focus();
|
|
6986
7543
|
}
|
|
6987
7544
|
|
|
6988
|
-
updated() {
|
|
6989
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
6990
|
-
if (this.secondary) {
|
|
6991
|
-
this.setAttribute('variant', 'secondary');
|
|
6992
|
-
}
|
|
6993
|
-
|
|
6994
|
-
if (this.tertiary) {
|
|
6995
|
-
this.setAttribute('variant', 'tertiary');
|
|
6996
|
-
}
|
|
6997
|
-
}
|
|
6998
|
-
|
|
6999
7545
|
/**
|
|
7000
7546
|
* Submits the form that this button is associated with.
|
|
7001
7547
|
* @private
|
|
@@ -7016,28 +7562,115 @@ class AuroButton extends i$2 {
|
|
|
7016
7562
|
return this.internals ? this.internals.form : null;
|
|
7017
7563
|
}
|
|
7018
7564
|
|
|
7019
|
-
|
|
7565
|
+
/**
|
|
7566
|
+
* @private
|
|
7567
|
+
* @returns {Boolean}
|
|
7568
|
+
*/
|
|
7569
|
+
get showText() {
|
|
7570
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7571
|
+
}
|
|
7572
|
+
|
|
7573
|
+
/**
|
|
7574
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7575
|
+
* @returns {string | undefined}
|
|
7576
|
+
* @private
|
|
7577
|
+
*/
|
|
7578
|
+
get currentAriaLabel() {
|
|
7579
|
+
if (!this.attributeWatcher) return undefined;
|
|
7580
|
+
|
|
7581
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7582
|
+
return ariaLabel || undefined;
|
|
7583
|
+
}
|
|
7584
|
+
|
|
7585
|
+
/**
|
|
7586
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7587
|
+
* @returns {string | undefined}
|
|
7588
|
+
* @private
|
|
7589
|
+
*/
|
|
7590
|
+
get currentAriaLabelledBy() {
|
|
7591
|
+
if (!this.attributeWatcher) return undefined;
|
|
7592
|
+
|
|
7593
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7594
|
+
return ariaLabelledBy || undefined;
|
|
7595
|
+
}
|
|
7596
|
+
|
|
7597
|
+
/**
|
|
7598
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7599
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7600
|
+
* @private
|
|
7601
|
+
*/
|
|
7602
|
+
get iconOnly() {
|
|
7603
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7604
|
+
}
|
|
7605
|
+
|
|
7606
|
+
/**
|
|
7607
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7608
|
+
* @returns {string} - The font size class name.
|
|
7609
|
+
* @private
|
|
7610
|
+
*/
|
|
7611
|
+
getFontSize() {
|
|
7612
|
+
|
|
7613
|
+
// Size map for standard buttons
|
|
7614
|
+
const standardButtonSizeMap = {
|
|
7615
|
+
xs: 'body-xs',
|
|
7616
|
+
sm: 'body-sm',
|
|
7617
|
+
md: 'body-default',
|
|
7618
|
+
lg: 'body-lg',
|
|
7619
|
+
xl: 'body-lg'
|
|
7620
|
+
};
|
|
7621
|
+
|
|
7622
|
+
// Size map for icon-only buttons
|
|
7623
|
+
const iconOnlyButtonSizeMap = {
|
|
7624
|
+
xs: 'heading-xs',
|
|
7625
|
+
sm: 'heading-sm',
|
|
7626
|
+
md: 'heading-sm',
|
|
7627
|
+
lg: 'heading-md',
|
|
7628
|
+
xl: 'heading-lg'
|
|
7629
|
+
};
|
|
7630
|
+
|
|
7631
|
+
// Determine which map to use based on the shape
|
|
7632
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7633
|
+
|
|
7634
|
+
// Return the font size based on the button size and shape
|
|
7635
|
+
return sizeMap[this.size] || 'body-default';
|
|
7636
|
+
}
|
|
7637
|
+
|
|
7638
|
+
/**
|
|
7639
|
+
* Renders the default layout for the button.
|
|
7640
|
+
* @returns {TemplateResult}
|
|
7641
|
+
* @private
|
|
7642
|
+
*/
|
|
7643
|
+
renderLayoutDefault() {
|
|
7644
|
+
|
|
7645
|
+
const fontSize = this.getFontSize();
|
|
7646
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
7647
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7648
|
+
|
|
7020
7649
|
const classes = {
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
'
|
|
7650
|
+
"auro-button": true,
|
|
7651
|
+
"inset": this.showText,
|
|
7652
|
+
wrapper: true,
|
|
7653
|
+
loading: this.loading,
|
|
7654
|
+
[`${fontSize}`]: true,
|
|
7655
|
+
|
|
7656
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7657
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7658
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7659
|
+
};
|
|
7660
|
+
|
|
7661
|
+
const contentClasses = {
|
|
7662
|
+
"contentWrapper": true,
|
|
7663
|
+
"util_displayHiddenVisually": this.loading
|
|
7029
7664
|
};
|
|
7030
7665
|
|
|
7031
7666
|
return u$2`
|
|
7032
|
-
|
|
7033
|
-
part="
|
|
7034
|
-
aria-
|
|
7035
|
-
aria-
|
|
7036
|
-
|
|
7037
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
7038
|
-
tabIndex="${o(this.tIndex)}"
|
|
7667
|
+
<${tag}
|
|
7668
|
+
part="${part}"
|
|
7669
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7670
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7671
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
7039
7672
|
?autofocus="${this.autofocus}"
|
|
7040
|
-
class
|
|
7673
|
+
class=${e(classes)}
|
|
7041
7674
|
?disabled="${this.disabled || this.loading}"
|
|
7042
7675
|
?onDark="${this.onDark}"
|
|
7043
7676
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -7046,28 +7679,36 @@ class AuroButton extends i$2 {
|
|
|
7046
7679
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
7047
7680
|
.value="${o(this.value ? this.value : undefined)}"
|
|
7048
7681
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7682
|
+
href="${o(this.buttonHref || undefined)}"
|
|
7683
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
7684
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
7049
7685
|
>
|
|
7050
7686
|
${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
7051
7687
|
|
|
7052
|
-
<span class="
|
|
7688
|
+
<span class="${e(contentClasses)}">
|
|
7053
7689
|
<span class="textSlot" part="text">
|
|
7054
|
-
|
|
7055
|
-
</span>
|
|
7056
|
-
|
|
7057
|
-
<span part="icon">
|
|
7058
|
-
<slot name="icon"></slot>
|
|
7690
|
+
<slot></slot>
|
|
7059
7691
|
</span>
|
|
7060
7692
|
</span>
|
|
7061
|
-
|
|
7693
|
+
</${tag}>
|
|
7062
7694
|
`;
|
|
7063
7695
|
}
|
|
7696
|
+
|
|
7697
|
+
/**
|
|
7698
|
+
* Renders the layout of the button.
|
|
7699
|
+
* @returns {TemplateResult}
|
|
7700
|
+
* @private
|
|
7701
|
+
*/
|
|
7702
|
+
renderLayout() {
|
|
7703
|
+
return this.renderLayoutDefault();
|
|
7704
|
+
}
|
|
7064
7705
|
}
|
|
7065
7706
|
|
|
7066
|
-
var buttonVersion = '
|
|
7707
|
+
var buttonVersion = '11.0.0';
|
|
7067
7708
|
|
|
7068
|
-
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-
|
|
7709
|
+
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)}`;
|
|
7069
7710
|
|
|
7070
|
-
var styleCss = i$5
|
|
7711
|
+
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}`;
|
|
7071
7712
|
|
|
7072
7713
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7073
7714
|
|
|
@@ -7331,6 +7972,7 @@ class AuroInput extends BaseInput {
|
|
|
7331
7972
|
*/
|
|
7332
7973
|
get commonLabelClasses() {
|
|
7333
7974
|
return {
|
|
7975
|
+
'is-disabled': this.disabled,
|
|
7334
7976
|
'withValue': this.value && this.value.length > 0,
|
|
7335
7977
|
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7336
7978
|
};
|
|
@@ -7343,30 +7985,30 @@ class AuroInput extends BaseInput {
|
|
|
7343
7985
|
*/
|
|
7344
7986
|
get commonInputClasses() {
|
|
7345
7987
|
return {
|
|
7346
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7988
|
+
'util_displayHiddenVisually': (this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === '')),
|
|
7347
7989
|
};
|
|
7348
7990
|
}
|
|
7349
7991
|
|
|
7350
7992
|
/**
|
|
7351
7993
|
* Returns classmap configuration for html5 inputs in each layout.
|
|
7352
7994
|
* @private
|
|
7353
|
-
* @
|
|
7995
|
+
* @returns {object} - Returns classmap.
|
|
7354
7996
|
*/
|
|
7355
7997
|
get legacyInputClasses() {
|
|
7356
7998
|
return {
|
|
7357
|
-
...this.commonInputClasses
|
|
7358
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
7999
|
+
...this.commonInputClasses
|
|
7359
8000
|
};
|
|
7360
8001
|
}
|
|
7361
8002
|
|
|
7362
8003
|
/**
|
|
7363
8004
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
7364
8005
|
* @private
|
|
7365
|
-
* @
|
|
8006
|
+
* @returns {object} - Returns classmap.
|
|
7366
8007
|
*/
|
|
7367
8008
|
get commonWrapperClasses() {
|
|
7368
8009
|
return {
|
|
7369
8010
|
'wrapper': true,
|
|
8011
|
+
'simple': this.simple,
|
|
7370
8012
|
'withValue': this.value && this.value.length > 0,
|
|
7371
8013
|
'hasFocus': this.hasFocus
|
|
7372
8014
|
};
|
|
@@ -7375,7 +8017,7 @@ class AuroInput extends BaseInput {
|
|
|
7375
8017
|
/**
|
|
7376
8018
|
* Returns classmap configuration for helpText elements in each layout.
|
|
7377
8019
|
* @private
|
|
7378
|
-
* @
|
|
8020
|
+
* @returns {object} - Returns classmap.
|
|
7379
8021
|
*/
|
|
7380
8022
|
get helpTextClasses() {
|
|
7381
8023
|
return {
|
|
@@ -7394,7 +8036,7 @@ class AuroInput extends BaseInput {
|
|
|
7394
8036
|
*
|
|
7395
8037
|
*/
|
|
7396
8038
|
static register(name = "auro-input") {
|
|
7397
|
-
AuroLibraryRuntimeUtils$
|
|
8039
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7398
8040
|
}
|
|
7399
8041
|
|
|
7400
8042
|
/**
|
|
@@ -7416,7 +8058,12 @@ class AuroInput extends BaseInput {
|
|
|
7416
8058
|
* @returns {void}
|
|
7417
8059
|
*/
|
|
7418
8060
|
checkDisplayValueSlotChange() {
|
|
7419
|
-
|
|
8061
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
8062
|
+
|
|
8063
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
8064
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
8065
|
+
nodes = nodes[0].assignedNodes();
|
|
8066
|
+
}
|
|
7420
8067
|
|
|
7421
8068
|
let hasContent = false;
|
|
7422
8069
|
|
|
@@ -7467,28 +8114,34 @@ class AuroInput extends BaseInput {
|
|
|
7467
8114
|
: this.commonInputClasses;
|
|
7468
8115
|
|
|
7469
8116
|
return u$2`
|
|
7470
|
-
<label for=${this.
|
|
8117
|
+
<label for=${this.inputId} class="${e(this.commonLabelClasses)}" part="label">
|
|
7471
8118
|
<slot name="label">
|
|
7472
8119
|
${this.label}
|
|
7473
8120
|
</slot>
|
|
8121
|
+
${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7474
8122
|
</label>
|
|
8123
|
+
|
|
8124
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7475
8125
|
<input
|
|
7476
8126
|
@blur="${this.handleBlur}"
|
|
7477
8127
|
@focusin="${this.handleFocusin}"
|
|
7478
8128
|
@focusout="${this.handleFocusout}"
|
|
7479
8129
|
@input="${this.handleInput}"
|
|
8130
|
+
.placeholder=${this.placeholderStr}
|
|
8131
|
+
.role=${this.a11yRole}
|
|
7480
8132
|
?activeLabel="${this.activeLabel}"
|
|
7481
8133
|
?disabled="${this.disabled}"
|
|
7482
8134
|
?required="${this.required}"
|
|
7483
|
-
|
|
8135
|
+
aria-controls=${o(this.a11yControls)}
|
|
7484
8136
|
aria-describedby="${this.uniqueId}"
|
|
8137
|
+
aria-expanded=${o(this.a11yExpanded)}
|
|
7485
8138
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7486
|
-
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7487
8139
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8140
|
+
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7488
8141
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7489
8142
|
class="${e(inputOverrideClasses)}"
|
|
7490
8143
|
id="${this.inputId}"
|
|
7491
|
-
|
|
8144
|
+
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
7492
8145
|
lang="${o(this.lang)}"
|
|
7493
8146
|
maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
|
|
7494
8147
|
minlength="${o(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7496,7 +8149,8 @@ class AuroInput extends BaseInput {
|
|
|
7496
8149
|
part="input"
|
|
7497
8150
|
pattern="${o(this.definePattern())}"
|
|
7498
8151
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7499
|
-
type="${this.type ===
|
|
8152
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8153
|
+
/>
|
|
7500
8154
|
<div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7501
8155
|
<div class="displayValueWrapper">
|
|
7502
8156
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7518,11 +8172,12 @@ class AuroInput extends BaseInput {
|
|
|
7518
8172
|
?onDark="${this.onDark}"
|
|
7519
8173
|
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7520
8174
|
class="notificationBtn clearBtn"
|
|
7521
|
-
|
|
7522
|
-
|
|
8175
|
+
shape="circle"
|
|
8176
|
+
size="sm"
|
|
8177
|
+
variant="ghost">
|
|
7523
8178
|
<${this.iconTag}
|
|
8179
|
+
?customColor="${this.onDark}"
|
|
7524
8180
|
category="interface"
|
|
7525
|
-
customColor
|
|
7526
8181
|
name="x-lg"
|
|
7527
8182
|
>
|
|
7528
8183
|
</${this.iconTag}>
|
|
@@ -7540,22 +8195,23 @@ class AuroInput extends BaseInput {
|
|
|
7540
8195
|
return u$2`
|
|
7541
8196
|
<div class="notification">
|
|
7542
8197
|
<${this.buttonTag}
|
|
7543
|
-
@click="${this.handleClickShowPassword}
|
|
8198
|
+
@click="${this.handleClickShowPassword}"
|
|
7544
8199
|
?onDark="${this.onDark}"
|
|
7545
|
-
aria-hidden="true"
|
|
7546
8200
|
class="notificationBtn passwordBtn"
|
|
7547
|
-
|
|
7548
|
-
|
|
8201
|
+
aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
|
|
8202
|
+
shape="circle"
|
|
8203
|
+
size="sm"
|
|
8204
|
+
variant="ghost">
|
|
7549
8205
|
<${this.iconTag}
|
|
8206
|
+
?customColor="${this.onDark}"
|
|
7550
8207
|
?hidden=${!this.showPassword}
|
|
7551
8208
|
category="interface"
|
|
7552
|
-
customColor
|
|
7553
8209
|
name="hide-password-stroke">
|
|
7554
8210
|
</${this.iconTag}>
|
|
7555
8211
|
<${this.iconTag}
|
|
8212
|
+
?customColor="${this.onDark}"
|
|
7556
8213
|
?hidden=${this.showPassword}
|
|
7557
8214
|
category="interface"
|
|
7558
|
-
customColor
|
|
7559
8215
|
name="view-password-stroke">
|
|
7560
8216
|
</${this.iconTag}>
|
|
7561
8217
|
</${this.buttonTag}>
|
|
@@ -7614,7 +8270,7 @@ class AuroInput extends BaseInput {
|
|
|
7614
8270
|
? u$2`
|
|
7615
8271
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7616
8272
|
<p id="${this.uniqueId}" part="helpText">
|
|
7617
|
-
<slot name="
|
|
8273
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7618
8274
|
</p>
|
|
7619
8275
|
</${this.helpTextTag}>
|
|
7620
8276
|
`
|
|
@@ -7635,19 +8291,25 @@ class AuroInput extends BaseInput {
|
|
|
7635
8291
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7636
8292
|
*/
|
|
7637
8293
|
renderLayoutClassic() {
|
|
8294
|
+
const classicClassMap = {
|
|
8295
|
+
...this.commonWrapperClasses,
|
|
8296
|
+
'thin': !this.simple
|
|
8297
|
+
};
|
|
8298
|
+
|
|
7638
8299
|
return u$2`
|
|
7639
8300
|
<div
|
|
7640
8301
|
@click="${this.handleClick}"
|
|
7641
|
-
class="${e(
|
|
8302
|
+
class="${e(classicClassMap)}"
|
|
7642
8303
|
part="wrapper">
|
|
7643
|
-
<div class="accents left">
|
|
8304
|
+
<div part="accent-left" class="accents left">
|
|
7644
8305
|
${this.renderHtmlTypeIcon()}
|
|
7645
8306
|
</div>
|
|
7646
8307
|
<div class="mainContent">
|
|
7647
8308
|
${this.renderHtmlInput(true)}
|
|
7648
8309
|
</div>
|
|
7649
|
-
<div class="accents right">
|
|
8310
|
+
<div part="accent-right" class="accents right">
|
|
7650
8311
|
${this.renderValidationErrorIconHtml()}
|
|
8312
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7651
8313
|
${this.hasValue ? u$2`
|
|
7652
8314
|
${!this.disabled && !this.readonly ? u$2`
|
|
7653
8315
|
${this.renderHtmlActionClear()}
|