@aurodesignsystem/auro-dialog 2.3.1 → 2.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +3 -3
- package/demo/api.min.js +220 -369
- package/demo/index.min.js +220 -369
- package/dist/auro-dialog__bundled.js +220 -369
- package/dist/buttonVersion.d.ts +1 -1
- package/dist/buttonVersion.d.ts.map +1 -1
- package/dist/componentBase.d.ts.map +1 -1
- package/dist/iconVersion.d.ts +1 -1
- package/dist/iconVersion.d.ts.map +1 -1
- package/package.json +30 -28
- package/src/buttonVersion.js +1 -1
- package/src/componentBase.js +11 -2
- package/src/iconVersion.js +1 -1
- package/src/style-css.js +1 -1
- package/src/tokens-css.js +1 -1
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
class AuroLibraryRuntimeUtils {
|
|
9
9
|
|
|
10
10
|
/* eslint-disable jsdoc/require-param */
|
|
11
11
|
|
|
@@ -66,67 +66,67 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
|
66
66
|
|
|
67
67
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
68
68
|
}
|
|
69
|
-
}
|
|
69
|
+
}
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
* @license
|
|
73
73
|
* Copyright 2019 Google LLC
|
|
74
74
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
75
75
|
*/
|
|
76
|
-
const t$
|
|
76
|
+
const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$4.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),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$3(o,t,s$2)},S$1=(s,o)=>{if(e$4)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$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
|
|
77
77
|
|
|
78
78
|
/**
|
|
79
79
|
* @license
|
|
80
80
|
* Copyright 2017 Google LLC
|
|
81
81
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
82
|
-
*/const{is:i$
|
|
82
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$3,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$4(t,s),y$1={attribute:true,type:String,converter:u$2,reflect:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$3(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$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$2.reactiveElementVersions??=[]).push("2.0.4");
|
|
83
83
|
|
|
84
84
|
/**
|
|
85
85
|
* @license
|
|
86
86
|
* Copyright 2017 Google LLC
|
|
87
87
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
88
88
|
*/
|
|
89
|
-
const
|
|
89
|
+
const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$2="?"+h,n$1=`<${o$2}>`,r$1=document,l$1=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$1=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1());}}}else if(8===r.nodeType)if(r.data===o$2)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$1.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(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(t,h._$AS(t,i.values),h,e)),i}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.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=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(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(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));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=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;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.2.1");const B=(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(i.insertBefore(l$1(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
92
|
* @license
|
|
93
93
|
* Copyright 2017 Google LLC
|
|
94
94
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
95
|
-
*/class
|
|
95
|
+
*/class r extends b{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 s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
|
|
96
96
|
|
|
97
97
|
/**
|
|
98
98
|
* @license
|
|
99
99
|
* Copyright 2020 Google LLC
|
|
100
100
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
101
101
|
*/
|
|
102
|
-
const
|
|
102
|
+
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(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=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$1(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=n(x);
|
|
103
103
|
|
|
104
104
|
/**
|
|
105
105
|
* @license
|
|
106
106
|
* Copyright 2017 Google LLC
|
|
107
107
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
108
108
|
*/
|
|
109
|
-
const t={ATTRIBUTE:1
|
|
109
|
+
const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
110
110
|
|
|
111
111
|
/**
|
|
112
112
|
* @license
|
|
113
113
|
* Copyright 2018 Google LLC
|
|
114
114
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
115
|
-
*/const
|
|
115
|
+
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
|
|
116
116
|
|
|
117
|
-
var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.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}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl: 0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl: 0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl: 0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
|
|
117
|
+
var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.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}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}[auro-icon]{--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
|
|
118
118
|
|
|
119
|
-
var styleUnformattedCss = i$
|
|
119
|
+
var styleUnformattedCss = i$5`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;
|
|
120
120
|
|
|
121
|
-
var colorCss$3 = i$
|
|
121
|
+
var colorCss$3 = i$5`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
|
|
122
122
|
|
|
123
|
-
var tokensCss$3 = i$
|
|
123
|
+
var tokensCss$3 = i$5`:host{--ds-auro-dialog-container-color:var(--ds-color-container-primary-default, #ffffff);--ds-auro-dialog-boxshadow-color:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color:var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color:var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color:var(--ds-color-text-primary-default, #2a2a2a)}`;
|
|
124
124
|
|
|
125
125
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
126
126
|
// See LICENSE in the project root for license information.
|
|
127
127
|
|
|
128
128
|
|
|
129
|
-
|
|
129
|
+
class AuroDependencyVersioning {
|
|
130
130
|
|
|
131
131
|
/**
|
|
132
132
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -152,7 +152,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
152
152
|
*/
|
|
153
153
|
generateTag(baseName, version, tagClass) {
|
|
154
154
|
const elementName = this.generateElementName(baseName, version);
|
|
155
|
-
const tag =
|
|
155
|
+
const tag = i$1`${s(elementName)}`;
|
|
156
156
|
|
|
157
157
|
if (!customElements.get(elementName)) {
|
|
158
158
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -160,205 +160,25 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
160
160
|
|
|
161
161
|
return tag;
|
|
162
162
|
}
|
|
163
|
-
}
|
|
163
|
+
}
|
|
164
164
|
|
|
165
165
|
/**
|
|
166
166
|
* @license
|
|
167
167
|
* Copyright 2018 Google LLC
|
|
168
168
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
169
|
-
*/const
|
|
170
|
-
|
|
171
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
172
|
-
// See LICENSE in the project root for license information.
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
class AuroDependencyVersioning {
|
|
176
|
-
|
|
177
|
-
/**
|
|
178
|
-
* Generates a unique string to be used for child auro element naming.
|
|
179
|
-
* @private
|
|
180
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
181
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
182
|
-
* @returns {string} - Unique string to be used for naming.
|
|
183
|
-
*/
|
|
184
|
-
generateElementName(baseName, version) {
|
|
185
|
-
let result = baseName;
|
|
186
|
-
|
|
187
|
-
result += '-';
|
|
188
|
-
result += version.replace(/[.]/g, '_');
|
|
189
|
-
|
|
190
|
-
return result;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
/**
|
|
194
|
-
* Generates a unique string to be used for child auro element naming.
|
|
195
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
196
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
197
|
-
* @returns {string} - Unique string to be used for naming.
|
|
198
|
-
*/
|
|
199
|
-
generateTag(baseName, version, tagClass) {
|
|
200
|
-
const elementName = this.generateElementName(baseName, version);
|
|
201
|
-
const tag = er`${tr(elementName)}`;
|
|
202
|
-
|
|
203
|
-
if (!customElements.get(elementName)) {
|
|
204
|
-
customElements.define(elementName, class extends tagClass {});
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
return tag;
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
212
|
-
// See LICENSE in the project root for license information.
|
|
213
|
-
|
|
214
|
-
// ---------------------------------------------------------------------
|
|
215
|
-
|
|
216
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
217
|
-
|
|
218
|
-
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
219
|
-
|
|
220
|
-
/* eslint-disable jsdoc/require-param */
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* This will register a new custom element with the browser.
|
|
224
|
-
* @param {String} name - The name of the custom element.
|
|
225
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
226
|
-
* @returns {void}
|
|
227
|
-
*/
|
|
228
|
-
registerComponent(name, componentClass) {
|
|
229
|
-
if (!customElements.get(name)) {
|
|
230
|
-
customElements.define(name, class extends componentClass {});
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
236
|
-
* @returns {void}
|
|
237
|
-
*/
|
|
238
|
-
closestElement(
|
|
239
|
-
selector, // selector like in .closest()
|
|
240
|
-
base = this, // extra functionality to skip a parent
|
|
241
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
242
|
-
!el || el === document || el === window
|
|
243
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
244
|
-
: found
|
|
245
|
-
? found // found a selector INside this element
|
|
246
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
247
|
-
) {
|
|
248
|
-
return __Closest(base);
|
|
249
|
-
}
|
|
250
|
-
/* eslint-enable jsdoc/require-param */
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* 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.
|
|
254
|
-
* @param {Object} elem - The element to check.
|
|
255
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
256
|
-
* @returns {void}
|
|
257
|
-
*/
|
|
258
|
-
handleComponentTagRename(elem, tagName) {
|
|
259
|
-
const tag = tagName.toLowerCase();
|
|
260
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
261
|
-
|
|
262
|
-
if (elemTag !== tag) {
|
|
263
|
-
elem.setAttribute(tag, true);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
/**
|
|
268
|
-
* Validates if an element is a specific Auro component.
|
|
269
|
-
* @param {Object} elem - The element to validate.
|
|
270
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
271
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
272
|
-
*/
|
|
273
|
-
elementMatch(elem, tagName) {
|
|
274
|
-
const tag = tagName.toLowerCase();
|
|
275
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
276
|
-
|
|
277
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
278
|
-
}
|
|
279
|
-
};
|
|
280
|
-
|
|
281
|
-
var styleCss$2 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
282
|
-
|
|
283
|
-
var colorCss$2 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
284
|
-
|
|
285
|
-
var tokensCss$2 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
|
|
286
|
-
|
|
287
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
288
|
-
// See LICENSE in the project root for license information.
|
|
169
|
+
*/const o=o=>o??E;
|
|
289
170
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
293
|
-
|
|
294
|
-
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
295
|
-
|
|
296
|
-
/* eslint-disable jsdoc/require-param */
|
|
171
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
297
172
|
|
|
298
|
-
/**
|
|
299
|
-
* This will register a new custom element with the browser.
|
|
300
|
-
* @param {String} name - The name of the custom element.
|
|
301
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
302
|
-
* @returns {void}
|
|
303
|
-
*/
|
|
304
|
-
registerComponent(name, componentClass) {
|
|
305
|
-
if (!customElements.get(name)) {
|
|
306
|
-
customElements.define(name, class extends componentClass {});
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
312
|
-
* @returns {void}
|
|
313
|
-
*/
|
|
314
|
-
closestElement(
|
|
315
|
-
selector, // selector like in .closest()
|
|
316
|
-
base = this, // extra functionality to skip a parent
|
|
317
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
318
|
-
!el || el === document || el === window
|
|
319
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
320
|
-
: found
|
|
321
|
-
? found // found a selector INside this element
|
|
322
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
323
|
-
) {
|
|
324
|
-
return __Closest(base);
|
|
325
|
-
}
|
|
326
|
-
/* eslint-enable jsdoc/require-param */
|
|
327
|
-
|
|
328
|
-
/**
|
|
329
|
-
* 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.
|
|
330
|
-
* @param {Object} elem - The element to check.
|
|
331
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
332
|
-
* @returns {void}
|
|
333
|
-
*/
|
|
334
|
-
handleComponentTagRename(elem, tagName) {
|
|
335
|
-
const tag = tagName.toLowerCase();
|
|
336
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
337
|
-
|
|
338
|
-
if (elemTag !== tag) {
|
|
339
|
-
elem.setAttribute(tag, true);
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
/**
|
|
344
|
-
* Validates if an element is a specific Auro component.
|
|
345
|
-
* @param {Object} elem - The element to validate.
|
|
346
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
347
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
348
|
-
*/
|
|
349
|
-
elementMatch(elem, tagName) {
|
|
350
|
-
const tag = tagName.toLowerCase();
|
|
351
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
173
|
+
var colorCss$2 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color:var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
352
174
|
|
|
353
|
-
|
|
354
|
-
}
|
|
355
|
-
};
|
|
175
|
+
var tokensCss$2 = i$5`:host{--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color:var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color:transparent}`;
|
|
356
176
|
|
|
357
|
-
var styleCss$1 = i$
|
|
177
|
+
var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
358
178
|
|
|
359
|
-
var colorCss$1 = i$
|
|
179
|
+
var colorCss$1 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
360
180
|
|
|
361
|
-
var tokensCss$1 = i$
|
|
181
|
+
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
362
182
|
|
|
363
183
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
364
184
|
// See LICENSE in the project root for license information.
|
|
@@ -383,7 +203,7 @@ var tokensCss$1 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds
|
|
|
383
203
|
*/
|
|
384
204
|
|
|
385
205
|
// build the component class
|
|
386
|
-
class AuroLoader extends
|
|
206
|
+
class AuroLoader extends r {
|
|
387
207
|
constructor() {
|
|
388
208
|
super();
|
|
389
209
|
|
|
@@ -405,7 +225,7 @@ class AuroLoader extends h {
|
|
|
405
225
|
/**
|
|
406
226
|
* @private
|
|
407
227
|
*/
|
|
408
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
228
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
409
229
|
|
|
410
230
|
this.orbit = false;
|
|
411
231
|
this.ringworm = false;
|
|
@@ -437,9 +257,9 @@ class AuroLoader extends h {
|
|
|
437
257
|
|
|
438
258
|
static get styles() {
|
|
439
259
|
return [
|
|
440
|
-
i$
|
|
441
|
-
i$
|
|
442
|
-
i$
|
|
260
|
+
i$5`${styleCss$1}`,
|
|
261
|
+
i$5`${colorCss$1}`,
|
|
262
|
+
i$5`${tokensCss$1}`
|
|
443
263
|
];
|
|
444
264
|
}
|
|
445
265
|
|
|
@@ -452,7 +272,7 @@ class AuroLoader extends h {
|
|
|
452
272
|
*
|
|
453
273
|
*/
|
|
454
274
|
static register(name = "auro-loader") {
|
|
455
|
-
AuroLibraryRuntimeUtils
|
|
275
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
456
276
|
}
|
|
457
277
|
|
|
458
278
|
firstUpdated() {
|
|
@@ -485,14 +305,14 @@ class AuroLoader extends h {
|
|
|
485
305
|
|
|
486
306
|
// function that renders the HTML and CSS into the scope of the component
|
|
487
307
|
render() {
|
|
488
|
-
return
|
|
489
|
-
${this.defineTemplate().map((idx) =>
|
|
308
|
+
return x`
|
|
309
|
+
${this.defineTemplate().map((idx) => x`
|
|
490
310
|
<span part="element" class="loader node-${idx}"></span>
|
|
491
311
|
`)}
|
|
492
312
|
|
|
493
313
|
<div class="no-animation">Loading...</div>
|
|
494
314
|
|
|
495
|
-
${this.ringworm ?
|
|
315
|
+
${this.ringworm ? x`
|
|
496
316
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
497
317
|
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
498
318
|
</svg>`
|
|
@@ -502,7 +322,7 @@ class AuroLoader extends h {
|
|
|
502
322
|
}
|
|
503
323
|
}
|
|
504
324
|
|
|
505
|
-
var loaderVersion = '3.
|
|
325
|
+
var loaderVersion = '3.1.4';
|
|
506
326
|
|
|
507
327
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
508
328
|
// See LICENSE in the project root for license information.
|
|
@@ -538,10 +358,20 @@ var loaderVersion = '3.0.1';
|
|
|
538
358
|
|
|
539
359
|
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
540
360
|
|
|
541
|
-
class AuroButton extends
|
|
361
|
+
class AuroButton extends r {
|
|
362
|
+
|
|
363
|
+
/**
|
|
364
|
+
* Enables form association for this element.
|
|
365
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
|
366
|
+
* @returns {boolean} - Returns true to enable form association.
|
|
367
|
+
*/
|
|
368
|
+
static get formAssociated() {
|
|
369
|
+
return true;
|
|
370
|
+
}
|
|
542
371
|
|
|
543
372
|
constructor() {
|
|
544
373
|
super();
|
|
374
|
+
|
|
545
375
|
this.autofocus = false;
|
|
546
376
|
this.disabled = false;
|
|
547
377
|
this.iconOnly = false;
|
|
@@ -554,6 +384,16 @@ class AuroButton extends h {
|
|
|
554
384
|
this.slim = false;
|
|
555
385
|
this.fluid = false;
|
|
556
386
|
|
|
387
|
+
// Support for HTML5 forms
|
|
388
|
+
if (typeof this.attachInternals === 'function') {
|
|
389
|
+
this.internals = this.attachInternals();
|
|
390
|
+
} else {
|
|
391
|
+
this.internals = null;
|
|
392
|
+
|
|
393
|
+
// eslint-disable-next-line no-console
|
|
394
|
+
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.');
|
|
395
|
+
}
|
|
396
|
+
|
|
557
397
|
/**
|
|
558
398
|
* Generate unique names for dependency components.
|
|
559
399
|
*/
|
|
@@ -652,7 +492,7 @@ class AuroButton extends h {
|
|
|
652
492
|
*
|
|
653
493
|
*/
|
|
654
494
|
static register(name = "auro-button") {
|
|
655
|
-
AuroLibraryRuntimeUtils
|
|
495
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
656
496
|
}
|
|
657
497
|
|
|
658
498
|
/**
|
|
@@ -694,10 +534,21 @@ class AuroButton extends h {
|
|
|
694
534
|
this.notifyReady();
|
|
695
535
|
}
|
|
696
536
|
|
|
537
|
+
surfaceSubmitEvent() {
|
|
538
|
+
if (this.form) {
|
|
539
|
+
this.form.requestSubmit();
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
get form() {
|
|
544
|
+
return this.internals ? this.internals.form : null;
|
|
545
|
+
}
|
|
546
|
+
|
|
697
547
|
render() {
|
|
698
548
|
const classes = {
|
|
699
549
|
'util_insetLg--squish': true,
|
|
700
550
|
'auro-button': true,
|
|
551
|
+
'auroButton': true,
|
|
701
552
|
'auro-button--rounded': this.rounded,
|
|
702
553
|
'auro-button--slim': this.slim,
|
|
703
554
|
'auro-button--iconOnly': this.iconOnly,
|
|
@@ -705,27 +556,27 @@ class AuroButton extends h {
|
|
|
705
556
|
'loading': this.loading
|
|
706
557
|
};
|
|
707
558
|
|
|
708
|
-
return
|
|
559
|
+
return u`
|
|
709
560
|
<button
|
|
710
561
|
part="button"
|
|
711
|
-
aria-label="${
|
|
712
|
-
aria-labelledby="${
|
|
562
|
+
aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
|
|
563
|
+
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
713
564
|
?autofocus="${this.autofocus}"
|
|
714
|
-
class="${
|
|
565
|
+
class="${e(classes)}"
|
|
715
566
|
?disabled="${this.disabled || this.loading}"
|
|
716
567
|
?onDark="${this.onDark}"
|
|
717
|
-
title="${
|
|
718
|
-
name="${
|
|
719
|
-
type="${
|
|
720
|
-
variant="${
|
|
721
|
-
.value="${
|
|
722
|
-
@click="${
|
|
568
|
+
title="${o(this.title ? this.title : undefined)}"
|
|
569
|
+
name="${o(this.name ? this.name : undefined)}"
|
|
570
|
+
type="${o(this.type ? this.type : undefined)}"
|
|
571
|
+
variant="${o(this.variant ? this.variant : undefined)}"
|
|
572
|
+
.value="${o(this.value ? this.value : undefined)}"
|
|
573
|
+
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
723
574
|
>
|
|
724
|
-
${
|
|
575
|
+
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
725
576
|
|
|
726
577
|
<span class="contentWrapper">
|
|
727
578
|
<span class="textSlot" part="text">
|
|
728
|
-
${this.iconOnly ? undefined :
|
|
579
|
+
${this.iconOnly ? undefined : u`<slot></slot>`}
|
|
729
580
|
</span>
|
|
730
581
|
|
|
731
582
|
<span part="icon">
|
|
@@ -737,7 +588,7 @@ class AuroButton extends h {
|
|
|
737
588
|
}
|
|
738
589
|
}
|
|
739
590
|
|
|
740
|
-
var buttonVersion = '8.
|
|
591
|
+
var buttonVersion = '8.2.4';
|
|
741
592
|
|
|
742
593
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
743
594
|
// See LICENSE in the project root for license information.
|
|
@@ -749,7 +600,7 @@ var buttonVersion = '8.1.0';
|
|
|
749
600
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
750
601
|
*/
|
|
751
602
|
|
|
752
|
-
class AuroElement extends
|
|
603
|
+
class AuroElement extends r {
|
|
753
604
|
|
|
754
605
|
// function to define props used within the scope of this component
|
|
755
606
|
static get properties() {
|
|
@@ -775,7 +626,7 @@ class AuroElement extends h {
|
|
|
775
626
|
}
|
|
776
627
|
}
|
|
777
628
|
|
|
778
|
-
var error = {"
|
|
629
|
+
var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
779
630
|
|
|
780
631
|
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
781
632
|
|
|
@@ -805,7 +656,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
805
656
|
return _fetchMap.get(uri);
|
|
806
657
|
};
|
|
807
658
|
|
|
808
|
-
var styleCss = i$
|
|
659
|
+
var styleCss = 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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.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}`;
|
|
809
660
|
|
|
810
661
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
811
662
|
// See LICENSE in the project root for license information.
|
|
@@ -844,7 +695,7 @@ class BaseIcon extends AuroElement {
|
|
|
844
695
|
}
|
|
845
696
|
|
|
846
697
|
static get styles() {
|
|
847
|
-
return i$
|
|
698
|
+
return i$5`
|
|
848
699
|
${styleCss}
|
|
849
700
|
`;
|
|
850
701
|
}
|
|
@@ -886,117 +737,18 @@ class BaseIcon extends AuroElement {
|
|
|
886
737
|
}
|
|
887
738
|
}
|
|
888
739
|
|
|
889
|
-
var tokensCss = i$
|
|
890
|
-
|
|
891
|
-
var colorCss = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
892
|
-
|
|
893
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
894
|
-
// See LICENSE in the project root for license information.
|
|
895
|
-
|
|
896
|
-
// ---------------------------------------------------------------------
|
|
897
|
-
|
|
898
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
899
|
-
|
|
900
|
-
class AuroLibraryRuntimeUtils {
|
|
901
|
-
|
|
902
|
-
/* eslint-disable jsdoc/require-param */
|
|
903
|
-
|
|
904
|
-
/**
|
|
905
|
-
* This will register a new custom element with the browser.
|
|
906
|
-
* @param {String} name - The name of the custom element.
|
|
907
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
908
|
-
* @returns {void}
|
|
909
|
-
*/
|
|
910
|
-
registerComponent(name, componentClass) {
|
|
911
|
-
if (!customElements.get(name)) {
|
|
912
|
-
customElements.define(name, class extends componentClass {});
|
|
913
|
-
}
|
|
914
|
-
}
|
|
915
|
-
|
|
916
|
-
/**
|
|
917
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
918
|
-
* @returns {void}
|
|
919
|
-
*/
|
|
920
|
-
closestElement(
|
|
921
|
-
selector, // selector like in .closest()
|
|
922
|
-
base = this, // extra functionality to skip a parent
|
|
923
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
924
|
-
!el || el === document || el === window
|
|
925
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
926
|
-
: found
|
|
927
|
-
? found // found a selector INside this element
|
|
928
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
929
|
-
) {
|
|
930
|
-
return __Closest(base);
|
|
931
|
-
}
|
|
932
|
-
/* eslint-enable jsdoc/require-param */
|
|
933
|
-
|
|
934
|
-
/**
|
|
935
|
-
* 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.
|
|
936
|
-
* @param {Object} elem - The element to check.
|
|
937
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
938
|
-
* @returns {void}
|
|
939
|
-
*/
|
|
940
|
-
handleComponentTagRename(elem, tagName) {
|
|
941
|
-
const tag = tagName.toLowerCase();
|
|
942
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
943
|
-
|
|
944
|
-
if (elemTag !== tag) {
|
|
945
|
-
elem.setAttribute(tag, true);
|
|
946
|
-
}
|
|
947
|
-
}
|
|
948
|
-
|
|
949
|
-
/**
|
|
950
|
-
* Validates if an element is a specific Auro component.
|
|
951
|
-
* @param {Object} elem - The element to validate.
|
|
952
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
953
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
954
|
-
*/
|
|
955
|
-
elementMatch(elem, tagName) {
|
|
956
|
-
const tag = tagName.toLowerCase();
|
|
957
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
740
|
+
var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
958
741
|
|
|
959
|
-
|
|
960
|
-
}
|
|
961
|
-
}
|
|
742
|
+
var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
962
743
|
|
|
963
744
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
964
745
|
// See LICENSE in the project root for license information.
|
|
965
746
|
|
|
966
747
|
|
|
967
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
968
|
-
/**
|
|
969
|
-
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
970
|
-
*
|
|
971
|
-
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
972
|
-
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
973
|
-
* @attr {Boolean} customColor - Removes primary selector.
|
|
974
|
-
* @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
|
|
975
|
-
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
976
|
-
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
977
|
-
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
978
|
-
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
979
|
-
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
980
|
-
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
981
|
-
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
982
|
-
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
983
|
-
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
984
|
-
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
985
|
-
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
986
|
-
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
987
|
-
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
988
|
-
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
989
|
-
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
990
|
-
* @slot svg - Used for custom SVG content.
|
|
991
|
-
*/
|
|
992
|
-
|
|
993
|
-
// build the component class
|
|
994
748
|
class AuroIcon extends BaseIcon {
|
|
995
749
|
constructor() {
|
|
996
750
|
super();
|
|
997
751
|
|
|
998
|
-
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
999
|
-
|
|
1000
752
|
this.privateDefaults();
|
|
1001
753
|
}
|
|
1002
754
|
|
|
@@ -1020,6 +772,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1020
772
|
this.success = false;
|
|
1021
773
|
this.tertiary = false;
|
|
1022
774
|
this.warning = false;
|
|
775
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1023
776
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1024
777
|
}
|
|
1025
778
|
|
|
@@ -1027,71 +780,136 @@ class AuroIcon extends BaseIcon {
|
|
|
1027
780
|
static get properties() {
|
|
1028
781
|
return {
|
|
1029
782
|
...super.properties,
|
|
783
|
+
|
|
784
|
+
/**
|
|
785
|
+
* Sets the icon to use the accent style.
|
|
786
|
+
*/
|
|
1030
787
|
accent: {
|
|
1031
788
|
type: Boolean,
|
|
1032
789
|
reflect: true
|
|
1033
790
|
},
|
|
791
|
+
|
|
792
|
+
/**
|
|
793
|
+
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
794
|
+
*/
|
|
1034
795
|
ariaHidden: {
|
|
1035
796
|
type: String,
|
|
1036
797
|
reflect: true
|
|
1037
798
|
},
|
|
799
|
+
|
|
800
|
+
/**
|
|
801
|
+
* The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
802
|
+
*/
|
|
1038
803
|
category: {
|
|
1039
804
|
type: String,
|
|
1040
805
|
reflect: true
|
|
1041
806
|
},
|
|
807
|
+
|
|
808
|
+
/**
|
|
809
|
+
* Allows custom color to be set.
|
|
810
|
+
*/
|
|
1042
811
|
customColor: {
|
|
1043
812
|
type: Boolean
|
|
1044
813
|
},
|
|
814
|
+
|
|
815
|
+
/**
|
|
816
|
+
* When true, auro-icon will render a custom SVG inside the default slot.
|
|
817
|
+
*/
|
|
1045
818
|
customSvg: {
|
|
1046
819
|
type: Boolean
|
|
1047
820
|
},
|
|
821
|
+
|
|
822
|
+
/**
|
|
823
|
+
* Sets the icon to use the disabled style.
|
|
824
|
+
*/
|
|
1048
825
|
disabled: {
|
|
1049
826
|
type: Boolean,
|
|
1050
827
|
reflect: true
|
|
1051
828
|
},
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* Sets the icon to use the emphasis style.
|
|
832
|
+
*/
|
|
1052
833
|
emphasis: {
|
|
1053
834
|
type: Boolean,
|
|
1054
835
|
reflect: true
|
|
1055
836
|
},
|
|
837
|
+
|
|
838
|
+
/**
|
|
839
|
+
* Sets the icon to use the error style.
|
|
840
|
+
*/
|
|
1056
841
|
error: {
|
|
1057
842
|
type: Boolean,
|
|
1058
843
|
reflect: true
|
|
1059
844
|
},
|
|
845
|
+
|
|
846
|
+
/**
|
|
847
|
+
* Sets the icon to use the info style.
|
|
848
|
+
*/
|
|
1060
849
|
info: {
|
|
1061
850
|
type: Boolean,
|
|
1062
851
|
reflect: true
|
|
1063
852
|
},
|
|
853
|
+
|
|
854
|
+
/**
|
|
855
|
+
* Exposes content in slot as icon label.
|
|
856
|
+
*/
|
|
1064
857
|
label: {
|
|
1065
858
|
type: Boolean,
|
|
1066
859
|
reflect: true
|
|
1067
860
|
},
|
|
861
|
+
|
|
862
|
+
/**
|
|
863
|
+
* The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage.
|
|
864
|
+
*/
|
|
1068
865
|
name: {
|
|
1069
866
|
type: String,
|
|
1070
867
|
reflect: true
|
|
1071
868
|
},
|
|
869
|
+
|
|
870
|
+
/**
|
|
871
|
+
* DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
872
|
+
*/
|
|
1072
873
|
primary: {
|
|
1073
874
|
type: Boolean,
|
|
1074
875
|
reflect: true
|
|
1075
876
|
},
|
|
877
|
+
|
|
878
|
+
/**
|
|
879
|
+
* Sets the icon to use the secondary style.
|
|
880
|
+
*/
|
|
1076
881
|
secondary: {
|
|
1077
882
|
type: Boolean,
|
|
1078
883
|
reflect: true
|
|
1079
884
|
},
|
|
885
|
+
|
|
886
|
+
/**
|
|
887
|
+
* Sets the icon to use the subtle style.
|
|
888
|
+
*/
|
|
1080
889
|
subtle: {
|
|
1081
890
|
type: Boolean,
|
|
1082
891
|
reflect: true
|
|
1083
892
|
},
|
|
893
|
+
|
|
894
|
+
/**
|
|
895
|
+
* Sets the icon to use the success style.
|
|
896
|
+
*/
|
|
1084
897
|
success: {
|
|
1085
898
|
type: Boolean,
|
|
1086
899
|
reflect: true
|
|
1087
900
|
},
|
|
901
|
+
|
|
902
|
+
/**
|
|
903
|
+
* Sets the icon to use the tertiary style.
|
|
904
|
+
*/
|
|
1088
905
|
tertiary: {
|
|
1089
906
|
type: Boolean,
|
|
1090
907
|
reflect: true
|
|
1091
908
|
},
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
909
|
+
|
|
910
|
+
/**
|
|
911
|
+
* Sets the icon to use the warning style.
|
|
912
|
+
*/
|
|
1095
913
|
warning: {
|
|
1096
914
|
type: Boolean,
|
|
1097
915
|
reflect: true
|
|
@@ -1102,9 +920,9 @@ class AuroIcon extends BaseIcon {
|
|
|
1102
920
|
static get styles() {
|
|
1103
921
|
return [
|
|
1104
922
|
super.styles,
|
|
1105
|
-
i$
|
|
1106
|
-
i$
|
|
1107
|
-
i$
|
|
923
|
+
i$5`${tokensCss}`,
|
|
924
|
+
i$5`${styleCss}`,
|
|
925
|
+
i$5`${colorCss}`
|
|
1108
926
|
];
|
|
1109
927
|
}
|
|
1110
928
|
|
|
@@ -1127,31 +945,55 @@ class AuroIcon extends BaseIcon {
|
|
|
1127
945
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
1128
946
|
}
|
|
1129
947
|
|
|
948
|
+
/**
|
|
949
|
+
* @private
|
|
950
|
+
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
951
|
+
*/
|
|
952
|
+
exposeCssParts() {
|
|
953
|
+
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
async firstUpdated() {
|
|
957
|
+
await super.firstUpdated();
|
|
958
|
+
|
|
959
|
+
// Removes the SVG description for screenreader if ariaHidden is set to true
|
|
960
|
+
if (!this.hasAttribute('ariaHidden') && this.svg) {
|
|
961
|
+
const svgDesc = this.svg.querySelector('desc');
|
|
962
|
+
|
|
963
|
+
if (svgDesc) {
|
|
964
|
+
svgDesc.remove();
|
|
965
|
+
this.svg.removeAttribute('aria-labelledby');
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
|
|
1130
970
|
// function that renders the HTML and CSS into the scope of the component
|
|
1131
971
|
render() {
|
|
1132
|
-
const
|
|
1133
|
-
'
|
|
972
|
+
const labelClasses = {
|
|
973
|
+
'labelWrapper': true,
|
|
1134
974
|
'util_displayHiddenVisually': !this.label
|
|
1135
975
|
};
|
|
1136
976
|
|
|
1137
|
-
const
|
|
1138
|
-
'
|
|
977
|
+
const svgClasses = {
|
|
978
|
+
'svgWrapper': true,
|
|
1139
979
|
};
|
|
1140
980
|
|
|
1141
|
-
return
|
|
1142
|
-
<div
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
${this.
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
981
|
+
return x`
|
|
982
|
+
<div class="componentWrapper">
|
|
983
|
+
<div
|
|
984
|
+
class="${e(svgClasses)}"
|
|
985
|
+
title="${o(this.title || undefined)}">
|
|
986
|
+
<span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
|
|
987
|
+
${this.customSvg ? x`
|
|
988
|
+
<slot name="svg"></slot>
|
|
989
|
+
` : x`
|
|
990
|
+
${this.svg}
|
|
991
|
+
`
|
|
992
|
+
}
|
|
993
|
+
</span>
|
|
994
|
+
</div>
|
|
1153
995
|
|
|
1154
|
-
<div class="${
|
|
996
|
+
<div class="${e(labelClasses)}">
|
|
1155
997
|
<slot></slot>
|
|
1156
998
|
</div>
|
|
1157
999
|
</div>
|
|
@@ -1159,7 +1001,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1159
1001
|
}
|
|
1160
1002
|
}
|
|
1161
1003
|
|
|
1162
|
-
var iconVersion = '6.
|
|
1004
|
+
var iconVersion = '6.1.9';
|
|
1163
1005
|
|
|
1164
1006
|
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1165
1007
|
// See LICENSE in the project root for license information.
|
|
@@ -1192,14 +1034,14 @@ const ESCAPE_KEYCODE = 27,
|
|
|
1192
1034
|
* @csspart dialog-footer - apply CSS to the footer of the dialog
|
|
1193
1035
|
*/
|
|
1194
1036
|
|
|
1195
|
-
class ComponentBase extends
|
|
1037
|
+
class ComponentBase extends r {
|
|
1196
1038
|
constructor() {
|
|
1197
1039
|
super();
|
|
1198
1040
|
|
|
1199
1041
|
this.modal = false;
|
|
1200
1042
|
this.unformatted = false;
|
|
1201
1043
|
|
|
1202
|
-
const versioning = new AuroDependencyVersioning
|
|
1044
|
+
const versioning = new AuroDependencyVersioning();
|
|
1203
1045
|
|
|
1204
1046
|
/**
|
|
1205
1047
|
* @private
|
|
@@ -1215,7 +1057,7 @@ class ComponentBase extends h {
|
|
|
1215
1057
|
/**
|
|
1216
1058
|
* @private
|
|
1217
1059
|
*/
|
|
1218
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
1060
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1219
1061
|
}
|
|
1220
1062
|
|
|
1221
1063
|
static get properties() {
|
|
@@ -1338,7 +1180,16 @@ class ComponentBase extends h {
|
|
|
1338
1180
|
*/
|
|
1339
1181
|
handleOverlayClick() {
|
|
1340
1182
|
if (this.open && !this.modal) {
|
|
1341
|
-
this.
|
|
1183
|
+
const dropdownComponents = [...this.querySelectorAll('auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]')];
|
|
1184
|
+
const dropdowns = [
|
|
1185
|
+
...this.querySelectorAll('auro-dropdown, [auro-dropdown]'),
|
|
1186
|
+
...dropdownComponents.map((comp) => comp.dropdown),
|
|
1187
|
+
];
|
|
1188
|
+
|
|
1189
|
+
const isAnyDropdownOpen = dropdowns.some((dropdown) => dropdown.isPopoverVisible);
|
|
1190
|
+
if (!isAnyDropdownOpen) {
|
|
1191
|
+
this.handleCloseButtonClick();
|
|
1192
|
+
}
|
|
1342
1193
|
}
|
|
1343
1194
|
}
|
|
1344
1195
|
|
|
@@ -1387,8 +1238,8 @@ class ComponentBase extends h {
|
|
|
1387
1238
|
*/
|
|
1388
1239
|
getCloseButton() {
|
|
1389
1240
|
return this.modal
|
|
1390
|
-
?
|
|
1391
|
-
:
|
|
1241
|
+
? u``
|
|
1242
|
+
: u`
|
|
1392
1243
|
<${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
|
|
1393
1244
|
<${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
|
|
1394
1245
|
<span class="util_displayHiddenVisually">Close</span>
|
|
@@ -1409,16 +1260,16 @@ class ComponentBase extends h {
|
|
|
1409
1260
|
'dialog--open': this.open
|
|
1410
1261
|
};
|
|
1411
1262
|
|
|
1412
|
-
return
|
|
1413
|
-
<div class="${
|
|
1263
|
+
return u`
|
|
1264
|
+
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
|
|
1414
1265
|
|
|
1415
|
-
<div role="dialog" id="dialog" class="${
|
|
1266
|
+
<div role="dialog" id="dialog" class="${e(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
|
|
1416
1267
|
${this.unformatted
|
|
1417
|
-
?
|
|
1268
|
+
? u`
|
|
1418
1269
|
<slot name="content"></slot>
|
|
1419
1270
|
${this.getCloseButton()}
|
|
1420
1271
|
`
|
|
1421
|
-
:
|
|
1272
|
+
: u`
|
|
1422
1273
|
<div class="dialog-header" part="dialog-header">
|
|
1423
1274
|
<h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
|
|
1424
1275
|
<slot name="header">Default header ...</slot>
|
|
@@ -1473,7 +1324,7 @@ class AuroDialog extends ComponentBase {
|
|
|
1473
1324
|
*
|
|
1474
1325
|
*/
|
|
1475
1326
|
static register(name = "auro-dialog") {
|
|
1476
|
-
AuroLibraryRuntimeUtils
|
|
1327
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
|
|
1477
1328
|
}
|
|
1478
1329
|
}
|
|
1479
1330
|
|