@aurodesignsystem/auro-dialog 1.0.9 → 1.1.0-beta.2
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 +15 -0
- package/README.md +1 -1
- package/demo/api.md +22 -1
- package/dist/auro-dialog__bundled.js +820 -26
- package/dist/buttonVersion.d.ts +3 -0
- package/dist/buttonVersion.d.ts.map +1 -0
- package/dist/color-css.d.ts +3 -0
- package/dist/color-css.d.ts.map +1 -0
- package/dist/componentBase.d.ts +5 -5
- package/dist/componentBase.d.ts.map +1 -1
- package/dist/iconVersion.d.ts +3 -0
- package/dist/iconVersion.d.ts.map +1 -0
- package/dist/tokens-css.d.ts +3 -0
- package/dist/tokens-css.d.ts.map +1 -0
- package/package.json +37 -26
- package/src/buttonVersion.js +1 -0
- package/src/color-css.js +2 -0
- package/src/componentBase.js +26 -14
- package/src/iconVersion.js +1 -0
- package/src/style-css.js +1 -1
- package/src/tokens-css.js +2 -0
- package/dist/accessibility.js +0 -12
- package/dist/basic.js +0 -14
- package/dist/componentBase.js +0 -275
- package/dist/custom.js +0 -14
- package/dist/decoupled.js +0 -27
- package/dist/editCloseButton.js +0 -12
- package/dist/modal.js +0 -40
- package/dist/popoverAndDropdown.js +0 -14
- package/dist/sizeOptions.js +0 -40
- package/dist/style-unformatted-css.js +0 -2
|
@@ -3,26 +3,33 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$2=globalThis,e$
|
|
6
|
+
const t$2=globalThis,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$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$3),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===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$3)},S$1=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
-
*/const{is:i$
|
|
12
|
+
*/const{is:i$3,defineProperty:e$4,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$1={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$3(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,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=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$4(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:!0,enumerable:!0}}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=!0,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 !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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(!0),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&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).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$1;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);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;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=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}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");
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const t$1=globalThis,i$
|
|
19
|
+
const t$1=globalThis,i$2=t$1.trustedTypes,s$2=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$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=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),w=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,E=r$1.createTreeWalker(r$1,129);function C(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const P=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":"",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$3+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [C(t,l+(t[s]||"<?>")+(2===i?"</svg>":"")),o]};class V{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]=P(t,s);if(this.el=V.createElement(f,n),E.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=E.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$3)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?k:"?"===e[1]?H:"@"===e[1]?I:R}),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$2?i$2.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),E.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 N(t,i,s=t,e){if(i===w)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?.(!1),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=N(t,h._$AS(t,i.values),h,e)),i}class S{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,!0);E.currentNode=e;let h=E.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new M(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new L(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=E.nextNode(),o++);}return E.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 M{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}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=N(this,t,i),c(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==w&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t));}_(t){this._$AH!==T&&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=V.createElement(C(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new S(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 V(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 M(this.S(l$1()),this.S(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?.(!1,!0,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 R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=T,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=T;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=N(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==w,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=N(this,e[s+n],i,n),r===w&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===T?t=T:t!==T&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class k extends R{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===T?void 0:t;}}class H extends R{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==T);}}class I extends R{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=N(this,t,i,0)??T)===w)return;const s=this._$AH,e=t===T&&s!==T||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==T&&(s===T||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 L{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){N(this,t);}}const Z=t$1.litHtmlPolyfillSupport;Z?.(V,M),(t$1.litHtmlVersions??=[]).push("3.1.4");const j=(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 M(i.insertBefore(l$1(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* @license
|
|
23
23
|
* Copyright 2017 Google LLC
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
-
*/class s 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 i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=j(i,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return w}}s._$litElement$=!0,s[("finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s});(globalThis.litElementVersions??=[]).push("4.0.
|
|
25
|
+
*/let s$1 = class s 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 i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=j(i,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return w}};s$1._$litElement$=!0,s$1[("finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s$1});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s$1});(globalThis.litElementVersions??=[]).push("4.0.6");
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* @license
|
|
29
|
+
* Copyright 2020 Google LLC
|
|
30
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
+
*/
|
|
32
|
+
const e$2=Symbol.for(""),o$1=t=>{if(t?.r===e$2)return t?._$litStatic$},i$1=t=>({_$litStatic$:t,r:e$2}),s=(t,...r)=>({_$litStatic$:r.reduce(((r,e,o)=>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[o+1]),t[0]),r:e$2}),a=new Map,l=t=>(r,...e)=>{const i=e.length;let s,l;const n=[],u=[];let c,$=0,f=!1;for(;$<i;){for(c=r[$];$<i&&void 0!==(l=e[$],s=o$1(l));)c+=s+r[++$],f=!0;$!==i&&u.push(l),n.push(c),$++;}if($===i&&n.push(r[i]),f){const t=n.join("$$lit$$");void 0===(r=a.get(t))&&(n.raw=n,a.set(t,r=n)),e=u;}return t(r,...e)},n=l(x);
|
|
26
33
|
|
|
27
34
|
/**
|
|
28
35
|
* @license
|
|
@@ -37,17 +44,800 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
|
|
|
37
44
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
45
|
*/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 w}});
|
|
39
46
|
|
|
40
|
-
var styleCss = i$3`*,*: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)}.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);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.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;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);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);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.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 svg{fill:var(--ds-color-text-secondary-default, #626b79)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}.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([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}: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}`;
|
|
47
|
+
var styleCss$3 = i$4`*,*: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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}.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}`;
|
|
41
48
|
|
|
42
|
-
var styleUnformattedCss = i$
|
|
49
|
+
var styleUnformattedCss = i$4`[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)}}`;
|
|
43
50
|
|
|
44
|
-
var
|
|
51
|
+
var colorCss$2 = i$4`.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-background-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:0 10px 20px 0 var(--ds-auro-dialog-boxshadow-color-one),0 1px 10px 0 var(--ds-auro-dialog-boxshadow-color-two)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
|
|
45
52
|
|
|
46
|
-
|
|
53
|
+
var tokensCss$3 = i$4`:host{--ds-auro-dialog-background-color:var(--ds-color-background-primary-100-default, #ffffff);--ds-auro-dialog-boxshadow-color-one:rgb(0 0 0 / 0.12);--ds-auro-dialog-boxshadow-color-two:rgb(0 0 0 / 0.1);--ds-auro-dialog-overlay-modal-background-color:rgb(0 0 0 / 0.5);--ds-auro-dialog-overlay-open-background-color:rgb(0 0 0 / 0.2);--ds-auro-dialog-text-color:var(--ds-color-text-primary-default, #2a2a2a)}`;
|
|
54
|
+
|
|
55
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
56
|
+
// See LICENSE in the project root for license information.
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
class AuroDependencyVersioning {
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Generates a unique string to be used for child auro element naming.
|
|
63
|
+
* @private
|
|
64
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
65
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
66
|
+
* @returns {string} - Unique string to be used for naming.
|
|
67
|
+
*/
|
|
68
|
+
generateElementName(baseName, version) {
|
|
69
|
+
let result = baseName;
|
|
70
|
+
|
|
71
|
+
result += '-';
|
|
72
|
+
result += version.replace(/[.]/g, '_');
|
|
73
|
+
|
|
74
|
+
return result;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Generates a unique string to be used for child auro element naming.
|
|
79
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
80
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
81
|
+
* @returns {string} - Unique string to be used for naming.
|
|
82
|
+
*/
|
|
83
|
+
generateTag(baseName, version, tagClass) {
|
|
84
|
+
const elementName = this.generateElementName(baseName, version);
|
|
85
|
+
const tag = s`${i$1(elementName)}`;
|
|
86
|
+
|
|
87
|
+
if (!customElements.get(elementName)) {
|
|
88
|
+
customElements.define(elementName, class extends tagClass {});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return tag;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* @license
|
|
97
|
+
* Copyright 2018 Google LLC
|
|
98
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
99
|
+
*/const o=o=>o??T;
|
|
100
|
+
|
|
101
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
102
|
+
// See LICENSE in the project root for license information.
|
|
103
|
+
|
|
104
|
+
var styleCss$2 = i$4`*,*: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}`;
|
|
105
|
+
|
|
106
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
107
|
+
// See LICENSE in the project root for license information.
|
|
108
|
+
|
|
109
|
+
var colorsCss = i$4`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([varient=secondary]):not([varient=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-hover-default, #193d73);--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-hover-default, #193d73)}.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-hover-default, #193d73)}.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-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff)}@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-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][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-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]:active,.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-hover-inverse, #a8e9f7)}.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.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.03));--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-hover-inverse, #a8e9f7)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.03));--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}`;
|
|
110
|
+
|
|
111
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
112
|
+
// See LICENSE in the project root for license information.
|
|
113
|
+
|
|
114
|
+
var tokensCss$2 = i$4`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, $ds-color-border-emphasis-inverse);--ds-auro-button-loader-color: var(--ds-color-background-darkest, $ds-color-background-darkest);--ds-auro-button-tap-color: transparent}`;
|
|
115
|
+
|
|
116
|
+
var styleCss$1 = i$4`*,*: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}: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}}`;
|
|
117
|
+
|
|
118
|
+
var colorCss$1 = i$4`: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-ui-default-default, #0074c8)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-brand-breeze-300, #00cff0)}:host([white]){--ds-auro-loader-color:var(--ds-color-container-ui-secondary-default-default, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
119
|
+
|
|
120
|
+
var tokensCss$1 = i$4`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
121
|
+
|
|
122
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
123
|
+
// See LICENSE in the project root for license information.
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
127
|
+
/**
|
|
128
|
+
* The auro-loader element is an easy to use animated loader component.
|
|
129
|
+
*
|
|
130
|
+
* @attr {Boolean} pulse - sets loader type
|
|
131
|
+
* @attr {Boolean} ringworm - sets loader type
|
|
132
|
+
* @attr {Boolean} laser - sets loader type
|
|
133
|
+
* @attr {Boolean} orbit - sets loader type
|
|
134
|
+
* @attr {Boolean} white - sets color of loader to white
|
|
135
|
+
* @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
|
|
136
|
+
* @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
|
|
137
|
+
* @attr {Boolean} xs - sets size to extra small
|
|
138
|
+
* @attr {Boolean} sm - sets size to small
|
|
139
|
+
* @attr {Boolean} md - sets size to medium
|
|
140
|
+
* @attr {Boolean} lg - sets size to large
|
|
141
|
+
* @csspart element - apply style to adjust speed of animation
|
|
142
|
+
*/
|
|
143
|
+
|
|
144
|
+
// build the component class
|
|
145
|
+
class AuroLoader extends s$1 {
|
|
146
|
+
constructor() {
|
|
147
|
+
super();
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* @private
|
|
151
|
+
*/
|
|
152
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* @private
|
|
156
|
+
*/
|
|
157
|
+
this.mdCount = 3;
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* @private
|
|
161
|
+
*/
|
|
162
|
+
this.smCount = 2;
|
|
163
|
+
|
|
164
|
+
this.orbit = false;
|
|
165
|
+
this.ringworm = false;
|
|
166
|
+
this.laser = false;
|
|
167
|
+
this.pulse = false;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// function to define props used within the scope of this component
|
|
171
|
+
static get properties() {
|
|
172
|
+
return {
|
|
173
|
+
pulse: {
|
|
174
|
+
type: Boolean,
|
|
175
|
+
reflect: true
|
|
176
|
+
},
|
|
177
|
+
orbit: {
|
|
178
|
+
type: Boolean,
|
|
179
|
+
reflect: true
|
|
180
|
+
},
|
|
181
|
+
ringworm: {
|
|
182
|
+
type: Boolean,
|
|
183
|
+
reflect: true
|
|
184
|
+
},
|
|
185
|
+
laser: {
|
|
186
|
+
type: Boolean,
|
|
187
|
+
reflect: true
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
static get styles() {
|
|
193
|
+
return [
|
|
194
|
+
i$4`${styleCss$1}`,
|
|
195
|
+
i$4`${colorCss$1}`,
|
|
196
|
+
i$4`${tokensCss$1}`
|
|
197
|
+
];
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* If component is registered as a custom name,
|
|
202
|
+
* this function will add an attribute to the element
|
|
203
|
+
* with the default name. This is so that other parent
|
|
204
|
+
* components can still this the element.
|
|
205
|
+
* @private
|
|
206
|
+
* @param {string} name - The default tag name.
|
|
207
|
+
* @param {HTMLElement} elem - The element to add the attribute to.
|
|
208
|
+
* @returns {void}
|
|
209
|
+
*/
|
|
210
|
+
handleCustomTagName(name, elem) {
|
|
211
|
+
if (name.toLowerCase() !== elem.tagName.toLowerCase()) {
|
|
212
|
+
elem.setAttribute(name, true);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
connectedCallback() {
|
|
217
|
+
super.connectedCallback();
|
|
218
|
+
this.handleCustomTagName('auro-loader', this);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/**
|
|
222
|
+
* @private
|
|
223
|
+
* @returns {Array} Numbered array for template map.
|
|
224
|
+
*/
|
|
225
|
+
defineTemplate() {
|
|
226
|
+
let nodes = Array.from(Array(this.mdCount).keys());
|
|
227
|
+
|
|
228
|
+
if (this.orbit || this.laser) {
|
|
229
|
+
nodes = Array.from(Array(this.smCount).keys());
|
|
230
|
+
} else if (this.ringworm) {
|
|
231
|
+
nodes = Array.from(Array(0).keys());
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
return nodes;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
238
|
+
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
239
|
+
|
|
240
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
241
|
+
render() {
|
|
242
|
+
return x`
|
|
243
|
+
${this.defineTemplate().map((idx) => x`
|
|
244
|
+
<span part="element" class="loader node-${idx}"></span>
|
|
245
|
+
`)}
|
|
246
|
+
|
|
247
|
+
<div class="no-animation">Loading...</div>
|
|
248
|
+
|
|
249
|
+
${this.ringworm ? x`
|
|
250
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
251
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
252
|
+
</svg>`
|
|
253
|
+
: ``
|
|
254
|
+
}
|
|
255
|
+
`;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// default internal definition
|
|
260
|
+
if (!customElements.get("auro-loader")) {
|
|
261
|
+
customElements.define("auro-loader", AuroLoader);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
var loaderVersion = '2.1.0-beta.2';
|
|
265
|
+
|
|
266
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
47
267
|
// See LICENSE in the project root for license information.
|
|
48
268
|
|
|
49
269
|
|
|
50
|
-
|
|
270
|
+
/**
|
|
271
|
+
* @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
|
|
272
|
+
* @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
|
|
273
|
+
* @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
|
|
274
|
+
* @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
|
|
275
|
+
* @attr {Boolean} onDark - Set value for on-dark version of auro-button
|
|
276
|
+
* @attr {Boolean} rounded - If set to true, the button will have a rounded shape
|
|
277
|
+
* @attr {Boolean} slim - Set value for slim version of auro-button
|
|
278
|
+
* @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
|
|
279
|
+
* @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
280
|
+
* @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
|
|
281
|
+
* @attr {String} id - Set the unique ID of an element.
|
|
282
|
+
* @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
283
|
+
* @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
|
|
284
|
+
* @attr {String} value - Defines the value associated with the button which is submitted with the form data.
|
|
285
|
+
* @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
|
|
286
|
+
* @attr {Boolean} secondary - DEPRECATED
|
|
287
|
+
* @attr {Boolean} tertiary - DEPRECATED
|
|
288
|
+
* @prop {Boolean} ready - When false the component API should not be called.
|
|
289
|
+
* @event auroButton-ready - Notifies that the component has finished initializing.
|
|
290
|
+
* @slot - Default slot for the text of the button.
|
|
291
|
+
* @slot icon - Slot to provide auro-icon for the button.
|
|
292
|
+
* @csspart button - Apply CSS to HTML5 button.
|
|
293
|
+
* @csspart loader - Apply CSS to auro-loader.
|
|
294
|
+
* @csspart text - Apply CSS to text slot.
|
|
295
|
+
* @csspart icon - Apply CSS to icon slot.
|
|
296
|
+
*/
|
|
297
|
+
|
|
298
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
299
|
+
|
|
300
|
+
class AuroButton extends s$1 {
|
|
301
|
+
|
|
302
|
+
constructor() {
|
|
303
|
+
super();
|
|
304
|
+
this.autofocus = false;
|
|
305
|
+
this.disabled = false;
|
|
306
|
+
this.iconOnly = false;
|
|
307
|
+
this.loading = false;
|
|
308
|
+
this.onDark = false;
|
|
309
|
+
this.ready = false;
|
|
310
|
+
this.secondary = false;
|
|
311
|
+
this.tertiary = false;
|
|
312
|
+
this.rounded = false;
|
|
313
|
+
this.slim = false;
|
|
314
|
+
this.fluid = false;
|
|
315
|
+
|
|
316
|
+
/**
|
|
317
|
+
* Generate unique names for dependency components.
|
|
318
|
+
*/
|
|
319
|
+
const versioning = new AuroDependencyVersioning();
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* @private
|
|
323
|
+
*/
|
|
324
|
+
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
static get styles() {
|
|
328
|
+
return [
|
|
329
|
+
tokensCss$2,
|
|
330
|
+
styleCss$2,
|
|
331
|
+
colorsCss
|
|
332
|
+
];
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
static get properties() {
|
|
336
|
+
return {
|
|
337
|
+
autofocus: {
|
|
338
|
+
type: Boolean,
|
|
339
|
+
reflect: true
|
|
340
|
+
},
|
|
341
|
+
disabled: {
|
|
342
|
+
type: Boolean,
|
|
343
|
+
reflect: true
|
|
344
|
+
},
|
|
345
|
+
secondary: {
|
|
346
|
+
type: Boolean,
|
|
347
|
+
reflect: true
|
|
348
|
+
},
|
|
349
|
+
tertiary: {
|
|
350
|
+
type: Boolean,
|
|
351
|
+
reflect: true
|
|
352
|
+
},
|
|
353
|
+
fluid: {
|
|
354
|
+
type: Boolean,
|
|
355
|
+
reflect: true
|
|
356
|
+
},
|
|
357
|
+
iconOnly: {
|
|
358
|
+
type: Boolean,
|
|
359
|
+
reflect: true
|
|
360
|
+
},
|
|
361
|
+
loading: {
|
|
362
|
+
type: Boolean,
|
|
363
|
+
reflect: true
|
|
364
|
+
},
|
|
365
|
+
onDark: {
|
|
366
|
+
type: Boolean,
|
|
367
|
+
reflect: true
|
|
368
|
+
},
|
|
369
|
+
rounded: {
|
|
370
|
+
type: Boolean,
|
|
371
|
+
reflect: true
|
|
372
|
+
},
|
|
373
|
+
slim: {
|
|
374
|
+
type: Boolean,
|
|
375
|
+
reflect: true
|
|
376
|
+
},
|
|
377
|
+
arialabel: {
|
|
378
|
+
type: String,
|
|
379
|
+
reflect: true
|
|
380
|
+
},
|
|
381
|
+
arialabelledby: {
|
|
382
|
+
type: String,
|
|
383
|
+
reflect: true
|
|
384
|
+
},
|
|
385
|
+
title: {
|
|
386
|
+
type: String,
|
|
387
|
+
reflect: true
|
|
388
|
+
},
|
|
389
|
+
type: {
|
|
390
|
+
type: String,
|
|
391
|
+
reflect: true
|
|
392
|
+
},
|
|
393
|
+
value: {
|
|
394
|
+
type: String,
|
|
395
|
+
reflect: true
|
|
396
|
+
},
|
|
397
|
+
variant: {
|
|
398
|
+
type: String,
|
|
399
|
+
reflect: true
|
|
400
|
+
},
|
|
401
|
+
ready: { type: Boolean },
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
* Internal method to apply focus to the HTML5 button.
|
|
407
|
+
* @private
|
|
408
|
+
* @returns {void}
|
|
409
|
+
*/
|
|
410
|
+
focus() {
|
|
411
|
+
this.renderRoot.querySelector('button').focus();
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/**
|
|
415
|
+
* Marks the component as ready and sends event.
|
|
416
|
+
* @private
|
|
417
|
+
* @returns {void}
|
|
418
|
+
*/
|
|
419
|
+
notifyReady() {
|
|
420
|
+
this.ready = true;
|
|
421
|
+
|
|
422
|
+
this.dispatchEvent(new CustomEvent('auroButton-ready', {
|
|
423
|
+
bubbles: true,
|
|
424
|
+
cancelable: false,
|
|
425
|
+
composed: true,
|
|
426
|
+
}));
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
updated() {
|
|
430
|
+
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
431
|
+
if (this.secondary) {
|
|
432
|
+
this.setAttribute('variant', 'secondary');
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
if (this.tertiary) {
|
|
436
|
+
this.setAttribute('variant', 'tertiary');
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
firstUpdated() {
|
|
441
|
+
this.notifyReady();
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
render() {
|
|
445
|
+
const classes = {
|
|
446
|
+
'util_insetLg--squish': true,
|
|
447
|
+
'auro-button': true,
|
|
448
|
+
'auro-button--rounded': this.rounded,
|
|
449
|
+
'auro-button--slim': this.slim,
|
|
450
|
+
'auro-button--iconOnly': this.iconOnly,
|
|
451
|
+
'auro-button--iconOnlySlim': this.iconOnly && this.slim,
|
|
452
|
+
'loading': this.loading
|
|
453
|
+
};
|
|
454
|
+
|
|
455
|
+
return n`
|
|
456
|
+
<button
|
|
457
|
+
part="button"
|
|
458
|
+
aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
|
|
459
|
+
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
460
|
+
?autofocus="${this.autofocus}"
|
|
461
|
+
class="${e(classes)}"
|
|
462
|
+
?disabled="${this.disabled || this.loading}"
|
|
463
|
+
?onDark="${this.onDark}"
|
|
464
|
+
title="${o(this.title ? this.title : undefined)}"
|
|
465
|
+
name="${o(this.name ? this.name : undefined)}"
|
|
466
|
+
type="${o(this.type ? this.type : undefined)}"
|
|
467
|
+
variant="${o(this.variant ? this.variant : undefined)}"
|
|
468
|
+
.value="${o(this.value ? this.value : undefined)}"
|
|
469
|
+
@click="${() => {}}"
|
|
470
|
+
>
|
|
471
|
+
${o(this.loading ? n`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
472
|
+
|
|
473
|
+
<span class="contentWrapper">
|
|
474
|
+
<span class="textSlot" part="text">
|
|
475
|
+
${this.iconOnly ? undefined : n`<slot></slot>`}
|
|
476
|
+
</span>
|
|
477
|
+
|
|
478
|
+
<span part="icon">
|
|
479
|
+
<slot name="icon"></slot>
|
|
480
|
+
</span>
|
|
481
|
+
</span>
|
|
482
|
+
</button>
|
|
483
|
+
`;
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
// default internal definition
|
|
488
|
+
if (!customElements.get("auro-button")) {
|
|
489
|
+
customElements.define("auro-button", AuroButton);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
var buttonVersion = '7.3.0-beta.6';
|
|
493
|
+
|
|
494
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
495
|
+
// See LICENSE in the project root for license information.
|
|
496
|
+
|
|
497
|
+
|
|
498
|
+
/**
|
|
499
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
500
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
501
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
502
|
+
*/
|
|
503
|
+
|
|
504
|
+
class AuroElement extends s$1 {
|
|
505
|
+
|
|
506
|
+
// function to define props used within the scope of this component
|
|
507
|
+
static get properties() {
|
|
508
|
+
return {
|
|
509
|
+
hidden: { type: Boolean,
|
|
510
|
+
reflect: true },
|
|
511
|
+
hiddenVisually: { type: Boolean,
|
|
512
|
+
reflect: true },
|
|
513
|
+
hiddenAudible: { type: Boolean,
|
|
514
|
+
reflect: true },
|
|
515
|
+
};
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* @private Function that determines state of aria-hidden
|
|
520
|
+
*/
|
|
521
|
+
hideAudible(value) {
|
|
522
|
+
if (value) {
|
|
523
|
+
return 'true'
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
return 'false'
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
531
|
+
|
|
532
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
533
|
+
|
|
534
|
+
const _fetchMap = new Map();
|
|
535
|
+
|
|
536
|
+
/**
|
|
537
|
+
* A callback to parse Response body.
|
|
538
|
+
*
|
|
539
|
+
* @callback ResponseParser
|
|
540
|
+
* @param {Fetch.Response} response
|
|
541
|
+
* @returns {Promise}
|
|
542
|
+
*/
|
|
543
|
+
|
|
544
|
+
/**
|
|
545
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
546
|
+
*
|
|
547
|
+
* @param {String} uri
|
|
548
|
+
* @param {Object} [options={}]
|
|
549
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
550
|
+
* @returns {Promise}
|
|
551
|
+
*/
|
|
552
|
+
const cacheFetch = (uri, options = {}) => {
|
|
553
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
554
|
+
if (!_fetchMap.has(uri)) {
|
|
555
|
+
_fetchMap.set(uri, fetch(uri).then(responseParser));
|
|
556
|
+
}
|
|
557
|
+
return _fetchMap.get(uri);
|
|
558
|
+
};
|
|
559
|
+
|
|
560
|
+
var styleCss = i$4`*,*: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_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)}:host([customSize]){--auro-size-lg:100% --ds-size-300: 100%;width:100%;height:100%}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
|
|
561
|
+
|
|
562
|
+
/* eslint-disable one-var */
|
|
563
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
564
|
+
// See LICENSE in the project root for license information.
|
|
565
|
+
|
|
566
|
+
|
|
567
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
568
|
+
/**
|
|
569
|
+
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
570
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
571
|
+
*/
|
|
572
|
+
|
|
573
|
+
// build the component class
|
|
574
|
+
class BaseIcon extends AuroElement {
|
|
575
|
+
constructor() {
|
|
576
|
+
super();
|
|
577
|
+
this.onDark = false;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
// function to define props used within the scope of this component
|
|
581
|
+
static get properties() {
|
|
582
|
+
return {
|
|
583
|
+
...super.properties,
|
|
584
|
+
onDark: {
|
|
585
|
+
type: Boolean,
|
|
586
|
+
reflect: true
|
|
587
|
+
},
|
|
588
|
+
|
|
589
|
+
/**
|
|
590
|
+
* @private
|
|
591
|
+
*/
|
|
592
|
+
svg: {
|
|
593
|
+
attribute: false,
|
|
594
|
+
reflect: true
|
|
595
|
+
}
|
|
596
|
+
};
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
static get styles() {
|
|
600
|
+
return i$4`
|
|
601
|
+
${styleCss}
|
|
602
|
+
`;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
/**
|
|
606
|
+
* Async function to fetch requested icon from npm CDN.
|
|
607
|
+
* @private
|
|
608
|
+
* @param {string} category - Icon category.
|
|
609
|
+
* @param {string} name - Icon name.
|
|
610
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
611
|
+
*/
|
|
612
|
+
async fetchIcon(category, name) {
|
|
613
|
+
let iconHTML = '';
|
|
614
|
+
|
|
615
|
+
if (category === 'logos') {
|
|
616
|
+
iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
|
|
617
|
+
} else {
|
|
618
|
+
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
622
|
+
|
|
623
|
+
return dom.body.querySelector('svg');
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// lifecycle function
|
|
627
|
+
async firstUpdated() {
|
|
628
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
629
|
+
|
|
630
|
+
if (svg) {
|
|
631
|
+
this.svg = svg;
|
|
632
|
+
} else if (!svg) {
|
|
633
|
+
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
634
|
+
|
|
635
|
+
this.svg = penDOM.body.firstChild;
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
var tokensCss = i$4`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, $ds-color-icon-primary-default)}`;
|
|
641
|
+
|
|
642
|
+
var colorCss = i$4`: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-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, #fef8e9)}: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-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)}`;
|
|
643
|
+
|
|
644
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
645
|
+
// See LICENSE in the project root for license information.
|
|
646
|
+
|
|
647
|
+
|
|
648
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
649
|
+
/**
|
|
650
|
+
* auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
|
|
651
|
+
*
|
|
652
|
+
* @attr {Boolean} customSize - Allows for custom size use.
|
|
653
|
+
* @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
|
|
654
|
+
* @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
|
|
655
|
+
* @attr {Boolean} customColor - Removes primary selector.
|
|
656
|
+
* @attr {Boolean} label - Exposes content in slot as icon label.
|
|
657
|
+
* @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
|
|
658
|
+
* @attr {Boolean} accent - Sets the icon to use the accent style.
|
|
659
|
+
* @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
|
|
660
|
+
* @attr {Boolean} disabled - Sets the icon to use the disabled style.
|
|
661
|
+
* @attr {Boolean} error - Sets the icon to use the error style.
|
|
662
|
+
* @attr {Boolean} info - Sets the icon to use the info style.
|
|
663
|
+
* @attr {Boolean} secondary - Sets the icon to use the secondary style.
|
|
664
|
+
* @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
|
|
665
|
+
* @attr {Boolean} subtle - Sets the icon to use the subtle style.
|
|
666
|
+
* @attr {Boolean} success - Sets the icon to use the success style.
|
|
667
|
+
* @attr {Boolean} warning - Sets the icon to use the warning style.
|
|
668
|
+
* @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
|
|
669
|
+
* @attr {String} uri - Set the uri for CDN used when fetching icons
|
|
670
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed.
|
|
671
|
+
*/
|
|
672
|
+
|
|
673
|
+
// build the component class
|
|
674
|
+
class AuroIcon extends BaseIcon {
|
|
675
|
+
constructor() {
|
|
676
|
+
super();
|
|
677
|
+
|
|
678
|
+
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
679
|
+
|
|
680
|
+
this.privateDefaults();
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
/**
|
|
684
|
+
* Internal Defaults.
|
|
685
|
+
* @private
|
|
686
|
+
* @returns {void}
|
|
687
|
+
*/
|
|
688
|
+
/* eslint-disable max-statements */
|
|
689
|
+
privateDefaults() {
|
|
690
|
+
this.accent = false;
|
|
691
|
+
this.customColor = false;
|
|
692
|
+
this.disabled = false;
|
|
693
|
+
this.emphasis = false;
|
|
694
|
+
this.error = false;
|
|
695
|
+
this.info = false;
|
|
696
|
+
this.label = false;
|
|
697
|
+
this.primary = false;
|
|
698
|
+
this.secondary = false;
|
|
699
|
+
this.subtle = false;
|
|
700
|
+
this.success = false;
|
|
701
|
+
this.tertiary = false;
|
|
702
|
+
this.warning = false;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
// function to define props used within the scope of this component
|
|
706
|
+
static get properties() {
|
|
707
|
+
return {
|
|
708
|
+
...super.properties,
|
|
709
|
+
accent: {
|
|
710
|
+
type: Boolean,
|
|
711
|
+
reflect: true
|
|
712
|
+
},
|
|
713
|
+
ariaHidden: {
|
|
714
|
+
type: String,
|
|
715
|
+
reflect: true
|
|
716
|
+
},
|
|
717
|
+
category: {
|
|
718
|
+
type: String,
|
|
719
|
+
reflect: true
|
|
720
|
+
},
|
|
721
|
+
customColor: {
|
|
722
|
+
type: Boolean
|
|
723
|
+
},
|
|
724
|
+
disabled: {
|
|
725
|
+
type: Boolean,
|
|
726
|
+
reflect: true
|
|
727
|
+
},
|
|
728
|
+
emphasis: {
|
|
729
|
+
type: Boolean,
|
|
730
|
+
reflect: true
|
|
731
|
+
},
|
|
732
|
+
error: {
|
|
733
|
+
type: Boolean,
|
|
734
|
+
reflect: true
|
|
735
|
+
},
|
|
736
|
+
info: {
|
|
737
|
+
type: Boolean,
|
|
738
|
+
reflect: true
|
|
739
|
+
},
|
|
740
|
+
label: {
|
|
741
|
+
type: Boolean,
|
|
742
|
+
reflect: true
|
|
743
|
+
},
|
|
744
|
+
name: {
|
|
745
|
+
type: String,
|
|
746
|
+
reflect: true
|
|
747
|
+
},
|
|
748
|
+
primary: {
|
|
749
|
+
type: Boolean,
|
|
750
|
+
reflect: true
|
|
751
|
+
},
|
|
752
|
+
secondary: {
|
|
753
|
+
type: Boolean,
|
|
754
|
+
reflect: true
|
|
755
|
+
},
|
|
756
|
+
subtle: {
|
|
757
|
+
type: Boolean,
|
|
758
|
+
reflect: true
|
|
759
|
+
},
|
|
760
|
+
success: {
|
|
761
|
+
type: Boolean,
|
|
762
|
+
reflect: true
|
|
763
|
+
},
|
|
764
|
+
tertiary: {
|
|
765
|
+
type: Boolean,
|
|
766
|
+
reflect: true
|
|
767
|
+
},
|
|
768
|
+
uri: {
|
|
769
|
+
type: String
|
|
770
|
+
},
|
|
771
|
+
warning: {
|
|
772
|
+
type: Boolean,
|
|
773
|
+
reflect: true
|
|
774
|
+
}
|
|
775
|
+
};
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
static get styles() {
|
|
779
|
+
return [
|
|
780
|
+
super.styles,
|
|
781
|
+
i$4`${tokensCss}`,
|
|
782
|
+
i$4`${styleCss}`,
|
|
783
|
+
i$4`${colorCss}`
|
|
784
|
+
];
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
/**
|
|
788
|
+
* If component is registered as a custom name,
|
|
789
|
+
* this function will add an attribute to the element
|
|
790
|
+
* with the default name. This is so that other parent
|
|
791
|
+
* components can still this the element.
|
|
792
|
+
* @param {string} name - The default tag name.
|
|
793
|
+
* @param {HTMLElement} elem - The element to add the attribute to.
|
|
794
|
+
* @returns {void}
|
|
795
|
+
*/
|
|
796
|
+
handleCustomTagName(name, elem) {
|
|
797
|
+
if (name.toLowerCase() !== elem.tagName.toLowerCase()) {
|
|
798
|
+
elem.setAttribute(name, true);
|
|
799
|
+
}
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
connectedCallback() {
|
|
803
|
+
super.connectedCallback();
|
|
804
|
+
this.handleCustomTagName('auro-icon', this);
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
808
|
+
render() {
|
|
809
|
+
const a11y = {
|
|
810
|
+
'labelContainer': true,
|
|
811
|
+
'util_displayHiddenVisually': !this.label
|
|
812
|
+
};
|
|
813
|
+
|
|
814
|
+
return x`
|
|
815
|
+
<div
|
|
816
|
+
title="${o(this.title ? this.title : undefined)}"
|
|
817
|
+
>
|
|
818
|
+
|
|
819
|
+
<span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
|
|
820
|
+
${this.svg}
|
|
821
|
+
</span>
|
|
822
|
+
|
|
823
|
+
<div class="${e(a11y)}">
|
|
824
|
+
<slot></slot>
|
|
825
|
+
</div>
|
|
826
|
+
</div>
|
|
827
|
+
`;
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
// default internal definition
|
|
832
|
+
if (!customElements.get("auro-icon")) {
|
|
833
|
+
customElements.define("auro-icon", AuroIcon);
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
var iconVersion = '5.0.0-beta.1';
|
|
837
|
+
|
|
838
|
+
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
839
|
+
// See LICENSE in the project root for license information.
|
|
840
|
+
|
|
51
841
|
|
|
52
842
|
const ESCAPE_KEYCODE = 27,
|
|
53
843
|
FOCUS_TIMEOUT = 50;
|
|
@@ -76,22 +866,24 @@ const ESCAPE_KEYCODE = 27,
|
|
|
76
866
|
* @csspart dialog-footer - apply CSS to the footer of the dialog
|
|
77
867
|
*/
|
|
78
868
|
|
|
79
|
-
class ComponentBase extends s {
|
|
869
|
+
class ComponentBase extends s$1 {
|
|
80
870
|
constructor() {
|
|
81
871
|
super();
|
|
82
872
|
|
|
873
|
+
this.modal = false;
|
|
874
|
+
this.unformatted = false;
|
|
875
|
+
|
|
876
|
+
const versioning = new AuroDependencyVersioning();
|
|
877
|
+
|
|
83
878
|
/**
|
|
84
879
|
* @private
|
|
85
880
|
*/
|
|
86
|
-
this.
|
|
881
|
+
this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
|
|
87
882
|
|
|
88
883
|
/**
|
|
89
884
|
* @private
|
|
90
885
|
*/
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
-
this.modal = false;
|
|
94
|
-
this.unformatted = false;
|
|
886
|
+
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
95
887
|
}
|
|
96
888
|
|
|
97
889
|
static get properties() {
|
|
@@ -196,7 +988,7 @@ class ComponentBase extends s {
|
|
|
196
988
|
|
|
197
989
|
if (lastFocusableElement) {
|
|
198
990
|
lastFocusableElement.addEventListener('focusout', () => {
|
|
199
|
-
if (closeButton !== null) {
|
|
991
|
+
if (closeButton !== null) {
|
|
200
992
|
closeButton.focus();
|
|
201
993
|
} else {
|
|
202
994
|
firstFocusableElement.focus();
|
|
@@ -247,8 +1039,10 @@ class ComponentBase extends s {
|
|
|
247
1039
|
|
|
248
1040
|
static get styles() {
|
|
249
1041
|
return [
|
|
250
|
-
styleCss,
|
|
251
|
-
styleUnformattedCss
|
|
1042
|
+
styleCss$3,
|
|
1043
|
+
styleUnformattedCss,
|
|
1044
|
+
colorCss$2,
|
|
1045
|
+
tokensCss$3
|
|
252
1046
|
];
|
|
253
1047
|
}
|
|
254
1048
|
|
|
@@ -258,12 +1052,12 @@ class ComponentBase extends s {
|
|
|
258
1052
|
*/
|
|
259
1053
|
getCloseButton() {
|
|
260
1054
|
return this.modal
|
|
261
|
-
?
|
|
262
|
-
:
|
|
263
|
-
|
|
264
|
-
|
|
1055
|
+
? n``
|
|
1056
|
+
: n`
|
|
1057
|
+
<${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
|
|
1058
|
+
<${this.iconTag} customSize customColor category="interface" name="x-lg"></${this.iconTag}>
|
|
265
1059
|
<span class="util_displayHiddenVisually">Close</span>
|
|
266
|
-
|
|
1060
|
+
</${this.buttonTag}>
|
|
267
1061
|
`;
|
|
268
1062
|
}
|
|
269
1063
|
|
|
@@ -280,16 +1074,16 @@ class ComponentBase extends s {
|
|
|
280
1074
|
'dialog--open': this.open
|
|
281
1075
|
};
|
|
282
1076
|
|
|
283
|
-
return
|
|
1077
|
+
return n`
|
|
284
1078
|
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
|
|
285
1079
|
|
|
286
1080
|
<div role="dialog" id="dialog" class="${e(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
|
|
287
1081
|
${this.unformatted
|
|
288
|
-
?
|
|
1082
|
+
? n`
|
|
289
1083
|
<slot name="content"></slot>
|
|
290
1084
|
${this.getCloseButton()}
|
|
291
1085
|
`
|
|
292
|
-
:
|
|
1086
|
+
: n`
|
|
293
1087
|
<div class="dialog-header" part="dialog-header">
|
|
294
1088
|
<h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
|
|
295
1089
|
<slot name="header">Default header ...</slot>
|