@aurodesignsystem/auro-accordion 5.0.2 → 5.1.1
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/.vscode/settings.json +2 -1
- package/CHANGELOG.md +14 -0
- package/README.md +1 -1
- package/coverage/lcov-report/auro-accordion-button.js.html +1 -1
- package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
- package/coverage/lcov-report/auro-accordion.js.html +1 -1
- package/coverage/lcov-report/color-css.js.html +2 -2
- package/coverage/lcov-report/iconVersion.js.html +2 -2
- package/coverage/lcov-report/index.html +1 -1
- package/coverage/lcov-report/style-button-css.js.html +2 -2
- package/coverage/lcov-report/style-css.js.html +2 -2
- package/coverage/lcov-report/tokens-css.js.html +2 -2
- package/demo/api.html +2 -2
- package/demo/api.md +4 -4
- package/demo/api.min.js +72 -399
- package/demo/index.html +2 -2
- package/demo/index.min.js +72 -399
- package/dist/auro-accordion__bundled.js +72 -399
- package/dist/iconVersion.d.ts +1 -1
- package/package.json +9 -9
- package/src/color-css.js +1 -1
- package/src/color.css +5 -10
- package/src/color.scss +6 -11
- package/src/iconVersion.js +1 -1
- package/src/style-button-css.js +1 -1
- package/src/style-button.css +11 -5
- package/src/style-button.scss +14 -4
- package/src/style-css.js +1 -1
- package/src/style.css +16 -3
- package/src/style.scss +24 -3
- package/src/tokens-css.js +1 -1
- package/src/tokens.css +3 -3
- package/src/tokens.scss +4 -4
- package/test/auro-accordion-group.test.js +1 -1
package/demo/index.min.js
CHANGED
|
@@ -51,7 +51,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
51
51
|
|
|
52
52
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
class AuroLibraryRuntimeUtils {
|
|
55
55
|
|
|
56
56
|
/* eslint-disable jsdoc/require-param */
|
|
57
57
|
|
|
@@ -112,7 +112,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
|
112
112
|
|
|
113
113
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
114
114
|
}
|
|
115
|
-
}
|
|
115
|
+
}
|
|
116
116
|
|
|
117
117
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
118
118
|
// See LICENSE in the project root for license information.
|
|
@@ -136,7 +136,7 @@ class AuroAccordionGroup extends r {
|
|
|
136
136
|
/**
|
|
137
137
|
* @private
|
|
138
138
|
*/
|
|
139
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
139
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// This function is to define props used within the scope of this component
|
|
@@ -166,7 +166,7 @@ class AuroAccordionGroup extends r {
|
|
|
166
166
|
*
|
|
167
167
|
*/
|
|
168
168
|
static register(name = "auro-accordion-group") {
|
|
169
|
-
AuroLibraryRuntimeUtils
|
|
169
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
firstUpdated() {
|
|
@@ -238,9 +238,9 @@ class AuroAccordionGroup extends r {
|
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
|
|
241
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
241
|
+
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auroButton{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box;cursor:pointer;pointer-events:none}:host .auroButton:focus,:host .auroButton:focus-visible,:host .auroButton:focus-within{outline:0}:host .auroButton:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
|
|
242
242
|
|
|
243
|
-
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family
|
|
243
|
+
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, AS Circular);font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, Book);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{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.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-basic-text-body-sm-font-size, 14px);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}: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}`;
|
|
244
244
|
|
|
245
245
|
/**
|
|
246
246
|
* @license
|
|
@@ -252,7 +252,7 @@ var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transp
|
|
|
252
252
|
// See LICENSE in the project root for license information.
|
|
253
253
|
|
|
254
254
|
|
|
255
|
-
|
|
255
|
+
class AuroDependencyVersioning {
|
|
256
256
|
|
|
257
257
|
/**
|
|
258
258
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -286,155 +286,15 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
286
286
|
|
|
287
287
|
return tag;
|
|
288
288
|
}
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
292
|
-
// See LICENSE in the project root for license information.
|
|
293
|
-
|
|
294
|
-
// ---------------------------------------------------------------------
|
|
295
|
-
|
|
296
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
297
|
-
|
|
298
|
-
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
299
|
-
|
|
300
|
-
/* eslint-disable jsdoc/require-param */
|
|
301
|
-
|
|
302
|
-
/**
|
|
303
|
-
* This will register a new custom element with the browser.
|
|
304
|
-
* @param {String} name - The name of the custom element.
|
|
305
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
306
|
-
* @returns {void}
|
|
307
|
-
*/
|
|
308
|
-
registerComponent(name, componentClass) {
|
|
309
|
-
if (!customElements.get(name)) {
|
|
310
|
-
customElements.define(name, class extends componentClass {});
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
316
|
-
* @returns {void}
|
|
317
|
-
*/
|
|
318
|
-
closestElement(
|
|
319
|
-
selector, // selector like in .closest()
|
|
320
|
-
base = this, // extra functionality to skip a parent
|
|
321
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
322
|
-
!el || el === document || el === window
|
|
323
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
324
|
-
: found
|
|
325
|
-
? found // found a selector INside this element
|
|
326
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
327
|
-
) {
|
|
328
|
-
return __Closest(base);
|
|
329
|
-
}
|
|
330
|
-
/* eslint-enable jsdoc/require-param */
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* 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.
|
|
334
|
-
* @param {Object} elem - The element to check.
|
|
335
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
336
|
-
* @returns {void}
|
|
337
|
-
*/
|
|
338
|
-
handleComponentTagRename(elem, tagName) {
|
|
339
|
-
const tag = tagName.toLowerCase();
|
|
340
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
341
|
-
|
|
342
|
-
if (elemTag !== tag) {
|
|
343
|
-
elem.setAttribute(tag, true);
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/**
|
|
348
|
-
* Validates if an element is a specific Auro component.
|
|
349
|
-
* @param {Object} elem - The element to validate.
|
|
350
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
351
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
352
|
-
*/
|
|
353
|
-
elementMatch(elem, tagName) {
|
|
354
|
-
const tag = tagName.toLowerCase();
|
|
355
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
356
|
-
|
|
357
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
358
|
-
}
|
|
359
|
-
};
|
|
360
|
-
|
|
361
|
-
var colorCss$3 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color:var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
362
|
-
|
|
363
|
-
var tokensCss$3 = i$5`:host{--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color:var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color:transparent}`;
|
|
364
|
-
|
|
365
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
366
|
-
// See LICENSE in the project root for license information.
|
|
367
|
-
|
|
368
|
-
// ---------------------------------------------------------------------
|
|
369
|
-
|
|
370
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
371
|
-
|
|
372
|
-
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
373
|
-
|
|
374
|
-
/* eslint-disable jsdoc/require-param */
|
|
375
|
-
|
|
376
|
-
/**
|
|
377
|
-
* This will register a new custom element with the browser.
|
|
378
|
-
* @param {String} name - The name of the custom element.
|
|
379
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
380
|
-
* @returns {void}
|
|
381
|
-
*/
|
|
382
|
-
registerComponent(name, componentClass) {
|
|
383
|
-
if (!customElements.get(name)) {
|
|
384
|
-
customElements.define(name, class extends componentClass {});
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
/**
|
|
389
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
390
|
-
* @returns {void}
|
|
391
|
-
*/
|
|
392
|
-
closestElement(
|
|
393
|
-
selector, // selector like in .closest()
|
|
394
|
-
base = this, // extra functionality to skip a parent
|
|
395
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
396
|
-
!el || el === document || el === window
|
|
397
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
398
|
-
: found
|
|
399
|
-
? found // found a selector INside this element
|
|
400
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
401
|
-
) {
|
|
402
|
-
return __Closest(base);
|
|
403
|
-
}
|
|
404
|
-
/* eslint-enable jsdoc/require-param */
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* 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.
|
|
408
|
-
* @param {Object} elem - The element to check.
|
|
409
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
410
|
-
* @returns {void}
|
|
411
|
-
*/
|
|
412
|
-
handleComponentTagRename(elem, tagName) {
|
|
413
|
-
const tag = tagName.toLowerCase();
|
|
414
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
415
|
-
|
|
416
|
-
if (elemTag !== tag) {
|
|
417
|
-
elem.setAttribute(tag, true);
|
|
418
|
-
}
|
|
419
|
-
}
|
|
289
|
+
}
|
|
420
290
|
|
|
421
|
-
|
|
422
|
-
* Validates if an element is a specific Auro component.
|
|
423
|
-
* @param {Object} elem - The element to validate.
|
|
424
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
425
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
426
|
-
*/
|
|
427
|
-
elementMatch(elem, tagName) {
|
|
428
|
-
const tag = tagName.toLowerCase();
|
|
429
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
291
|
+
var colorCss$3 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.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-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.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-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}`;
|
|
430
292
|
|
|
431
|
-
|
|
432
|
-
}
|
|
433
|
-
};
|
|
293
|
+
var tokensCss$3 = i$5`:host{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}`;
|
|
434
294
|
|
|
435
295
|
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
436
296
|
|
|
437
|
-
var colorCss$2 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-
|
|
297
|
+
var colorCss$2 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
438
298
|
|
|
439
299
|
var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
440
300
|
|
|
@@ -442,25 +302,6 @@ var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-
|
|
|
442
302
|
// See LICENSE in the project root for license information.
|
|
443
303
|
|
|
444
304
|
|
|
445
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
446
|
-
/**
|
|
447
|
-
* The auro-loader element is an easy to use animated loader component.
|
|
448
|
-
*
|
|
449
|
-
* @attr {Boolean} pulse - sets loader type
|
|
450
|
-
* @attr {Boolean} ringworm - sets loader type
|
|
451
|
-
* @attr {Boolean} laser - sets loader type
|
|
452
|
-
* @attr {Boolean} orbit - sets loader type
|
|
453
|
-
* @attr {Boolean} white - sets color of loader to white
|
|
454
|
-
* @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
|
|
455
|
-
* @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
|
|
456
|
-
* @attr {Boolean} xs - sets size to extra small
|
|
457
|
-
* @attr {Boolean} sm - sets size to small
|
|
458
|
-
* @attr {Boolean} md - sets size to medium
|
|
459
|
-
* @attr {Boolean} lg - sets size to large
|
|
460
|
-
* @csspart element - apply style to adjust speed of animation
|
|
461
|
-
*/
|
|
462
|
-
|
|
463
|
-
// build the component class
|
|
464
305
|
class AuroLoader extends r {
|
|
465
306
|
constructor() {
|
|
466
307
|
super();
|
|
@@ -483,7 +324,7 @@ class AuroLoader extends r {
|
|
|
483
324
|
/**
|
|
484
325
|
* @private
|
|
485
326
|
*/
|
|
486
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
327
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
487
328
|
|
|
488
329
|
this.orbit = false;
|
|
489
330
|
this.ringworm = false;
|
|
@@ -494,19 +335,35 @@ class AuroLoader extends r {
|
|
|
494
335
|
// function to define props used within the scope of this component
|
|
495
336
|
static get properties() {
|
|
496
337
|
return {
|
|
497
|
-
|
|
338
|
+
|
|
339
|
+
/**
|
|
340
|
+
* Sets loader to laser type.
|
|
341
|
+
*/
|
|
342
|
+
laser: {
|
|
498
343
|
type: Boolean,
|
|
499
344
|
reflect: true
|
|
500
345
|
},
|
|
346
|
+
|
|
347
|
+
/**
|
|
348
|
+
* Sets loader to orbit type.
|
|
349
|
+
*/
|
|
501
350
|
orbit: {
|
|
502
351
|
type: Boolean,
|
|
503
352
|
reflect: true
|
|
504
353
|
},
|
|
505
|
-
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
* Sets loader to pulse type.
|
|
357
|
+
*/
|
|
358
|
+
pulse: {
|
|
506
359
|
type: Boolean,
|
|
507
360
|
reflect: true
|
|
508
361
|
},
|
|
509
|
-
|
|
362
|
+
|
|
363
|
+
/**
|
|
364
|
+
* Sets loader to ringworm type.
|
|
365
|
+
*/
|
|
366
|
+
ringworm: {
|
|
510
367
|
type: Boolean,
|
|
511
368
|
reflect: true
|
|
512
369
|
}
|
|
@@ -530,7 +387,7 @@ class AuroLoader extends r {
|
|
|
530
387
|
*
|
|
531
388
|
*/
|
|
532
389
|
static register(name = "auro-loader") {
|
|
533
|
-
AuroLibraryRuntimeUtils
|
|
390
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
534
391
|
}
|
|
535
392
|
|
|
536
393
|
firstUpdated() {
|
|
@@ -580,17 +437,19 @@ class AuroLoader extends r {
|
|
|
580
437
|
}
|
|
581
438
|
}
|
|
582
439
|
|
|
583
|
-
var loaderVersion = '
|
|
440
|
+
var loaderVersion = '5.0.0';
|
|
584
441
|
|
|
442
|
+
/* eslint-disable max-lines */
|
|
585
443
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
586
444
|
// See LICENSE in the project root for license information.
|
|
587
445
|
|
|
588
446
|
|
|
589
447
|
/**
|
|
590
448
|
* @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
|
|
591
|
-
* @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
|
|
449
|
+
* @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
|
|
592
450
|
* @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
|
|
593
451
|
* @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
|
|
452
|
+
* @attr {String} loadingText - Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
|
|
594
453
|
* @attr {Boolean} onDark - Set value for on-dark version of auro-button
|
|
595
454
|
* @attr {Boolean} rounded - If set to true, the button will have a rounded shape
|
|
596
455
|
* @attr {Boolean} slim - Set value for slim version of auro-button
|
|
@@ -642,6 +501,7 @@ class AuroButton extends r {
|
|
|
642
501
|
this.rounded = false;
|
|
643
502
|
this.slim = false;
|
|
644
503
|
this.fluid = false;
|
|
504
|
+
this.loadingText = this.loadingText || 'Loading...';
|
|
645
505
|
|
|
646
506
|
// Support for HTML5 forms
|
|
647
507
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -656,7 +516,7 @@ class AuroButton extends r {
|
|
|
656
516
|
/**
|
|
657
517
|
* Generate unique names for dependency components.
|
|
658
518
|
*/
|
|
659
|
-
const versioning = new AuroDependencyVersioning
|
|
519
|
+
const versioning = new AuroDependencyVersioning();
|
|
660
520
|
|
|
661
521
|
/**
|
|
662
522
|
* @private
|
|
@@ -702,6 +562,9 @@ class AuroButton extends r {
|
|
|
702
562
|
type: Boolean,
|
|
703
563
|
reflect: true
|
|
704
564
|
},
|
|
565
|
+
loadingText: {
|
|
566
|
+
type: String
|
|
567
|
+
},
|
|
705
568
|
onDark: {
|
|
706
569
|
type: Boolean,
|
|
707
570
|
reflect: true
|
|
@@ -755,7 +618,7 @@ class AuroButton extends r {
|
|
|
755
618
|
*
|
|
756
619
|
*/
|
|
757
620
|
static register(name = "auro-button") {
|
|
758
|
-
AuroLibraryRuntimeUtils
|
|
621
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
759
622
|
}
|
|
760
623
|
|
|
761
624
|
/**
|
|
@@ -797,12 +660,22 @@ class AuroButton extends r {
|
|
|
797
660
|
this.notifyReady();
|
|
798
661
|
}
|
|
799
662
|
|
|
663
|
+
/**
|
|
664
|
+
* Submits the form that this button is associated with.
|
|
665
|
+
* @private
|
|
666
|
+
* @returns {void}
|
|
667
|
+
*/
|
|
800
668
|
surfaceSubmitEvent() {
|
|
801
669
|
if (this.form) {
|
|
802
670
|
this.form.requestSubmit();
|
|
803
671
|
}
|
|
804
672
|
}
|
|
805
673
|
|
|
674
|
+
/**
|
|
675
|
+
* Returns the form element that this button is associated with.
|
|
676
|
+
* @private
|
|
677
|
+
* @returns {HTMLFormElement|null}
|
|
678
|
+
*/
|
|
806
679
|
get form() {
|
|
807
680
|
return this.internals ? this.internals.form : null;
|
|
808
681
|
}
|
|
@@ -822,7 +695,7 @@ class AuroButton extends r {
|
|
|
822
695
|
return u`
|
|
823
696
|
<button
|
|
824
697
|
part="button"
|
|
825
|
-
aria-label="${o(this.
|
|
698
|
+
aria-label="${o(this.loading ? this.loadingText : this.arialabel || undefined)}"
|
|
826
699
|
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
827
700
|
aria-expanded="${o(this.ariaexpanded)}"
|
|
828
701
|
?autofocus="${this.autofocus}"
|
|
@@ -884,47 +757,7 @@ class AuroAccordionButton extends AuroButton {
|
|
|
884
757
|
*
|
|
885
758
|
*/
|
|
886
759
|
static register(name = "auro-accordion-button") {
|
|
887
|
-
AuroLibraryRuntimeUtils
|
|
888
|
-
}
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
892
|
-
// See LICENSE in the project root for license information.
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
class AuroDependencyVersioning {
|
|
896
|
-
|
|
897
|
-
/**
|
|
898
|
-
* Generates a unique string to be used for child auro element naming.
|
|
899
|
-
* @private
|
|
900
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
901
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
902
|
-
* @returns {string} - Unique string to be used for naming.
|
|
903
|
-
*/
|
|
904
|
-
generateElementName(baseName, version) {
|
|
905
|
-
let result = baseName;
|
|
906
|
-
|
|
907
|
-
result += '-';
|
|
908
|
-
result += version.replace(/[.]/g, '_');
|
|
909
|
-
|
|
910
|
-
return result;
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
/**
|
|
914
|
-
* Generates a unique string to be used for child auro element naming.
|
|
915
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
916
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
917
|
-
* @returns {string} - Unique string to be used for naming.
|
|
918
|
-
*/
|
|
919
|
-
generateTag(baseName, version, tagClass) {
|
|
920
|
-
const elementName = this.generateElementName(baseName, version);
|
|
921
|
-
const tag = i$1`${s(elementName)}`;
|
|
922
|
-
|
|
923
|
-
if (!customElements.get(elementName)) {
|
|
924
|
-
customElements.define(elementName, class extends tagClass {});
|
|
925
|
-
}
|
|
926
|
-
|
|
927
|
-
return tag;
|
|
760
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
|
|
928
761
|
}
|
|
929
762
|
}
|
|
930
763
|
|
|
@@ -994,7 +827,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
994
827
|
return _fetchMap.get(uri);
|
|
995
828
|
};
|
|
996
829
|
|
|
997
|
-
var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}
|
|
830
|
+
var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
998
831
|
|
|
999
832
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1000
833
|
// See LICENSE in the project root for license information.
|
|
@@ -1002,7 +835,6 @@ var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
1002
835
|
|
|
1003
836
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
1004
837
|
/**
|
|
1005
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
1006
838
|
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
1007
839
|
*/
|
|
1008
840
|
|
|
@@ -1017,6 +849,10 @@ class BaseIcon extends AuroElement {
|
|
|
1017
849
|
static get properties() {
|
|
1018
850
|
return {
|
|
1019
851
|
...super.properties,
|
|
852
|
+
|
|
853
|
+
/**
|
|
854
|
+
* Set value for on-dark version of auro-icon.
|
|
855
|
+
*/
|
|
1020
856
|
onDark: {
|
|
1021
857
|
type: Boolean,
|
|
1022
858
|
reflect: true
|
|
@@ -1075,81 +911,11 @@ class BaseIcon extends AuroElement {
|
|
|
1075
911
|
}
|
|
1076
912
|
}
|
|
1077
913
|
|
|
1078
|
-
var tokensCss$1 = i$5`:host{--ds-auro-icon-color:var(--ds-color-
|
|
1079
|
-
|
|
1080
|
-
var colorCss$1 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
1081
|
-
|
|
1082
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1083
|
-
// See LICENSE in the project root for license information.
|
|
1084
|
-
|
|
1085
|
-
// ---------------------------------------------------------------------
|
|
1086
|
-
|
|
1087
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1088
|
-
|
|
1089
|
-
class AuroLibraryRuntimeUtils {
|
|
1090
|
-
|
|
1091
|
-
/* eslint-disable jsdoc/require-param */
|
|
1092
|
-
|
|
1093
|
-
/**
|
|
1094
|
-
* This will register a new custom element with the browser.
|
|
1095
|
-
* @param {String} name - The name of the custom element.
|
|
1096
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
1097
|
-
* @returns {void}
|
|
1098
|
-
*/
|
|
1099
|
-
registerComponent(name, componentClass) {
|
|
1100
|
-
if (!customElements.get(name)) {
|
|
1101
|
-
customElements.define(name, class extends componentClass {});
|
|
1102
|
-
}
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
/**
|
|
1106
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
1107
|
-
* @returns {void}
|
|
1108
|
-
*/
|
|
1109
|
-
closestElement(
|
|
1110
|
-
selector, // selector like in .closest()
|
|
1111
|
-
base = this, // extra functionality to skip a parent
|
|
1112
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1113
|
-
!el || el === document || el === window
|
|
1114
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
1115
|
-
: found
|
|
1116
|
-
? found // found a selector INside this element
|
|
1117
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1118
|
-
) {
|
|
1119
|
-
return __Closest(base);
|
|
1120
|
-
}
|
|
1121
|
-
/* eslint-enable jsdoc/require-param */
|
|
1122
|
-
|
|
1123
|
-
/**
|
|
1124
|
-
* 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.
|
|
1125
|
-
* @param {Object} elem - The element to check.
|
|
1126
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1127
|
-
* @returns {void}
|
|
1128
|
-
*/
|
|
1129
|
-
handleComponentTagRename(elem, tagName) {
|
|
1130
|
-
const tag = tagName.toLowerCase();
|
|
1131
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
1132
|
-
|
|
1133
|
-
if (elemTag !== tag) {
|
|
1134
|
-
elem.setAttribute(tag, true);
|
|
1135
|
-
}
|
|
1136
|
-
}
|
|
914
|
+
var tokensCss$1 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
1137
915
|
|
|
1138
|
-
|
|
1139
|
-
* Validates if an element is a specific Auro component.
|
|
1140
|
-
* @param {Object} elem - The element to validate.
|
|
1141
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
1142
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1143
|
-
*/
|
|
1144
|
-
elementMatch(elem, tagName) {
|
|
1145
|
-
const tag = tagName.toLowerCase();
|
|
1146
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
916
|
+
var colorCss$1 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
|
|
1147
917
|
|
|
1148
|
-
|
|
1149
|
-
}
|
|
1150
|
-
}
|
|
1151
|
-
|
|
1152
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
918
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1153
919
|
// See LICENSE in the project root for license information.
|
|
1154
920
|
|
|
1155
921
|
|
|
@@ -1157,6 +923,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1157
923
|
constructor() {
|
|
1158
924
|
super();
|
|
1159
925
|
|
|
926
|
+
this.variant = undefined;
|
|
1160
927
|
this.privateDefaults();
|
|
1161
928
|
}
|
|
1162
929
|
|
|
@@ -1166,20 +933,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1166
933
|
* @returns {void}
|
|
1167
934
|
*/
|
|
1168
935
|
privateDefaults() {
|
|
1169
|
-
this.accent = false;
|
|
1170
|
-
this.customColor = false;
|
|
1171
|
-
this.customSvg = false;
|
|
1172
|
-
this.disabled = false;
|
|
1173
|
-
this.emphasis = false;
|
|
1174
|
-
this.error = false;
|
|
1175
|
-
this.info = false;
|
|
1176
|
-
this.label = false;
|
|
1177
|
-
this.primary = false;
|
|
1178
|
-
this.secondary = false;
|
|
1179
|
-
this.subtle = false;
|
|
1180
|
-
this.success = false;
|
|
1181
|
-
this.tertiary = false;
|
|
1182
|
-
this.warning = false;
|
|
1183
936
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1184
937
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1185
938
|
}
|
|
@@ -1189,14 +942,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1189
942
|
return {
|
|
1190
943
|
...super.properties,
|
|
1191
944
|
|
|
1192
|
-
/**
|
|
1193
|
-
* Sets the icon to use the accent style.
|
|
1194
|
-
*/
|
|
1195
|
-
accent: {
|
|
1196
|
-
type: Boolean,
|
|
1197
|
-
reflect: true
|
|
1198
|
-
},
|
|
1199
|
-
|
|
1200
945
|
/**
|
|
1201
946
|
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
1202
947
|
*/
|
|
@@ -1227,38 +972,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1227
972
|
type: Boolean
|
|
1228
973
|
},
|
|
1229
974
|
|
|
1230
|
-
/**
|
|
1231
|
-
* Sets the icon to use the disabled style.
|
|
1232
|
-
*/
|
|
1233
|
-
disabled: {
|
|
1234
|
-
type: Boolean,
|
|
1235
|
-
reflect: true
|
|
1236
|
-
},
|
|
1237
|
-
|
|
1238
|
-
/**
|
|
1239
|
-
* Sets the icon to use the emphasis style.
|
|
1240
|
-
*/
|
|
1241
|
-
emphasis: {
|
|
1242
|
-
type: Boolean,
|
|
1243
|
-
reflect: true
|
|
1244
|
-
},
|
|
1245
|
-
|
|
1246
|
-
/**
|
|
1247
|
-
* Sets the icon to use the error style.
|
|
1248
|
-
*/
|
|
1249
|
-
error: {
|
|
1250
|
-
type: Boolean,
|
|
1251
|
-
reflect: true
|
|
1252
|
-
},
|
|
1253
|
-
|
|
1254
|
-
/**
|
|
1255
|
-
* Sets the icon to use the info style.
|
|
1256
|
-
*/
|
|
1257
|
-
info: {
|
|
1258
|
-
type: Boolean,
|
|
1259
|
-
reflect: true
|
|
1260
|
-
},
|
|
1261
|
-
|
|
1262
975
|
/**
|
|
1263
976
|
* Exposes content in slot as icon label.
|
|
1264
977
|
*/
|
|
@@ -1276,50 +989,10 @@ class AuroIcon extends BaseIcon {
|
|
|
1276
989
|
},
|
|
1277
990
|
|
|
1278
991
|
/**
|
|
1279
|
-
*
|
|
1280
|
-
*/
|
|
1281
|
-
primary: {
|
|
1282
|
-
type: Boolean,
|
|
1283
|
-
reflect: true
|
|
1284
|
-
},
|
|
1285
|
-
|
|
1286
|
-
/**
|
|
1287
|
-
* Sets the icon to use the secondary style.
|
|
1288
|
-
*/
|
|
1289
|
-
secondary: {
|
|
1290
|
-
type: Boolean,
|
|
1291
|
-
reflect: true
|
|
1292
|
-
},
|
|
1293
|
-
|
|
1294
|
-
/**
|
|
1295
|
-
* Sets the icon to use the subtle style.
|
|
992
|
+
* The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
|
|
1296
993
|
*/
|
|
1297
|
-
|
|
1298
|
-
type:
|
|
1299
|
-
reflect: true
|
|
1300
|
-
},
|
|
1301
|
-
|
|
1302
|
-
/**
|
|
1303
|
-
* Sets the icon to use the success style.
|
|
1304
|
-
*/
|
|
1305
|
-
success: {
|
|
1306
|
-
type: Boolean,
|
|
1307
|
-
reflect: true
|
|
1308
|
-
},
|
|
1309
|
-
|
|
1310
|
-
/**
|
|
1311
|
-
* Sets the icon to use the tertiary style.
|
|
1312
|
-
*/
|
|
1313
|
-
tertiary: {
|
|
1314
|
-
type: Boolean,
|
|
1315
|
-
reflect: true
|
|
1316
|
-
},
|
|
1317
|
-
|
|
1318
|
-
/**
|
|
1319
|
-
* Sets the icon to use the warning style.
|
|
1320
|
-
*/
|
|
1321
|
-
warning: {
|
|
1322
|
-
type: Boolean,
|
|
994
|
+
variant: {
|
|
995
|
+
type: String,
|
|
1323
996
|
reflect: true
|
|
1324
997
|
}
|
|
1325
998
|
};
|
|
@@ -1409,17 +1082,17 @@ class AuroIcon extends BaseIcon {
|
|
|
1409
1082
|
}
|
|
1410
1083
|
}
|
|
1411
1084
|
|
|
1412
|
-
var iconVersion = '
|
|
1085
|
+
var iconVersion = '8.0.1';
|
|
1413
1086
|
|
|
1414
1087
|
var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-up__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-up__desc\">Directional indicator; up.</desc><path d=\"m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977\"/></svg>"};
|
|
1415
1088
|
|
|
1416
1089
|
var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
|
|
1417
1090
|
|
|
1418
|
-
var styleCss = i$5`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)
|
|
1091
|
+
var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, $ds-size-200)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left:var(--ds-size-200, $ds-size-200)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
|
|
1419
1092
|
|
|
1420
|
-
var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-
|
|
1093
|
+
var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
1421
1094
|
|
|
1422
|
-
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-color-border-divider
|
|
1095
|
+
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
1423
1096
|
|
|
1424
1097
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1425
1098
|
// See LICENSE in the project root for license information.
|
|
@@ -1470,7 +1143,7 @@ class AuroAccordion extends r {
|
|
|
1470
1143
|
/**
|
|
1471
1144
|
* @private
|
|
1472
1145
|
*/
|
|
1473
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
1146
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1474
1147
|
|
|
1475
1148
|
this.expanded = false;
|
|
1476
1149
|
}
|
|
@@ -1527,7 +1200,7 @@ class AuroAccordion extends r {
|
|
|
1527
1200
|
*/
|
|
1528
1201
|
static register(name = "auro-accordion") {
|
|
1529
1202
|
const nameGroup = `${name}-group`;
|
|
1530
|
-
AuroLibraryRuntimeUtils
|
|
1203
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
|
|
1531
1204
|
AuroAccordionGroup.register(nameGroup);
|
|
1532
1205
|
}
|
|
1533
1206
|
|