@aurodesignsystem/auro-dialog 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/index.min.js CHANGED
@@ -1,50 +1,1193 @@
1
- import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
2
- import { css, LitElement } from 'lit';
3
- import { html } from 'lit/static-html.js';
4
- import { classMap } from 'lit/directives/class-map.js';
5
- import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
6
- import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
7
- import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
1
+ function initBasicExample() {
2
+ const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
3
+ const dialog = document.querySelector('#defaultDialog');
4
+
5
+ buttons.forEach((button) => {
6
+ button.addEventListener('click', () => {
7
+ if (dialog.hasAttribute('open')) {
8
+ dialog.removeAttribute('open');
9
+ } else {
10
+ dialog.setAttribute('open', true);
11
+ }
12
+ });
13
+ });
14
+ }
15
+
16
+ function initCustomExample() {
17
+ const buttons = [document.querySelector('#openCustom'), document.querySelector('#closeCustom')];
18
+ const dialog = document.querySelector('#defaultDialog');
19
+
20
+ buttons.forEach((button) => {
21
+ button.addEventListener('click', () => {
22
+ if (dialog.hasAttribute('open')) {
23
+ dialog.removeAttribute('open');
24
+ } else {
25
+ dialog.setAttribute('open', true);
26
+ }
27
+ });
28
+ });
29
+ }
30
+
31
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
32
+ // See LICENSE in the project root for license information.
33
+
34
+ // ---------------------------------------------------------------------
35
+
36
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
37
+
38
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
39
+
40
+ /* eslint-disable jsdoc/require-param */
41
+
42
+ /**
43
+ * This will register a new custom element with the browser.
44
+ * @param {String} name - The name of the custom element.
45
+ * @param {Object} componentClass - The class to register as a custom element.
46
+ * @returns {void}
47
+ */
48
+ registerComponent(name, componentClass) {
49
+ if (!customElements.get(name)) {
50
+ customElements.define(name, class extends componentClass {});
51
+ }
52
+ }
53
+
54
+ /**
55
+ * Finds and returns the closest HTML Element based on a selector.
56
+ * @returns {void}
57
+ */
58
+ closestElement(
59
+ selector, // selector like in .closest()
60
+ base = this, // extra functionality to skip a parent
61
+ __Closest = (el, found = el && el.closest(selector)) =>
62
+ !el || el === document || el === window
63
+ ? null // standard .closest() returns null for non-found selectors also
64
+ : found
65
+ ? found // found a selector INside this element
66
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
67
+ ) {
68
+ return __Closest(base);
69
+ }
70
+ /* eslint-enable jsdoc/require-param */
71
+
72
+ /**
73
+ * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
74
+ * @param {Object} elem - The element to check.
75
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
76
+ * @returns {void}
77
+ */
78
+ handleComponentTagRename(elem, tagName) {
79
+ const tag = tagName.toLowerCase();
80
+ const elemTag = elem.tagName.toLowerCase();
81
+
82
+ if (elemTag !== tag) {
83
+ elem.setAttribute(tag, true);
84
+ }
85
+ }
86
+
87
+ /**
88
+ * Validates if an element is a specific Auro component.
89
+ * @param {Object} elem - The element to validate.
90
+ * @param {String} tagName - The name of the Auro component to check against.
91
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
92
+ */
93
+ elementMatch(elem, tagName) {
94
+ const tag = tagName.toLowerCase();
95
+ const elemTag = elem.tagName.toLowerCase();
96
+
97
+ return elemTag === tag || elem.hasAttribute(tag);
98
+ }
99
+ };
100
+
101
+ /**
102
+ * @license
103
+ * Copyright 2019 Google LLC
104
+ * SPDX-License-Identifier: BSD-3-Clause
105
+ */
106
+ const t$1=globalThis,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$1=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)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$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$1.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$2("string"==typeof t?t:t+"",void 0,s),i$2=(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$2(o,t,s)},S$1=(s,o)=>{if(e$2)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
107
+
108
+ /**
109
+ * @license
110
+ * Copyright 2017 Google LLC
111
+ * SPDX-License-Identifier: BSD-3-Clause
112
+ */const{is:i$1,defineProperty:e$1,getOwnPropertyDescriptor:r,getOwnPropertyNames:h$2,getOwnPropertySymbols:o,getPrototypeOf:n$1}=Object,a=globalThis,c$1=a.trustedTypes,l=c$1?c$1.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l: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$2=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a.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){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$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r(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}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h$2(t),...o(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).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;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$2)(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("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4");
113
+
114
+ /**
115
+ * @license
116
+ * Copyright 2017 Google LLC
117
+ * SPDX-License-Identifier: BSD-3-Clause
118
+ */
119
+ const n=globalThis,c=n.trustedTypes,h$1=c?c.createPolicy("lit-html",{createHTML:t=>t}):void 0,f$1="$lit$",v=`lit$${Math.random().toFixed(9).slice(2)}$`,m="?"+v,_=`<${m}>`,w=document,lt=()=>w.createComment(""),st=t=>null===t||"object"!=typeof t&&"function"!=typeof t,g=Array.isArray,$=t=>g(t)||"function"==typeof t?.[Symbol.iterator],x="[ \t\n\f\r]",T=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,E=/-->/g,k=/>/g,O=RegExp(`>|${x}(?:([^\\s"'>=/]+)(${x}*=${x}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),S=/'/g,j=/"/g,M=/^(?:script|style|textarea|title)$/i,P=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),ke$1=P(1),R=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),V=new WeakMap,I=w.createTreeWalker(w,129);function N(t,i){if(!g(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==h$1?h$1.createHTML(i):i}const U=(t,i)=>{const s=t.length-1,e=[];let h,o=2===i?"<svg>":3===i?"<math>":"",n=T;for(let i=0;i<s;i++){const s=t[i];let r,l,c=-1,a=0;for(;a<s.length&&(n.lastIndex=a,l=n.exec(s),null!==l);)a=n.lastIndex,n===T?"!--"===l[1]?n=E:void 0!==l[1]?n=k:void 0!==l[2]?(M.test(l[2])&&(h=RegExp("</"+l[2],"g")),n=O):void 0!==l[3]&&(n=O):n===O?">"===l[0]?(n=h??T,c=-1):void 0===l[1]?c=-2:(c=n.lastIndex-l[2].length,r=l[1],n=void 0===l[3]?O:'"'===l[3]?j:S):n===j||n===S?n=O:n===E||n===k?n=T:(n=O,h=void 0);const u=n===O&&t[i+1].startsWith("/>")?" ":"";o+=n===T?s+_:c>=0?(e.push(r),s.slice(0,c)+f$1+s.slice(c)+v+u):s+v+(-2===c?i:u);}return [N(t,o+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class B{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let h=0,o=0;const n=t.length-1,r=this.parts,[l,a]=U(t,i);if(this.el=B.createElement(l,s),I.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(e=I.nextNode())&&r.length<n;){if(1===e.nodeType){if(e.hasAttributes())for(const t of e.getAttributeNames())if(t.endsWith(f$1)){const i=a[o++],s=e.getAttribute(t).split(v),n=/([.?@])?(.*)/.exec(i);r.push({type:1,index:h,name:n[2],strings:s,ctor:"."===n[1]?Y:"?"===n[1]?Z:"@"===n[1]?q:G}),e.removeAttribute(t);}else t.startsWith(v)&&(r.push({type:6,index:h}),e.removeAttribute(t));if(M.test(e.tagName)){const t=e.textContent.split(v),i=t.length-1;if(i>0){e.textContent=c?c.emptyScript:"";for(let s=0;s<i;s++)e.append(t[s],lt()),I.nextNode(),r.push({type:2,index:++h});e.append(t[i],lt());}}}else if(8===e.nodeType)if(e.data===m)r.push({type:2,index:h});else {let t=-1;for(;-1!==(t=e.data.indexOf(v,t+1));)r.push({type:7,index:h}),t+=v.length-1;}h++;}}static createElement(t,i){const s=w.createElement("template");return s.innerHTML=t,s}}function z(t,i,s=t,e){if(i===R)return i;let h=void 0!==e?s.o?.[e]:s.l;const o=st(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.o??=[])[e]=h:s.l=h),void 0!==h&&(i=z(t,h._$AS(t,i.values),h,e)),i}class F{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??w).importNode(i,!0);I.currentNode=e;let h=I.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new et(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new K(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=I.nextNode(),o++);}return I.currentNode=w,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 et{get _$AU(){return this._$AM?._$AU??this.v}constructor(t,i,s,e){this.type=2,this._$AH=D,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this.v=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=z(this,t,i),st(t)?t===D||null==t||""===t?(this._$AH!==D&&this._$AR(),this._$AH=D):t!==this._$AH&&t!==R&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):$(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==D&&st(this._$AH)?this._$AA.nextSibling.data=t:this.T(w.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=B.createElement(N(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new F(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=V.get(t.strings);return void 0===i&&V.set(t.strings,i=new B(t)),i}k(t){g(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 et(this.O(lt()),this.O(lt()),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.v=t,this._$AP?.(t));}}class G{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=D,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=D;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=z(this,t,i,0),o=!st(t)||t!==this._$AH&&t!==R,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=z(this,e[s+n],i,n),r===R&&(r=this._$AH[n]),o||=!st(r)||r!==this._$AH[n],r===D?t=D:t!==D&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===D?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class Y extends G{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===D?void 0:t;}}class Z extends G{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==D);}}class q extends G{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=z(this,t,i,0)??D)===R)return;const s=this._$AH,e=t===D&&s!==D||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==D&&(s===D||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 K{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){z(this,t);}}const Re=n.litHtmlPolyfillSupport;Re?.(B,et),(n.litHtmlVersions??=[]).push("3.2.0");const Q=(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 et(i.insertBefore(lt(),t),t,void 0,s??{});}return h._$AI(t),h};
120
+
121
+ /**
122
+ * @license
123
+ * Copyright 2017 Google LLC
124
+ * SPDX-License-Identifier: BSD-3-Clause
125
+ */class h extends b{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.o=Q(e,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1);}render(){return R}}h._$litElement$=!0,h["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:h});const f=globalThis.litElementPolyfillSupport;f?.({LitElement:h});(globalThis.litElementVersions??=[]).push("4.1.0");
126
+
127
+ /**
128
+ * @license
129
+ * Copyright 2020 Google LLC
130
+ * SPDX-License-Identifier: BSD-3-Clause
131
+ */
132
+ const $e=Symbol.for(""),xe=t=>{if(t?.r===$e)return t?._$litStatic$},tr=t=>({_$litStatic$:t,r:$e}),er=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:$e}),Te=new Map,Ee=t=>(r,...e)=>{const a=e.length;let o,s;const i=[],l=[];let n,u=0,c=!1;for(;u<a;){for(n=r[u];u<a&&void 0!==(s=e[u],o=xe(s));)n+=o+r[++u],c=!0;u!==a&&l.push(s),i.push(n),u++;}if(u===a&&i.push(r[a]),c){const t=i.join("$$lit$$");void 0===(r=Te.get(t))&&(i.raw=i,Te.set(t,r=i)),e=l;}return t(r,...e)},ke=Ee(ke$1);
133
+
134
+ /**
135
+ * @license
136
+ * Copyright 2017 Google LLC
137
+ * SPDX-License-Identifier: BSD-3-Clause
138
+ */
139
+ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this.t=t,this._$AM=e,this.i=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
140
+
141
+ /**
142
+ * @license
143
+ * Copyright 2018 Google LLC
144
+ * SPDX-License-Identifier: BSD-3-Clause
145
+ */const Rt=e(class extends i{constructor(s){if(super(s),s.type!==t.ATTRIBUTE||"class"!==s.name||s.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(t,[s]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.st)t in s||(i.remove(t),this.st.delete(t));for(const t in s){const r=!!s[t];r===this.st.has(t)||this.nt?.has(t)||(r?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)));}return R}});
146
+
147
+ var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl: 0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl: 0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl: 0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
148
+
149
+ var styleUnformattedCss = i$2`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;
150
+
151
+ var colorCss$3 = i$2`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
152
+
153
+ var tokensCss$3 = i$2`:host{--ds-auro-dialog-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
154
+
155
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
156
+ // See LICENSE in the project root for license information.
157
+
158
+
159
+ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
160
+
161
+ /**
162
+ * Generates a unique string to be used for child auro element naming.
163
+ * @private
164
+ * @param {string} baseName - Defines the first part of the unique element name.
165
+ * @param {string} version - Version of the component that will be appended to the baseName.
166
+ * @returns {string} - Unique string to be used for naming.
167
+ */
168
+ generateElementName(baseName, version) {
169
+ let result = baseName;
170
+
171
+ result += '-';
172
+ result += version.replace(/[.]/g, '_');
173
+
174
+ return result;
175
+ }
176
+
177
+ /**
178
+ * Generates a unique string to be used for child auro element naming.
179
+ * @param {string} baseName - Defines the first part of the unique element name.
180
+ * @param {string} version - Version of the component that will be appended to the baseName.
181
+ * @returns {string} - Unique string to be used for naming.
182
+ */
183
+ generateTag(baseName, version, tagClass) {
184
+ const elementName = this.generateElementName(baseName, version);
185
+ const tag = er`${tr(elementName)}`;
186
+
187
+ if (!customElements.get(elementName)) {
188
+ customElements.define(elementName, class extends tagClass {});
189
+ }
190
+
191
+ return tag;
192
+ }
193
+ };
194
+
195
+ /**
196
+ * @license
197
+ * Copyright 2018 Google LLC
198
+ * SPDX-License-Identifier: BSD-3-Clause
199
+ */const to=t=>t??D;
200
+
201
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
202
+ // See LICENSE in the project root for license information.
203
+
204
+
205
+ class AuroDependencyVersioning {
206
+
207
+ /**
208
+ * Generates a unique string to be used for child auro element naming.
209
+ * @private
210
+ * @param {string} baseName - Defines the first part of the unique element name.
211
+ * @param {string} version - Version of the component that will be appended to the baseName.
212
+ * @returns {string} - Unique string to be used for naming.
213
+ */
214
+ generateElementName(baseName, version) {
215
+ let result = baseName;
216
+
217
+ result += '-';
218
+ result += version.replace(/[.]/g, '_');
219
+
220
+ return result;
221
+ }
222
+
223
+ /**
224
+ * Generates a unique string to be used for child auro element naming.
225
+ * @param {string} baseName - Defines the first part of the unique element name.
226
+ * @param {string} version - Version of the component that will be appended to the baseName.
227
+ * @returns {string} - Unique string to be used for naming.
228
+ */
229
+ generateTag(baseName, version, tagClass) {
230
+ const elementName = this.generateElementName(baseName, version);
231
+ const tag = er`${tr(elementName)}`;
232
+
233
+ if (!customElements.get(elementName)) {
234
+ customElements.define(elementName, class extends tagClass {});
235
+ }
236
+
237
+ return tag;
238
+ }
239
+ }
240
+
241
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
242
+ // See LICENSE in the project root for license information.
243
+
244
+ // ---------------------------------------------------------------------
245
+
246
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
247
+
248
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
249
+
250
+ /* eslint-disable jsdoc/require-param */
251
+
252
+ /**
253
+ * This will register a new custom element with the browser.
254
+ * @param {String} name - The name of the custom element.
255
+ * @param {Object} componentClass - The class to register as a custom element.
256
+ * @returns {void}
257
+ */
258
+ registerComponent(name, componentClass) {
259
+ if (!customElements.get(name)) {
260
+ customElements.define(name, class extends componentClass {});
261
+ }
262
+ }
263
+
264
+ /**
265
+ * Finds and returns the closest HTML Element based on a selector.
266
+ * @returns {void}
267
+ */
268
+ closestElement(
269
+ selector, // selector like in .closest()
270
+ base = this, // extra functionality to skip a parent
271
+ __Closest = (el, found = el && el.closest(selector)) =>
272
+ !el || el === document || el === window
273
+ ? null // standard .closest() returns null for non-found selectors also
274
+ : found
275
+ ? found // found a selector INside this element
276
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
277
+ ) {
278
+ return __Closest(base);
279
+ }
280
+ /* eslint-enable jsdoc/require-param */
281
+
282
+ /**
283
+ * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
284
+ * @param {Object} elem - The element to check.
285
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
286
+ * @returns {void}
287
+ */
288
+ handleComponentTagRename(elem, tagName) {
289
+ const tag = tagName.toLowerCase();
290
+ const elemTag = elem.tagName.toLowerCase();
291
+
292
+ if (elemTag !== tag) {
293
+ elem.setAttribute(tag, true);
294
+ }
295
+ }
296
+
297
+ /**
298
+ * Validates if an element is a specific Auro component.
299
+ * @param {Object} elem - The element to validate.
300
+ * @param {String} tagName - The name of the Auro component to check against.
301
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
302
+ */
303
+ elementMatch(elem, tagName) {
304
+ const tag = tagName.toLowerCase();
305
+ const elemTag = elem.tagName.toLowerCase();
306
+
307
+ return elemTag === tag || elem.hasAttribute(tag);
308
+ }
309
+ };
310
+
311
+ var styleCss$2 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
312
+
313
+ var colorCss$2 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
314
+
315
+ var tokensCss$2 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
316
+
317
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
318
+ // See LICENSE in the project root for license information.
319
+
320
+ // ---------------------------------------------------------------------
321
+
322
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
323
+
324
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
325
+
326
+ /* eslint-disable jsdoc/require-param */
327
+
328
+ /**
329
+ * This will register a new custom element with the browser.
330
+ * @param {String} name - The name of the custom element.
331
+ * @param {Object} componentClass - The class to register as a custom element.
332
+ * @returns {void}
333
+ */
334
+ registerComponent(name, componentClass) {
335
+ if (!customElements.get(name)) {
336
+ customElements.define(name, class extends componentClass {});
337
+ }
338
+ }
339
+
340
+ /**
341
+ * Finds and returns the closest HTML Element based on a selector.
342
+ * @returns {void}
343
+ */
344
+ closestElement(
345
+ selector, // selector like in .closest()
346
+ base = this, // extra functionality to skip a parent
347
+ __Closest = (el, found = el && el.closest(selector)) =>
348
+ !el || el === document || el === window
349
+ ? null // standard .closest() returns null for non-found selectors also
350
+ : found
351
+ ? found // found a selector INside this element
352
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
353
+ ) {
354
+ return __Closest(base);
355
+ }
356
+ /* eslint-enable jsdoc/require-param */
357
+
358
+ /**
359
+ * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
360
+ * @param {Object} elem - The element to check.
361
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
362
+ * @returns {void}
363
+ */
364
+ handleComponentTagRename(elem, tagName) {
365
+ const tag = tagName.toLowerCase();
366
+ const elemTag = elem.tagName.toLowerCase();
367
+
368
+ if (elemTag !== tag) {
369
+ elem.setAttribute(tag, true);
370
+ }
371
+ }
372
+
373
+ /**
374
+ * Validates if an element is a specific Auro component.
375
+ * @param {Object} elem - The element to validate.
376
+ * @param {String} tagName - The name of the Auro component to check against.
377
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
378
+ */
379
+ elementMatch(elem, tagName) {
380
+ const tag = tagName.toLowerCase();
381
+ const elemTag = elem.tagName.toLowerCase();
382
+
383
+ return elemTag === tag || elem.hasAttribute(tag);
384
+ }
385
+ };
386
+
387
+ var styleCss$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
388
+
389
+ var colorCss$1 = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
390
+
391
+ var tokensCss$1 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
392
+
393
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
394
+ // See LICENSE in the project root for license information.
395
+
396
+
397
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
398
+ /**
399
+ * The auro-loader element is an easy to use animated loader component.
400
+ *
401
+ * @attr {Boolean} pulse - sets loader type
402
+ * @attr {Boolean} ringworm - sets loader type
403
+ * @attr {Boolean} laser - sets loader type
404
+ * @attr {Boolean} orbit - sets loader type
405
+ * @attr {Boolean} white - sets color of loader to white
406
+ * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
407
+ * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
408
+ * @attr {Boolean} xs - sets size to extra small
409
+ * @attr {Boolean} sm - sets size to small
410
+ * @attr {Boolean} md - sets size to medium
411
+ * @attr {Boolean} lg - sets size to large
412
+ * @csspart element - apply style to adjust speed of animation
413
+ */
414
+
415
+ // build the component class
416
+ class AuroLoader extends h {
417
+ constructor() {
418
+ super();
419
+
420
+ /**
421
+ * @private
422
+ */
423
+ this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
424
+
425
+ /**
426
+ * @private
427
+ */
428
+ this.mdCount = 3;
429
+
430
+ /**
431
+ * @private
432
+ */
433
+ this.smCount = 2;
434
+
435
+ /**
436
+ * @private
437
+ */
438
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
439
+
440
+ this.orbit = false;
441
+ this.ringworm = false;
442
+ this.laser = false;
443
+ this.pulse = false;
444
+ }
445
+
446
+ // function to define props used within the scope of this component
447
+ static get properties() {
448
+ return {
449
+ pulse: {
450
+ type: Boolean,
451
+ reflect: true
452
+ },
453
+ orbit: {
454
+ type: Boolean,
455
+ reflect: true
456
+ },
457
+ ringworm: {
458
+ type: Boolean,
459
+ reflect: true
460
+ },
461
+ laser: {
462
+ type: Boolean,
463
+ reflect: true
464
+ }
465
+ };
466
+ }
467
+
468
+ static get styles() {
469
+ return [
470
+ i$2`${styleCss$1}`,
471
+ i$2`${colorCss$1}`,
472
+ i$2`${tokensCss$1}`
473
+ ];
474
+ }
475
+
476
+ /**
477
+ * This will register this element with the browser.
478
+ * @param {string} [name="auro-loader"] - The name of element that you want to register to.
479
+ *
480
+ * @example
481
+ * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
482
+ *
483
+ */
484
+ static register(name = "auro-loader") {
485
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
486
+ }
487
+
488
+ firstUpdated() {
489
+ // Add the tag name as an attribute if it is different than the component name
490
+ this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
491
+ }
492
+
493
+ connectedCallback() {
494
+ super.connectedCallback();
495
+ }
496
+
497
+ /**
498
+ * @private
499
+ * @returns {Array} Numbered array for template map.
500
+ */
501
+ defineTemplate() {
502
+ let nodes = Array.from(Array(this.mdCount).keys());
503
+
504
+ if (this.orbit || this.laser) {
505
+ nodes = Array.from(Array(this.smCount).keys());
506
+ } else if (this.ringworm) {
507
+ nodes = Array.from(Array(0).keys());
508
+ }
509
+
510
+ return nodes;
511
+ }
512
+
513
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
514
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
515
+
516
+ // function that renders the HTML and CSS into the scope of the component
517
+ render() {
518
+ return ke$1`
519
+ ${this.defineTemplate().map((idx) => ke$1`
520
+ <span part="element" class="loader node-${idx}"></span>
521
+ `)}
522
+
523
+ <div class="no-animation">Loading...</div>
524
+
525
+ ${this.ringworm ? ke$1`
526
+ <svg part="element" class="circular" viewBox="25 25 50 50">
527
+ <circle class="path" cx="50" cy="50" r="20" fill="none"/>
528
+ </svg>`
529
+ : ``
530
+ }
531
+ `;
532
+ }
533
+ }
534
+
535
+ var loaderVersion = '3.0.1';
536
+
537
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
538
+ // See LICENSE in the project root for license information.
539
+
540
+
541
+ /**
542
+ * @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
543
+ * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
544
+ * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
545
+ * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
546
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-button
547
+ * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
548
+ * @attr {Boolean} slim - Set value for slim version of auro-button
549
+ * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
550
+ * @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.
551
+ * @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.
552
+ * @attr {String} id - Set the unique ID of an element.
553
+ * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
554
+ * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
555
+ * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
556
+ * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
557
+ * @attr {Boolean} secondary - DEPRECATED
558
+ * @attr {Boolean} tertiary - DEPRECATED
559
+ * @prop {Boolean} ready - When false the component API should not be called.
560
+ * @event auroButton-ready - Notifies that the component has finished initializing.
561
+ * @slot - Default slot for the text of the button.
562
+ * @slot icon - Slot to provide auro-icon for the button.
563
+ * @csspart button - Apply CSS to HTML5 button.
564
+ * @csspart loader - Apply CSS to auro-loader.
565
+ * @csspart text - Apply CSS to text slot.
566
+ * @csspart icon - Apply CSS to icon slot.
567
+ */
568
+
569
+ /* eslint-disable lit/no-invalid-html, lit/binding-positions */
570
+
571
+ class AuroButton extends h {
572
+
573
+ constructor() {
574
+ super();
575
+ this.autofocus = false;
576
+ this.disabled = false;
577
+ this.iconOnly = false;
578
+ this.loading = false;
579
+ this.onDark = false;
580
+ this.ready = false;
581
+ this.secondary = false;
582
+ this.tertiary = false;
583
+ this.rounded = false;
584
+ this.slim = false;
585
+ this.fluid = false;
586
+
587
+ /**
588
+ * Generate unique names for dependency components.
589
+ */
590
+ const versioning = new AuroDependencyVersioning();
591
+
592
+ /**
593
+ * @private
594
+ */
595
+ this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
596
+ }
597
+
598
+ static get styles() {
599
+ return [
600
+ tokensCss$2,
601
+ styleCss$2,
602
+ colorCss$2
603
+ ];
604
+ }
605
+
606
+ static get properties() {
607
+ return {
608
+ autofocus: {
609
+ type: Boolean,
610
+ reflect: true
611
+ },
612
+ disabled: {
613
+ type: Boolean,
614
+ reflect: true
615
+ },
616
+ secondary: {
617
+ type: Boolean,
618
+ reflect: true
619
+ },
620
+ tertiary: {
621
+ type: Boolean,
622
+ reflect: true
623
+ },
624
+ fluid: {
625
+ type: Boolean,
626
+ reflect: true
627
+ },
628
+ iconOnly: {
629
+ type: Boolean,
630
+ reflect: true
631
+ },
632
+ loading: {
633
+ type: Boolean,
634
+ reflect: true
635
+ },
636
+ onDark: {
637
+ type: Boolean,
638
+ reflect: true
639
+ },
640
+ rounded: {
641
+ type: Boolean,
642
+ reflect: true
643
+ },
644
+ slim: {
645
+ type: Boolean,
646
+ reflect: true
647
+ },
648
+ arialabel: {
649
+ type: String,
650
+ reflect: true
651
+ },
652
+ arialabelledby: {
653
+ type: String,
654
+ reflect: true
655
+ },
656
+ title: {
657
+ type: String,
658
+ reflect: true
659
+ },
660
+ type: {
661
+ type: String,
662
+ reflect: true
663
+ },
664
+ value: {
665
+ type: String,
666
+ reflect: true
667
+ },
668
+ variant: {
669
+ type: String,
670
+ reflect: true
671
+ },
672
+ ready: { type: Boolean },
673
+ };
674
+ }
675
+
676
+ /**
677
+ * This will register this element with the browser.
678
+ * @param {string} [name="auro-button"] - The name of element that you want to register to.
679
+ *
680
+ * @example
681
+ * AuroButton.register("custom-button") // this will register this element to <custom-button/>
682
+ *
683
+ */
684
+ static register(name = "auro-button") {
685
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
686
+ }
687
+
688
+ /**
689
+ * Internal method to apply focus to the HTML5 button.
690
+ * @private
691
+ * @returns {void}
692
+ */
693
+ focus() {
694
+ this.renderRoot.querySelector('button').focus();
695
+ }
8
696
 
9
- function initBasicExample() {
10
- const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
11
- const dialog = document.querySelector('#defaultDialog');
697
+ /**
698
+ * Marks the component as ready and sends event.
699
+ * @private
700
+ * @returns {void}
701
+ */
702
+ notifyReady() {
703
+ this.ready = true;
12
704
 
13
- buttons.forEach((button) => {
14
- button.addEventListener('click', () => {
15
- if (dialog.hasAttribute('open')) {
16
- dialog.removeAttribute('open');
17
- } else {
18
- dialog.setAttribute('open', true);
19
- }
20
- });
21
- });
705
+ this.dispatchEvent(new CustomEvent('auroButton-ready', {
706
+ bubbles: true,
707
+ cancelable: false,
708
+ composed: true,
709
+ }));
710
+ }
711
+
712
+ updated() {
713
+ // support the old `secondary` and `tertiary` attributes` that are deprecated
714
+ if (this.secondary) {
715
+ this.setAttribute('variant', 'secondary');
716
+ }
717
+
718
+ if (this.tertiary) {
719
+ this.setAttribute('variant', 'tertiary');
720
+ }
721
+ }
722
+
723
+ firstUpdated() {
724
+ this.notifyReady();
725
+ }
726
+
727
+ render() {
728
+ const classes = {
729
+ 'util_insetLg--squish': true,
730
+ 'auro-button': true,
731
+ 'auro-button--rounded': this.rounded,
732
+ 'auro-button--slim': this.slim,
733
+ 'auro-button--iconOnly': this.iconOnly,
734
+ 'auro-button--iconOnlySlim': this.iconOnly && this.slim,
735
+ 'loading': this.loading
736
+ };
737
+
738
+ return ke`
739
+ <button
740
+ part="button"
741
+ aria-label="${to(this.arialabel ? this.arialabel : undefined)}"
742
+ aria-labelledby="${to(this.arialabelledby ? this.arialabelledby : undefined)}"
743
+ ?autofocus="${this.autofocus}"
744
+ class="${Rt(classes)}"
745
+ ?disabled="${this.disabled || this.loading}"
746
+ ?onDark="${this.onDark}"
747
+ title="${to(this.title ? this.title : undefined)}"
748
+ name="${to(this.name ? this.name : undefined)}"
749
+ type="${to(this.type ? this.type : undefined)}"
750
+ variant="${to(this.variant ? this.variant : undefined)}"
751
+ .value="${to(this.value ? this.value : undefined)}"
752
+ @click="${() => {}}"
753
+ >
754
+ ${to(this.loading ? ke`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
755
+
756
+ <span class="contentWrapper">
757
+ <span class="textSlot" part="text">
758
+ ${this.iconOnly ? undefined : ke`<slot></slot>`}
759
+ </span>
760
+
761
+ <span part="icon">
762
+ <slot name="icon"></slot>
763
+ </span>
764
+ </span>
765
+ </button>
766
+ `;
767
+ }
22
768
  }
23
769
 
24
- function initCustomExample() {
25
- const buttons = [document.querySelector('#openCustom'), document.querySelector('#closeCustom')];
26
- const dialog = document.querySelector('#defaultDialog');
770
+ var buttonVersion = '8.1.0';
27
771
 
28
- buttons.forEach((button) => {
29
- button.addEventListener('click', () => {
30
- if (dialog.hasAttribute('open')) {
31
- dialog.removeAttribute('open');
32
- } else {
33
- dialog.setAttribute('open', true);
772
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
773
+ // See LICENSE in the project root for license information.
774
+
775
+
776
+ /**
777
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
778
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
779
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
780
+ */
781
+
782
+ class AuroElement extends h {
783
+
784
+ // function to define props used within the scope of this component
785
+ static get properties() {
786
+ return {
787
+ hidden: { type: Boolean,
788
+ reflect: true },
789
+ hiddenVisually: { type: Boolean,
790
+ reflect: true },
791
+ hiddenAudible: { type: Boolean,
792
+ reflect: true },
793
+ };
794
+ }
795
+
796
+ /**
797
+ * @private Function that determines state of aria-hidden
798
+ */
799
+ hideAudible(value) {
800
+ if (value) {
801
+ return 'true'
802
+ }
803
+
804
+ return 'false'
805
+ }
806
+ }
807
+
808
+ 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>"};
809
+
810
+ /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
811
+
812
+ const _fetchMap = new Map();
813
+
814
+ /**
815
+ * A callback to parse Response body.
816
+ *
817
+ * @callback ResponseParser
818
+ * @param {Fetch.Response} response
819
+ * @returns {Promise}
820
+ */
821
+
822
+ /**
823
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
824
+ *
825
+ * @param {String} uri
826
+ * @param {Object} [options={}]
827
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
828
+ * @returns {Promise}
829
+ */
830
+ const cacheFetch = (uri, options = {}) => {
831
+ const responseParser = options.responseParser || ((response) => response.text());
832
+ if (!_fetchMap.has(uri)) {
833
+ _fetchMap.set(uri, fetch(uri).then(responseParser));
834
+ }
835
+ return _fetchMap.get(uri);
836
+ };
837
+
838
+ var styleCss = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
839
+
840
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
841
+ // See LICENSE in the project root for license information.
842
+
843
+
844
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
845
+ /**
846
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
847
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
848
+ */
849
+
850
+ // build the component class
851
+ class BaseIcon extends AuroElement {
852
+ constructor() {
853
+ super();
854
+ this.onDark = false;
855
+ }
856
+
857
+ // function to define props used within the scope of this component
858
+ static get properties() {
859
+ return {
860
+ ...super.properties,
861
+ onDark: {
862
+ type: Boolean,
863
+ reflect: true
864
+ },
865
+
866
+ /**
867
+ * @private
868
+ */
869
+ svg: {
870
+ attribute: false,
871
+ reflect: true
34
872
  }
35
- });
36
- });
873
+ };
874
+ }
875
+
876
+ static get styles() {
877
+ return i$2`
878
+ ${styleCss}
879
+ `;
880
+ }
881
+
882
+ /**
883
+ * Async function to fetch requested icon from npm CDN.
884
+ * @private
885
+ * @param {string} category - Icon category.
886
+ * @param {string} name - Icon name.
887
+ * @returns {SVGElement} DOM - Ready HTML to be appended.
888
+ */
889
+ async fetchIcon(category, name) {
890
+ let iconHTML = '';
891
+
892
+ if (category === 'logos') {
893
+ iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
894
+ } else {
895
+ iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
896
+ }
897
+
898
+ const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
899
+
900
+ return dom.body.querySelector('svg');
901
+ }
902
+
903
+ // lifecycle function
904
+ async firstUpdated() {
905
+ if (!this.customSvg) {
906
+ const svg = await this.fetchIcon(this.category, this.name);
907
+
908
+ if (svg) {
909
+ this.svg = svg;
910
+ } else if (!svg) {
911
+ const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
912
+
913
+ this.svg = penDOM.body.firstChild;
914
+ }
915
+ }
916
+ }
37
917
  }
38
918
 
39
- var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl: 0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl: 0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl: 0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
919
+ var tokensCss = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
920
+
921
+ var colorCss = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
40
922
 
41
- var styleUnformattedCss = css`[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)}}`;
923
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
924
+ // See LICENSE in the project root for license information.
42
925
 
43
- var colorCss = css`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
926
+ // ---------------------------------------------------------------------
44
927
 
45
- var tokensCss = css`:host{--ds-auro-dialog-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
928
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
46
929
 
47
- var buttonVersion = '8.1.0';
930
+ class AuroLibraryRuntimeUtils {
931
+
932
+ /* eslint-disable jsdoc/require-param */
933
+
934
+ /**
935
+ * This will register a new custom element with the browser.
936
+ * @param {String} name - The name of the custom element.
937
+ * @param {Object} componentClass - The class to register as a custom element.
938
+ * @returns {void}
939
+ */
940
+ registerComponent(name, componentClass) {
941
+ if (!customElements.get(name)) {
942
+ customElements.define(name, class extends componentClass {});
943
+ }
944
+ }
945
+
946
+ /**
947
+ * Finds and returns the closest HTML Element based on a selector.
948
+ * @returns {void}
949
+ */
950
+ closestElement(
951
+ selector, // selector like in .closest()
952
+ base = this, // extra functionality to skip a parent
953
+ __Closest = (el, found = el && el.closest(selector)) =>
954
+ !el || el === document || el === window
955
+ ? null // standard .closest() returns null for non-found selectors also
956
+ : found
957
+ ? found // found a selector INside this element
958
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
959
+ ) {
960
+ return __Closest(base);
961
+ }
962
+ /* eslint-enable jsdoc/require-param */
963
+
964
+ /**
965
+ * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
966
+ * @param {Object} elem - The element to check.
967
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
968
+ * @returns {void}
969
+ */
970
+ handleComponentTagRename(elem, tagName) {
971
+ const tag = tagName.toLowerCase();
972
+ const elemTag = elem.tagName.toLowerCase();
973
+
974
+ if (elemTag !== tag) {
975
+ elem.setAttribute(tag, true);
976
+ }
977
+ }
978
+
979
+ /**
980
+ * Validates if an element is a specific Auro component.
981
+ * @param {Object} elem - The element to validate.
982
+ * @param {String} tagName - The name of the Auro component to check against.
983
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
984
+ */
985
+ elementMatch(elem, tagName) {
986
+ const tag = tagName.toLowerCase();
987
+ const elemTag = elem.tagName.toLowerCase();
988
+
989
+ return elemTag === tag || elem.hasAttribute(tag);
990
+ }
991
+ }
992
+
993
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
994
+ // See LICENSE in the project root for license information.
995
+
996
+
997
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
998
+ /**
999
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
1000
+ *
1001
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
1002
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
1003
+ * @attr {Boolean} customColor - Removes primary selector.
1004
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
1005
+ * @attr {Boolean} label - Exposes content in slot as icon label.
1006
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
1007
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
1008
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
1009
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
1010
+ * @attr {Boolean} error - Sets the icon to use the error style.
1011
+ * @attr {Boolean} info - Sets the icon to use the info style.
1012
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
1013
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
1014
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
1015
+ * @attr {Boolean} success - Sets the icon to use the success style.
1016
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
1017
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
1018
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
1019
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
1020
+ * @slot svg - Used for custom SVG content.
1021
+ */
1022
+
1023
+ // build the component class
1024
+ class AuroIcon extends BaseIcon {
1025
+ constructor() {
1026
+ super();
1027
+
1028
+ this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
1029
+
1030
+ this.privateDefaults();
1031
+ }
1032
+
1033
+ /**
1034
+ * Internal Defaults.
1035
+ * @private
1036
+ * @returns {void}
1037
+ */
1038
+ privateDefaults() {
1039
+ this.accent = false;
1040
+ this.customColor = false;
1041
+ this.customSvg = false;
1042
+ this.disabled = false;
1043
+ this.emphasis = false;
1044
+ this.error = false;
1045
+ this.info = false;
1046
+ this.label = false;
1047
+ this.primary = false;
1048
+ this.secondary = false;
1049
+ this.subtle = false;
1050
+ this.success = false;
1051
+ this.tertiary = false;
1052
+ this.warning = false;
1053
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
1054
+ }
1055
+
1056
+ // function to define props used within the scope of this component
1057
+ static get properties() {
1058
+ return {
1059
+ ...super.properties,
1060
+ accent: {
1061
+ type: Boolean,
1062
+ reflect: true
1063
+ },
1064
+ ariaHidden: {
1065
+ type: String,
1066
+ reflect: true
1067
+ },
1068
+ category: {
1069
+ type: String,
1070
+ reflect: true
1071
+ },
1072
+ customColor: {
1073
+ type: Boolean
1074
+ },
1075
+ customSvg: {
1076
+ type: Boolean
1077
+ },
1078
+ disabled: {
1079
+ type: Boolean,
1080
+ reflect: true
1081
+ },
1082
+ emphasis: {
1083
+ type: Boolean,
1084
+ reflect: true
1085
+ },
1086
+ error: {
1087
+ type: Boolean,
1088
+ reflect: true
1089
+ },
1090
+ info: {
1091
+ type: Boolean,
1092
+ reflect: true
1093
+ },
1094
+ label: {
1095
+ type: Boolean,
1096
+ reflect: true
1097
+ },
1098
+ name: {
1099
+ type: String,
1100
+ reflect: true
1101
+ },
1102
+ primary: {
1103
+ type: Boolean,
1104
+ reflect: true
1105
+ },
1106
+ secondary: {
1107
+ type: Boolean,
1108
+ reflect: true
1109
+ },
1110
+ subtle: {
1111
+ type: Boolean,
1112
+ reflect: true
1113
+ },
1114
+ success: {
1115
+ type: Boolean,
1116
+ reflect: true
1117
+ },
1118
+ tertiary: {
1119
+ type: Boolean,
1120
+ reflect: true
1121
+ },
1122
+ uri: {
1123
+ type: String
1124
+ },
1125
+ warning: {
1126
+ type: Boolean,
1127
+ reflect: true
1128
+ }
1129
+ };
1130
+ }
1131
+
1132
+ static get styles() {
1133
+ return [
1134
+ super.styles,
1135
+ i$2`${tokensCss}`,
1136
+ i$2`${styleCss}`,
1137
+ i$2`${colorCss}`
1138
+ ];
1139
+ }
1140
+
1141
+ /**
1142
+ * This will register this element with the browser.
1143
+ * @param {string} [name="auro-icon"] - The name of element that you want to register to.
1144
+ *
1145
+ * @example
1146
+ * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
1147
+ *
1148
+ */
1149
+ static register(name = "auro-icon") {
1150
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
1151
+ }
1152
+
1153
+ connectedCallback() {
1154
+ super.connectedCallback();
1155
+
1156
+ // Add the tag name as an attribute if it is different than the component name
1157
+ this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
1158
+ }
1159
+
1160
+ // function that renders the HTML and CSS into the scope of the component
1161
+ render() {
1162
+ const a11y = {
1163
+ 'labelContainer': true,
1164
+ 'util_displayHiddenVisually': !this.label
1165
+ };
1166
+
1167
+ const classes = {
1168
+ 'label': this.label
1169
+ };
1170
+
1171
+ return ke$1`
1172
+ <div
1173
+ class="${Rt(classes)}"
1174
+ title="${to(this.title || undefined)}">
1175
+ <span aria-hidden="${to(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
1176
+ ${this.customSvg ? ke$1`
1177
+ <slot name="svg"></slot>
1178
+ ` : ke$1`
1179
+ ${this.svg}
1180
+ `
1181
+ }
1182
+ </span>
1183
+
1184
+ <div class="${Rt(a11y)}">
1185
+ <slot></slot>
1186
+ </div>
1187
+ </div>
1188
+ `;
1189
+ }
1190
+ }
48
1191
 
49
1192
  var iconVersion = '6.0.1';
50
1193
 
@@ -79,14 +1222,14 @@ const ESCAPE_KEYCODE = 27,
79
1222
  * @csspart dialog-footer - apply CSS to the footer of the dialog
80
1223
  */
81
1224
 
82
- class ComponentBase extends LitElement {
1225
+ class ComponentBase extends h {
83
1226
  constructor() {
84
1227
  super();
85
1228
 
86
1229
  this.modal = false;
87
1230
  this.unformatted = false;
88
1231
 
89
- const versioning = new AuroDependencyVersioning();
1232
+ const versioning = new AuroDependencyVersioning$1();
90
1233
 
91
1234
  /**
92
1235
  * @private
@@ -102,7 +1245,7 @@ class ComponentBase extends LitElement {
102
1245
  /**
103
1246
  * @private
104
1247
  */
105
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1248
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
106
1249
  }
107
1250
 
108
1251
  static get properties() {
@@ -261,10 +1404,10 @@ class ComponentBase extends LitElement {
261
1404
 
262
1405
  static get styles() {
263
1406
  return [
264
- styleCss,
1407
+ styleCss$3,
265
1408
  styleUnformattedCss,
266
- colorCss,
267
- tokensCss
1409
+ colorCss$3,
1410
+ tokensCss$3
268
1411
  ];
269
1412
  }
270
1413
 
@@ -274,8 +1417,8 @@ class ComponentBase extends LitElement {
274
1417
  */
275
1418
  getCloseButton() {
276
1419
  return this.modal
277
- ? html``
278
- : html`
1420
+ ? ke``
1421
+ : ke`
279
1422
  <${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
280
1423
  <${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
281
1424
  <span class="util_displayHiddenVisually">Close</span>
@@ -296,16 +1439,16 @@ class ComponentBase extends LitElement {
296
1439
  'dialog--open': this.open
297
1440
  };
298
1441
 
299
- return html`
300
- <div class="${classMap(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
1442
+ return ke`
1443
+ <div class="${Rt(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
301
1444
 
302
- <div role="dialog" id="dialog" class="${classMap(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
1445
+ <div role="dialog" id="dialog" class="${Rt(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
303
1446
  ${this.unformatted
304
- ? html`
1447
+ ? ke`
305
1448
  <slot name="content"></slot>
306
1449
  ${this.getCloseButton()}
307
1450
  `
308
- : html`
1451
+ : ke`
309
1452
  <div class="dialog-header" part="dialog-header">
310
1453
  <h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
311
1454
  <slot name="header">Default header ...</slot>
@@ -360,7 +1503,7 @@ class AuroDialog extends ComponentBase {
360
1503
  *
361
1504
  */
362
1505
  static register(name = "auro-dialog") {
363
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
1506
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroDialog);
364
1507
  }
365
1508
  }
366
1509