@aurodesignsystem-dev/auro-card 0.0.0-pr130.0 → 0.0.0-pr132.0
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/custom-elements.json +649 -0
- package/demo/api.md +35 -34
- package/demo/auro-card.min.js +249 -2562
- package/dist/auro-card-BdEhjPlf.js +141 -0
- package/dist/index.d.ts +35 -18
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +14 -9
- package/dist/auro-card-Ck8vwzfh.js +0 -124
package/demo/auro-card.min.js
CHANGED
|
@@ -3,2648 +3,312 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$2=globalThis,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$4=Symbol(),o$7=new WeakMap;let n$5 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$4)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$5("string"==typeof t?t:t+"",void 0,s$4),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$5(o,t,s$4)},S$
|
|
6
|
+
const t$2=globalThis,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$4=Symbol(),o$7=new WeakMap;let n$5 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$4)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$5("string"==typeof t?t:t+"",void 0,s$4),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$5(o,t,s$4)},S$2=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$3=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
-
*/const{is:i$4,defineProperty:e$4,getOwnPropertyDescriptor:h$
|
|
12
|
+
*/const{is:i$4,defineProperty:e$4,getOwnPropertyDescriptor:h$4,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$6,getPrototypeOf:n$4}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$2=c$2?c$2.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$3={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$4=(t,s)=>!i$4(t,s),b$1={attribute:true,type:String,converter:u$3,reflect:false,useDefault:false,hasChanged:f$4};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$2 = 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$1){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$4(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$4(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$1}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$4(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...r$2(t),...o$6(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$2(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$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$3).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$3;this._$Em=e,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,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$4)(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$2.elementStyles=[],y$2.shadowRootOptions={mode:"open"},y$2[d$2("elementProperties")]=new Map,y$2[d$2("finalized")]=new Map,p$2?.({ReactiveElement:y$2}),(a$2.reactiveElementVersions??=[]).push("2.1.0");
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const t$1=globalThis,i$3=t$1.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h$
|
|
19
|
+
const t$1=globalThis,i$3=t$1.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h$3=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$3,n$3=`<${o$5}>`,r$1=document,l$1=()=>r$1.createComment(""),c$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$2=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$1(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$1.createTreeWalker(r$1,129);function P$1(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$3;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$3?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):void 0!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$3,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g$1:p$1):c===g$1||c===p$1?c=m$1:c===v$1||c===_$1?c=f$3:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$3+s.slice(d)+h$3+x):s+h$3+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$3)){const i=v[a++],s=r.getAttribute(t).split(h$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$3)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$3),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1());}}}else if(8===r.nodeType)if(r.data===o$5)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$3,t+1));)d.push({type:7,index:c}),t+=h$3.length-1;}c++;}}static createElement(t,i){const s=r$1.createElement("template");return s.innerHTML=t,s}};function S$1(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$1(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$1).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1(this,t,i),c$1(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$2(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$1&&c$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$1(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$1()),this.O(l$1()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$1(this,t,i,0),o=!c$1(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$1(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?void 0:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$1 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$1(this,t);}};const j$1=t$1.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$1.litHtmlVersions??=[]).push("3.3.0");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$1(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* @license
|
|
23
23
|
* Copyright 2017 Google LLC
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
-
*/const s$2=globalThis;let i$2 = class i extends y$
|
|
25
|
+
*/const s$2=globalThis;let i$2 = class i extends y$2{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$1(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};i$2._$litElement$=true,i$2["finalized"]=true,s$2.litElementHydrateSupport?.({LitElement:i$2});const o$4=s$2.litElementPolyfillSupport;o$4?.({LitElement:i$2});(s$2.litElementVersions??=[]).push("4.2.0");
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* @license
|
|
29
|
-
* Copyright
|
|
30
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
-
*/
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* @license
|
|
36
|
-
* Copyright 2020 Google LLC
|
|
37
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
-
*/const f$1=o=>void 0===o.strings;
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* @license
|
|
42
|
-
* Copyright 2017 Google LLC
|
|
43
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
|
-
*/
|
|
45
|
-
const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* @license
|
|
49
|
-
* Copyright 2017 Google LLC
|
|
50
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
|
-
*/const s=(i,t)=>{const e=i._$AN;if(void 0===e)return false;for(const i of e)i._$AO?.(t,false),s(i,t);return true},o$2=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t);}};function h$1(i){ void 0!==this._$AN?(o$2(this),this._$AM=i,r(this)):this._$AM=i;}function n$1(i,t=false,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],false),o$2(r[i]);else null!=r&&(s(r,false),o$2(r));else s(this,i);}const c=i=>{i.type==t.CHILD&&(i._$AP??=n$1,i._$AQ??=h$1);};class f extends i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=true){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o$2(this));}setValue(t){if(f$1(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* @license
|
|
55
|
-
* Copyright 2020 Google LLC
|
|
56
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
|
-
*/const e$1=()=>new h;class h{}const o$1=new WeakMap,n=e$2(class extends f{render(i){return E}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),E}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o$1.get(i);void 0===s&&(s=new WeakMap,o$1.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o$1.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* @license
|
|
61
|
-
* Copyright 2018 Google LLC
|
|
62
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
63
|
-
*/const o=o=>o??E;
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* @license
|
|
67
|
-
* Copyright 2018 Google LLC
|
|
68
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
69
|
-
*/const e=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
|
|
70
|
-
|
|
71
|
-
let AuroElement$2 = class AuroElement extends i$2 {
|
|
72
|
-
static get properties() {
|
|
73
|
-
return {
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Defines the language of an element.
|
|
77
|
-
* @default {'default'}
|
|
78
|
-
*/
|
|
79
|
-
layout: {
|
|
80
|
-
type: String,
|
|
81
|
-
attribute: "layout",
|
|
82
|
-
reflect: true
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
shape: {
|
|
86
|
-
type: String,
|
|
87
|
-
attribute: "shape",
|
|
88
|
-
reflect: true
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
size: {
|
|
92
|
-
type: String,
|
|
93
|
-
attribute: "size",
|
|
94
|
-
reflect: true
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
onDark: {
|
|
98
|
-
type: Boolean,
|
|
99
|
-
attribute: "ondark",
|
|
100
|
-
reflect: true
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
108
|
-
// See LICENSE in the project root for license information.
|
|
109
|
-
|
|
110
|
-
// ---------------------------------------------------------------------
|
|
111
|
-
|
|
112
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
113
|
-
|
|
114
|
-
class AuroLibraryRuntimeUtils {
|
|
115
|
-
|
|
116
|
-
/* eslint-disable jsdoc/require-param */
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* This will register a new custom element with the browser.
|
|
120
|
-
* @param {String} name - The name of the custom element.
|
|
121
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
122
|
-
* @returns {void}
|
|
123
|
-
*/
|
|
124
|
-
registerComponent(name, componentClass) {
|
|
125
|
-
if (!customElements.get(name)) {
|
|
126
|
-
customElements.define(name, class extends componentClass {});
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
132
|
-
* @returns {void}
|
|
133
|
-
*/
|
|
134
|
-
closestElement(
|
|
135
|
-
selector, // selector like in .closest()
|
|
136
|
-
base = this, // extra functionality to skip a parent
|
|
137
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
138
|
-
!el || el === document || el === window
|
|
139
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
140
|
-
: found
|
|
141
|
-
? found // found a selector INside this element
|
|
142
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
143
|
-
) {
|
|
144
|
-
return __Closest(base);
|
|
145
|
-
}
|
|
146
|
-
/* eslint-enable jsdoc/require-param */
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* 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.
|
|
150
|
-
* @param {Object} elem - The element to check.
|
|
151
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
152
|
-
* @returns {void}
|
|
153
|
-
*/
|
|
154
|
-
handleComponentTagRename(elem, tagName) {
|
|
155
|
-
const tag = tagName.toLowerCase();
|
|
156
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
157
|
-
|
|
158
|
-
if (elemTag !== tag) {
|
|
159
|
-
elem.setAttribute(tag, true);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/**
|
|
164
|
-
* Validates if an element is a specific Auro component.
|
|
165
|
-
* @param {Object} elem - The element to validate.
|
|
166
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
167
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
168
|
-
*/
|
|
169
|
-
elementMatch(elem, tagName) {
|
|
170
|
-
const tag = tagName.toLowerCase();
|
|
171
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
172
|
-
|
|
173
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
var externalLink = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"external-link-stroke__title external-link-stroke__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title id=\"external-link-stroke__title\">Link to external site.</title><desc id=\"external-link-stroke__desc\">This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.</desc><path d=\"M7 6.25h5a.75.75 0 0 1 .102 1.494L12 7.75H7a1.25 1.25 0 0 0-1.244 1.123L5.75 9v8c0 .648.492 1.18 1.122 1.244L7 18.25h8a1.25 1.25 0 0 0 1.244-1.122L16.25 17v-5a.75.75 0 0 1 1.493-.101l.007.101v5a2.75 2.75 0 0 1-2.582 2.745L15 19.75H7a2.75 2.75 0 0 1-2.745-2.582L4.25 17V9a2.75 2.75 0 0 1 2.582-2.745zh5zm12.025-2 .125.015.11.032.128.061c.18.108.317.29.353.522l.009.12v5a.75.75 0 0 1-1.493.102L18.25 10V6.811l-6.72 6.72a.75.75 0 0 1-1.133-.977l.073-.084 6.718-6.72H14a.75.75 0 0 1-.743-.648L13.25 5a.75.75 0 0 1 .648-.743L14 4.25z\"/></svg>"};
|
|
178
|
-
|
|
179
|
-
var newWindow = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"new-window-stroke__title new-window-stroke__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title id=\"new-window-stroke__title\">Link will open a new tab or window.</title><desc id=\"new-window-stroke__desc\">Notice indicator to alert users that action will result in the browser opening a new tab or window.</desc><path fill-rule=\"evenodd\" d=\"M20.246 5.687a2.063 2.063 0 0 0-2.058-1.937H8.813l-.126.004A2.063 2.063 0 0 0 6.75 5.813v.937H6.5l-.168.005A2.75 2.75 0 0 0 3.75 9.5v8l.005.168A2.75 2.75 0 0 0 6.5 20.25h8l.168-.005A2.75 2.75 0 0 0 17.25 17.5v-.25h.938l.125-.004a2.063 2.063 0 0 0 1.937-2.058V5.813zM15.75 17.25H8.813a2.063 2.063 0 0 1-2.06-1.937l-.003-.126V8.25H6.5a1.25 1.25 0 0 0-1.244 1.123L5.25 9.5v8c0 .648.492 1.18 1.122 1.244l.128.006h8a1.25 1.25 0 0 0 1.243-1.122l.007-.128zm-6.625-12h8.75l.09.005a.875.875 0 0 1 .785.87v8.75l-.005.09a.875.875 0 0 1-.87.785h-8.75l-.09-.005a.875.875 0 0 1-.785-.87v-8.75l.005-.09a.875.875 0 0 1 .87-.785m4.28 1.757L13.507 7c.38 0 .693.3.743.69l.007.11-.007 1.938h2c.38 0 .694.301.743.691l.007.108c0 .405-.282.74-.648.792l-.102.007h-2.001l.001 1.865c0 .404-.282.739-.648.792L13.5 14c-.38 0-.694-.3-.743-.69l-.007-.11-.001-1.864H10.75c-.38 0-.694-.3-.743-.69L10 10.537c0-.404.282-.738.648-.791l.102-.008h2l.007-1.939c0-.404.282-.739.648-.792\"/></svg>"};
|
|
180
|
-
|
|
181
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
182
|
-
// See LICENSE in the project root for license information.
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
// build the component class
|
|
186
|
-
class ComponentBase extends AuroElement$2 {
|
|
187
|
-
constructor() {
|
|
188
|
-
super();
|
|
189
|
-
|
|
190
|
-
this.download = false;
|
|
191
|
-
this.relative = false;
|
|
192
|
-
this.ondark = false;
|
|
193
|
-
this.variant = 'primary';
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* @private
|
|
198
|
-
*/
|
|
199
|
-
this.layout = this.type === 'cta' ? 'block' : null;
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* @private
|
|
203
|
-
*/
|
|
204
|
-
this.shape = this.type === 'cta' ? 'rounded' : null;
|
|
205
|
-
|
|
206
|
-
/**
|
|
207
|
-
* @private
|
|
208
|
-
*/
|
|
209
|
-
this.size = this.type === 'cta' ? 'md' : null;
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* @private
|
|
213
|
-
*/
|
|
214
|
-
this.defaultReferrerPolicy = 'strict-origin-when-cross-origin';
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* @private
|
|
218
|
-
*/
|
|
219
|
-
this.ariapressed = 'false';
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* @private
|
|
223
|
-
*/
|
|
224
|
-
this.tabIsActive = 'false';
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* @private
|
|
228
|
-
*/
|
|
229
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
230
|
-
|
|
231
|
-
/*
|
|
232
|
-
If the component requires a touch detection,
|
|
233
|
-
please use this function to determine if a user is
|
|
234
|
-
actively touching a device, versus detecting if
|
|
235
|
-
the device is touch enables or a handheld device.
|
|
236
|
-
|
|
237
|
-
Also uncomment the touch detection lib above
|
|
238
|
-
*/
|
|
239
|
-
this.addEventListener('touchstart', function() {
|
|
240
|
-
this.classList.add('is-touching');
|
|
241
|
-
});
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
// function to define props used within the scope of this component
|
|
245
|
-
static get properties() {
|
|
246
|
-
return {
|
|
247
|
-
...super.properties,
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* Defines the URL of the linked page.
|
|
251
|
-
*/
|
|
252
|
-
href: {
|
|
253
|
-
type: String,
|
|
254
|
-
reflect: true
|
|
255
|
-
},
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Defines the relationship between the current document and the linked document.
|
|
259
|
-
*/
|
|
260
|
-
rel: {
|
|
261
|
-
type: String,
|
|
262
|
-
reflect: true
|
|
263
|
-
},
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* Defines where to open the linked document.
|
|
267
|
-
*/
|
|
268
|
-
target: {
|
|
269
|
-
type: String,
|
|
270
|
-
reflect: true
|
|
271
|
-
},
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* If true, the linked resource will be downloaded when the hyperlink is clicked.
|
|
275
|
-
*/
|
|
276
|
-
download: {
|
|
277
|
-
type: Boolean,
|
|
278
|
-
reflect: true
|
|
279
|
-
},
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* If true, the auto URL re-write feature will be disabled.
|
|
283
|
-
*/
|
|
284
|
-
relative: {
|
|
285
|
-
type: Boolean,
|
|
286
|
-
reflect: true
|
|
287
|
-
},
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* If true, the hyperlink will be styled for use on a dark background.
|
|
291
|
-
*/
|
|
292
|
-
ondark: { type: Boolean },
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Defines the type of hyperlink; accepts `nav` or `cta`.
|
|
296
|
-
*/
|
|
297
|
-
type: {
|
|
298
|
-
type: String,
|
|
299
|
-
reflect: true
|
|
300
|
-
},
|
|
301
|
-
|
|
302
|
-
/**
|
|
303
|
-
* If true and `type="cta"`, the hyperlink will have a fluid-width UI.
|
|
304
|
-
*/
|
|
305
|
-
fluid: { type: Boolean },
|
|
306
|
-
|
|
307
|
-
/**
|
|
308
|
-
* If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
|
|
309
|
-
*/
|
|
310
|
-
referrerpolicy: {
|
|
311
|
-
type: Boolean,
|
|
312
|
-
reflect: true
|
|
313
|
-
},
|
|
314
|
-
|
|
315
|
-
/**
|
|
316
|
-
* Sets button variant option.
|
|
317
|
-
* @default primary
|
|
318
|
-
*/
|
|
319
|
-
variant: {
|
|
320
|
-
type: String,
|
|
321
|
-
reflect: true
|
|
322
|
-
},
|
|
323
|
-
};
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
firstUpdated() {
|
|
327
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
328
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-hyperlink');
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* Returns a safe URI based on the provided `href` and `relative` parameters.
|
|
333
|
-
* If `href` is truthy, it generates a safe URL using the `safeUrl` function.
|
|
334
|
-
* Otherwise, it returns an empty string.
|
|
335
|
-
*
|
|
336
|
-
* @example
|
|
337
|
-
* // Assuming this.href = 'http://example.com' and this.relative = false
|
|
338
|
-
* this.safeUri; // Returns 'http://example.com'
|
|
339
|
-
*
|
|
340
|
-
* @example
|
|
341
|
-
* // Assuming this.href = '' or this.href = null
|
|
342
|
-
* this.safeUri; // Returns ''
|
|
343
|
-
*
|
|
344
|
-
* @returns {string} The safe URI or an empty string.
|
|
345
|
-
*/
|
|
346
|
-
get safeUri() {
|
|
347
|
-
return this.href ? this.safeUrl(this.href, this.relative) : '';
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
/**
|
|
351
|
-
* Checks whether the provided URI (if available) includes the 'http' protocol.
|
|
352
|
-
* If the URI is truthy, it examines whether it contains 'http'.
|
|
353
|
-
* Otherwise, it returns false.
|
|
354
|
-
*
|
|
355
|
-
* @example
|
|
356
|
-
* // Assuming this.href = 'http://example.com'
|
|
357
|
-
* this.includesDomain; // Returns true
|
|
358
|
-
*
|
|
359
|
-
* @example
|
|
360
|
-
* // Assuming this.href = '/path/to/file'
|
|
361
|
-
* this.includesDomain; // Returns false
|
|
362
|
-
*
|
|
363
|
-
* @example
|
|
364
|
-
* // Assuming this.href = '' or this.href = null
|
|
365
|
-
* this.includesDomain; // Returns false
|
|
366
|
-
*
|
|
367
|
-
* @private
|
|
368
|
-
* @returns {boolean} True if the URI includes 'http', false otherwise.
|
|
369
|
-
*/
|
|
370
|
-
get includesDomain() {
|
|
371
|
-
return this.href ? this.safeUri.includes('http') : false;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
/**
|
|
375
|
-
* Generates a safe URL based on the provided `href` and `relative` parameters.
|
|
376
|
-
* If `href` is falsy, it returns `undefined`.
|
|
377
|
-
*
|
|
378
|
-
* @example
|
|
379
|
-
* // Assuming href = 'http://example.com' and relative = false
|
|
380
|
-
* this.safeUrl(href, relative); // Returns 'https://example.com'
|
|
381
|
-
*
|
|
382
|
-
* @example
|
|
383
|
-
* // Assuming href = '/path/to/file' and relative = true
|
|
384
|
-
* this.safeUrl(href, relative); // Returns '/path/to/file'
|
|
385
|
-
*
|
|
386
|
-
* @example
|
|
387
|
-
* // Assuming href = 'javascript:alert("Hello")'
|
|
388
|
-
* this.safeUrl(href, relative); // Returns undefined
|
|
389
|
-
*
|
|
390
|
-
* @private
|
|
391
|
-
* @param {string} href - The original URL.
|
|
392
|
-
* @param {boolean} relative - Indicates whether the URL is relative.
|
|
393
|
-
* @returns {string|undefined} The safe URL or `undefined`.
|
|
394
|
-
*/
|
|
395
|
-
safeUrl(href, relative) {
|
|
396
|
-
if (!href) {
|
|
397
|
-
return undefined;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
const url = new URL(href, 'https://www.alaskaair.com');
|
|
401
|
-
|
|
402
|
-
switch (url.protocol) {
|
|
403
|
-
case 'tel:':
|
|
404
|
-
case 'sms:':
|
|
405
|
-
case 'mailto:':
|
|
406
|
-
return href;
|
|
407
|
-
|
|
408
|
-
// Specifically want to render NO shadowDOM for the following refs
|
|
409
|
-
case 'javascript:':
|
|
410
|
-
case 'data:':
|
|
411
|
-
case 'vbscript:':
|
|
412
|
-
return undefined;
|
|
413
|
-
|
|
414
|
-
default:
|
|
415
|
-
if (!relative) {
|
|
416
|
-
url.protocol = 'https:';
|
|
417
|
-
return url.href;
|
|
418
|
-
} else {
|
|
419
|
-
return href.replace(/^[^:]+:/, "");
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
/**
|
|
425
|
-
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
|
|
426
|
-
*
|
|
427
|
-
* @example
|
|
428
|
-
* // Assuming svgContent = '<svg><path d="..."/></svg>'
|
|
429
|
-
* this.generateIconHtml(svgContent); // Returns HTML element containing the SVG icon
|
|
430
|
-
*
|
|
431
|
-
* @private
|
|
432
|
-
* @param {string} svgContent - The SVG content to be embedded.
|
|
433
|
-
* @returns {Element} The HTML element containing the SVG icon.
|
|
434
|
-
*/
|
|
435
|
-
generateIconHtml(svgContent) {
|
|
436
|
-
const dom = new DOMParser().parseFromString(svgContent, 'text/html');
|
|
437
|
-
const svg = dom.body.firstChild;
|
|
438
|
-
|
|
439
|
-
svg.setAttribute('slot', 'svg');
|
|
440
|
-
|
|
441
|
-
return u`<${this.iconTag} customColor customSvg part="targetIcon">${svg}</${this.iconTag}>`;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
/**
|
|
445
|
-
* Generates an icon HTML element based on the target attribute.
|
|
446
|
-
*
|
|
447
|
-
* @example
|
|
448
|
-
* // Assuming target = '_blank' and this.safeUri = 'http://alaskaair.com'
|
|
449
|
-
* this.targetIcon(target); // Returns HTML element containing the new window icon
|
|
450
|
-
*
|
|
451
|
-
* @example
|
|
452
|
-
* // Assuming target = '_blank' and this.safeUri = 'http://external.com'
|
|
453
|
-
* this.targetIcon(target); // Returns HTML element containing the external link icon
|
|
454
|
-
*
|
|
455
|
-
* @example
|
|
456
|
-
* // Assuming target = '_self' or this.safeUri = '/relative/path'
|
|
457
|
-
* this.targetIcon(target); // Returns undefined
|
|
458
|
-
*
|
|
459
|
-
* @private
|
|
460
|
-
* @param {string} target - The target attribute of the anchor element.
|
|
461
|
-
* @returns {HTMLElement|undefined} The HTML element containing the icon, or undefined if no icon is generated.
|
|
462
|
-
*/
|
|
463
|
-
targetIcon(target) {
|
|
464
|
-
|
|
465
|
-
/**
|
|
466
|
-
* Checks if a URL's domain is from the 'alaskaair.com' domain or its subdomains.
|
|
467
|
-
* @param {string} url - The URL to check.
|
|
468
|
-
* @returns {boolean} Returns true if the URL's domain is 'alaskaair.com' or one of its subdomains, otherwise false.
|
|
469
|
-
*/
|
|
470
|
-
const isAlaskaAirDomain = (url) => {
|
|
471
|
-
const urlObject = new URL(url);
|
|
472
|
-
return urlObject.hostname.endsWith('.alaskaair.com');
|
|
473
|
-
};
|
|
474
|
-
|
|
475
|
-
// If target is '_blank' and the URL's domain is 'alaskaair.com' or one of its subdomains, return icon for new window
|
|
476
|
-
if (target === '_blank' && isAlaskaAirDomain(this.safeUri)) {
|
|
477
|
-
return this.generateIconHtml(newWindow.svg);
|
|
478
|
-
} else if (target === '_blank' && !isAlaskaAirDomain(this.safeUri) && this.includesDomain) {
|
|
479
|
-
// If target is '_blank' and the URL does not belong to 'alaskaair.com' or its subdomains but contains a domain, return icon for external link
|
|
480
|
-
return this.generateIconHtml(externalLink.svg);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
return undefined;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
/**
|
|
487
|
-
* Returns the state of a tab as a string.
|
|
488
|
-
*
|
|
489
|
-
* @example
|
|
490
|
-
* // Assuming tabIsActive = true
|
|
491
|
-
* this.getTabState(tabIsActive); // Returns 'is-active'
|
|
492
|
-
*
|
|
493
|
-
* @example
|
|
494
|
-
* // Assuming tabIsActive = false
|
|
495
|
-
* this.getTabState(tabIsActive); // Returns ''
|
|
496
|
-
*
|
|
497
|
-
* @private
|
|
498
|
-
* @param {boolean} tabIsActive - Indicates whether the tab is active.
|
|
499
|
-
* @returns {string} 'is-active' if the tab is active, otherwise an empty string.
|
|
500
|
-
*/
|
|
501
|
-
getTabState(tabIsActive) {
|
|
502
|
-
return tabIsActive === true ? "is-active" : '';
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* Gets the rel attribute value based on target and rel values.
|
|
507
|
-
*
|
|
508
|
-
* @example
|
|
509
|
-
* // Assuming target = '_blank', rel = 'noFollow', and this.safeUri = 'http://alaskaair.com'
|
|
510
|
-
* this.getRelType(target, rel); // Returns 'noFollow'
|
|
511
|
-
*
|
|
512
|
-
* @example
|
|
513
|
-
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://alaskaair.com', and this.includesDomain = true
|
|
514
|
-
* this.getRelType(target, rel); // Returns undefined
|
|
515
|
-
*
|
|
516
|
-
* @example
|
|
517
|
-
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://external.com', this.includesDomain = true, and this.referrerpolicy = undefined
|
|
518
|
-
* this.getRelType(target, rel); // Returns 'noOpener noReferrer'
|
|
519
|
-
*
|
|
520
|
-
* @example
|
|
521
|
-
* // Assuming target = '_blank', rel = undefined, this.safeUri = 'http://external.com', this.includesDomain = true, and this.referrerpolicy = 'no-referrer'
|
|
522
|
-
* this.getRelType(target, rel); // Returns 'external'
|
|
523
|
-
*
|
|
524
|
-
* @private
|
|
525
|
-
* @param {string} target - The target attribute of the anchor element.
|
|
526
|
-
* @param {string} rel - The rel attribute of the anchor element.
|
|
527
|
-
* @returns {string|undefined} The rel attribute value or undefined if not applicable.
|
|
528
|
-
*/
|
|
529
|
-
getRelType(target, rel) {
|
|
530
|
-
|
|
531
|
-
if (rel) {
|
|
532
|
-
return rel;
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
if (target === '_blank' && this.safeUri.includes('alaskaair.com')) {
|
|
536
|
-
return rel;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
if (target === '_blank' && this.includesDomain && !this.rel && !this.referrerpolicy) {
|
|
540
|
-
return 'noOpener noReferrer';
|
|
541
|
-
}
|
|
542
|
-
|
|
543
|
-
if (target === '_blank' && this.referrerpolicy) {
|
|
544
|
-
return 'external';
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
return undefined;
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
/**
|
|
551
|
-
* Sets the ARIA pressed state based on user interactions.
|
|
552
|
-
*
|
|
553
|
-
* @example
|
|
554
|
-
* // Assuming ariaPressed = false and user performs a mousedown event
|
|
555
|
-
* this.ariaPressedState(ariaPressed); // Returns true
|
|
556
|
-
*
|
|
557
|
-
* @example
|
|
558
|
-
* // Assuming ariaPressed = true and user performs a mouseup event
|
|
559
|
-
* this.ariaPressedState(ariaPressed); // Returns false
|
|
560
|
-
*
|
|
561
|
-
* @example
|
|
562
|
-
* // Assuming ariaPressed = false and user performs a keydown event with 'Enter' or 'Space'
|
|
563
|
-
* this.ariaPressedState(ariaPressed); // Returns true
|
|
564
|
-
*
|
|
565
|
-
* @example
|
|
566
|
-
* // Assuming ariaPressed = true and user performs a keyup event
|
|
567
|
-
* this.ariaPressedState(ariaPressed); // Returns false
|
|
568
|
-
*
|
|
569
|
-
* @private
|
|
570
|
-
* @param {boolean} ariaPressed - The initial value of the ARIA pressed state.
|
|
571
|
-
* @returns {boolean} The updated ARIA pressed state.
|
|
572
|
-
*/
|
|
573
|
-
ariaPressedState(ariaPressed) {
|
|
574
|
-
const ariaToggle = function (event) {
|
|
575
|
-
const ariaPressedNode = this.shadowRoot.querySelector('[aria-pressed]');
|
|
576
|
-
ariaPressedNode.setAttribute("aria-pressed", 'false');
|
|
577
|
-
|
|
578
|
-
if (event.type === 'mousedown') {
|
|
579
|
-
ariaPressedNode.ariaPressed = true;
|
|
580
|
-
} else {
|
|
581
|
-
ariaPressedNode.ariaPressed = false;
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
if (event.type === 'keydown') {
|
|
585
|
-
if (event.code === 'Enter') {
|
|
586
|
-
ariaPressedNode.ariaPressed = true;
|
|
587
|
-
|
|
588
|
-
if (this.hyperlinkRef && this.hyperlinkRef.value && this.hyperlinkRef.value.role === 'button') {
|
|
589
|
-
this.click();
|
|
590
|
-
}
|
|
591
|
-
} else {
|
|
592
|
-
ariaPressedNode.ariaPressed = false;
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
};
|
|
596
|
-
|
|
597
|
-
// Add event listeners
|
|
598
|
-
this.addEventListener('mousedown', ariaToggle);
|
|
599
|
-
this.addEventListener('mouseup', ariaToggle);
|
|
600
|
-
this.addEventListener('keydown', ariaToggle);
|
|
601
|
-
this.addEventListener('keyup', ariaToggle);
|
|
602
|
-
|
|
603
|
-
return ariaPressed;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
// function renders HTML and CSS into the scope of the component
|
|
607
|
-
render() {
|
|
608
|
-
return this.getMarkup();
|
|
609
|
-
}
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
613
|
-
// See LICENSE in the project root for license information.
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
class AuroDependencyVersioning {
|
|
617
|
-
|
|
618
|
-
/**
|
|
619
|
-
* Generates a unique string to be used for child auro element naming.
|
|
620
|
-
* @private
|
|
621
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
622
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
623
|
-
* @returns {string} - Unique string to be used for naming.
|
|
624
|
-
*/
|
|
625
|
-
generateElementName(baseName, version) {
|
|
626
|
-
let result = baseName;
|
|
627
|
-
|
|
628
|
-
result += '-';
|
|
629
|
-
result += version.replace(/[.]/g, '_');
|
|
630
|
-
|
|
631
|
-
return result;
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
/**
|
|
635
|
-
* Generates a unique string to be used for child auro element naming.
|
|
636
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
637
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
638
|
-
* @returns {string} - Unique string to be used for naming.
|
|
639
|
-
*/
|
|
640
|
-
generateTag(baseName, version, tagClass) {
|
|
641
|
-
const elementName = this.generateElementName(baseName, version);
|
|
642
|
-
const tag = i$1`${s$1(elementName)}`;
|
|
643
|
-
|
|
644
|
-
if (!customElements.get(elementName)) {
|
|
645
|
-
customElements.define(elementName, class extends tagClass {});
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
return tag;
|
|
649
|
-
}
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
/**
|
|
653
|
-
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
654
|
-
*/
|
|
655
|
-
const _observers$1 = new WeakMap();
|
|
656
|
-
|
|
657
|
-
/**
|
|
658
|
-
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
659
|
-
* Structure: {
|
|
660
|
-
* host: {
|
|
661
|
-
* matchers: Set<Function>,
|
|
662
|
-
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
663
|
-
* }
|
|
664
|
-
* }
|
|
665
|
-
*/
|
|
666
|
-
const _transportConfig$1 = new WeakMap();
|
|
667
|
-
|
|
668
|
-
/**
|
|
669
|
-
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
670
|
-
*
|
|
671
|
-
* @param {Object} params - The parameters for the function.
|
|
672
|
-
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
673
|
-
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
674
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
675
|
-
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
676
|
-
* @returns {Function} A function to detach the observer when no longer needed.
|
|
677
|
-
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
678
|
-
*/
|
|
679
|
-
const transportAttributes$1 = ({ host, target, match, removeOriginal = true }) => {
|
|
680
|
-
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
681
|
-
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
682
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
683
|
-
}
|
|
684
|
-
|
|
685
|
-
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
686
|
-
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
687
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
// Guard Clause: Ensure match is a function
|
|
691
|
-
if (typeof match !== 'function') {
|
|
692
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
// Guard Clause: Ensure removeOriginal is a boolean
|
|
696
|
-
if (typeof removeOriginal !== 'boolean') {
|
|
697
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
// Register this transport and get cleanup function
|
|
701
|
-
return _registerTransport$1({
|
|
702
|
-
host,
|
|
703
|
-
target,
|
|
704
|
-
matcher: match,
|
|
705
|
-
removeOriginal
|
|
706
|
-
});
|
|
707
|
-
};
|
|
708
|
-
|
|
709
|
-
/**
|
|
710
|
-
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
711
|
-
*
|
|
712
|
-
* @param {Object} params - The parameters object.
|
|
713
|
-
* @param {HTMLElement} params.host - The host element to observe.
|
|
714
|
-
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
715
|
-
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
716
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
717
|
-
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
718
|
-
* @private
|
|
719
|
-
*/
|
|
720
|
-
const _registerTransport$1 = ({ host, target, matcher, removeOriginal = true }) => {
|
|
721
|
-
// Initialize config for this host if it doesn't exist
|
|
722
|
-
if (!_transportConfig$1.has(host)) {
|
|
723
|
-
_transportConfig$1.set(host, {
|
|
724
|
-
matchers: new Set(),
|
|
725
|
-
targets: new Map()
|
|
726
|
-
});
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
const config = _transportConfig$1.get(host);
|
|
730
|
-
|
|
731
|
-
// Add the matcher to the set of matchers for this host
|
|
732
|
-
config.matchers.add(matcher);
|
|
733
|
-
|
|
734
|
-
// Initialize target entry if it doesn't exist
|
|
735
|
-
if (!config.targets.has(target)) {
|
|
736
|
-
config.targets.set(target, new Map());
|
|
737
|
-
}
|
|
738
|
-
|
|
739
|
-
// Store the matcher with its removeOriginal setting for this target
|
|
740
|
-
config.targets.get(target).set(matcher, {
|
|
741
|
-
removeOriginal,
|
|
742
|
-
currentAttributes: new Map()
|
|
743
|
-
});
|
|
744
|
-
|
|
745
|
-
// Perform initial attribute transport
|
|
746
|
-
_transportAttributes$1({ host, target, matcher, removeOriginal });
|
|
747
|
-
|
|
748
|
-
// Attach observer
|
|
749
|
-
_attachObserver$1(host);
|
|
750
|
-
|
|
751
|
-
// Return cleanup function and utility functions
|
|
752
|
-
return {
|
|
753
|
-
cleanup: () => _cleanupTransport$1(host, target, matcher),
|
|
754
|
-
getObservedAttributes: () => _getObservedAttributes$1(host, target, matcher),
|
|
755
|
-
getObservedAttribute: (attr) => _getObservedAttribute$1(host, target, matcher, attr),
|
|
756
|
-
}
|
|
757
|
-
};
|
|
758
|
-
|
|
759
|
-
/**
|
|
760
|
-
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
761
|
-
*
|
|
762
|
-
* @param {HTMLElement} host - The host element.
|
|
763
|
-
* @param {HTMLElement} target - The target element.
|
|
764
|
-
* @param {Function} matcher - The matcher function.
|
|
765
|
-
* @private
|
|
766
|
-
*/
|
|
767
|
-
const _cleanupTransport$1 = (host, target, matcher) => {
|
|
768
|
-
const config = _transportConfig$1.get(host);
|
|
769
|
-
if (!config) return;
|
|
770
|
-
|
|
771
|
-
// Remove this matcher from this target
|
|
772
|
-
const targetMatchers = config.targets.get(target);
|
|
773
|
-
if (targetMatchers) {
|
|
774
|
-
targetMatchers.delete(matcher);
|
|
775
|
-
|
|
776
|
-
// If this target has no more matchers, remove it
|
|
777
|
-
if (targetMatchers.size === 0) {
|
|
778
|
-
config.targets.delete(target);
|
|
779
|
-
}
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
// Check if this matcher is still used by any target
|
|
783
|
-
let matcherStillUsed = false;
|
|
784
|
-
for (const matcherMap of config.targets.values()) {
|
|
785
|
-
if (matcherMap.has(matcher)) {
|
|
786
|
-
matcherStillUsed = true;
|
|
787
|
-
break;
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
// If not used anymore, remove from matchers set
|
|
792
|
-
if (!matcherStillUsed) {
|
|
793
|
-
config.matchers.delete(matcher);
|
|
794
|
-
}
|
|
795
|
-
|
|
796
|
-
// If no more targets or matchers, detach observer
|
|
797
|
-
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
798
|
-
_detachObserver$1(host);
|
|
799
|
-
}
|
|
800
|
-
};
|
|
801
|
-
|
|
802
|
-
/**
|
|
803
|
-
* Generic function to transport attributes from a host element to a target element.
|
|
804
|
-
*
|
|
805
|
-
* @param {Object} params - The parameters object.
|
|
806
|
-
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
807
|
-
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
808
|
-
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
809
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
810
|
-
* @returns {void}
|
|
811
|
-
* @private
|
|
812
|
-
*/
|
|
813
|
-
const _transportAttributes$1 = ({ host, target, matcher, removeOriginal = true }) => {
|
|
814
|
-
// Get a list of all matching attributes on the host element and their values
|
|
815
|
-
const matchingAttributes = host.getAttributeNames()
|
|
816
|
-
.filter(attr => matcher(attr))
|
|
817
|
-
.reduce((acc, attr) => {
|
|
818
|
-
acc[attr] = host.getAttribute(attr);
|
|
819
|
-
return acc;
|
|
820
|
-
}, {});
|
|
821
|
-
|
|
822
|
-
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
823
|
-
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
824
|
-
_setObservedAttribute$1(host, target, matcher, key, value);
|
|
825
|
-
target.setAttribute(key, value);
|
|
826
|
-
if (removeOriginal) {
|
|
827
|
-
host.removeAttribute(key);
|
|
828
|
-
}
|
|
829
|
-
});
|
|
830
|
-
};
|
|
831
|
-
|
|
832
|
-
/**
|
|
833
|
-
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
834
|
-
*
|
|
835
|
-
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
836
|
-
* @returns {MutationObserver} The observer instance.
|
|
837
|
-
* @private
|
|
838
|
-
*/
|
|
839
|
-
const _attachObserver$1 = (host) => {
|
|
840
|
-
// If an observer for this host already exists, return it
|
|
841
|
-
if (_observers$1.has(host)) {
|
|
842
|
-
return _observers$1.get(host);
|
|
843
|
-
}
|
|
844
|
-
|
|
845
|
-
// Create a new MutationObserver
|
|
846
|
-
const observer = new MutationObserver((mutations) => {
|
|
847
|
-
const config = _transportConfig$1.get(host);
|
|
848
|
-
if (!config) return;
|
|
849
|
-
|
|
850
|
-
// For each mutation affecting attributes
|
|
851
|
-
mutations
|
|
852
|
-
.filter(mutation => mutation.type === 'attributes')
|
|
853
|
-
.forEach(mutation => {
|
|
854
|
-
const attributeName = mutation.attributeName;
|
|
855
|
-
|
|
856
|
-
// Find matchers that care about this attribute
|
|
857
|
-
for (const matcher of config.matchers) {
|
|
858
|
-
if (matcher(attributeName)) {
|
|
859
|
-
// For each target that uses this matcher
|
|
860
|
-
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
861
|
-
if (matcherConfigs.has(matcher)) {
|
|
862
|
-
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
863
|
-
_transportAttributes$1({
|
|
864
|
-
host,
|
|
865
|
-
target,
|
|
866
|
-
matcher,
|
|
867
|
-
removeOriginal
|
|
868
|
-
});
|
|
869
|
-
}
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
|
-
}
|
|
873
|
-
});
|
|
874
|
-
});
|
|
875
|
-
|
|
876
|
-
// Start observing attribute changes
|
|
877
|
-
observer.observe(host, { attributes: true });
|
|
878
|
-
|
|
879
|
-
// Store the observer
|
|
880
|
-
_observers$1.set(host, observer);
|
|
881
|
-
|
|
882
|
-
return observer;
|
|
883
|
-
};
|
|
884
|
-
|
|
885
|
-
/**
|
|
886
|
-
* Detaches and cleans up the MutationObserver for a given host element.
|
|
887
|
-
*
|
|
888
|
-
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
889
|
-
* @private
|
|
890
|
-
*/
|
|
891
|
-
const _detachObserver$1 = (host) => {
|
|
892
|
-
if (_observers$1.has(host)) {
|
|
893
|
-
const observer = _observers$1.get(host);
|
|
894
|
-
observer.disconnect();
|
|
895
|
-
_observers$1.delete(host);
|
|
896
|
-
}
|
|
897
|
-
|
|
898
|
-
// Clean up the transport config as well
|
|
899
|
-
if (_transportConfig$1.has(host)) {
|
|
900
|
-
_transportConfig$1.delete(host);
|
|
901
|
-
}
|
|
902
|
-
};
|
|
903
|
-
|
|
904
|
-
/**
|
|
905
|
-
* Gets the matcher configuration for a specific host, target, and matcher.
|
|
906
|
-
* @param {HTMLElement} host - The host element.
|
|
907
|
-
* @param {HTMLElement} target - The target element.
|
|
908
|
-
* @param {Function} matcher - The matcher function.
|
|
909
|
-
* @returns {Object|undefined} The matcher configuration if found.
|
|
910
|
-
* @private
|
|
911
|
-
*/
|
|
912
|
-
const _getMatcherConfig$1 = (host, target, matcher) => {
|
|
913
|
-
const config = _transportConfig$1.get(host);
|
|
914
|
-
if (!config) return undefined;
|
|
915
|
-
|
|
916
|
-
const targetMatchers = config.targets.get(target);
|
|
917
|
-
if (!targetMatchers) return undefined;
|
|
918
|
-
|
|
919
|
-
return targetMatchers.get(matcher);
|
|
920
|
-
};
|
|
921
|
-
|
|
922
|
-
/**
|
|
923
|
-
* Sets an observed attribute value.
|
|
924
|
-
* @param {HTMLElement} host - The host element.
|
|
925
|
-
* @param {HTMLElement} target - The target element.
|
|
926
|
-
* @param {Function} matcher - The matcher function.
|
|
927
|
-
* @param {string} key - The attribute name.
|
|
928
|
-
* @param {string} value - The attribute value.
|
|
929
|
-
* @private
|
|
930
|
-
*/
|
|
931
|
-
const _setObservedAttribute$1 = (host, target, matcher, key, value) => {
|
|
932
|
-
const matcherConfig = _getMatcherConfig$1(host, target, matcher);
|
|
933
|
-
if (matcherConfig) {
|
|
934
|
-
matcherConfig.currentAttributes.set(key, value);
|
|
935
|
-
}
|
|
936
|
-
};
|
|
937
|
-
|
|
938
|
-
const _getObservedAttribute$1 = (host, target, matcher, attr) => {
|
|
939
|
-
const matcherConfig = _getMatcherConfig$1(host, target, matcher);
|
|
940
|
-
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
941
|
-
return undefined;
|
|
942
|
-
};
|
|
943
|
-
|
|
944
|
-
const _getObservedAttributes$1 = (host, target, matcher) => {
|
|
945
|
-
const matcherConfig = _getMatcherConfig$1(host, target, matcher);
|
|
946
|
-
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
947
|
-
return [];
|
|
948
|
-
};
|
|
949
|
-
|
|
950
|
-
const _matchers$1 = {
|
|
951
|
-
'aria-': attr => attr.startsWith('aria-'),
|
|
952
|
-
'role': attr => attr.match(/^role$/),
|
|
953
|
-
'tabindex': attr => attr.match(/^tabindex$/),
|
|
954
|
-
};
|
|
955
|
-
|
|
956
|
-
/**
|
|
957
|
-
* Transfers all accessibility-related attributes (ARIA, role, tabindex) from the host element to the target element.
|
|
958
|
-
* This function allows optional removal of the original attributes and the ability to ignore specific attributes.
|
|
959
|
-
*
|
|
960
|
-
* @param {Object} params - The parameters object.
|
|
961
|
-
* @param {HTMLElement} params.host - The host element to observe.
|
|
962
|
-
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
963
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
964
|
-
* @param {Array<String>} [params.ignore] - The list of attributes not to transport.
|
|
965
|
-
*
|
|
966
|
-
* @returns {Function} Function to detach the specific matcher and target pairing.} param.
|
|
967
|
-
*/
|
|
968
|
-
const transportAllA11yAttributes$1 = ({ host, target, removeOriginal = true, ignore = undefined }) => {
|
|
969
|
-
return transportAttributes$1({
|
|
970
|
-
host,
|
|
971
|
-
target,
|
|
972
|
-
match: attr => {
|
|
973
|
-
if (ignore && ignore.includes(attr)) {
|
|
974
|
-
return false;
|
|
975
|
-
}
|
|
976
|
-
for (const key in _matchers$1) {
|
|
977
|
-
if (_matchers$1[key](attr)) {
|
|
978
|
-
return true;
|
|
979
|
-
}
|
|
980
|
-
}
|
|
981
|
-
return false;
|
|
982
|
-
},
|
|
983
|
-
removeOriginal
|
|
984
|
-
});
|
|
985
|
-
};
|
|
986
|
-
|
|
987
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
988
|
-
// See LICENSE in the project root for license information.
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
/**
|
|
992
|
-
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
993
|
-
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
994
|
-
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
995
|
-
*/
|
|
996
|
-
|
|
997
|
-
let AuroElement$1 = class AuroElement extends i$2 {
|
|
998
|
-
|
|
999
|
-
// function to define props used within the scope of this component
|
|
1000
|
-
static get properties() {
|
|
1001
|
-
return {
|
|
1002
|
-
hidden: { type: Boolean,
|
|
1003
|
-
reflect: true },
|
|
1004
|
-
hiddenVisually: { type: Boolean,
|
|
1005
|
-
reflect: true },
|
|
1006
|
-
hiddenAudible: { type: Boolean,
|
|
1007
|
-
reflect: true },
|
|
1008
|
-
};
|
|
1009
|
-
}
|
|
1010
|
-
|
|
1011
|
-
/**
|
|
1012
|
-
* @private Function that determines state of aria-hidden
|
|
1013
|
-
*/
|
|
1014
|
-
hideAudible(value) {
|
|
1015
|
-
if (value) {
|
|
1016
|
-
return 'true'
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
return 'false'
|
|
1020
|
-
}
|
|
1021
|
-
};
|
|
1022
|
-
|
|
1023
|
-
var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
1024
|
-
|
|
1025
|
-
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
1026
|
-
|
|
1027
|
-
const _fetchMap = new Map();
|
|
1028
|
-
|
|
1029
|
-
/**
|
|
1030
|
-
* A callback to parse Response body.
|
|
1031
|
-
*
|
|
1032
|
-
* @callback ResponseParser
|
|
1033
|
-
* @param {Fetch.Response} response
|
|
1034
|
-
* @returns {Promise}
|
|
1035
|
-
*/
|
|
1036
|
-
|
|
1037
|
-
/**
|
|
1038
|
-
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
1039
|
-
*
|
|
1040
|
-
* @param {String} uri
|
|
1041
|
-
* @param {Object} [options={}]
|
|
1042
|
-
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
1043
|
-
* @returns {Promise}
|
|
1044
|
-
*/
|
|
1045
|
-
const cacheFetch = (uri, options = {}) => {
|
|
1046
|
-
const responseParser = options.responseParser || ((response) => response.text());
|
|
1047
|
-
if (!_fetchMap.has(uri)) {
|
|
1048
|
-
_fetchMap.set(uri, fetch(uri).then(responseParser));
|
|
1049
|
-
}
|
|
1050
|
-
return _fetchMap.get(uri);
|
|
1051
|
-
};
|
|
1052
|
-
|
|
1053
|
-
var styleCss$4 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
1054
|
-
|
|
1055
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1056
|
-
// See LICENSE in the project root for license information.
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
1060
|
-
/**
|
|
1061
|
-
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
1062
|
-
*/
|
|
1063
|
-
|
|
1064
|
-
// build the component class
|
|
1065
|
-
class BaseIcon extends AuroElement$1 {
|
|
1066
|
-
constructor() {
|
|
1067
|
-
super();
|
|
1068
|
-
this.onDark = false;
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
// function to define props used within the scope of this component
|
|
1072
|
-
static get properties() {
|
|
1073
|
-
return {
|
|
1074
|
-
...super.properties,
|
|
1075
|
-
|
|
1076
|
-
/**
|
|
1077
|
-
* Set value for on-dark version of auro-icon.
|
|
1078
|
-
*/
|
|
1079
|
-
onDark: {
|
|
1080
|
-
type: Boolean,
|
|
1081
|
-
reflect: true
|
|
1082
|
-
},
|
|
1083
|
-
|
|
1084
|
-
/**
|
|
1085
|
-
* @private
|
|
1086
|
-
*/
|
|
1087
|
-
svg: {
|
|
1088
|
-
attribute: false,
|
|
1089
|
-
reflect: true
|
|
1090
|
-
}
|
|
1091
|
-
};
|
|
1092
|
-
}
|
|
1093
|
-
|
|
1094
|
-
static get styles() {
|
|
1095
|
-
return i$5`
|
|
1096
|
-
${styleCss$4}
|
|
1097
|
-
`;
|
|
1098
|
-
}
|
|
1099
|
-
|
|
1100
|
-
/**
|
|
1101
|
-
* Async function to fetch requested icon from npm CDN.
|
|
1102
|
-
* @private
|
|
1103
|
-
* @param {string} category - Icon category.
|
|
1104
|
-
* @param {string} name - Icon name.
|
|
1105
|
-
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
1106
|
-
*/
|
|
1107
|
-
async fetchIcon(category, name) {
|
|
1108
|
-
let iconHTML = '';
|
|
1109
|
-
|
|
1110
|
-
if (category === 'logos') {
|
|
1111
|
-
iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
|
|
1112
|
-
} else {
|
|
1113
|
-
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
1114
|
-
}
|
|
1115
|
-
|
|
1116
|
-
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
1117
|
-
|
|
1118
|
-
return dom.body.querySelector('svg');
|
|
1119
|
-
}
|
|
1120
|
-
|
|
1121
|
-
// lifecycle function
|
|
1122
|
-
async firstUpdated() {
|
|
1123
|
-
try {
|
|
1124
|
-
if (!this.customSvg) {
|
|
1125
|
-
const svg = await this.fetchIcon(this.category, this.name);
|
|
1126
|
-
|
|
1127
|
-
if (svg) {
|
|
1128
|
-
this.svg = svg;
|
|
1129
|
-
} else if (!svg) {
|
|
1130
|
-
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
1131
|
-
|
|
1132
|
-
this.svg = penDOM.body.firstChild;
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
// eslint-disable-next-line no-unused-vars
|
|
1136
|
-
} catch (err) {
|
|
1137
|
-
this.svg = undefined;
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
}
|
|
1141
|
-
|
|
1142
|
-
var tokensCss$4 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
1143
|
-
|
|
1144
|
-
var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
1145
|
-
|
|
1146
|
-
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1147
|
-
// See LICENSE in the project root for license information.
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
class AuroIcon extends BaseIcon {
|
|
1151
|
-
constructor() {
|
|
1152
|
-
super();
|
|
1153
|
-
|
|
1154
|
-
this.variant = undefined;
|
|
1155
|
-
this.privateDefaults();
|
|
1156
|
-
}
|
|
1157
|
-
|
|
1158
|
-
/**
|
|
1159
|
-
* Internal Defaults.
|
|
1160
|
-
* @private
|
|
1161
|
-
* @returns {void}
|
|
1162
|
-
*/
|
|
1163
|
-
privateDefaults() {
|
|
1164
|
-
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1165
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
|
-
// function to define props used within the scope of this component
|
|
1169
|
-
static get properties() {
|
|
1170
|
-
return {
|
|
1171
|
-
...super.properties,
|
|
1172
|
-
|
|
1173
|
-
/**
|
|
1174
|
-
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
1175
|
-
*/
|
|
1176
|
-
ariaHidden: {
|
|
1177
|
-
type: String,
|
|
1178
|
-
reflect: true
|
|
1179
|
-
},
|
|
1180
|
-
|
|
1181
|
-
/**
|
|
1182
|
-
* The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
1183
|
-
*/
|
|
1184
|
-
category: {
|
|
1185
|
-
type: String,
|
|
1186
|
-
reflect: true
|
|
1187
|
-
},
|
|
1188
|
-
|
|
1189
|
-
/**
|
|
1190
|
-
* Allows custom color to be set.
|
|
1191
|
-
*/
|
|
1192
|
-
customColor: {
|
|
1193
|
-
type: Boolean,
|
|
1194
|
-
reflect: true
|
|
1195
|
-
},
|
|
1196
|
-
|
|
1197
|
-
/**
|
|
1198
|
-
* When true, auro-icon will render a custom SVG inside the default slot.
|
|
1199
|
-
*/
|
|
1200
|
-
customSvg: {
|
|
1201
|
-
type: Boolean
|
|
1202
|
-
},
|
|
1203
|
-
|
|
1204
|
-
/**
|
|
1205
|
-
* Exposes content in slot as icon label.
|
|
1206
|
-
*/
|
|
1207
|
-
label: {
|
|
1208
|
-
type: Boolean,
|
|
1209
|
-
reflect: true
|
|
1210
|
-
},
|
|
1211
|
-
|
|
1212
|
-
/**
|
|
1213
|
-
* The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage.
|
|
1214
|
-
*/
|
|
1215
|
-
name: {
|
|
1216
|
-
type: String,
|
|
1217
|
-
reflect: true
|
|
1218
|
-
},
|
|
1219
|
-
|
|
1220
|
-
/**
|
|
1221
|
-
* The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `tierOneWorldEmerald`, `tierOneWorldSapphire`, `tierOneWorldRuby`.
|
|
1222
|
-
*/
|
|
1223
|
-
variant: {
|
|
1224
|
-
type: String,
|
|
1225
|
-
reflect: true
|
|
1226
|
-
}
|
|
1227
|
-
};
|
|
1228
|
-
}
|
|
1229
|
-
|
|
1230
|
-
static get styles() {
|
|
1231
|
-
return [
|
|
1232
|
-
super.styles,
|
|
1233
|
-
i$5`${tokensCss$4}`,
|
|
1234
|
-
i$5`${styleCss$4}`,
|
|
1235
|
-
i$5`${colorCss$4}`
|
|
1236
|
-
];
|
|
1237
|
-
}
|
|
1238
|
-
|
|
1239
|
-
/**
|
|
1240
|
-
* This will register this element with the browser.
|
|
1241
|
-
* @param {string} [name="auro-icon"] - The name of element that you want to register to.
|
|
1242
|
-
*
|
|
1243
|
-
* @example
|
|
1244
|
-
* AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
|
|
1245
|
-
*
|
|
1246
|
-
*/
|
|
1247
|
-
static register(name = "auro-icon") {
|
|
1248
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
|
|
1249
|
-
}
|
|
1250
|
-
|
|
1251
|
-
connectedCallback() {
|
|
1252
|
-
super.connectedCallback();
|
|
1253
|
-
|
|
1254
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
1255
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
1256
|
-
}
|
|
1257
|
-
|
|
1258
|
-
/**
|
|
1259
|
-
* @private
|
|
1260
|
-
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
1261
|
-
*/
|
|
1262
|
-
exposeCssParts() {
|
|
1263
|
-
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
1264
|
-
}
|
|
1265
|
-
|
|
1266
|
-
async firstUpdated() {
|
|
1267
|
-
await super.firstUpdated();
|
|
1268
|
-
|
|
1269
|
-
/**
|
|
1270
|
-
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
1271
|
-
* depend on this description to provide context for the user using a screen reader.
|
|
1272
|
-
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
1273
|
-
*/
|
|
1274
|
-
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
1275
|
-
const svgDesc = this.svg.querySelector('desc');
|
|
1276
|
-
|
|
1277
|
-
if (svgDesc) {
|
|
1278
|
-
svgDesc.remove();
|
|
1279
|
-
this.svg.removeAttribute('aria-labelledby');
|
|
1280
|
-
}
|
|
1281
|
-
}
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1284
|
-
// function that renders the HTML and CSS into the scope of the component
|
|
1285
|
-
render() {
|
|
1286
|
-
const labelClasses = {
|
|
1287
|
-
'labelWrapper': true,
|
|
1288
|
-
'util_displayHiddenVisually': !this.label
|
|
1289
|
-
};
|
|
1290
|
-
|
|
1291
|
-
const svgClasses = {
|
|
1292
|
-
'svgWrapper': true,
|
|
1293
|
-
};
|
|
1294
|
-
|
|
1295
|
-
return x`
|
|
1296
|
-
<div class="componentWrapper">
|
|
1297
|
-
<div
|
|
1298
|
-
class="${e(svgClasses)}"
|
|
1299
|
-
title="${o(this.title || undefined)}">
|
|
1300
|
-
<span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
|
|
1301
|
-
${this.customSvg ? x`
|
|
1302
|
-
<slot name="svg"></slot>
|
|
1303
|
-
` : x`
|
|
1304
|
-
${this.svg}
|
|
1305
|
-
`
|
|
1306
|
-
}
|
|
1307
|
-
</span>
|
|
1308
|
-
</div>
|
|
1309
|
-
|
|
1310
|
-
<div class="${e(labelClasses)}">
|
|
1311
|
-
<slot></slot>
|
|
1312
|
-
</div>
|
|
1313
|
-
</div>
|
|
1314
|
-
`;
|
|
1315
|
-
}
|
|
1316
|
-
}
|
|
1317
|
-
|
|
1318
|
-
var iconVersion = '8.1.4';
|
|
1319
|
-
|
|
1320
|
-
/**
|
|
1321
|
-
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
1322
|
-
*/
|
|
1323
|
-
const _observers = new WeakMap();
|
|
1324
|
-
|
|
1325
|
-
/**
|
|
1326
|
-
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
1327
|
-
* Structure: {
|
|
1328
|
-
* host: {
|
|
1329
|
-
* matchers: Set<Function>,
|
|
1330
|
-
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
1331
|
-
* }
|
|
1332
|
-
* }
|
|
1333
|
-
*/
|
|
1334
|
-
const _transportConfig = new WeakMap();
|
|
1335
|
-
|
|
1336
|
-
/**
|
|
1337
|
-
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
1338
|
-
*
|
|
1339
|
-
* @param {Object} params - The parameters for the function.
|
|
1340
|
-
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
1341
|
-
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
1342
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
1343
|
-
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
1344
|
-
* @returns {Function} A function to detach the observer when no longer needed.
|
|
1345
|
-
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
1346
|
-
*/
|
|
1347
|
-
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
1348
|
-
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
1349
|
-
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
1350
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
|
-
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
1354
|
-
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
1355
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
1356
|
-
}
|
|
1357
|
-
|
|
1358
|
-
// Guard Clause: Ensure match is a function
|
|
1359
|
-
if (typeof match !== 'function') {
|
|
1360
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
1361
|
-
}
|
|
1362
|
-
|
|
1363
|
-
// Guard Clause: Ensure removeOriginal is a boolean
|
|
1364
|
-
if (typeof removeOriginal !== 'boolean') {
|
|
1365
|
-
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
|
-
// Register this transport and get cleanup function
|
|
1369
|
-
return _registerTransport({
|
|
1370
|
-
host,
|
|
1371
|
-
target,
|
|
1372
|
-
matcher: match,
|
|
1373
|
-
removeOriginal
|
|
1374
|
-
});
|
|
1375
|
-
};
|
|
1376
|
-
|
|
1377
|
-
/**
|
|
1378
|
-
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
1379
|
-
*
|
|
1380
|
-
* @param {Object} params - The parameters object.
|
|
1381
|
-
* @param {HTMLElement} params.host - The host element to observe.
|
|
1382
|
-
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
1383
|
-
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
1384
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
1385
|
-
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
1386
|
-
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
1387
|
-
* @private
|
|
1388
|
-
*/
|
|
1389
|
-
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
1390
|
-
// Initialize config for this host if it doesn't exist
|
|
1391
|
-
if (!_transportConfig.has(host)) {
|
|
1392
|
-
_transportConfig.set(host, {
|
|
1393
|
-
matchers: new Set(),
|
|
1394
|
-
targets: new Map()
|
|
1395
|
-
});
|
|
1396
|
-
}
|
|
1397
|
-
|
|
1398
|
-
const config = _transportConfig.get(host);
|
|
1399
|
-
|
|
1400
|
-
// Add the matcher to the set of matchers for this host
|
|
1401
|
-
config.matchers.add(matcher);
|
|
1402
|
-
|
|
1403
|
-
// Initialize target entry if it doesn't exist
|
|
1404
|
-
if (!config.targets.has(target)) {
|
|
1405
|
-
config.targets.set(target, new Map());
|
|
1406
|
-
}
|
|
1407
|
-
|
|
1408
|
-
// Store the matcher with its removeOriginal setting for this target
|
|
1409
|
-
config.targets.get(target).set(matcher, {
|
|
1410
|
-
removeOriginal,
|
|
1411
|
-
currentAttributes: new Map()
|
|
1412
|
-
});
|
|
1413
|
-
|
|
1414
|
-
// Perform initial attribute transport
|
|
1415
|
-
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
1416
|
-
|
|
1417
|
-
// Attach observer
|
|
1418
|
-
_attachObserver(host);
|
|
1419
|
-
|
|
1420
|
-
// Return cleanup function and utility functions
|
|
1421
|
-
return {
|
|
1422
|
-
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
1423
|
-
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
1424
|
-
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
1425
|
-
}
|
|
1426
|
-
};
|
|
1427
|
-
|
|
1428
|
-
/**
|
|
1429
|
-
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
1430
|
-
*
|
|
1431
|
-
* @param {HTMLElement} host - The host element
|
|
1432
|
-
* @param {HTMLElement} target - The target element
|
|
1433
|
-
* @param {Function} matcher - The matcher function
|
|
1434
|
-
* @private
|
|
1435
|
-
*/
|
|
1436
|
-
const _cleanupTransport = (host, target, matcher) => {
|
|
1437
|
-
const config = _transportConfig.get(host);
|
|
1438
|
-
if (!config) return;
|
|
1439
|
-
|
|
1440
|
-
// Remove this matcher from this target
|
|
1441
|
-
const targetMatchers = config.targets.get(target);
|
|
1442
|
-
if (targetMatchers) {
|
|
1443
|
-
targetMatchers.delete(matcher);
|
|
1444
|
-
|
|
1445
|
-
// If this target has no more matchers, remove it
|
|
1446
|
-
if (targetMatchers.size === 0) {
|
|
1447
|
-
config.targets.delete(target);
|
|
1448
|
-
}
|
|
1449
|
-
}
|
|
1450
|
-
|
|
1451
|
-
// Check if this matcher is still used by any target
|
|
1452
|
-
let matcherStillUsed = false;
|
|
1453
|
-
for (const matcherMap of config.targets.values()) {
|
|
1454
|
-
if (matcherMap.has(matcher)) {
|
|
1455
|
-
matcherStillUsed = true;
|
|
1456
|
-
break;
|
|
1457
|
-
}
|
|
1458
|
-
}
|
|
1459
|
-
|
|
1460
|
-
// If not used anymore, remove from matchers set
|
|
1461
|
-
if (!matcherStillUsed) {
|
|
1462
|
-
config.matchers.delete(matcher);
|
|
1463
|
-
}
|
|
1464
|
-
|
|
1465
|
-
// If no more targets or matchers, detach observer
|
|
1466
|
-
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
1467
|
-
_detachObserver(host);
|
|
1468
|
-
}
|
|
1469
|
-
};
|
|
1470
|
-
|
|
1471
|
-
/**
|
|
1472
|
-
* Generic function to transport attributes from a host element to a target element.
|
|
1473
|
-
*
|
|
1474
|
-
* @param {Object} params - The parameters object.
|
|
1475
|
-
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
1476
|
-
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
1477
|
-
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
1478
|
-
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
1479
|
-
* @returns {void}
|
|
1480
|
-
* @private
|
|
1481
|
-
*/
|
|
1482
|
-
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
1483
|
-
// Get a list of all matching attributes on the host element and their values
|
|
1484
|
-
const matchingAttributes = host.getAttributeNames()
|
|
1485
|
-
.filter(attr => matcher(attr))
|
|
1486
|
-
.reduce((acc, attr) => {
|
|
1487
|
-
acc[attr] = host.getAttribute(attr);
|
|
1488
|
-
return acc;
|
|
1489
|
-
}, {});
|
|
1490
|
-
|
|
1491
|
-
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
1492
|
-
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
1493
|
-
_setObservedAttribute(host, target, matcher, key, value);
|
|
1494
|
-
target.setAttribute(key, value);
|
|
1495
|
-
if (removeOriginal) {
|
|
1496
|
-
host.removeAttribute(key);
|
|
1497
|
-
}
|
|
1498
|
-
});
|
|
1499
|
-
};
|
|
1500
|
-
|
|
1501
|
-
/**
|
|
1502
|
-
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
1503
|
-
*
|
|
1504
|
-
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
1505
|
-
* @returns {MutationObserver} The observer instance.
|
|
1506
|
-
* @private
|
|
1507
|
-
*/
|
|
1508
|
-
const _attachObserver = (host) => {
|
|
1509
|
-
// If an observer for this host already exists, return it
|
|
1510
|
-
if (_observers.has(host)) {
|
|
1511
|
-
return _observers.get(host);
|
|
1512
|
-
}
|
|
1513
|
-
|
|
1514
|
-
// Create a new MutationObserver
|
|
1515
|
-
const observer = new MutationObserver((mutations) => {
|
|
1516
|
-
const config = _transportConfig.get(host);
|
|
1517
|
-
if (!config) return;
|
|
1518
|
-
|
|
1519
|
-
// For each mutation affecting attributes
|
|
1520
|
-
mutations
|
|
1521
|
-
.filter(mutation => mutation.type === 'attributes')
|
|
1522
|
-
.forEach(mutation => {
|
|
1523
|
-
const attributeName = mutation.attributeName;
|
|
1524
|
-
|
|
1525
|
-
// Find matchers that care about this attribute
|
|
1526
|
-
for (const matcher of config.matchers) {
|
|
1527
|
-
if (matcher(attributeName)) {
|
|
1528
|
-
// For each target that uses this matcher
|
|
1529
|
-
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
1530
|
-
if (matcherConfigs.has(matcher)) {
|
|
1531
|
-
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
1532
|
-
_transportAttributes({
|
|
1533
|
-
host,
|
|
1534
|
-
target,
|
|
1535
|
-
matcher,
|
|
1536
|
-
removeOriginal
|
|
1537
|
-
});
|
|
1538
|
-
}
|
|
1539
|
-
}
|
|
1540
|
-
}
|
|
1541
|
-
}
|
|
1542
|
-
});
|
|
1543
|
-
});
|
|
1544
|
-
|
|
1545
|
-
// Start observing attribute changes
|
|
1546
|
-
observer.observe(host, { attributes: true });
|
|
1547
|
-
|
|
1548
|
-
// Store the observer
|
|
1549
|
-
_observers.set(host, observer);
|
|
1550
|
-
|
|
1551
|
-
return observer;
|
|
1552
|
-
};
|
|
1553
|
-
|
|
1554
|
-
/**
|
|
1555
|
-
* Detaches and cleans up the MutationObserver for a given host element.
|
|
1556
|
-
*
|
|
1557
|
-
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
1558
|
-
* @private
|
|
1559
|
-
*/
|
|
1560
|
-
const _detachObserver = (host) => {
|
|
1561
|
-
if (_observers.has(host)) {
|
|
1562
|
-
const observer = _observers.get(host);
|
|
1563
|
-
observer.disconnect();
|
|
1564
|
-
_observers.delete(host);
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1567
|
-
// Clean up the transport config as well
|
|
1568
|
-
if (_transportConfig.has(host)) {
|
|
1569
|
-
_transportConfig.delete(host);
|
|
1570
|
-
}
|
|
1571
|
-
};
|
|
1572
|
-
|
|
1573
|
-
/**
|
|
1574
|
-
* Gets the matcher configuration for a specific host, target, and matcher
|
|
1575
|
-
* @param {HTMLElement} host - The host element
|
|
1576
|
-
* @param {HTMLElement} target - The target element
|
|
1577
|
-
* @param {Function} matcher - The matcher function
|
|
1578
|
-
* @returns {Object|undefined} The matcher configuration if found
|
|
1579
|
-
* @private
|
|
1580
|
-
*/
|
|
1581
|
-
const _getMatcherConfig = (host, target, matcher) => {
|
|
1582
|
-
const config = _transportConfig.get(host);
|
|
1583
|
-
if (!config) return undefined;
|
|
1584
|
-
|
|
1585
|
-
const targetMatchers = config.targets.get(target);
|
|
1586
|
-
if (!targetMatchers) return undefined;
|
|
1587
|
-
|
|
1588
|
-
return targetMatchers.get(matcher);
|
|
1589
|
-
};
|
|
1590
|
-
|
|
1591
|
-
/**
|
|
1592
|
-
* Sets an observed attribute value
|
|
1593
|
-
* @param {HTMLElement} host - The host element
|
|
1594
|
-
* @param {HTMLElement} target - The target element
|
|
1595
|
-
* @param {Function} matcher - The matcher function
|
|
1596
|
-
* @param {string} key - The attribute name
|
|
1597
|
-
* @param {string} value - The attribute value
|
|
1598
|
-
* @private
|
|
1599
|
-
*/
|
|
1600
|
-
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
1601
|
-
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
1602
|
-
if (matcherConfig) {
|
|
1603
|
-
matcherConfig.currentAttributes.set(key, value);
|
|
1604
|
-
}
|
|
1605
|
-
};
|
|
1606
|
-
|
|
1607
|
-
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
1608
|
-
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
1609
|
-
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
1610
|
-
return undefined;
|
|
1611
|
-
};
|
|
1612
|
-
|
|
1613
|
-
const _getObservedAttributes = (host, target, matcher) => {
|
|
1614
|
-
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
1615
|
-
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
1616
|
-
return [];
|
|
1617
|
-
};
|
|
1618
|
-
|
|
1619
|
-
const _matchers = {
|
|
1620
|
-
'aria-': attr => attr.startsWith('aria-'),
|
|
1621
|
-
'role': attr => attr.match(/^role$/)
|
|
1622
|
-
};
|
|
1623
|
-
|
|
1624
|
-
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
1625
|
-
return transportAttributes({
|
|
1626
|
-
host,
|
|
1627
|
-
target,
|
|
1628
|
-
match: attr => {
|
|
1629
|
-
for (const key in _matchers) {
|
|
1630
|
-
if (_matchers[key](attr)) return true;
|
|
1631
|
-
}
|
|
1632
|
-
return false;
|
|
1633
|
-
},
|
|
1634
|
-
removeOriginal
|
|
1635
|
-
});
|
|
1636
|
-
};
|
|
1637
|
-
|
|
1638
|
-
class AuroElement extends i$2 {
|
|
1639
|
-
|
|
1640
|
-
/**
|
|
1641
|
-
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
1642
|
-
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
1643
|
-
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
1644
|
-
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
1645
|
-
* @private
|
|
1646
|
-
*/
|
|
1647
|
-
attributeWatcher;
|
|
1648
|
-
|
|
1649
|
-
static get properties() {
|
|
1650
|
-
return {
|
|
1651
|
-
|
|
1652
|
-
/**
|
|
1653
|
-
* Defines the layout of an element.
|
|
1654
|
-
* @default {'default'}
|
|
1655
|
-
*/
|
|
1656
|
-
layout: {
|
|
1657
|
-
type: String,
|
|
1658
|
-
attribute: "layout",
|
|
1659
|
-
reflect: true
|
|
1660
|
-
},
|
|
1661
|
-
|
|
1662
|
-
/**
|
|
1663
|
-
* Defines the shape of an element.
|
|
1664
|
-
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
1665
|
-
* @default {'default'}
|
|
1666
|
-
*/
|
|
1667
|
-
shape: {
|
|
1668
|
-
type: String,
|
|
1669
|
-
attribute: "shape",
|
|
1670
|
-
reflect: true
|
|
1671
|
-
},
|
|
1672
|
-
|
|
1673
|
-
/**
|
|
1674
|
-
* Defines the size of an element.
|
|
1675
|
-
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
1676
|
-
* @default {'md'}
|
|
1677
|
-
*/
|
|
1678
|
-
size: {
|
|
1679
|
-
type: String,
|
|
1680
|
-
attribute: "size",
|
|
1681
|
-
reflect: true
|
|
1682
|
-
},
|
|
1683
|
-
|
|
1684
|
-
/**
|
|
1685
|
-
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
1686
|
-
* @default {false}
|
|
1687
|
-
*/
|
|
1688
|
-
onDark: {
|
|
1689
|
-
type: Boolean,
|
|
1690
|
-
attribute: "ondark",
|
|
1691
|
-
reflect: true
|
|
1692
|
-
},
|
|
1693
|
-
|
|
1694
|
-
/**
|
|
1695
|
-
* A reference to the wrapper element in the shadow DOM.
|
|
1696
|
-
* This is used to apply layout and shape classes dynamically.
|
|
1697
|
-
* @type {HTMLElement|null}
|
|
1698
|
-
* @default {null}
|
|
1699
|
-
* @private
|
|
1700
|
-
*/
|
|
1701
|
-
wrapper: {
|
|
1702
|
-
attribute: false,
|
|
1703
|
-
reflect: false
|
|
1704
|
-
}
|
|
1705
|
-
};
|
|
1706
|
-
}
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
resetShapeClasses() {
|
|
1711
|
-
if (this.shape && this.size) {
|
|
1712
|
-
|
|
1713
|
-
if (this.wrapper) {
|
|
1714
|
-
this.wrapper.classList.forEach((className) => {
|
|
1715
|
-
if (className.startsWith('shape-')) {
|
|
1716
|
-
this.wrapper.classList.remove(className);
|
|
1717
|
-
}
|
|
1718
|
-
});
|
|
1719
|
-
|
|
1720
|
-
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
1721
|
-
}
|
|
1722
|
-
}
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
|
-
resetLayoutClasses() {
|
|
1726
|
-
if (this.layout) {
|
|
1727
|
-
if (this.wrapper) {
|
|
1728
|
-
this.wrapper.classList.forEach((className) => {
|
|
1729
|
-
if (className.startsWith('layout-')) {
|
|
1730
|
-
this.wrapper.classList.remove(className);
|
|
1731
|
-
}
|
|
1732
|
-
});
|
|
1733
|
-
|
|
1734
|
-
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
1735
|
-
}
|
|
1736
|
-
}
|
|
1737
|
-
}
|
|
1738
|
-
|
|
1739
|
-
updateComponentArchitecture() {
|
|
1740
|
-
this.resetLayoutClasses();
|
|
1741
|
-
this.resetShapeClasses();
|
|
1742
|
-
}
|
|
1743
|
-
|
|
1744
|
-
updated(changedProperties) {
|
|
1745
|
-
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
1746
|
-
this.updateComponentArchitecture();
|
|
1747
|
-
}
|
|
1748
|
-
}
|
|
1749
|
-
|
|
1750
|
-
firstUpdated() {
|
|
1751
|
-
super.firstUpdated();
|
|
1752
|
-
|
|
1753
|
-
// Set a reference to the wrapper element in the shadow DOM
|
|
1754
|
-
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
1755
|
-
|
|
1756
|
-
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
1757
|
-
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
1758
|
-
}
|
|
1759
|
-
|
|
1760
|
-
disconnectedCallback() {
|
|
1761
|
-
super.disconnectedCallback();
|
|
1762
|
-
|
|
1763
|
-
// Cleanup the ARIA observer if it exists
|
|
1764
|
-
if (this.attributeWatcher) {
|
|
1765
|
-
this.attributeWatcher.cleanup();
|
|
1766
|
-
this.attributeWatcher = null;
|
|
1767
|
-
}
|
|
1768
|
-
}
|
|
1769
|
-
|
|
1770
|
-
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
1771
|
-
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
1772
|
-
render() {
|
|
1773
|
-
try {
|
|
1774
|
-
return this.renderLayout();
|
|
1775
|
-
} catch (error) {
|
|
1776
|
-
// failed to get the defined layout
|
|
1777
|
-
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
1778
|
-
|
|
1779
|
-
// fallback to the default layout
|
|
1780
|
-
return this.getLayout('default');
|
|
1781
|
-
}
|
|
1782
|
-
}
|
|
1783
|
-
}
|
|
1784
|
-
|
|
1785
|
-
var styleCss$3 = 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.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, 0.75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}: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}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, 0.5rem)}.contentWrapper{font-size:0}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}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}`;
|
|
1786
|
-
|
|
1787
|
-
var colorCss$3 = 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)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--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)}:host([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)}:host([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)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--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)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([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)}:host([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)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--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}:host([variant=tertiary]:focus-within){--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)}:host([variant=tertiary][disabled]){--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-basic-color-texticon-disabled, #d0d0d0)}:host([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)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--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}:host([variant=ghost]:focus-within){--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)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--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)}: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)}:host([ondark]:not([disabled]):is([data-hover],[data-active])){--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)}:host([ondark]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([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)}:host([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)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--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))}:host([ondark][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([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)}:host([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)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--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))}:host([ondark][variant=tertiary]:focus-within){--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)}:host([ondark][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([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)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--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}:host([ondark][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within){--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)}`;
|
|
1788
|
-
|
|
1789
|
-
var tokensCss$3 = i$5`:host{--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)}`;
|
|
1790
|
-
|
|
1791
|
-
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}`;
|
|
1792
|
-
|
|
1793
|
-
var styleCss$2 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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}}`;
|
|
1794
|
-
|
|
1795
|
-
var colorCss$2 = 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}`;
|
|
1796
|
-
|
|
1797
|
-
var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
1798
|
-
|
|
1799
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1800
|
-
// See LICENSE in the project root for license information.
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
class AuroLoader extends i$2 {
|
|
1804
|
-
constructor() {
|
|
1805
|
-
super();
|
|
1806
|
-
|
|
1807
|
-
/**
|
|
1808
|
-
* @private
|
|
1809
|
-
*/
|
|
1810
|
-
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
1811
|
-
|
|
1812
|
-
/**
|
|
1813
|
-
* @private
|
|
1814
|
-
*/
|
|
1815
|
-
this.mdCount = 3;
|
|
1816
|
-
|
|
1817
|
-
/**
|
|
1818
|
-
* @private
|
|
1819
|
-
*/
|
|
1820
|
-
this.smCount = 2;
|
|
1821
|
-
|
|
1822
|
-
/**
|
|
1823
|
-
* @private
|
|
1824
|
-
*/
|
|
1825
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1826
|
-
|
|
1827
|
-
this.orbit = false;
|
|
1828
|
-
this.ringworm = false;
|
|
1829
|
-
this.laser = false;
|
|
1830
|
-
this.pulse = false;
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
// function to define props used within the scope of this component
|
|
1834
|
-
static get properties() {
|
|
1835
|
-
return {
|
|
1836
|
-
|
|
1837
|
-
/**
|
|
1838
|
-
* Sets loader to laser type.
|
|
1839
|
-
*/
|
|
1840
|
-
laser: {
|
|
1841
|
-
type: Boolean,
|
|
1842
|
-
reflect: true
|
|
1843
|
-
},
|
|
1844
|
-
|
|
1845
|
-
/**
|
|
1846
|
-
* Sets loader to orbit type.
|
|
1847
|
-
*/
|
|
1848
|
-
orbit: {
|
|
1849
|
-
type: Boolean,
|
|
1850
|
-
reflect: true
|
|
1851
|
-
},
|
|
1852
|
-
|
|
1853
|
-
/**
|
|
1854
|
-
* Sets loader to pulse type.
|
|
1855
|
-
*/
|
|
1856
|
-
pulse: {
|
|
1857
|
-
type: Boolean,
|
|
1858
|
-
reflect: true
|
|
1859
|
-
},
|
|
1860
|
-
|
|
1861
|
-
/**
|
|
1862
|
-
* Sets loader to ringworm type.
|
|
1863
|
-
*/
|
|
1864
|
-
ringworm: {
|
|
1865
|
-
type: Boolean,
|
|
1866
|
-
reflect: true
|
|
1867
|
-
}
|
|
1868
|
-
};
|
|
1869
|
-
}
|
|
1870
|
-
|
|
1871
|
-
static get styles() {
|
|
1872
|
-
return [
|
|
1873
|
-
i$5`${styleCss$2}`,
|
|
1874
|
-
i$5`${colorCss$2}`,
|
|
1875
|
-
i$5`${tokensCss$2}`
|
|
1876
|
-
];
|
|
1877
|
-
}
|
|
1878
|
-
|
|
1879
|
-
/**
|
|
1880
|
-
* This will register this element with the browser.
|
|
1881
|
-
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
1882
|
-
*
|
|
1883
|
-
* @example
|
|
1884
|
-
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
1885
|
-
*
|
|
1886
|
-
*/
|
|
1887
|
-
static register(name = "auro-loader") {
|
|
1888
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
1889
|
-
}
|
|
1890
|
-
|
|
1891
|
-
firstUpdated() {
|
|
1892
|
-
// Add the tag name as an attribute if it is different than the component name
|
|
1893
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
1894
|
-
}
|
|
1895
|
-
|
|
1896
|
-
connectedCallback() {
|
|
1897
|
-
super.connectedCallback();
|
|
1898
|
-
}
|
|
1899
|
-
|
|
1900
|
-
/**
|
|
1901
|
-
* @private
|
|
1902
|
-
* @returns {Array} Numbered array for template map.
|
|
1903
|
-
*/
|
|
1904
|
-
defineTemplate() {
|
|
1905
|
-
let nodes = Array.from(Array(this.mdCount).keys());
|
|
1906
|
-
|
|
1907
|
-
if (this.orbit || this.laser) {
|
|
1908
|
-
nodes = Array.from(Array(this.smCount).keys());
|
|
1909
|
-
} else if (this.ringworm) {
|
|
1910
|
-
nodes = Array.from(Array(0).keys());
|
|
1911
|
-
}
|
|
1912
|
-
|
|
1913
|
-
return nodes;
|
|
1914
|
-
}
|
|
1915
|
-
|
|
1916
|
-
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
1917
|
-
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
1918
|
-
|
|
1919
|
-
// function that renders the HTML and CSS into the scope of the component
|
|
1920
|
-
render() {
|
|
1921
|
-
return x`
|
|
1922
|
-
${this.defineTemplate().map((idx) => x`
|
|
1923
|
-
<span part="element" class="loader node-${idx}"></span>
|
|
1924
|
-
`)}
|
|
1925
|
-
|
|
1926
|
-
<div class="no-animation body-default">Loading...</div>
|
|
1927
|
-
|
|
1928
|
-
${this.ringworm ? x`
|
|
1929
|
-
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
1930
|
-
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
1931
|
-
</svg>`
|
|
1932
|
-
: ``
|
|
1933
|
-
}
|
|
1934
|
-
`;
|
|
1935
|
-
}
|
|
1936
|
-
}
|
|
1937
|
-
|
|
1938
|
-
var loaderVersion = '5.1.2';
|
|
1939
|
-
|
|
1940
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1941
|
-
// See LICENSE in the project root for license information.
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
/**
|
|
1945
|
-
* @slot - Default slot for the text of the button.
|
|
1946
|
-
* @csspart button - Apply CSS to HTML5 button.
|
|
1947
|
-
* @csspart loader - Apply CSS to auro-loader.
|
|
1948
|
-
* @csspart text - Apply CSS to text slot.
|
|
1949
|
-
* @csspart icon - Apply CSS to icon slot.
|
|
1950
|
-
*/
|
|
1951
|
-
|
|
1952
|
-
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
1953
|
-
|
|
1954
|
-
/**
|
|
1955
|
-
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
1956
|
-
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
1957
|
-
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
1958
|
-
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
1959
|
-
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
1960
|
-
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
1961
|
-
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
1962
|
-
*/
|
|
1963
|
-
class AuroButton extends AuroElement {
|
|
1964
|
-
|
|
1965
|
-
/**
|
|
1966
|
-
* Enables form association for this element.
|
|
1967
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
|
1968
|
-
* @returns {boolean} - Returns true to enable form association.
|
|
1969
|
-
*/
|
|
1970
|
-
static get formAssociated() {
|
|
1971
|
-
return true;
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1974
|
-
constructor() {
|
|
1975
|
-
super();
|
|
1976
|
-
this.autofocus = false;
|
|
1977
|
-
this.disabled = false;
|
|
1978
|
-
this.loading = false;
|
|
1979
|
-
this.static = false;
|
|
1980
|
-
this.size = "md";
|
|
1981
|
-
this.shape = "rounded";
|
|
1982
|
-
this.onDark = false;
|
|
1983
|
-
this.fluid = false;
|
|
1984
|
-
this.loadingText = this.loadingText || 'Loading...';
|
|
1985
|
-
this.variant = 'primary';
|
|
1986
|
-
|
|
1987
|
-
/**
|
|
1988
|
-
* @private
|
|
1989
|
-
*/
|
|
1990
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1991
|
-
|
|
1992
|
-
// Support for HTML5 forms
|
|
1993
|
-
if (typeof this.attachInternals === 'function') {
|
|
1994
|
-
this.internals = this.attachInternals();
|
|
1995
|
-
} else {
|
|
1996
|
-
this.internals = null;
|
|
1997
|
-
|
|
1998
|
-
// eslint-disable-next-line no-console
|
|
1999
|
-
console.warn('This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually.');
|
|
2000
|
-
}
|
|
2001
|
-
|
|
2002
|
-
/**
|
|
2003
|
-
* Generate unique names for dependency components.
|
|
2004
|
-
*/
|
|
2005
|
-
const versioning = new AuroDependencyVersioning();
|
|
2006
|
-
|
|
2007
|
-
/**
|
|
2008
|
-
* @private
|
|
2009
|
-
*/
|
|
2010
|
-
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
2011
|
-
|
|
2012
|
-
/**
|
|
2013
|
-
* @private
|
|
2014
|
-
*/
|
|
2015
|
-
this.buttonHref = undefined;
|
|
2016
|
-
|
|
2017
|
-
/**
|
|
2018
|
-
* @private
|
|
2019
|
-
*/
|
|
2020
|
-
this.buttonTarget = undefined;
|
|
2021
|
-
|
|
2022
|
-
/**
|
|
2023
|
-
* @private
|
|
2024
|
-
*/
|
|
2025
|
-
this.buttonRel = undefined;
|
|
2026
|
-
}
|
|
2027
|
-
|
|
2028
|
-
static get styles() {
|
|
2029
|
-
return [
|
|
2030
|
-
tokensCss$3,
|
|
2031
|
-
styleCss$3,
|
|
2032
|
-
colorCss$3,
|
|
2033
|
-
shapeSize
|
|
2034
|
-
];
|
|
2035
|
-
}
|
|
2036
|
-
|
|
2037
|
-
static get properties() {
|
|
2038
|
-
return {
|
|
2039
|
-
|
|
2040
|
-
...super.properties,
|
|
2041
|
-
|
|
2042
|
-
/**
|
|
2043
|
-
* Override layout since it isn't used in this component.
|
|
2044
|
-
* @private
|
|
2045
|
-
*/
|
|
2046
|
-
layout: {
|
|
2047
|
-
type: Boolean,
|
|
2048
|
-
attribute: false,
|
|
2049
|
-
reflect: false
|
|
2050
|
-
},
|
|
2051
|
-
|
|
2052
|
-
/**
|
|
2053
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
2054
|
-
*/
|
|
2055
|
-
autofocus: {
|
|
2056
|
-
type: Boolean,
|
|
2057
|
-
reflect: true
|
|
2058
|
-
},
|
|
2059
|
-
|
|
2060
|
-
/**
|
|
2061
|
-
* If set to true, button will become disabled and not allow for interactions.
|
|
2062
|
-
*/
|
|
2063
|
-
disabled: {
|
|
2064
|
-
type: Boolean,
|
|
2065
|
-
reflect: true
|
|
2066
|
-
},
|
|
2067
|
-
|
|
2068
|
-
/**
|
|
2069
|
-
* Alters the shape of the button to be full width of its parent container.
|
|
2070
|
-
*/
|
|
2071
|
-
fluid: {
|
|
2072
|
-
type: Boolean,
|
|
2073
|
-
reflect: true
|
|
2074
|
-
},
|
|
2075
|
-
|
|
2076
|
-
/**
|
|
2077
|
-
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
2078
|
-
*/
|
|
2079
|
-
loading: {
|
|
2080
|
-
type: Boolean,
|
|
2081
|
-
reflect: true
|
|
2082
|
-
},
|
|
2083
|
-
|
|
2084
|
-
/**
|
|
2085
|
-
* 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.
|
|
2086
|
-
*/
|
|
2087
|
-
loadingText: {
|
|
2088
|
-
type: String
|
|
2089
|
-
},
|
|
2090
|
-
|
|
2091
|
-
/**
|
|
2092
|
-
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
2093
|
-
*/
|
|
2094
|
-
tIndex: {
|
|
2095
|
-
type: String,
|
|
2096
|
-
reflect: true
|
|
2097
|
-
},
|
|
2098
|
-
|
|
2099
|
-
/**
|
|
2100
|
-
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
2101
|
-
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
2102
|
-
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
2103
|
-
*/
|
|
2104
|
-
tabindex: {
|
|
2105
|
-
type: String,
|
|
2106
|
-
reflect: false
|
|
2107
|
-
},
|
|
2108
|
-
|
|
2109
|
-
/**
|
|
2110
|
-
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
2111
|
-
*/
|
|
2112
|
-
title: {
|
|
2113
|
-
type: String,
|
|
2114
|
-
reflect: true
|
|
2115
|
-
},
|
|
2116
|
-
|
|
2117
|
-
/**
|
|
2118
|
-
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
2119
|
-
*/
|
|
2120
|
-
type: {
|
|
2121
|
-
type: String,
|
|
2122
|
-
reflect: true
|
|
2123
|
-
},
|
|
2124
|
-
|
|
2125
|
-
/**
|
|
2126
|
-
* Defines the value associated with the button which is submitted with the form data.
|
|
2127
|
-
*/
|
|
2128
|
-
value: {
|
|
2129
|
-
type: String,
|
|
2130
|
-
reflect: true
|
|
2131
|
-
},
|
|
2132
|
-
|
|
2133
|
-
/**
|
|
2134
|
-
* Sets button variant option.
|
|
2135
|
-
* @default primary
|
|
2136
|
-
*/
|
|
2137
|
-
variant: {
|
|
2138
|
-
type: String,
|
|
2139
|
-
reflect: true
|
|
2140
|
-
},
|
|
2141
|
-
|
|
2142
|
-
/**
|
|
2143
|
-
* @private
|
|
2144
|
-
*/
|
|
2145
|
-
buttonHref: {
|
|
2146
|
-
type: String,
|
|
2147
|
-
},
|
|
2148
|
-
|
|
2149
|
-
/**
|
|
2150
|
-
* @private
|
|
2151
|
-
*/
|
|
2152
|
-
buttonTarget: {
|
|
2153
|
-
type: String,
|
|
2154
|
-
},
|
|
2155
|
-
|
|
2156
|
-
/**
|
|
2157
|
-
* @private
|
|
2158
|
-
*/
|
|
2159
|
-
buttonRel: {
|
|
2160
|
-
type: String,
|
|
2161
|
-
},
|
|
2162
|
-
|
|
2163
|
-
/**
|
|
2164
|
-
* If true, the button will be static and not respond to user interactions.
|
|
2165
|
-
*/
|
|
2166
|
-
static: {
|
|
2167
|
-
type: Boolean,
|
|
2168
|
-
reflect: true
|
|
2169
|
-
},
|
|
2170
|
-
|
|
2171
|
-
/**
|
|
2172
|
-
* @private
|
|
2173
|
-
*/
|
|
2174
|
-
onHover: {
|
|
2175
|
-
attribute: 'data-hover',
|
|
2176
|
-
type: Boolean,
|
|
2177
|
-
reflect: true
|
|
2178
|
-
},
|
|
2179
|
-
|
|
2180
|
-
/**
|
|
2181
|
-
* @private
|
|
2182
|
-
*/
|
|
2183
|
-
onActive: {
|
|
2184
|
-
attribute: 'data-active',
|
|
2185
|
-
type: Boolean,
|
|
2186
|
-
reflect: true
|
|
2187
|
-
}
|
|
2188
|
-
};
|
|
2189
|
-
}
|
|
2190
|
-
|
|
2191
|
-
/**
|
|
2192
|
-
* This will register this element with the browser.
|
|
2193
|
-
* @param {string} [name="auro-button"] - The name of element that you want to register to.
|
|
2194
|
-
*
|
|
2195
|
-
* @example
|
|
2196
|
-
* AuroButton.register("custom-button") // this will register this element to <custom-button/>
|
|
2197
|
-
*
|
|
2198
|
-
*/
|
|
2199
|
-
static register(name = "auro-button") {
|
|
2200
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
2201
|
-
}
|
|
2202
|
-
|
|
2203
|
-
/**
|
|
2204
|
-
* Internal method to apply focus to the HTML5 button.
|
|
2205
|
-
* @private
|
|
2206
|
-
* @returns {void}
|
|
2207
|
-
*/
|
|
2208
|
-
focus() {
|
|
2209
|
-
this.renderRoot.querySelector('button').focus();
|
|
2210
|
-
}
|
|
2211
|
-
|
|
2212
|
-
/**
|
|
2213
|
-
* Submits the form that this button is associated with.
|
|
2214
|
-
* @private
|
|
2215
|
-
* @returns {void}
|
|
2216
|
-
*/
|
|
2217
|
-
surfaceSubmitEvent() {
|
|
2218
|
-
if (this.form) {
|
|
2219
|
-
this.form.requestSubmit();
|
|
2220
|
-
}
|
|
2221
|
-
}
|
|
2222
|
-
|
|
2223
|
-
/**
|
|
2224
|
-
* Returns the form element that this button is associated with.
|
|
2225
|
-
* @private
|
|
2226
|
-
* @returns {HTMLFormElement | null}
|
|
2227
|
-
*/
|
|
2228
|
-
get form() {
|
|
2229
|
-
return this.internals ? this.internals.form : null;
|
|
2230
|
-
}
|
|
2231
|
-
|
|
2232
|
-
/**
|
|
2233
|
-
* @private
|
|
2234
|
-
* @returns {Boolean}
|
|
2235
|
-
*/
|
|
2236
|
-
get showText() {
|
|
2237
|
-
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
2238
|
-
}
|
|
2239
|
-
|
|
2240
|
-
/**
|
|
2241
|
-
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
2242
|
-
* @returns {string | undefined}
|
|
2243
|
-
* @private
|
|
2244
|
-
*/
|
|
2245
|
-
get currentAriaLabel() {
|
|
2246
|
-
if (!this.attributeWatcher) return undefined;
|
|
2247
|
-
|
|
2248
|
-
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
2249
|
-
return ariaLabel || undefined;
|
|
2250
|
-
}
|
|
2251
|
-
|
|
2252
|
-
/**
|
|
2253
|
-
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
2254
|
-
* @returns {string | undefined}
|
|
2255
|
-
* @private
|
|
2256
|
-
*/
|
|
2257
|
-
get currentAriaLabelledBy() {
|
|
2258
|
-
if (!this.attributeWatcher) return undefined;
|
|
2259
|
-
|
|
2260
|
-
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
2261
|
-
return ariaLabelledBy || undefined;
|
|
2262
|
-
}
|
|
2263
|
-
|
|
2264
|
-
/**
|
|
2265
|
-
* Whether or not the button is set to an icon-only shape.
|
|
2266
|
-
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
2267
|
-
* @private
|
|
2268
|
-
*/
|
|
2269
|
-
get iconOnly() {
|
|
2270
|
-
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
2271
|
-
}
|
|
2272
|
-
|
|
2273
|
-
/**
|
|
2274
|
-
* Gets a class name for the font size based on the button's size and shape.
|
|
2275
|
-
* @returns {string} - The font size class name.
|
|
2276
|
-
* @private
|
|
2277
|
-
*/
|
|
2278
|
-
getFontSize() {
|
|
2279
|
-
|
|
2280
|
-
// Size map for standard buttons
|
|
2281
|
-
const standardButtonSizeMap = {
|
|
2282
|
-
xs: 'body-xs',
|
|
2283
|
-
sm: 'body-sm',
|
|
2284
|
-
md: 'body-default',
|
|
2285
|
-
lg: 'body-lg',
|
|
2286
|
-
xl: 'body-lg'
|
|
2287
|
-
};
|
|
2288
|
-
|
|
2289
|
-
// Size map for icon-only buttons
|
|
2290
|
-
const iconOnlyButtonSizeMap = {
|
|
2291
|
-
xs: 'heading-xs',
|
|
2292
|
-
sm: 'heading-sm',
|
|
2293
|
-
md: 'heading-sm',
|
|
2294
|
-
lg: 'heading-md',
|
|
2295
|
-
xl: 'heading-lg'
|
|
2296
|
-
};
|
|
2297
|
-
|
|
2298
|
-
// Determine which map to use based on the shape
|
|
2299
|
-
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
2300
|
-
|
|
2301
|
-
// Return the font size based on the button size and shape
|
|
2302
|
-
return sizeMap[this.size] || 'body-default';
|
|
2303
|
-
}
|
|
2304
|
-
|
|
2305
|
-
/**
|
|
2306
|
-
* Renders the tag for the component.
|
|
2307
|
-
* @returns {TemplateResult}
|
|
2308
|
-
* @private
|
|
2309
|
-
*/
|
|
2310
|
-
get _renderTag() {
|
|
2311
|
-
if (this.static) return i$1`span`;
|
|
2312
|
-
|
|
2313
|
-
return this.buttonHref ? i$1`a` : i$1`button`;
|
|
2314
|
-
}
|
|
29
|
+
* Copyright 2017 Google LLC
|
|
30
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
+
*/
|
|
32
|
+
const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
|
|
2315
33
|
|
|
2316
|
-
|
|
2317
|
-
|
|
34
|
+
/**
|
|
35
|
+
* @license
|
|
36
|
+
* Copyright 2018 Google LLC
|
|
37
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
+
*/const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}});
|
|
2318
39
|
|
|
2319
|
-
|
|
2320
|
-
|
|
40
|
+
/**
|
|
41
|
+
* @license
|
|
42
|
+
* Copyright 2018 Google LLC
|
|
43
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
|
+
*/const o$3=o=>o??E$1;
|
|
2321
45
|
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
onPointerEvent(event) {
|
|
2329
|
-
switch (event.type) {
|
|
2330
|
-
case 'pointerenter':
|
|
2331
|
-
this.onHover = true;
|
|
2332
|
-
break;
|
|
2333
|
-
case 'pointerleave':
|
|
2334
|
-
this.onHover = false;
|
|
2335
|
-
break;
|
|
2336
|
-
case 'pointerdown':
|
|
2337
|
-
this.onActive = true;
|
|
2338
|
-
break;
|
|
2339
|
-
case 'pointerup':
|
|
2340
|
-
case 'blur':
|
|
2341
|
-
this.onActive = false;
|
|
2342
|
-
break;
|
|
2343
|
-
}
|
|
2344
|
-
}
|
|
46
|
+
/**
|
|
47
|
+
* @license
|
|
48
|
+
* Copyright 2020 Google LLC
|
|
49
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
|
+
*/
|
|
51
|
+
const a=Symbol.for(""),o$2=t=>{if(t?.r===a)return t?._$litStatic$},s$1=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$2(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u$1=n$2(x$1);
|
|
2345
52
|
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
renderLayoutDefault() {
|
|
53
|
+
/**
|
|
54
|
+
* @license
|
|
55
|
+
* Copyright 2020 Google LLC
|
|
56
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
|
+
*/const f$2=o=>void 0===o.strings;
|
|
2352
58
|
|
|
2353
|
-
|
|
2354
|
-
|
|
59
|
+
/**
|
|
60
|
+
* @license
|
|
61
|
+
* Copyright 2017 Google LLC
|
|
62
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
63
|
+
*/const s=(i,t)=>{const e=i._$AN;if(void 0===e)return false;for(const i of e)i._$AO?.(t,false),s(i,t);return true},o$1=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t);}};function h$2(i){ void 0!==this._$AN?(o$1(this),this._$AM=i,r(this)):this._$AM=i;}function n$1(i,t=false,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],false),o$1(r[i]);else null!=r&&(s(r,false),o$1(r));else s(this,i);}const c=i=>{i.type==t.CHILD&&(i._$AP??=n$1,i._$AQ??=h$2);};let f$1 = class f extends i$1{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU;}_$AO(i,t=true){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o$1(this));}setValue(t){if(f$2(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}};
|
|
2355
64
|
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
65
|
+
/**
|
|
66
|
+
* @license
|
|
67
|
+
* Copyright 2020 Google LLC
|
|
68
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
69
|
+
*/const e=()=>new h$1;let h$1 = class h{};const o=new WeakMap,n=e$2(class extends f$1{render(i){return E$1}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),E$1}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o.get(i);void 0===s&&(s=new WeakMap,o.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
|
|
2361
70
|
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
71
|
+
let d=class{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,o=(t,r=t&&t.closest(e))=>t&&t!==document&&t!==window?r||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,true);}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}};let h=class extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(e){return e?"true":"false"}};const u=new Map,p=(e,t={})=>{const o=t.responseParser||(e=>e.text());return u.has(e)||u.set(e,fetch(e).then(o)),u.get(e)};var v=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
72
|
+
`;let b=class extends h{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...h.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return v}async fetchIcon(e,t){let o="";return o="logos"===e?await p(`${this.uri}/${e}/${t}.svg`):await p(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(o,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=(new DOMParser).parseFromString('<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>',"text/html");this.svg=e.body.firstChild;}}}catch(e){this.svg=void 0;}}};i$5`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
73
|
+
`;var f=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
74
|
+
`,m=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
75
|
+
`;let g=class e extends b{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new d;}static get properties(){return {...b.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [b.styles,f,v,m]}static register(t="auro-icon"){d.prototype.registerComponent(t,e);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const e=this.svg.querySelector("desc");e&&(e.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const e={labelWrapper:true,util_displayHiddenVisually:!this.label};return x$1`
|
|
76
|
+
<div class="componentWrapper">
|
|
77
|
+
<div
|
|
78
|
+
class="${e$1({svgWrapper:true})}"
|
|
79
|
+
title="${o$3(this.title||void 0)}">
|
|
80
|
+
<span aria-hidden="${o$3(this.ariaHidden||true)}" part="svg">
|
|
81
|
+
${this.customSvg?x$1`
|
|
82
|
+
<slot name="svg"></slot>
|
|
83
|
+
`:x$1`
|
|
84
|
+
${this.svg}
|
|
85
|
+
`}
|
|
86
|
+
</span>
|
|
87
|
+
</div>
|
|
2366
88
|
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
89
|
+
<div class="${e$1(e)}" part="label">
|
|
90
|
+
<slot></slot>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
`}};const x=new WeakMap,y=new WeakMap,w=({host:e,target:t,matcher:o,removeOriginal:r=true})=>{y.has(e)||y.set(e,{matchers:new Set,targets:new Map});const a=y.get(e);return a.matchers.add(o),a.targets.has(t)||a.targets.set(t,new Map),a.targets.get(t).set(o,{removeOriginal:r,currentAttributes:new Map}),k({host:e,target:t,matcher:o,removeOriginal:r}),S(e),{cleanup:()=>z(e,t,o),getObservedAttributes:()=>U(e,t,o),getObservedAttribute:r=>q(e,t,o,r)}},z=(e,t,o)=>{const r=y.get(e);if(!r)return;const a=r.targets.get(t);a&&(a.delete(o),0===a.size&&r.targets.delete(t));let s=false;for(const e of r.targets.values())if(e.has(o)){s=true;break}s||r.matchers.delete(o),0!==r.targets.size&&0!==r.matchers.size||A(e);},k=({host:e,target:t,matcher:o,removeOriginal:r=true})=>{const a=e.getAttributeNames().filter(e=>o(e)).reduce((t,o)=>(t[o]=e.getAttribute(o),t),{});Object.entries(a).forEach(([a,s])=>{C(e,t,o,a,s),t.setAttribute(a,s),r&&e.removeAttribute(a);});},S=e=>{if(x.has(e))return x.get(e);const t=new MutationObserver(t=>{const o=y.get(e);o&&t.filter(e=>"attributes"===e.type).forEach(t=>{const r=t.attributeName;for(const t of o.matchers)if(t(r))for(const[r,a]of o.targets.entries())if(a.has(t)){const{removeOriginal:o}=a.get(t);k({host:e,target:r,matcher:t,removeOriginal:o});}});});return t.observe(e,{attributes:true}),x.set(e,t),t},A=e=>{if(x.has(e)){x.get(e).disconnect(),x.delete(e);}y.has(e)&&y.delete(e);},B=(e,t,o)=>{const r=y.get(e);if(!r)return;const a=r.targets.get(t);return a?a.get(o):void 0},C=(e,t,o,r,a)=>{const s=B(e,t,o);s&&s.currentAttributes.set(r,a);},q=(e,t,o,r)=>{const a=B(e,t,o);if(a)return a.currentAttributes.get(r)},U=(e,t,o)=>{const r=B(e,t,o);return r?Array.from(r.currentAttributes.entries()):[]},R={"aria-":e=>e.startsWith("aria-"),role:e=>e.match(/^role$/),tabindex:e=>e.match(/^tabindex$/)},H=({host:e,target:t,removeOriginal:o=true,ignore:r})=>(({host:e,target:t,match:o,removeOriginal:r=true})=>{if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof r)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return w({host:e,target:t,matcher:o,removeOriginal:r})})({host:e,target:t,match:e=>{if(r&&r.includes(e))return false;for(const t in R)if(R[t](e))return true;return false},removeOriginal:o});class M{generateElementName(e,t){let o=e;return o+="-",o+=t.replace(/[.]/g,"_"),o}generateTag(e,t,o){const r=this.generateElementName(e,t),a=i`${s$1(r)}`;return customElements.get(r)||customElements.define(r,class extends o{}),a}}class T{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,o=(t,r=t&&t.closest(e))=>t&&t!==document&&t!==window?r||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,true);}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}getSlotText(e,t){const o=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (o?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var I='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="external-link-stroke__title external-link-stroke__desc" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title id="external-link-stroke__title">Link to external site.</title><desc id="external-link-stroke__desc">This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.</desc><path d="M7 6.25h5a.75.75 0 0 1 .102 1.494L12 7.75H7a1.25 1.25 0 0 0-1.244 1.123L5.75 9v8c0 .648.492 1.18 1.122 1.244L7 18.25h8a1.25 1.25 0 0 0 1.244-1.122L16.25 17v-5a.75.75 0 0 1 1.493-.101l.007.101v5a2.75 2.75 0 0 1-2.582 2.745L15 19.75H7a2.75 2.75 0 0 1-2.745-2.582L4.25 17V9a2.75 2.75 0 0 1 2.582-2.745zh5zm12.025-2 .125.015.11.032.128.061c.18.108.317.29.353.522l.009.12v5a.75.75 0 0 1-1.493.102L18.25 10V6.811l-6.72 6.72a.75.75 0 0 1-1.133-.977l.073-.084 6.718-6.72H14a.75.75 0 0 1-.743-.648L13.25 5a.75.75 0 0 1 .648-.743L14 4.25z"/></svg>',N='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="new-window-stroke__title new-window-stroke__desc" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title id="new-window-stroke__title">Link will open a new tab or window.</title><desc id="new-window-stroke__desc">Notice indicator to alert users that action will result in the browser opening a new tab or window.</desc><path fill-rule="evenodd" d="M20.246 5.687a2.063 2.063 0 0 0-2.058-1.937H8.813l-.126.004A2.063 2.063 0 0 0 6.75 5.813v.937H6.5l-.168.005A2.75 2.75 0 0 0 3.75 9.5v8l.005.168A2.75 2.75 0 0 0 6.5 20.25h8l.168-.005A2.75 2.75 0 0 0 17.25 17.5v-.25h.938l.125-.004a2.063 2.063 0 0 0 1.937-2.058V5.813zM15.75 17.25H8.813a2.063 2.063 0 0 1-2.06-1.937l-.003-.126V8.25H6.5a1.25 1.25 0 0 0-1.244 1.123L5.25 9.5v8c0 .648.492 1.18 1.122 1.244l.128.006h8a1.25 1.25 0 0 0 1.243-1.122l.007-.128zm-6.625-12h8.75l.09.005a.875.875 0 0 1 .785.87v8.75l-.005.09a.875.875 0 0 1-.87.785h-8.75l-.09-.005a.875.875 0 0 1-.785-.87v-8.75l.005-.09a.875.875 0 0 1 .87-.785m4.28 1.757L13.507 7c.38 0 .693.3.743.69l.007.11-.007 1.938h2c.38 0 .694.301.743.691l.007.108c0 .405-.282.74-.648.792l-.102.007h-2.001l.001 1.865c0 .404-.282.739-.648.792L13.5 14c-.38 0-.694-.3-.743-.69l-.007-.11-.001-1.864H10.75c-.38 0-.694-.3-.743-.69L10 10.537c0-.404.282-.738.648-.791l.102-.008h2l.007-1.939c0-.404.282-.739.648-.792"/></svg>';class L extends i$2{static get properties(){return {appearance:{type:String,reflect:true},layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true}}}}class _ extends L{constructor(){super(),this.appearance="default",this.download=false,this.relative=false,this.ondark=false,this.variant="primary",this.layout="cta"===this.type?"block":null,this.shape="cta"===this.type?"rounded":null,this.size="cta"===this.type?"md":null,this.defaultReferrerPolicy="strict-origin-when-cross-origin",this.ariapressed="false",this.tabIsActive="false",this.runtimeUtils=new T,this.addEventListener("touchstart",function(){this.classList.add("is-touching");});}static get properties(){return {...L.properties,appearance:{type:String,reflect:true},href:{type:String,reflect:true},rel:{type:String,reflect:true},target:{type:String,reflect:true},download:{type:Boolean,reflect:true},relative:{type:Boolean,reflect:true},ondark:{type:Boolean},type:{type:String,reflect:true},fluid:{type:Boolean},referrerpolicy:{type:Boolean,reflect:true},variant:{type:String,reflect:true}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-hyperlink");}get safeUri(){return this.href?this.safeUrl(this.href,this.relative):""}get includesDomain(){return !!this.href&&this.safeUri.includes("http")}safeUrl(e,t){if(!e)return;const o=new URL(e,"https://www.alaskaair.com");switch(o.protocol){case "tel:":case "sms:":case "mailto:":return e;case "javascript:":case "data:":case "vbscript:":return;default:return t?e.replace(/^[^:]+:/,""):(o.protocol="https:",o.href)}}generateIconHtml(e){const t=(new DOMParser).parseFromString(e,"text/html").body.firstChild;return t.setAttribute("slot","svg"),u$1`<${this.iconTag} customColor customSvg part="targetIcon">${t}</${this.iconTag}>`}targetIcon(e){const t=e=>new URL(e).hostname.endsWith(".alaskaair.com");return "_blank"===e&&t(this.safeUri)?this.generateIconHtml(N):"_blank"===e&&!t(this.safeUri)&&this.includesDomain?this.generateIconHtml(I):void 0}getTabState(e){return true===e?"is-active":""}getRelType(e,t){return t||("_blank"===e&&this.safeUri.includes("alaskaair.com")?t:"_blank"!==e||!this.includesDomain||this.rel||this.referrerpolicy?"_blank"===e&&this.referrerpolicy?"external":void 0:"noOpener noReferrer")}ariaPressedState(e){const t=function(e){const t=this.shadowRoot.querySelector("[aria-pressed]");t.setAttribute("aria-pressed","false"),"mousedown"===e.type?t.ariaPressed=true:t.ariaPressed=false,"keydown"===e.type&&("Enter"===e.code?(t.ariaPressed=true,this.hyperlinkRef?.value&&"button"===this.hyperlinkRef.value.role&&this.click()):t.ariaPressed=false);};return this.addEventListener("mousedown",t),this.addEventListener("mouseup",t),this.addEventListener("keydown",t),this.addEventListener("keyup",t),e}render(){return this.getMarkup()}}class ${generateElementName(e,t){let o=e;return o+="-",o+=t.replace(/[.]/g,"_"),o}generateTag(e,t,o){const r=this.generateElementName(e,t),a=i`${s$1(r)}`;return customElements.get(r)||customElements.define(r,class extends o{}),a}}class F{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,o=(t,r=t&&t.closest(e))=>t&&t!==document&&t!==window?r||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,true);}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}getSlotText(e,t){const o=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return (o?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class E{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,o=(t,r=t&&t.closest(e))=>t&&t!==document&&t!==window?r||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,true);}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}}var O=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}
|
|
94
|
+
`,D=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .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:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.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(0)}to{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{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{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%}to{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}}
|
|
95
|
+
`,W=i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
96
|
+
`;class j extends i$2{constructor(){super(),this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new E,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [D,O,W]}static register(e="auro-loader"){E.prototype.registerComponent(e,j);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let e=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?e=Array.from(Array(this.smCount).keys()):this.ringworm&&(e=Array.from(Array(0).keys())),e}render(){return x$1`
|
|
97
|
+
${this.defineTemplate().map(e=>x$1`
|
|
98
|
+
<span part="element" class="loader node-${e}"></span>
|
|
99
|
+
`)}
|
|
2371
100
|
|
|
2372
|
-
|
|
2373
|
-
const textSlotClasses = {
|
|
2374
|
-
textSlot: true,
|
|
2375
|
-
[fontSize]: this.showText
|
|
2376
|
-
};
|
|
101
|
+
<div class="no-animation body-default">Loading...</div>
|
|
2377
102
|
|
|
2378
|
-
|
|
103
|
+
${this.ringworm?x$1`
|
|
104
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
105
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
106
|
+
</svg>`:""}
|
|
107
|
+
`}}const G=new WeakMap,P=new WeakMap,X=(e,t,o)=>{const r=P.get(e);if(!r)return;const a=r.targets.get(t);a&&(a.delete(o),0===a.size&&r.targets.delete(t));let s=false;for(const e of r.targets.values())if(e.has(o)){s=true;break}s||r.matchers.delete(o),0!==r.targets.size&&0!==r.matchers.size||K(e);},V=({host:e,target:t,matcher:o,removeOriginal:r=true})=>{const a=e.getAttributeNames().filter(e=>o(e)).reduce((t,o)=>(t[o]=e.getAttribute(o),t),{});Object.entries(a).forEach(([a,s])=>{Y(e,t,o,a,s),t.setAttribute(a,s),r&&e.removeAttribute(a);});},J=e=>{if(G.has(e))return G.get(e);const t=new MutationObserver(t=>{const o=P.get(e);o&&t.filter(e=>"attributes"===e.type).forEach(t=>{const r=t.attributeName;for(const t of o.matchers)if(t(r))for(const[r,a]of o.targets.entries())if(a.has(t)){const{removeOriginal:o}=a.get(t);V({host:e,target:r,matcher:t,removeOriginal:o});}});});return t.observe(e,{attributes:true}),G.set(e,t),t},K=e=>{G.has(e)&&(G.get(e).disconnect(),G.delete(e)),P.has(e)&&P.delete(e);},Q=(e,t,o)=>{const r=P.get(e);if(!r)return;const a=r.targets.get(t);return a?a.get(o):void 0},Y=(e,t,o,r,a)=>{const s=Q(e,t,o);s&&s.currentAttributes.set(r,a);},Z=(e,t,o,r)=>{const a=Q(e,t,o);if(a)return a.currentAttributes.get(r)},ee=(e,t,o)=>{const r=Q(e,t,o);return r?Array.from(r.currentAttributes.entries()):[]},te={"aria-":e=>e.startsWith("aria-"),role:e=>e.match(/^role$/)},oe=({host:e,target:t,removeOriginal:o=true})=>(({host:e,target:t,match:o,removeOriginal:r=true})=>{if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof r)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return (({host:e,target:t,matcher:o,removeOriginal:r=true})=>{P.has(e)||P.set(e,{matchers:new Set,targets:new Map});const a=P.get(e);return a.matchers.add(o),a.targets.has(t)||a.targets.set(t,new Map),a.targets.get(t).set(o,{removeOriginal:r,currentAttributes:new Map}),V({host:e,target:t,matcher:o,removeOriginal:r}),J(e),{cleanup:()=>X(e,t,o),getObservedAttributes:()=>ee(e,t,o),getObservedAttribute:r=>Z(e,t,o,r)}})({host:e,target:t,matcher:o,removeOriginal:r})})({host:e,target:t,match:e=>{for(const t in te)if(te[t](e))return true;return false},removeOriginal:o});class re extends i$2{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(e=>{e.startsWith("shape-")&&this.wrapper.classList.remove(e);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(e=>{e.startsWith("layout-")&&this.wrapper.classList.remove(e);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(e){(e.has("layout")||e.has("shape")||e.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=oe({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(e){return console.error("Failed to get the defined layout - using the default layout",e),this.getLayout("default")}}}var ae=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)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--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)}:host([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)}:host([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)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--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)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([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)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(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)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--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)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([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)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--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)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--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)}:host([onDark]),:host([appearance=inverse]){--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)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--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)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][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)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][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)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .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)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--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)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][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)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--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)}
|
|
108
|
+
`,se=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}
|
|
109
|
+
`,ie=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.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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, .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 2px 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 2px 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, .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 2px 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 2px 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 2px 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 2px 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 2px 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 2px 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, .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 2px 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 2px 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, .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 2px 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 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}: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}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}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, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.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}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
110
|
+
`,ne=i$5`:host{--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)}
|
|
111
|
+
`;const le=["circle","square"];class ce extends re{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new F,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const e=new $;this.loaderTag=e.generateTag("auro-loader","6.0.0",j),this.buttonHref=void 0,this.buttonTarget=void 0,this.buttonRel=void 0;}static get styles(){return [ne,ie,ae,se]}static get properties(){return {...re.properties,layout:{type:Boolean,attribute:false,reflect:false},autofocus:{type:Boolean,reflect:true},disabled:{type:Boolean,reflect:true},fluid:{type:Boolean,reflect:true},loading:{type:Boolean,reflect:true},loadingText:{type:String},tIndex:{type:String,reflect:true},tabindex:{type:String,reflect:false},title:{type:String,reflect:true},type:{type:String,reflect:true},value:{type:String,reflect:true},variant:{type:String,reflect:true},buttonHref:{type:String},buttonTarget:{type:String},buttonRel:{type:String},static:{type:Boolean,reflect:true},onHover:{attribute:"data-hover",type:Boolean,reflect:true},onActive:{attribute:"data-active",type:Boolean,reflect:true}}}static register(e="auro-button"){F.prototype.registerComponent(e,ce);}focus(){this.renderRoot.querySelector("button").focus();}surfaceSubmitEvent(){this.form&&this.form.requestSubmit();}get form(){return this.internals?this.internals.form:null}get showText(){return !le.includes(this.shape)}get currentAriaLabel(){if(this.attributeWatcher)return this.attributeWatcher.getObservedAttribute("aria-label")||void 0}get currentAriaLabelledBy(){if(this.attributeWatcher)return this.attributeWatcher.getObservedAttribute("aria-labelledby")||void 0}get iconOnly(){return le.includes(this.shape)}getFontSize(){return (this.iconOnly?{xs:"heading-xs",sm:"heading-sm",md:"heading-sm",lg:"heading-md",xl:"heading-lg"}:{xs:"body-xs",sm:"body-sm",md:"body-default",lg:"body-lg",xl:"body-lg"})[this.size]||"body-default"}get _renderTag(){return this.static?i`span`:this.buttonHref?i`a`:i`button`}firstUpdated(){super.firstUpdated(),this.runtimeUtils.handleComponentTagRename(this,"auro-button");}generateAriaLabel(){return this.loading?this.runtimeUtils.getSlotText(this,"ariaLabel.loading")||this.loadingText:this.runtimeUtils.getSlotText(this,"ariaLabel")||this.currentAriaLabel}onPointerEvent(e){switch(e.type){case "pointerenter":this.onHover=true;break;case "pointerleave":this.onHover=false;break;case "pointerdown":this.onActive=true;break;case "pointerup":case "blur":this.onActive=false;}}renderLayoutDefault(){const e=this.getFontSize(),t=this.buttonHref?"link":"button",o={"auro-button":true,inset:this.showText,wrapper:true,loading:this.loading,simple:!["secondary"].includes(this.variant),thin:["secondary"].includes(this.variant)},s={contentWrapper:true,util_displayHiddenVisually:this.loading},i={textSlot:true,[e]:this.showText},l=this.tIndex||this.tabindex;return u$1`
|
|
112
|
+
<!-- Hidden slots for aria labels -->
|
|
113
|
+
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
114
|
+
<slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
2379
115
|
|
|
2380
|
-
return u`
|
|
2381
116
|
<${this._renderTag}
|
|
2382
|
-
part="${
|
|
2383
|
-
aria-label="${o(this.
|
|
2384
|
-
aria-labelledby="${o(this.loading
|
|
2385
|
-
tabindex="${o(this.static
|
|
117
|
+
part="${t}"
|
|
118
|
+
aria-label="${o$3(this.generateAriaLabel())}"
|
|
119
|
+
aria-labelledby="${o$3(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
120
|
+
tabindex="${o$3(this.static?-1:l)}"
|
|
2386
121
|
?autofocus="${this.autofocus}"
|
|
2387
|
-
class=${e(
|
|
2388
|
-
?disabled="${this.disabled
|
|
122
|
+
class=${e$1(o)}
|
|
123
|
+
?disabled="${this.disabled||this.loading}"
|
|
2389
124
|
?onDark="${this.onDark}"
|
|
2390
|
-
title="${o(this.title
|
|
2391
|
-
name="${o(this.name
|
|
2392
|
-
type="${o(this.type
|
|
2393
|
-
variant="${o(this.variant
|
|
2394
|
-
.value="${o(this.value
|
|
2395
|
-
@click="${
|
|
125
|
+
title="${o$3(this.title?this.title:void 0)}"
|
|
126
|
+
name="${o$3(this.name?this.name:void 0)}"
|
|
127
|
+
type="${o$3(this.type?this.type:void 0)}"
|
|
128
|
+
variant="${o$3(this.variant?this.variant:void 0)}"
|
|
129
|
+
.value="${o$3(this.value?this.value:void 0)}"
|
|
130
|
+
@click="${this.static||"submit"!==this.type?void 0:this.surfaceSubmitEvent}"
|
|
2396
131
|
@pointerenter="${this.onPointerEvent}"
|
|
2397
132
|
@pointerleave="${this.onPointerEvent}"
|
|
2398
133
|
@pointerdown="${this.onPointerEvent}"
|
|
2399
134
|
@pointerup="${this.onPointerEvent}"
|
|
2400
135
|
@blur="${this.onPointerEvent}"
|
|
2401
|
-
href="${o(this.buttonHref
|
|
2402
|
-
target="${o(this.buttonTarget
|
|
2403
|
-
rel="${o(this.buttonRel
|
|
136
|
+
href="${o$3(this.buttonHref||void 0)}"
|
|
137
|
+
target="${o$3(this.buttonTarget||void 0)}"
|
|
138
|
+
rel="${o$3(this.buttonRel||void 0)}"
|
|
2404
139
|
>
|
|
2405
|
-
${o(this.loading
|
|
140
|
+
${o$3(this.loading?u$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
2406
141
|
|
|
2407
|
-
<span class="${e(
|
|
2408
|
-
<span class="${e(
|
|
142
|
+
<span class="${e$1(s)}" part="contentWrapper">
|
|
143
|
+
<span class="${e$1(i)}" part="text">
|
|
2409
144
|
<slot></slot>
|
|
2410
145
|
</span>
|
|
2411
146
|
</span>
|
|
2412
147
|
</${this._renderTag}>
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
}
|
|
2425
|
-
|
|
2426
|
-
|
|
148
|
+
`}renderLayout(){return this.renderLayoutDefault()}}var de=i$5`a.auro-button{text-decoration:none}
|
|
149
|
+
`;class he extends ce{static register(e="auro-hyperlink-button"){T.prototype.registerComponent(e,he);}static get styles(){return [...ce.styles,de]}}customElements.get("auro-hyperlink-button")||customElements.define("auro-hyperlink-button",he);var ue=i$5`:host([type=nav]:not([ondark])) a,:host([type=nav]:not([appearance=inverse])) a{color:var(--ds-auro-hyperlink-nav-default-color-default);background-color:var(--ds-auro-hyperlink-nav-default-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-default-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-default-border-color-default)}:host([type=nav]:not([ondark])) a:visited,:host([type=nav]:not([appearance=inverse])) a:visited{color:var(--ds-auro-hyperlink-nav-visited-color-default);background-color:var(--ds-auro-hyperlink-nav-visited-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-visited-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-visited-border-color-default)}:host([type=nav]:not([ondark])) a:focus-visible,:host([type=nav]:not([appearance=inverse])) a:focus-visible{color:var(--ds-auro-hyperlink-nav-focus-color-default);background-color:var(--ds-auro-hyperlink-nav-focus-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-default)}:host([type=nav]:not([ondark])) a:hover,:host([type=nav]:not([appearance=inverse])) a:hover{color:var(--ds-auro-hyperlink-nav-hover-color-default);background-color:var(--ds-auro-hyperlink-nav-hover-container-color-default);outline-color:var(--ds-auro-hyperlink-nav-hover-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-hover-border-color-default)}:host([type=nav]:not([ondark])) a:hover:focus-visible,:host([type=nav]:not([appearance=inverse])) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-default)}:host([type=nav][ondark]) a,:host([type=nav][appearance=inverse]) a{color:var(--ds-auro-hyperlink-nav-default-color-inverse);background-color:var(--ds-auro-hyperlink-nav-default-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-default-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-default-border-color-inverse)}:host([type=nav][ondark]) a:visited,:host([type=nav][appearance=inverse]) a:visited{color:var(--ds-auro-hyperlink-nav-visited-color-inverse);background-color:var(--ds-auro-hyperlink-nav-visited-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-visited-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-visited-border-color-inverse)}:host([type=nav][ondark]) a:focus-visible,:host([type=nav][appearance=inverse]) a:focus-visible{color:var(--ds-auro-hyperlink-nav-focus-color-inverse);background-color:var(--ds-auro-hyperlink-nav-focus-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-inverse)}:host([type=nav][ondark]) a:hover,:host([type=nav][appearance=inverse]) a:hover{color:var(--ds-auro-hyperlink-nav-hover-color-inverse);background-color:var(--ds-auro-hyperlink-nav-hover-container-color-inverse);outline-color:var(--ds-auro-hyperlink-nav-hover-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-hover-border-color-inverse)}:host([type=nav][ondark]) a:hover:focus-visible,:host([type=nav][appearance=inverse]) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-nav-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-nav-focus-border-color-inverse)}:host(:not([type=nav]):not([ondark])) a,:host(:not([type=nav]):not([appearance=inverse])) a{color:var(--ds-auro-hyperlink-default-color-default);background-color:var(--ds-auro-hyperlink-default-container-color-default);outline-color:var(--ds-auro-hyperlink-default-outline-color-default);border-color:var(--ds-auro-hyperlink-default-border-color-default)}:host(:not([type=nav]):not([ondark])) a:visited,:host(:not([type=nav]):not([appearance=inverse])) a:visited{color:var(--ds-auro-hyperlink-visited-color-default);background-color:var(--ds-auro-hyperlink-visited-container-color-default);outline-color:var(--ds-auro-hyperlink-visited-outline-color-default);border-color:var(--ds-auro-hyperlink-visited-border-color-default)}:host(:not([type=nav]):not([ondark])) a:focus-visible,:host(:not([type=nav]):not([appearance=inverse])) a:focus-visible{color:var(--ds-auro-hyperlink-focus-color-default);background-color:var(--ds-auro-hyperlink-focus-container-color-default);outline-color:var(--ds-auro-hyperlink-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-focus-border-color-default)}:host(:not([type=nav]):not([ondark])) a:hover,:host(:not([type=nav]):not([appearance=inverse])) a:hover{color:var(--ds-auro-hyperlink-hover-color-default);background-color:var(--ds-auro-hyperlink-hover-container-color-default);outline-color:var(--ds-auro-hyperlink-hover-outline-color-default);border-color:var(--ds-auro-hyperlink-hover-border-color-default)}:host(:not([type=nav]):not([ondark])) a:hover:focus-visible,:host(:not([type=nav]):not([appearance=inverse])) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-focus-outline-color-default);border-color:var(--ds-auro-hyperlink-focus-border-color-default)}:host(:not([type=nav])[ondark]) a,:host(:not([type=nav])[appearance=inverse]) a{color:var(--ds-auro-hyperlink-default-color-inverse);background-color:var(--ds-auro-hyperlink-default-container-color-inverse);outline-color:var(--ds-auro-hyperlink-default-outline-color-inverse);border-color:var(--ds-auro-hyperlink-default-border-color-inverse)}:host(:not([type=nav])[ondark]) a:visited,:host(:not([type=nav])[appearance=inverse]) a:visited{color:var(--ds-auro-hyperlink-visited-color-inverse);background-color:var(--ds-auro-hyperlink-visited-container-color-inverse);outline-color:var(--ds-auro-hyperlink-visited-outline-color-inverse);border-color:var(--ds-auro-hyperlink-visited-border-color-inverse)}:host(:not([type=nav])[ondark]) a:focus-visible,:host(:not([type=nav])[appearance=inverse]) a:focus-visible{color:var(--ds-auro-hyperlink-focus-color-inverse);background-color:var(--ds-auro-hyperlink-focus-container-color-inverse);outline-color:var(--ds-auro-hyperlink-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-focus-border-color-inverse)}:host(:not([type=nav])[ondark]) a:hover,:host(:not([type=nav])[appearance=inverse]) a:hover{color:var(--ds-auro-hyperlink-hover-color-inverse);background-color:var(--ds-auro-hyperlink-hover-container-color-inverse);outline-color:var(--ds-auro-hyperlink-hover-outline-color-inverse);border-color:var(--ds-auro-hyperlink-hover-border-color-inverse)}:host(:not([type=nav])[ondark]) a:hover:focus-visible,:host(:not([type=nav])[appearance=inverse]) a:hover:focus-visible{outline-color:var(--ds-auro-hyperlink-focus-outline-color-inverse);border-color:var(--ds-auro-hyperlink-focus-border-color-inverse)}
|
|
150
|
+
`,pe=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host(:not([fluid])){display:inline-block}:host([type=nav]) .hyperlink:focus{text-decoration:underline}:host([type=cta]){line-height:0}:host(:not([type=cta]):not([type=nav])) .hyperlink{display:inline-block;border-radius:3px;outline-offset:unset;outline-style:solid;outline-width:1px}:host(:not([type=cta]):not([type=nav])) .hyperlink:focus-visible{outline-offset:var(--ds-size-25, .125rem)}.hyperlink{transition:all .15s ease;text-decoration:underline}@media (hover: hover){.hyperlink:hover{text-decoration:none}.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:focus-visible{outline-style:solid;outline-width:var(--ds-size-50, .25rem);outline-offset:unset}.hyperlink--button{cursor:pointer}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-left:var(--ds-size-25, .125rem)}[fluid]{display:flex}
|
|
151
|
+
`,ve=i$5`:host(:not([type=cta])){--ds-auro-hyperlink-default-color-default: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-default-container-color-default: transparent;--ds-auro-hyperlink-default-outline-color-default: transparent;--ds-auro-hyperlink-default-border-color-default: transparent;--ds-auro-hyperlink-visited-color-default: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-visited-container-color-default: transparent;--ds-auro-hyperlink-visited-outline-color-default: transparent;--ds-auro-hyperlink-visited-border-color-default: transparent;--ds-auro-hyperlink-focus-color-default: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-focus-container-color-default: transparent;--ds-auro-hyperlink-focus-outline-color-default: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-hyperlink-focus-border-color-default: transparent;--ds-auro-hyperlink-hover-color-default: var(--ds-advanced-color-hyperlink-text-hover, #01426a);--ds-auro-hyperlink-hover-container-color-default: transparent;--ds-auro-hyperlink-hover-outline-color-default: transparent;--ds-auro-hyperlink-hover-border-color-default: transparent;--ds-auro-hyperlink-default-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-default-container-color-inverse: transparent;--ds-auro-hyperlink-default-outline-color-inverse: transparent;--ds-auro-hyperlink-default-border-color-inverse: transparent;--ds-auro-hyperlink-visited-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-visited-container-color-inverse: transparent;--ds-auro-hyperlink-visited-outline-color-inverse: transparent;--ds-auro-hyperlink-visited-border-color-inverse: transparent;--ds-auro-hyperlink-focus-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-focus-container-color-inverse: transparent;--ds-auro-hyperlink-focus-outline-color-inverse: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-hyperlink-focus-border-color-inverse: transparent;--ds-auro-hyperlink-hover-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-hover-container-color-inverse: transparent;--ds-auro-hyperlink-hover-outline-color-inverse: transparent;--ds-auro-hyperlink-hover-border-color-inverse: transparent;--ds-auro-hyperlink-nav-default-color-default: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-nav-default-container-color-default: transparent;--ds-auro-hyperlink-nav-default-outline-color-default: transparent;--ds-auro-hyperlink-nav-default-border-color-default: transparent;--ds-auro-hyperlink-nav-visited-color-default: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-nav-visited-container-color-default: transparent;--ds-auro-hyperlink-nav-visited-outline-color-default: transparent;--ds-auro-hyperlink-nav-visited-border-color-default: transparent;--ds-auro-hyperlink-nav-focus-color-default: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-nav-focus-container-color-default: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-hyperlink-nav-focus-outline-color-default: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-hyperlink-nav-focus-border-color-default: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-hyperlink-nav-hover-color-default: var(--ds-advanced-color-hyperlink-text-hover, #01426a);--ds-auro-hyperlink-nav-hover-container-color-default: transparent;--ds-auro-hyperlink-nav-hover-outline-color-default: transparent;--ds-auro-hyperlink-nav-hover-border-color-default: transparent;--ds-auro-hyperlink-nav-default-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-nav-default-container-color-inverse: transparent;--ds-auro-hyperlink-nav-default-outline-color-inverse: transparent;--ds-auro-hyperlink-nav-default-border-color-inverse: transparent;--ds-auro-hyperlink-nav-visited-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-nav-visited-container-color-inverse: transparent;--ds-auro-hyperlink-nav-visited-outline-color-inverse: transparent;--ds-auro-hyperlink-nav-visited-border-color-inverse: transparent;--ds-auro-hyperlink-nav-focus-color-inverse: var(--ds-advanced-color-hyperlink-text, #2875b5);--ds-auro-hyperlink-nav-focus-container-color-inverse: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-hyperlink-nav-focus-outline-color-inverse: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-hyperlink-nav-focus-border-color-inverse: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-hyperlink-nav-hover-color-inverse: var(--ds-advanced-color-hyperlink-text-inverse, #ffffff);--ds-auro-hyperlink-nav-hover-container-color-inverse: transparent;--ds-auro-hyperlink-nav-hover-outline-color-inverse: transparent;--ds-auro-hyperlink-nav-hover-border-color-inverse: transparent}
|
|
152
|
+
`;class be extends _{constructor(){super(),this._createRefs();const e=new M;this.iconTag=e.generateTag("auro-icon","9.1.0",g);}static get properties(){return {..._.properties}}static get styles(){return [pe,ue,ve]}static get shadowRootOptions(){return {...i$2.shadowRootOptions,delegatesFocus:true}}_createRefs(){this.hyperlinkRef=e();}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-hyperlink");}firstUpdated(){this.hyperlinkRef.value&&(this.attributeWatcher=H({host:this,target:this.hyperlinkRef.value}));}disconnectedCallback(){this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}static register(e="auro-hyperlink"){T.prototype.registerComponent(e,be);}renderLayoutDefault(){const e={hyperlink:this.safeUri||this.role,"hyperlink--nav":"nav"===this.type,"hyperlink--ondark":"inverse"===this.appearance||this.ondark,"hyperlink--button":this.role,"hyperlink--secondary":"secondary"===this.variant,"hyperlink--tertiary":"tertiary"===this.variant};return u$1`
|
|
153
|
+
${this.safeUri||this.role?u$1`
|
|
154
|
+
<a
|
|
155
|
+
${n(this.hyperlinkRef)}
|
|
156
|
+
part="link"
|
|
157
|
+
aria-pressed="${o$3("button"===this.role?this.ariaPressedState(this.ariapressed):void 0)}"
|
|
158
|
+
class="${e$1(e)}"
|
|
159
|
+
href="${o$3(this.role?void 0:this.safeUri)}"
|
|
160
|
+
rel="${o$3(this.target||this.rel?this.getRelType(this.target,this.rel):void 0)}"
|
|
161
|
+
referrerpolicy="${o$3(this.referrerpolicy?this.defaultReferrerPolicy:void 0)}"
|
|
162
|
+
role="${o$3("button"===this.role?this.role:void 0)}"
|
|
163
|
+
?download="${this.download}"
|
|
164
|
+
target="${o$3(this.target&&this.includesDomain?this.target:void 0)}"
|
|
165
|
+
tabindex="${o$3("button"===this.role?"0":void 0)}"
|
|
166
|
+
>
|
|
167
|
+
<slot></slot>
|
|
168
|
+
${this.targetIcon(this.target)}
|
|
169
|
+
</a>`:u$1`<slot></slot>`}
|
|
170
|
+
`}renderLayoutCTA(){return u$1`
|
|
171
|
+
<auro-hyperlink-button
|
|
172
|
+
${n(this.hyperlinkRef)}
|
|
173
|
+
appearance="${this.ondark?"inverse":this.appearance}"
|
|
174
|
+
?fluid="${this.fluid}"
|
|
175
|
+
variant="${o$3(this.variant||void 0)}"
|
|
176
|
+
shape="${o$3(this.shape||void 0)}"
|
|
177
|
+
size="${o$3(this.size||void 0)}"
|
|
178
|
+
layout="${o$3(this.layout||void 0)}"
|
|
179
|
+
buttonHref="${o$3(this.safeUri||void 0)}"
|
|
180
|
+
buttonRel="${o$3(this.rel||void 0)}"
|
|
181
|
+
buttonTarget="${o$3(this.target||void 0)}"
|
|
182
|
+
>
|
|
183
|
+
<slot></slot>
|
|
184
|
+
${this.targetIcon(this.target)}
|
|
185
|
+
</auro-hyperlink-button>
|
|
186
|
+
`}getMarkup(){return "cta"===this.type?this.renderLayoutCTA():this.renderLayoutDefault()}}
|
|
2427
187
|
|
|
2428
|
-
// Copyright (c)
|
|
188
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2429
189
|
// See LICENSE in the project root for license information.
|
|
2430
190
|
|
|
2431
191
|
|
|
2432
|
-
|
|
2433
|
-
class AuroHyperlinkButton extends AuroButton {
|
|
192
|
+
class AuroDependencyVersioning {
|
|
2434
193
|
|
|
2435
194
|
/**
|
|
2436
|
-
*
|
|
2437
|
-
* @
|
|
2438
|
-
*
|
|
2439
|
-
* @
|
|
2440
|
-
*
|
|
2441
|
-
*
|
|
195
|
+
* Generates a unique string to be used for child auro element naming.
|
|
196
|
+
* @private
|
|
197
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
198
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
199
|
+
* @returns {string} - Unique string to be used for naming.
|
|
2442
200
|
*/
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
}
|
|
2446
|
-
|
|
2447
|
-
static get styles() {
|
|
2448
|
-
return [
|
|
2449
|
-
...super.styles,
|
|
2450
|
-
styles,
|
|
2451
|
-
];
|
|
2452
|
-
}
|
|
201
|
+
generateElementName(baseName, version) {
|
|
202
|
+
let result = baseName;
|
|
2453
203
|
|
|
2454
|
-
|
|
204
|
+
result += '-';
|
|
205
|
+
result += version.replace(/[.]/g, '_');
|
|
2455
206
|
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
if (!customElements.get("auro-hyperlink-button")) {
|
|
2459
|
-
customElements.define("auro-hyperlink-button", AuroHyperlinkButton);
|
|
2460
|
-
}
|
|
207
|
+
return result;
|
|
208
|
+
}
|
|
2461
209
|
|
|
2462
|
-
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.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host(:not([fluid])){display:inline-block}:host([type=nav]) .hyperlink:focus{text-decoration:underline}:host([type=cta]){line-height:0}:host(:not([type=cta]):not([type=nav])) .hyperlink{display:inline-block;border-radius:3px;outline-offset:unset;outline-style:solid;outline-width:1px}:host(:not([type=cta]):not([type=nav])) .hyperlink:focus-visible{outline-offset:var(--ds-size-25, 0.125rem)}.hyperlink{transition:all .15s ease;text-decoration:underline}@media(hover: hover){.hyperlink:hover{text-decoration:none}.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:focus-visible{outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:unset}.hyperlink--button{cursor:pointer}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-left:var(--ds-size-25, 0.125rem)}[fluid]{display:flex}`;
|
|
210
|
+
/**
|
|
211
|
+
* Generates a unique string to be used for child auro element naming.
|
|
212
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
213
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
214
|
+
* @returns {string} - Unique string to be used for naming.
|
|
215
|
+
*/
|
|
216
|
+
generateTag(baseName, version, tagClass) {
|
|
217
|
+
const elementName = this.generateElementName(baseName, version);
|
|
218
|
+
const tag = i`${s$1(elementName)}`;
|
|
2463
219
|
|
|
2464
|
-
|
|
220
|
+
if (!customElements.get(elementName)) {
|
|
221
|
+
customElements.define(elementName, class extends tagClass {});
|
|
222
|
+
}
|
|
2465
223
|
|
|
2466
|
-
|
|
224
|
+
return tag;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
2467
227
|
|
|
2468
228
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2469
229
|
// See LICENSE in the project root for license information.
|
|
2470
230
|
|
|
231
|
+
// ---------------------------------------------------------------------
|
|
2471
232
|
|
|
2472
|
-
|
|
2473
|
-
/**
|
|
2474
|
-
* `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
|
|
2475
|
-
*
|
|
2476
|
-
* @prop {String} role - Defines ARIA roles; currently supports `button` for extended experiences.
|
|
2477
|
-
* @csspart link - Allows styling to be applied to the `a` element.
|
|
2478
|
-
* @csspart targetIcon - Allows styling to be applied to the icon that appears next to the hyperlink.
|
|
2479
|
-
*/
|
|
2480
|
-
|
|
2481
|
-
// build the component class
|
|
2482
|
-
class AuroHyperlink extends ComponentBase {
|
|
2483
|
-
constructor() {
|
|
2484
|
-
super();
|
|
2485
|
-
this._createRefs(); // eslint-disable-line
|
|
2486
|
-
|
|
2487
|
-
const versioning = new AuroDependencyVersioning();
|
|
2488
|
-
|
|
2489
|
-
/**
|
|
2490
|
-
* @private
|
|
2491
|
-
*/
|
|
2492
|
-
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
2493
|
-
}
|
|
2494
|
-
|
|
2495
|
-
// function to define props used within the scope of this component
|
|
2496
|
-
static get properties() {
|
|
2497
|
-
return {
|
|
2498
|
-
...super.properties
|
|
2499
|
-
};
|
|
2500
|
-
}
|
|
233
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
2501
234
|
|
|
2502
|
-
|
|
2503
|
-
return [
|
|
2504
|
-
styleCss$1,
|
|
2505
|
-
colorCss$1,
|
|
2506
|
-
tokensCss$1
|
|
2507
|
-
];
|
|
2508
|
-
}
|
|
235
|
+
class AuroLibraryRuntimeUtils {
|
|
2509
236
|
|
|
2510
|
-
|
|
2511
|
-
return {
|
|
2512
|
-
...i$2.shadowRootOptions,
|
|
2513
|
-
delegatesFocus: true,
|
|
2514
|
-
};
|
|
2515
|
-
}
|
|
237
|
+
/* eslint-disable jsdoc/require-param */
|
|
2516
238
|
|
|
2517
239
|
/**
|
|
2518
|
-
*
|
|
240
|
+
* This will register a new custom element with the browser.
|
|
241
|
+
* @param {String} name - The name of the custom element.
|
|
242
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
2519
243
|
* @returns {void}
|
|
2520
|
-
* @private
|
|
2521
244
|
*/
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
connectedCallback() {
|
|
2527
|
-
super.connectedCallback();
|
|
2528
|
-
this.runtimeUtils.handleComponentTagRename(this, 'auro-hyperlink');
|
|
2529
|
-
}
|
|
2530
|
-
|
|
2531
|
-
firstUpdated() {
|
|
2532
|
-
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
2533
|
-
if (this.hyperlinkRef.value) {
|
|
2534
|
-
this.attributeWatcher = transportAllA11yAttributes$1({
|
|
2535
|
-
host: this,
|
|
2536
|
-
target: this.hyperlinkRef.value
|
|
2537
|
-
});
|
|
2538
|
-
}
|
|
2539
|
-
}
|
|
2540
|
-
|
|
2541
|
-
disconnectedCallback() {
|
|
2542
|
-
if (this.attributeWatcher) {
|
|
2543
|
-
this.attributeWatcher.cleanup();
|
|
2544
|
-
this.attributeWatcher = null;
|
|
245
|
+
registerComponent(name, componentClass) {
|
|
246
|
+
if (!customElements.get(name)) {
|
|
247
|
+
customElements.define(name, class extends componentClass {});
|
|
2545
248
|
}
|
|
2546
249
|
}
|
|
2547
250
|
|
|
2548
251
|
/**
|
|
2549
|
-
*
|
|
2550
|
-
* @
|
|
2551
|
-
*
|
|
2552
|
-
* @example
|
|
2553
|
-
* AuroHyperlink.register("custom-hyperlink") // this will register this element to <custom-hyperlink/>
|
|
2554
|
-
*
|
|
252
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
253
|
+
* @returns {void}
|
|
2555
254
|
*/
|
|
2556
|
-
|
|
2557
|
-
|
|
255
|
+
closestElement(
|
|
256
|
+
selector, // selector like in .closest()
|
|
257
|
+
base = this, // extra functionality to skip a parent
|
|
258
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
259
|
+
!el || el === document || el === window
|
|
260
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
261
|
+
: found
|
|
262
|
+
? found // found a selector INside this element
|
|
263
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
264
|
+
) {
|
|
265
|
+
return __Closest(base);
|
|
2558
266
|
}
|
|
267
|
+
/* eslint-enable jsdoc/require-param */
|
|
2559
268
|
|
|
2560
269
|
/**
|
|
2561
|
-
*
|
|
2562
|
-
* @
|
|
2563
|
-
* @
|
|
270
|
+
* 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.
|
|
271
|
+
* @param {Object} elem - The element to check.
|
|
272
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
273
|
+
* @returns {void}
|
|
2564
274
|
*/
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
const
|
|
2568
|
-
'hyperlink': this.safeUri || this.role,
|
|
2569
|
-
'hyperlink--nav': this.type === 'nav',
|
|
2570
|
-
'hyperlink--ondark': this.ondark,
|
|
2571
|
-
'hyperlink--button': this.role,
|
|
2572
|
-
'hyperlink--secondary': this.variant === 'secondary',
|
|
2573
|
-
'hyperlink--tertiary': this.variant === 'tertiary'
|
|
2574
|
-
};
|
|
275
|
+
handleComponentTagRename(elem, tagName) {
|
|
276
|
+
const tag = tagName.toLowerCase();
|
|
277
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
2575
278
|
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
${n(this.hyperlinkRef)}
|
|
2580
|
-
part="link"
|
|
2581
|
-
aria-pressed="${o(this.role === 'button' ? this.ariaPressedState(this.ariapressed) : undefined)}"
|
|
2582
|
-
class="${e(classes)}"
|
|
2583
|
-
href="${o(this.role ? undefined : this.safeUri)}"
|
|
2584
|
-
rel="${o(this.target || this.rel ? this.getRelType(this.target, this.rel) : undefined)}"
|
|
2585
|
-
referrerpolicy="${o(this.referrerpolicy ? this.defaultReferrerPolicy : undefined)}"
|
|
2586
|
-
role="${o(this.role === 'button' ? this.role : undefined)}"
|
|
2587
|
-
?download="${this.download}"
|
|
2588
|
-
target="${o(this.target && this.includesDomain ? this.target : undefined)}"
|
|
2589
|
-
tabindex="${o(this.role === 'button' ? '0' : undefined)}"
|
|
2590
|
-
>
|
|
2591
|
-
<slot></slot>
|
|
2592
|
-
${this.targetIcon(this.target)}
|
|
2593
|
-
</a>`
|
|
2594
|
-
: u`<slot></slot>`}
|
|
2595
|
-
`;
|
|
279
|
+
if (elemTag !== tag) {
|
|
280
|
+
elem.setAttribute(tag, true);
|
|
281
|
+
}
|
|
2596
282
|
}
|
|
2597
283
|
|
|
2598
284
|
/**
|
|
2599
|
-
*
|
|
2600
|
-
* @
|
|
2601
|
-
* @
|
|
285
|
+
* Validates if an element is a specific Auro component.
|
|
286
|
+
* @param {Object} elem - The element to validate.
|
|
287
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
288
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
2602
289
|
*/
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
?fluid="${this.fluid}"
|
|
2609
|
-
variant="${o(this.variant || undefined)}"
|
|
2610
|
-
shape="${o(this.shape || undefined)}"
|
|
2611
|
-
size="${o(this.size || undefined)}"
|
|
2612
|
-
layout="${o(this.layout || undefined)}"
|
|
2613
|
-
buttonHref="${o(this.safeUri || undefined)}"
|
|
2614
|
-
buttonRel="${o(this.rel || undefined)}"
|
|
2615
|
-
buttonTarget="${o(this.target || undefined)}"
|
|
2616
|
-
>
|
|
2617
|
-
<slot></slot>
|
|
2618
|
-
${this.targetIcon(this.target)}
|
|
2619
|
-
</auro-hyperlink-button>
|
|
2620
|
-
`;
|
|
290
|
+
elementMatch(elem, tagName) {
|
|
291
|
+
const tag = tagName.toLowerCase();
|
|
292
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
293
|
+
|
|
294
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
2621
295
|
}
|
|
2622
296
|
|
|
2623
297
|
/**
|
|
2624
|
-
*
|
|
2625
|
-
*
|
|
2626
|
-
* @example
|
|
2627
|
-
* // Assuming this.safeUri = 'http://example.com', this.role = 'button', this.type = 'cta'
|
|
2628
|
-
* this.getMarkup(); // Returns { 'hyperlink': true, 'hyperlink--nav': false, 'hyperlink--ondark': false, 'hyperlink--button': true, 'hyperlink--cta': true, 'hyperlink--secondary': false }
|
|
2629
|
-
*
|
|
2630
|
-
* @example
|
|
2631
|
-
* // Assuming this.safeUri = '', this.role = '', this.type = 'nav', this.ondark = true, this.variant = 'secondary'
|
|
2632
|
-
* this.getMarkup(); // Returns { 'hyperlink': false, 'hyperlink--nav': true, 'hyperlink--ondark': true, 'hyperlink--button': false, 'hyperlink--cta': false, 'hyperlink--secondary': true }
|
|
2633
|
-
*
|
|
298
|
+
* Gets the text content of a named slot.
|
|
299
|
+
* @returns {String}
|
|
2634
300
|
* @private
|
|
2635
|
-
* @returns {object} An object containing CSS classes.
|
|
2636
301
|
*/
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
}
|
|
302
|
+
getSlotText(elem, name) {
|
|
303
|
+
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
304
|
+
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
305
|
+
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
306
|
+
|
|
307
|
+
return text || null;
|
|
2644
308
|
}
|
|
2645
309
|
}
|
|
2646
310
|
|
|
2647
|
-
var hyperlinkVersion = '
|
|
311
|
+
var hyperlinkVersion = '7.1.0';
|
|
2648
312
|
|
|
2649
313
|
var colorCss = i$5`:host{background-color:var(--ds-auro-card-background-color)}:host([border]){--ds-auro-card-border-color: var(--ds-basic-color-border-subtle, #dddddd);border-color:var(--ds-auro-card-border-color)}:host([border]),:host([href]){--ds-auro-card-background-color: var(--ds-basic-color-surface-default, #ffffff)}:host([href]) [auro-hyperlink]{--ds-auro-hyperlink-focus-outline-color-default: transparent;--ds-auro-hyperlink-hover-outline-color-default: transparent;outline-color:var(--ds-auro-card-border-color)}:host([href]) [auro-hyperlink]:hover,:host([href]) [auro-hyperlink]:focus{--ds-auro-card-border-color: var(--ds-advanced-color-state-focused, #01426a)}
|
|
2650
314
|
`;
|
|
@@ -2701,7 +365,7 @@ class AuroCard extends i$2 {
|
|
|
2701
365
|
this.hyperlinkTag = versioning.generateTag(
|
|
2702
366
|
"auro-hyperlink",
|
|
2703
367
|
hyperlinkVersion,
|
|
2704
|
-
|
|
368
|
+
be,
|
|
2705
369
|
);
|
|
2706
370
|
}
|
|
2707
371
|
|
|
@@ -2711,26 +375,49 @@ class AuroCard extends i$2 {
|
|
|
2711
375
|
|
|
2712
376
|
static get properties() {
|
|
2713
377
|
return {
|
|
378
|
+
/**
|
|
379
|
+
* Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`.
|
|
380
|
+
*/
|
|
2714
381
|
variant: {
|
|
2715
382
|
type: String,
|
|
2716
383
|
reflect: true,
|
|
2717
384
|
},
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot.
|
|
388
|
+
*/
|
|
2718
389
|
href: {
|
|
2719
390
|
type: String,
|
|
2720
391
|
reflect: true,
|
|
2721
392
|
},
|
|
393
|
+
|
|
394
|
+
/**
|
|
395
|
+
* Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel).
|
|
396
|
+
*/
|
|
2722
397
|
rel: {
|
|
2723
398
|
type: String,
|
|
2724
399
|
reflect: true,
|
|
2725
400
|
},
|
|
401
|
+
|
|
402
|
+
/**
|
|
403
|
+
* If true, the auto URL re-write feature will be disabled. [see here for hyperlink relative](https://auro.alaskaair.com/components/auro/hyperlink/api#relative)
|
|
404
|
+
*/
|
|
2726
405
|
relative: {
|
|
2727
406
|
type: Boolean,
|
|
2728
407
|
reflect: true,
|
|
2729
408
|
},
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role).
|
|
412
|
+
*/
|
|
2730
413
|
role: {
|
|
2731
414
|
type: String,
|
|
2732
415
|
reflect: true,
|
|
2733
416
|
},
|
|
417
|
+
|
|
418
|
+
/**
|
|
419
|
+
* Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target).
|
|
420
|
+
*/
|
|
2734
421
|
target: {
|
|
2735
422
|
type: String,
|
|
2736
423
|
reflect: true,
|
|
@@ -2772,7 +459,7 @@ class AuroCard extends i$2 {
|
|
|
2772
459
|
|
|
2773
460
|
// function that renders the HTML and CSS into the scope of the component
|
|
2774
461
|
render() {
|
|
2775
|
-
const cardContent = u`
|
|
462
|
+
const cardContent = u$1`
|
|
2776
463
|
<div class="imageWrapper" part="imageWrapper">
|
|
2777
464
|
<slot name="image" part="image"></slot>
|
|
2778
465
|
</div>
|
|
@@ -2783,17 +470,17 @@ class AuroCard extends i$2 {
|
|
|
2783
470
|
</div>
|
|
2784
471
|
`;
|
|
2785
472
|
|
|
2786
|
-
return u`
|
|
473
|
+
return u$1`
|
|
2787
474
|
${
|
|
2788
475
|
this.href
|
|
2789
|
-
? u`
|
|
476
|
+
? u$1`
|
|
2790
477
|
<${this.hyperlinkTag}
|
|
2791
478
|
aria-labelledby="content-within"
|
|
2792
|
-
href="${o(this.href ? this.href : undefined)}"
|
|
2793
|
-
rel="${o(this.rel ? this.rel : undefined)}"
|
|
2794
|
-
relative="${o(this.relative || undefined)}"
|
|
2795
|
-
role="${o(this.role ? this.role : undefined)}"
|
|
2796
|
-
target="${o(this.target ? this.target : undefined)}"
|
|
479
|
+
href="${o$3(this.href ? this.href : undefined)}"
|
|
480
|
+
rel="${o$3(this.rel ? this.rel : undefined)}"
|
|
481
|
+
relative="${o$3(this.relative || undefined)}"
|
|
482
|
+
role="${o$3(this.role ? this.role : undefined)}"
|
|
483
|
+
target="${o$3(this.target ? this.target : undefined)}"
|
|
2797
484
|
part="link"
|
|
2798
485
|
>
|
|
2799
486
|
${cardContent}
|