@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
package/demo/index.min.js
CHANGED
|
@@ -35,7 +35,7 @@ function initCustomExample() {
|
|
|
35
35
|
|
|
36
36
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
class AuroLibraryRuntimeUtils {
|
|
39
39
|
|
|
40
40
|
/* eslint-disable jsdoc/require-param */
|
|
41
41
|
|
|
@@ -96,67 +96,67 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
|
96
96
|
|
|
97
97
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
98
98
|
}
|
|
99
|
-
}
|
|
99
|
+
}
|
|
100
100
|
|
|
101
101
|
/**
|
|
102
102
|
* @license
|
|
103
103
|
* Copyright 2019 Google LLC
|
|
104
104
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
105
105
|
*/
|
|
106
|
-
const t$
|
|
106
|
+
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;
|
|
107
107
|
|
|
108
108
|
/**
|
|
109
109
|
* @license
|
|
110
110
|
* Copyright 2017 Google LLC
|
|
111
111
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
112
|
-
*/const{is:i$
|
|
112
|
+
*/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");
|
|
113
113
|
|
|
114
114
|
/**
|
|
115
115
|
* @license
|
|
116
116
|
* Copyright 2017 Google LLC
|
|
117
117
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
118
118
|
*/
|
|
119
|
-
const
|
|
119
|
+
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};
|
|
120
120
|
|
|
121
121
|
/**
|
|
122
122
|
* @license
|
|
123
123
|
* Copyright 2017 Google LLC
|
|
124
124
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
125
|
-
*/class
|
|
125
|
+
*/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");
|
|
126
126
|
|
|
127
127
|
/**
|
|
128
128
|
* @license
|
|
129
129
|
* Copyright 2020 Google LLC
|
|
130
130
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
131
131
|
*/
|
|
132
|
-
const
|
|
132
|
+
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);
|
|
133
133
|
|
|
134
134
|
/**
|
|
135
135
|
* @license
|
|
136
136
|
* Copyright 2017 Google LLC
|
|
137
137
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
138
138
|
*/
|
|
139
|
-
const t={ATTRIBUTE:1
|
|
139
|
+
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)}}
|
|
140
140
|
|
|
141
141
|
/**
|
|
142
142
|
* @license
|
|
143
143
|
* Copyright 2018 Google LLC
|
|
144
144
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
145
|
-
*/const
|
|
145
|
+
*/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}});
|
|
146
146
|
|
|
147
|
-
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}`;
|
|
147
|
+
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}`;
|
|
148
148
|
|
|
149
|
-
var styleUnformattedCss = i$
|
|
149
|
+
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)}}`;
|
|
150
150
|
|
|
151
|
-
var colorCss$3 = i$
|
|
151
|
+
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}`;
|
|
152
152
|
|
|
153
|
-
var tokensCss$3 = i$
|
|
153
|
+
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)}`;
|
|
154
154
|
|
|
155
155
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
156
156
|
// See LICENSE in the project root for license information.
|
|
157
157
|
|
|
158
158
|
|
|
159
|
-
|
|
159
|
+
class AuroDependencyVersioning {
|
|
160
160
|
|
|
161
161
|
/**
|
|
162
162
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -182,7 +182,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
182
182
|
*/
|
|
183
183
|
generateTag(baseName, version, tagClass) {
|
|
184
184
|
const elementName = this.generateElementName(baseName, version);
|
|
185
|
-
const tag =
|
|
185
|
+
const tag = i$1`${s(elementName)}`;
|
|
186
186
|
|
|
187
187
|
if (!customElements.get(elementName)) {
|
|
188
188
|
customElements.define(elementName, class extends tagClass {});
|
|
@@ -190,205 +190,25 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
190
190
|
|
|
191
191
|
return tag;
|
|
192
192
|
}
|
|
193
|
-
}
|
|
193
|
+
}
|
|
194
194
|
|
|
195
195
|
/**
|
|
196
196
|
* @license
|
|
197
197
|
* Copyright 2018 Google LLC
|
|
198
198
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
199
|
-
*/const
|
|
200
|
-
|
|
201
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
202
|
-
// See LICENSE in the project root for license information.
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
class AuroDependencyVersioning {
|
|
206
|
-
|
|
207
|
-
/**
|
|
208
|
-
* Generates a unique string to be used for child auro element naming.
|
|
209
|
-
* @private
|
|
210
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
211
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
212
|
-
* @returns {string} - Unique string to be used for naming.
|
|
213
|
-
*/
|
|
214
|
-
generateElementName(baseName, version) {
|
|
215
|
-
let result = baseName;
|
|
216
|
-
|
|
217
|
-
result += '-';
|
|
218
|
-
result += version.replace(/[.]/g, '_');
|
|
219
|
-
|
|
220
|
-
return result;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Generates a unique string to be used for child auro element naming.
|
|
225
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
226
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
227
|
-
* @returns {string} - Unique string to be used for naming.
|
|
228
|
-
*/
|
|
229
|
-
generateTag(baseName, version, tagClass) {
|
|
230
|
-
const elementName = this.generateElementName(baseName, version);
|
|
231
|
-
const tag = er`${tr(elementName)}`;
|
|
232
|
-
|
|
233
|
-
if (!customElements.get(elementName)) {
|
|
234
|
-
customElements.define(elementName, class extends tagClass {});
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
return tag;
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
242
|
-
// See LICENSE in the project root for license information.
|
|
243
|
-
|
|
244
|
-
// ---------------------------------------------------------------------
|
|
245
|
-
|
|
246
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
247
|
-
|
|
248
|
-
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
249
|
-
|
|
250
|
-
/* eslint-disable jsdoc/require-param */
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* This will register a new custom element with the browser.
|
|
254
|
-
* @param {String} name - The name of the custom element.
|
|
255
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
256
|
-
* @returns {void}
|
|
257
|
-
*/
|
|
258
|
-
registerComponent(name, componentClass) {
|
|
259
|
-
if (!customElements.get(name)) {
|
|
260
|
-
customElements.define(name, class extends componentClass {});
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
266
|
-
* @returns {void}
|
|
267
|
-
*/
|
|
268
|
-
closestElement(
|
|
269
|
-
selector, // selector like in .closest()
|
|
270
|
-
base = this, // extra functionality to skip a parent
|
|
271
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
272
|
-
!el || el === document || el === window
|
|
273
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
274
|
-
: found
|
|
275
|
-
? found // found a selector INside this element
|
|
276
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
277
|
-
) {
|
|
278
|
-
return __Closest(base);
|
|
279
|
-
}
|
|
280
|
-
/* eslint-enable jsdoc/require-param */
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* 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.
|
|
284
|
-
* @param {Object} elem - The element to check.
|
|
285
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
286
|
-
* @returns {void}
|
|
287
|
-
*/
|
|
288
|
-
handleComponentTagRename(elem, tagName) {
|
|
289
|
-
const tag = tagName.toLowerCase();
|
|
290
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
291
|
-
|
|
292
|
-
if (elemTag !== tag) {
|
|
293
|
-
elem.setAttribute(tag, true);
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
/**
|
|
298
|
-
* Validates if an element is a specific Auro component.
|
|
299
|
-
* @param {Object} elem - The element to validate.
|
|
300
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
301
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
302
|
-
*/
|
|
303
|
-
elementMatch(elem, tagName) {
|
|
304
|
-
const tag = tagName.toLowerCase();
|
|
305
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
306
|
-
|
|
307
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
308
|
-
}
|
|
309
|
-
};
|
|
310
|
-
|
|
311
|
-
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}`;
|
|
312
|
-
|
|
313
|
-
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}`;
|
|
314
|
-
|
|
315
|
-
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}`;
|
|
316
|
-
|
|
317
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
318
|
-
// See LICENSE in the project root for license information.
|
|
199
|
+
*/const o=o=>o??E;
|
|
319
200
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
323
|
-
|
|
324
|
-
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
325
|
-
|
|
326
|
-
/* eslint-disable jsdoc/require-param */
|
|
201
|
+
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}`;
|
|
327
202
|
|
|
328
|
-
/**
|
|
329
|
-
* This will register a new custom element with the browser.
|
|
330
|
-
* @param {String} name - The name of the custom element.
|
|
331
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
332
|
-
* @returns {void}
|
|
333
|
-
*/
|
|
334
|
-
registerComponent(name, componentClass) {
|
|
335
|
-
if (!customElements.get(name)) {
|
|
336
|
-
customElements.define(name, class extends componentClass {});
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
/**
|
|
341
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
342
|
-
* @returns {void}
|
|
343
|
-
*/
|
|
344
|
-
closestElement(
|
|
345
|
-
selector, // selector like in .closest()
|
|
346
|
-
base = this, // extra functionality to skip a parent
|
|
347
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
348
|
-
!el || el === document || el === window
|
|
349
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
350
|
-
: found
|
|
351
|
-
? found // found a selector INside this element
|
|
352
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
353
|
-
) {
|
|
354
|
-
return __Closest(base);
|
|
355
|
-
}
|
|
356
|
-
/* eslint-enable jsdoc/require-param */
|
|
357
|
-
|
|
358
|
-
/**
|
|
359
|
-
* 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.
|
|
360
|
-
* @param {Object} elem - The element to check.
|
|
361
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
362
|
-
* @returns {void}
|
|
363
|
-
*/
|
|
364
|
-
handleComponentTagRename(elem, tagName) {
|
|
365
|
-
const tag = tagName.toLowerCase();
|
|
366
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
367
|
-
|
|
368
|
-
if (elemTag !== tag) {
|
|
369
|
-
elem.setAttribute(tag, true);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* Validates if an element is a specific Auro component.
|
|
375
|
-
* @param {Object} elem - The element to validate.
|
|
376
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
377
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
378
|
-
*/
|
|
379
|
-
elementMatch(elem, tagName) {
|
|
380
|
-
const tag = tagName.toLowerCase();
|
|
381
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
203
|
+
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}`;
|
|
382
204
|
|
|
383
|
-
|
|
384
|
-
}
|
|
385
|
-
};
|
|
205
|
+
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}`;
|
|
386
206
|
|
|
387
|
-
var styleCss$1 = i$
|
|
207
|
+
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}}`;
|
|
388
208
|
|
|
389
|
-
var colorCss$1 = i$
|
|
209
|
+
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}`;
|
|
390
210
|
|
|
391
|
-
var tokensCss$1 = i$
|
|
211
|
+
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
392
212
|
|
|
393
213
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
394
214
|
// See LICENSE in the project root for license information.
|
|
@@ -413,7 +233,7 @@ var tokensCss$1 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds
|
|
|
413
233
|
*/
|
|
414
234
|
|
|
415
235
|
// build the component class
|
|
416
|
-
class AuroLoader extends
|
|
236
|
+
class AuroLoader extends r {
|
|
417
237
|
constructor() {
|
|
418
238
|
super();
|
|
419
239
|
|
|
@@ -435,7 +255,7 @@ class AuroLoader extends h {
|
|
|
435
255
|
/**
|
|
436
256
|
* @private
|
|
437
257
|
*/
|
|
438
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
258
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
439
259
|
|
|
440
260
|
this.orbit = false;
|
|
441
261
|
this.ringworm = false;
|
|
@@ -467,9 +287,9 @@ class AuroLoader extends h {
|
|
|
467
287
|
|
|
468
288
|
static get styles() {
|
|
469
289
|
return [
|
|
470
|
-
i$
|
|
471
|
-
i$
|
|
472
|
-
i$
|
|
290
|
+
i$5`${styleCss$1}`,
|
|
291
|
+
i$5`${colorCss$1}`,
|
|
292
|
+
i$5`${tokensCss$1}`
|
|
473
293
|
];
|
|
474
294
|
}
|
|
475
295
|
|
|
@@ -482,7 +302,7 @@ class AuroLoader extends h {
|
|
|
482
302
|
*
|
|
483
303
|
*/
|
|
484
304
|
static register(name = "auro-loader") {
|
|
485
|
-
AuroLibraryRuntimeUtils
|
|
305
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
486
306
|
}
|
|
487
307
|
|
|
488
308
|
firstUpdated() {
|
|
@@ -515,14 +335,14 @@ class AuroLoader extends h {
|
|
|
515
335
|
|
|
516
336
|
// function that renders the HTML and CSS into the scope of the component
|
|
517
337
|
render() {
|
|
518
|
-
return
|
|
519
|
-
${this.defineTemplate().map((idx) =>
|
|
338
|
+
return x`
|
|
339
|
+
${this.defineTemplate().map((idx) => x`
|
|
520
340
|
<span part="element" class="loader node-${idx}"></span>
|
|
521
341
|
`)}
|
|
522
342
|
|
|
523
343
|
<div class="no-animation">Loading...</div>
|
|
524
344
|
|
|
525
|
-
${this.ringworm ?
|
|
345
|
+
${this.ringworm ? x`
|
|
526
346
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
527
347
|
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
528
348
|
</svg>`
|
|
@@ -532,7 +352,7 @@ class AuroLoader extends h {
|
|
|
532
352
|
}
|
|
533
353
|
}
|
|
534
354
|
|
|
535
|
-
var loaderVersion = '3.
|
|
355
|
+
var loaderVersion = '3.1.4';
|
|
536
356
|
|
|
537
357
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
538
358
|
// See LICENSE in the project root for license information.
|
|
@@ -568,10 +388,20 @@ var loaderVersion = '3.0.1';
|
|
|
568
388
|
|
|
569
389
|
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
570
390
|
|
|
571
|
-
class AuroButton extends
|
|
391
|
+
class AuroButton extends r {
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Enables form association for this element.
|
|
395
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
|
396
|
+
* @returns {boolean} - Returns true to enable form association.
|
|
397
|
+
*/
|
|
398
|
+
static get formAssociated() {
|
|
399
|
+
return true;
|
|
400
|
+
}
|
|
572
401
|
|
|
573
402
|
constructor() {
|
|
574
403
|
super();
|
|
404
|
+
|
|
575
405
|
this.autofocus = false;
|
|
576
406
|
this.disabled = false;
|
|
577
407
|
this.iconOnly = false;
|
|
@@ -584,6 +414,16 @@ class AuroButton extends h {
|
|
|
584
414
|
this.slim = false;
|
|
585
415
|
this.fluid = false;
|
|
586
416
|
|
|
417
|
+
// Support for HTML5 forms
|
|
418
|
+
if (typeof this.attachInternals === 'function') {
|
|
419
|
+
this.internals = this.attachInternals();
|
|
420
|
+
} else {
|
|
421
|
+
this.internals = null;
|
|
422
|
+
|
|
423
|
+
// eslint-disable-next-line no-console
|
|
424
|
+
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.');
|
|
425
|
+
}
|
|
426
|
+
|
|
587
427
|
/**
|
|
588
428
|
* Generate unique names for dependency components.
|
|
589
429
|
*/
|
|
@@ -682,7 +522,7 @@ class AuroButton extends h {
|
|
|
682
522
|
*
|
|
683
523
|
*/
|
|
684
524
|
static register(name = "auro-button") {
|
|
685
|
-
AuroLibraryRuntimeUtils
|
|
525
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
686
526
|
}
|
|
687
527
|
|
|
688
528
|
/**
|
|
@@ -724,10 +564,21 @@ class AuroButton extends h {
|
|
|
724
564
|
this.notifyReady();
|
|
725
565
|
}
|
|
726
566
|
|
|
567
|
+
surfaceSubmitEvent() {
|
|
568
|
+
if (this.form) {
|
|
569
|
+
this.form.requestSubmit();
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
get form() {
|
|
574
|
+
return this.internals ? this.internals.form : null;
|
|
575
|
+
}
|
|
576
|
+
|
|
727
577
|
render() {
|
|
728
578
|
const classes = {
|
|
729
579
|
'util_insetLg--squish': true,
|
|
730
580
|
'auro-button': true,
|
|
581
|
+
'auroButton': true,
|
|
731
582
|
'auro-button--rounded': this.rounded,
|
|
732
583
|
'auro-button--slim': this.slim,
|
|
733
584
|
'auro-button--iconOnly': this.iconOnly,
|
|
@@ -735,27 +586,27 @@ class AuroButton extends h {
|
|
|
735
586
|
'loading': this.loading
|
|
736
587
|
};
|
|
737
588
|
|
|
738
|
-
return
|
|
589
|
+
return u`
|
|
739
590
|
<button
|
|
740
591
|
part="button"
|
|
741
|
-
aria-label="${
|
|
742
|
-
aria-labelledby="${
|
|
592
|
+
aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
|
|
593
|
+
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
743
594
|
?autofocus="${this.autofocus}"
|
|
744
|
-
class="${
|
|
595
|
+
class="${e(classes)}"
|
|
745
596
|
?disabled="${this.disabled || this.loading}"
|
|
746
597
|
?onDark="${this.onDark}"
|
|
747
|
-
title="${
|
|
748
|
-
name="${
|
|
749
|
-
type="${
|
|
750
|
-
variant="${
|
|
751
|
-
.value="${
|
|
752
|
-
@click="${
|
|
598
|
+
title="${o(this.title ? this.title : undefined)}"
|
|
599
|
+
name="${o(this.name ? this.name : undefined)}"
|
|
600
|
+
type="${o(this.type ? this.type : undefined)}"
|
|
601
|
+
variant="${o(this.variant ? this.variant : undefined)}"
|
|
602
|
+
.value="${o(this.value ? this.value : undefined)}"
|
|
603
|
+
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
753
604
|
>
|
|
754
|
-
${
|
|
605
|
+
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
755
606
|
|
|
756
607
|
<span class="contentWrapper">
|
|
757
608
|
<span class="textSlot" part="text">
|
|
758
|
-
${this.iconOnly ? undefined :
|
|
609
|
+
${this.iconOnly ? undefined : u`<slot></slot>`}
|
|
759
610
|
</span>
|
|
760
611
|
|
|
761
612
|
<span part="icon">
|
|
@@ -767,7 +618,7 @@ class AuroButton extends h {
|
|
|
767
618
|
}
|
|
768
619
|
}
|
|
769
620
|
|
|
770
|
-
var buttonVersion = '8.
|
|
621
|
+
var buttonVersion = '8.2.4';
|
|
771
622
|
|
|
772
623
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
773
624
|
// See LICENSE in the project root for license information.
|
|
@@ -779,7 +630,7 @@ var buttonVersion = '8.1.0';
|
|
|
779
630
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
780
631
|
*/
|
|
781
632
|
|
|
782
|
-
class AuroElement extends
|
|
633
|
+
class AuroElement extends r {
|
|
783
634
|
|
|
784
635
|
// function to define props used within the scope of this component
|
|
785
636
|
static get properties() {
|
|
@@ -805,7 +656,7 @@ class AuroElement extends h {
|
|
|
805
656
|
}
|
|
806
657
|
}
|
|
807
658
|
|
|
808
|
-
var error = {"
|
|
659
|
+
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>"};
|
|
809
660
|
|
|
810
661
|
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
811
662
|
|
|
@@ -835,7 +686,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
835
686
|
return _fetchMap.get(uri);
|
|
836
687
|
};
|
|
837
688
|
|
|
838
|
-
var styleCss = i$
|
|
689
|
+
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}`;
|
|
839
690
|
|
|
840
691
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
841
692
|
// See LICENSE in the project root for license information.
|
|
@@ -874,7 +725,7 @@ class BaseIcon extends AuroElement {
|
|
|
874
725
|
}
|
|
875
726
|
|
|
876
727
|
static get styles() {
|
|
877
|
-
return i$
|
|
728
|
+
return i$5`
|
|
878
729
|
${styleCss}
|
|
879
730
|
`;
|
|
880
731
|
}
|
|
@@ -916,117 +767,18 @@ class BaseIcon extends AuroElement {
|
|
|
916
767
|
}
|
|
917
768
|
}
|
|
918
769
|
|
|
919
|
-
var tokensCss = i$
|
|
920
|
-
|
|
921
|
-
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)}`;
|
|
922
|
-
|
|
923
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
924
|
-
// See LICENSE in the project root for license information.
|
|
925
|
-
|
|
926
|
-
// ---------------------------------------------------------------------
|
|
927
|
-
|
|
928
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
929
|
-
|
|
930
|
-
class AuroLibraryRuntimeUtils {
|
|
931
|
-
|
|
932
|
-
/* eslint-disable jsdoc/require-param */
|
|
933
|
-
|
|
934
|
-
/**
|
|
935
|
-
* This will register a new custom element with the browser.
|
|
936
|
-
* @param {String} name - The name of the custom element.
|
|
937
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
938
|
-
* @returns {void}
|
|
939
|
-
*/
|
|
940
|
-
registerComponent(name, componentClass) {
|
|
941
|
-
if (!customElements.get(name)) {
|
|
942
|
-
customElements.define(name, class extends componentClass {});
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
|
|
946
|
-
/**
|
|
947
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
948
|
-
* @returns {void}
|
|
949
|
-
*/
|
|
950
|
-
closestElement(
|
|
951
|
-
selector, // selector like in .closest()
|
|
952
|
-
base = this, // extra functionality to skip a parent
|
|
953
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
954
|
-
!el || el === document || el === window
|
|
955
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
956
|
-
: found
|
|
957
|
-
? found // found a selector INside this element
|
|
958
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
959
|
-
) {
|
|
960
|
-
return __Closest(base);
|
|
961
|
-
}
|
|
962
|
-
/* eslint-enable jsdoc/require-param */
|
|
963
|
-
|
|
964
|
-
/**
|
|
965
|
-
* 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.
|
|
966
|
-
* @param {Object} elem - The element to check.
|
|
967
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
968
|
-
* @returns {void}
|
|
969
|
-
*/
|
|
970
|
-
handleComponentTagRename(elem, tagName) {
|
|
971
|
-
const tag = tagName.toLowerCase();
|
|
972
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
973
|
-
|
|
974
|
-
if (elemTag !== tag) {
|
|
975
|
-
elem.setAttribute(tag, true);
|
|
976
|
-
}
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
/**
|
|
980
|
-
* Validates if an element is a specific Auro component.
|
|
981
|
-
* @param {Object} elem - The element to validate.
|
|
982
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
983
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
984
|
-
*/
|
|
985
|
-
elementMatch(elem, tagName) {
|
|
986
|
-
const tag = tagName.toLowerCase();
|
|
987
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
770
|
+
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)}`;
|
|
988
771
|
|
|
989
|
-
|
|
990
|
-
}
|
|
991
|
-
}
|
|
772
|
+
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)}`;
|
|
992
773
|
|
|
993
774
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
994
775
|
// See LICENSE in the project root for license information.
|
|
995
776
|
|
|
996
777
|
|
|
997
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
998
|
-
/**
|
|
999
|
-
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
1000
|
-
*
|
|
1001
|
-
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
1002
|
-
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
1003
|
-
* @attr {Boolean} customColor - Removes primary selector.
|
|
1004
|
-
* @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
|
|
1005
|
-
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
1006
|
-
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
1007
|
-
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
1008
|
-
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
1009
|
-
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
1010
|
-
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
1011
|
-
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
1012
|
-
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
1013
|
-
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
1014
|
-
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
1015
|
-
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
1016
|
-
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
1017
|
-
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
1018
|
-
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
1019
|
-
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
1020
|
-
* @slot svg - Used for custom SVG content.
|
|
1021
|
-
*/
|
|
1022
|
-
|
|
1023
|
-
// build the component class
|
|
1024
778
|
class AuroIcon extends BaseIcon {
|
|
1025
779
|
constructor() {
|
|
1026
780
|
super();
|
|
1027
781
|
|
|
1028
|
-
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1029
|
-
|
|
1030
782
|
this.privateDefaults();
|
|
1031
783
|
}
|
|
1032
784
|
|
|
@@ -1050,6 +802,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1050
802
|
this.success = false;
|
|
1051
803
|
this.tertiary = false;
|
|
1052
804
|
this.warning = false;
|
|
805
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1053
806
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1054
807
|
}
|
|
1055
808
|
|
|
@@ -1057,71 +810,136 @@ class AuroIcon extends BaseIcon {
|
|
|
1057
810
|
static get properties() {
|
|
1058
811
|
return {
|
|
1059
812
|
...super.properties,
|
|
813
|
+
|
|
814
|
+
/**
|
|
815
|
+
* Sets the icon to use the accent style.
|
|
816
|
+
*/
|
|
1060
817
|
accent: {
|
|
1061
818
|
type: Boolean,
|
|
1062
819
|
reflect: true
|
|
1063
820
|
},
|
|
821
|
+
|
|
822
|
+
/**
|
|
823
|
+
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
824
|
+
*/
|
|
1064
825
|
ariaHidden: {
|
|
1065
826
|
type: String,
|
|
1066
827
|
reflect: true
|
|
1067
828
|
},
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
832
|
+
*/
|
|
1068
833
|
category: {
|
|
1069
834
|
type: String,
|
|
1070
835
|
reflect: true
|
|
1071
836
|
},
|
|
837
|
+
|
|
838
|
+
/**
|
|
839
|
+
* Allows custom color to be set.
|
|
840
|
+
*/
|
|
1072
841
|
customColor: {
|
|
1073
842
|
type: Boolean
|
|
1074
843
|
},
|
|
844
|
+
|
|
845
|
+
/**
|
|
846
|
+
* When true, auro-icon will render a custom SVG inside the default slot.
|
|
847
|
+
*/
|
|
1075
848
|
customSvg: {
|
|
1076
849
|
type: Boolean
|
|
1077
850
|
},
|
|
851
|
+
|
|
852
|
+
/**
|
|
853
|
+
* Sets the icon to use the disabled style.
|
|
854
|
+
*/
|
|
1078
855
|
disabled: {
|
|
1079
856
|
type: Boolean,
|
|
1080
857
|
reflect: true
|
|
1081
858
|
},
|
|
859
|
+
|
|
860
|
+
/**
|
|
861
|
+
* Sets the icon to use the emphasis style.
|
|
862
|
+
*/
|
|
1082
863
|
emphasis: {
|
|
1083
864
|
type: Boolean,
|
|
1084
865
|
reflect: true
|
|
1085
866
|
},
|
|
867
|
+
|
|
868
|
+
/**
|
|
869
|
+
* Sets the icon to use the error style.
|
|
870
|
+
*/
|
|
1086
871
|
error: {
|
|
1087
872
|
type: Boolean,
|
|
1088
873
|
reflect: true
|
|
1089
874
|
},
|
|
875
|
+
|
|
876
|
+
/**
|
|
877
|
+
* Sets the icon to use the info style.
|
|
878
|
+
*/
|
|
1090
879
|
info: {
|
|
1091
880
|
type: Boolean,
|
|
1092
881
|
reflect: true
|
|
1093
882
|
},
|
|
883
|
+
|
|
884
|
+
/**
|
|
885
|
+
* Exposes content in slot as icon label.
|
|
886
|
+
*/
|
|
1094
887
|
label: {
|
|
1095
888
|
type: Boolean,
|
|
1096
889
|
reflect: true
|
|
1097
890
|
},
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage.
|
|
894
|
+
*/
|
|
1098
895
|
name: {
|
|
1099
896
|
type: String,
|
|
1100
897
|
reflect: true
|
|
1101
898
|
},
|
|
899
|
+
|
|
900
|
+
/**
|
|
901
|
+
* DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
902
|
+
*/
|
|
1102
903
|
primary: {
|
|
1103
904
|
type: Boolean,
|
|
1104
905
|
reflect: true
|
|
1105
906
|
},
|
|
907
|
+
|
|
908
|
+
/**
|
|
909
|
+
* Sets the icon to use the secondary style.
|
|
910
|
+
*/
|
|
1106
911
|
secondary: {
|
|
1107
912
|
type: Boolean,
|
|
1108
913
|
reflect: true
|
|
1109
914
|
},
|
|
915
|
+
|
|
916
|
+
/**
|
|
917
|
+
* Sets the icon to use the subtle style.
|
|
918
|
+
*/
|
|
1110
919
|
subtle: {
|
|
1111
920
|
type: Boolean,
|
|
1112
921
|
reflect: true
|
|
1113
922
|
},
|
|
923
|
+
|
|
924
|
+
/**
|
|
925
|
+
* Sets the icon to use the success style.
|
|
926
|
+
*/
|
|
1114
927
|
success: {
|
|
1115
928
|
type: Boolean,
|
|
1116
929
|
reflect: true
|
|
1117
930
|
},
|
|
931
|
+
|
|
932
|
+
/**
|
|
933
|
+
* Sets the icon to use the tertiary style.
|
|
934
|
+
*/
|
|
1118
935
|
tertiary: {
|
|
1119
936
|
type: Boolean,
|
|
1120
937
|
reflect: true
|
|
1121
938
|
},
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
939
|
+
|
|
940
|
+
/**
|
|
941
|
+
* Sets the icon to use the warning style.
|
|
942
|
+
*/
|
|
1125
943
|
warning: {
|
|
1126
944
|
type: Boolean,
|
|
1127
945
|
reflect: true
|
|
@@ -1132,9 +950,9 @@ class AuroIcon extends BaseIcon {
|
|
|
1132
950
|
static get styles() {
|
|
1133
951
|
return [
|
|
1134
952
|
super.styles,
|
|
1135
|
-
i$
|
|
1136
|
-
i$
|
|
1137
|
-
i$
|
|
953
|
+
i$5`${tokensCss}`,
|
|
954
|
+
i$5`${styleCss}`,
|
|
955
|
+
i$5`${colorCss}`
|
|
1138
956
|
];
|
|
1139
957
|
}
|
|
1140
958
|
|
|
@@ -1157,31 +975,55 @@ class AuroIcon extends BaseIcon {
|
|
|
1157
975
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
|
|
1158
976
|
}
|
|
1159
977
|
|
|
978
|
+
/**
|
|
979
|
+
* @private
|
|
980
|
+
* @returns {void} Exposes CSS parts for styling from parent components.
|
|
981
|
+
*/
|
|
982
|
+
exposeCssParts() {
|
|
983
|
+
this.setAttribute('exportparts', 'svg:iconSvg');
|
|
984
|
+
}
|
|
985
|
+
|
|
986
|
+
async firstUpdated() {
|
|
987
|
+
await super.firstUpdated();
|
|
988
|
+
|
|
989
|
+
// Removes the SVG description for screenreader if ariaHidden is set to true
|
|
990
|
+
if (!this.hasAttribute('ariaHidden') && this.svg) {
|
|
991
|
+
const svgDesc = this.svg.querySelector('desc');
|
|
992
|
+
|
|
993
|
+
if (svgDesc) {
|
|
994
|
+
svgDesc.remove();
|
|
995
|
+
this.svg.removeAttribute('aria-labelledby');
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
}
|
|
999
|
+
|
|
1160
1000
|
// function that renders the HTML and CSS into the scope of the component
|
|
1161
1001
|
render() {
|
|
1162
|
-
const
|
|
1163
|
-
'
|
|
1002
|
+
const labelClasses = {
|
|
1003
|
+
'labelWrapper': true,
|
|
1164
1004
|
'util_displayHiddenVisually': !this.label
|
|
1165
1005
|
};
|
|
1166
1006
|
|
|
1167
|
-
const
|
|
1168
|
-
'
|
|
1007
|
+
const svgClasses = {
|
|
1008
|
+
'svgWrapper': true,
|
|
1169
1009
|
};
|
|
1170
1010
|
|
|
1171
|
-
return
|
|
1172
|
-
<div
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
${this.
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1011
|
+
return x`
|
|
1012
|
+
<div class="componentWrapper">
|
|
1013
|
+
<div
|
|
1014
|
+
class="${e(svgClasses)}"
|
|
1015
|
+
title="${o(this.title || undefined)}">
|
|
1016
|
+
<span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
|
|
1017
|
+
${this.customSvg ? x`
|
|
1018
|
+
<slot name="svg"></slot>
|
|
1019
|
+
` : x`
|
|
1020
|
+
${this.svg}
|
|
1021
|
+
`
|
|
1022
|
+
}
|
|
1023
|
+
</span>
|
|
1024
|
+
</div>
|
|
1183
1025
|
|
|
1184
|
-
<div class="${
|
|
1026
|
+
<div class="${e(labelClasses)}">
|
|
1185
1027
|
<slot></slot>
|
|
1186
1028
|
</div>
|
|
1187
1029
|
</div>
|
|
@@ -1189,7 +1031,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1189
1031
|
}
|
|
1190
1032
|
}
|
|
1191
1033
|
|
|
1192
|
-
var iconVersion = '6.
|
|
1034
|
+
var iconVersion = '6.1.9';
|
|
1193
1035
|
|
|
1194
1036
|
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1195
1037
|
// See LICENSE in the project root for license information.
|
|
@@ -1222,14 +1064,14 @@ const ESCAPE_KEYCODE = 27,
|
|
|
1222
1064
|
* @csspart dialog-footer - apply CSS to the footer of the dialog
|
|
1223
1065
|
*/
|
|
1224
1066
|
|
|
1225
|
-
class ComponentBase extends
|
|
1067
|
+
class ComponentBase extends r {
|
|
1226
1068
|
constructor() {
|
|
1227
1069
|
super();
|
|
1228
1070
|
|
|
1229
1071
|
this.modal = false;
|
|
1230
1072
|
this.unformatted = false;
|
|
1231
1073
|
|
|
1232
|
-
const versioning = new AuroDependencyVersioning
|
|
1074
|
+
const versioning = new AuroDependencyVersioning();
|
|
1233
1075
|
|
|
1234
1076
|
/**
|
|
1235
1077
|
* @private
|
|
@@ -1245,7 +1087,7 @@ class ComponentBase extends h {
|
|
|
1245
1087
|
/**
|
|
1246
1088
|
* @private
|
|
1247
1089
|
*/
|
|
1248
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
1090
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1249
1091
|
}
|
|
1250
1092
|
|
|
1251
1093
|
static get properties() {
|
|
@@ -1368,7 +1210,16 @@ class ComponentBase extends h {
|
|
|
1368
1210
|
*/
|
|
1369
1211
|
handleOverlayClick() {
|
|
1370
1212
|
if (this.open && !this.modal) {
|
|
1371
|
-
this.
|
|
1213
|
+
const dropdownComponents = [...this.querySelectorAll('auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]')];
|
|
1214
|
+
const dropdowns = [
|
|
1215
|
+
...this.querySelectorAll('auro-dropdown, [auro-dropdown]'),
|
|
1216
|
+
...dropdownComponents.map((comp) => comp.dropdown),
|
|
1217
|
+
];
|
|
1218
|
+
|
|
1219
|
+
const isAnyDropdownOpen = dropdowns.some((dropdown) => dropdown.isPopoverVisible);
|
|
1220
|
+
if (!isAnyDropdownOpen) {
|
|
1221
|
+
this.handleCloseButtonClick();
|
|
1222
|
+
}
|
|
1372
1223
|
}
|
|
1373
1224
|
}
|
|
1374
1225
|
|
|
@@ -1417,8 +1268,8 @@ class ComponentBase extends h {
|
|
|
1417
1268
|
*/
|
|
1418
1269
|
getCloseButton() {
|
|
1419
1270
|
return this.modal
|
|
1420
|
-
?
|
|
1421
|
-
:
|
|
1271
|
+
? u``
|
|
1272
|
+
: u`
|
|
1422
1273
|
<${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
|
|
1423
1274
|
<${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
|
|
1424
1275
|
<span class="util_displayHiddenVisually">Close</span>
|
|
@@ -1439,16 +1290,16 @@ class ComponentBase extends h {
|
|
|
1439
1290
|
'dialog--open': this.open
|
|
1440
1291
|
};
|
|
1441
1292
|
|
|
1442
|
-
return
|
|
1443
|
-
<div class="${
|
|
1293
|
+
return u`
|
|
1294
|
+
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
|
|
1444
1295
|
|
|
1445
|
-
<div role="dialog" id="dialog" class="${
|
|
1296
|
+
<div role="dialog" id="dialog" class="${e(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
|
|
1446
1297
|
${this.unformatted
|
|
1447
|
-
?
|
|
1298
|
+
? u`
|
|
1448
1299
|
<slot name="content"></slot>
|
|
1449
1300
|
${this.getCloseButton()}
|
|
1450
1301
|
`
|
|
1451
|
-
:
|
|
1302
|
+
: u`
|
|
1452
1303
|
<div class="dialog-header" part="dialog-header">
|
|
1453
1304
|
<h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
|
|
1454
1305
|
<slot name="header">Default header ...</slot>
|
|
@@ -1503,7 +1354,7 @@ class AuroDialog extends ComponentBase {
|
|
|
1503
1354
|
*
|
|
1504
1355
|
*/
|
|
1505
1356
|
static register(name = "auro-dialog") {
|
|
1506
|
-
AuroLibraryRuntimeUtils
|
|
1357
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
|
|
1507
1358
|
}
|
|
1508
1359
|
}
|
|
1509
1360
|
|