@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/api.min.js
CHANGED
|
@@ -63,7 +63,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
63
63
|
|
|
64
64
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
class AuroLibraryRuntimeUtils {
|
|
67
67
|
|
|
68
68
|
/* eslint-disable jsdoc/require-param */
|
|
69
69
|
|
|
@@ -124,7 +124,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
|
124
124
|
|
|
125
125
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
126
126
|
}
|
|
127
|
-
}
|
|
127
|
+
}
|
|
128
128
|
|
|
129
129
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
130
130
|
// See LICENSE in the project root for license information.
|
|
@@ -148,7 +148,7 @@ class AuroAccordionGroup extends r {
|
|
|
148
148
|
/**
|
|
149
149
|
* @private
|
|
150
150
|
*/
|
|
151
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
151
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
// This function is to define props used within the scope of this component
|
|
@@ -178,7 +178,7 @@ class AuroAccordionGroup extends r {
|
|
|
178
178
|
*
|
|
179
179
|
*/
|
|
180
180
|
static register(name = "auro-accordion-group") {
|
|
181
|
-
AuroLibraryRuntimeUtils
|
|
181
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
firstUpdated() {
|
|
@@ -250,9 +250,9 @@ class AuroAccordionGroup extends r {
|
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
|
|
253
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
253
|
+
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}`;
|
|
254
254
|
|
|
255
|
-
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
|
|
255
|
+
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}`;
|
|
256
256
|
|
|
257
257
|
/**
|
|
258
258
|
* @license
|
|
@@ -264,7 +264,7 @@ var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transp
|
|
|
264
264
|
// See LICENSE in the project root for license information.
|
|
265
265
|
|
|
266
266
|
|
|
267
|
-
|
|
267
|
+
class AuroDependencyVersioning {
|
|
268
268
|
|
|
269
269
|
/**
|
|
270
270
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -298,155 +298,15 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
298
298
|
|
|
299
299
|
return tag;
|
|
300
300
|
}
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
304
|
-
// See LICENSE in the project root for license information.
|
|
305
|
-
|
|
306
|
-
// ---------------------------------------------------------------------
|
|
307
|
-
|
|
308
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
309
|
-
|
|
310
|
-
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
311
|
-
|
|
312
|
-
/* eslint-disable jsdoc/require-param */
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* This will register a new custom element with the browser.
|
|
316
|
-
* @param {String} name - The name of the custom element.
|
|
317
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
318
|
-
* @returns {void}
|
|
319
|
-
*/
|
|
320
|
-
registerComponent(name, componentClass) {
|
|
321
|
-
if (!customElements.get(name)) {
|
|
322
|
-
customElements.define(name, class extends componentClass {});
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
/**
|
|
327
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
328
|
-
* @returns {void}
|
|
329
|
-
*/
|
|
330
|
-
closestElement(
|
|
331
|
-
selector, // selector like in .closest()
|
|
332
|
-
base = this, // extra functionality to skip a parent
|
|
333
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
334
|
-
!el || el === document || el === window
|
|
335
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
336
|
-
: found
|
|
337
|
-
? found // found a selector INside this element
|
|
338
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
339
|
-
) {
|
|
340
|
-
return __Closest(base);
|
|
341
|
-
}
|
|
342
|
-
/* eslint-enable jsdoc/require-param */
|
|
343
|
-
|
|
344
|
-
/**
|
|
345
|
-
* 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.
|
|
346
|
-
* @param {Object} elem - The element to check.
|
|
347
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
348
|
-
* @returns {void}
|
|
349
|
-
*/
|
|
350
|
-
handleComponentTagRename(elem, tagName) {
|
|
351
|
-
const tag = tagName.toLowerCase();
|
|
352
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
353
|
-
|
|
354
|
-
if (elemTag !== tag) {
|
|
355
|
-
elem.setAttribute(tag, true);
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
/**
|
|
360
|
-
* Validates if an element is a specific Auro component.
|
|
361
|
-
* @param {Object} elem - The element to validate.
|
|
362
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
363
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
364
|
-
*/
|
|
365
|
-
elementMatch(elem, tagName) {
|
|
366
|
-
const tag = tagName.toLowerCase();
|
|
367
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
368
|
-
|
|
369
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
370
|
-
}
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
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}`;
|
|
374
|
-
|
|
375
|
-
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}`;
|
|
376
|
-
|
|
377
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
378
|
-
// See LICENSE in the project root for license information.
|
|
379
|
-
|
|
380
|
-
// ---------------------------------------------------------------------
|
|
381
|
-
|
|
382
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
383
|
-
|
|
384
|
-
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
385
|
-
|
|
386
|
-
/* eslint-disable jsdoc/require-param */
|
|
387
|
-
|
|
388
|
-
/**
|
|
389
|
-
* This will register a new custom element with the browser.
|
|
390
|
-
* @param {String} name - The name of the custom element.
|
|
391
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
392
|
-
* @returns {void}
|
|
393
|
-
*/
|
|
394
|
-
registerComponent(name, componentClass) {
|
|
395
|
-
if (!customElements.get(name)) {
|
|
396
|
-
customElements.define(name, class extends componentClass {});
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
/**
|
|
401
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
402
|
-
* @returns {void}
|
|
403
|
-
*/
|
|
404
|
-
closestElement(
|
|
405
|
-
selector, // selector like in .closest()
|
|
406
|
-
base = this, // extra functionality to skip a parent
|
|
407
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
408
|
-
!el || el === document || el === window
|
|
409
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
410
|
-
: found
|
|
411
|
-
? found // found a selector INside this element
|
|
412
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
413
|
-
) {
|
|
414
|
-
return __Closest(base);
|
|
415
|
-
}
|
|
416
|
-
/* eslint-enable jsdoc/require-param */
|
|
417
|
-
|
|
418
|
-
/**
|
|
419
|
-
* 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.
|
|
420
|
-
* @param {Object} elem - The element to check.
|
|
421
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
422
|
-
* @returns {void}
|
|
423
|
-
*/
|
|
424
|
-
handleComponentTagRename(elem, tagName) {
|
|
425
|
-
const tag = tagName.toLowerCase();
|
|
426
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
427
|
-
|
|
428
|
-
if (elemTag !== tag) {
|
|
429
|
-
elem.setAttribute(tag, true);
|
|
430
|
-
}
|
|
431
|
-
}
|
|
301
|
+
}
|
|
432
302
|
|
|
433
|
-
|
|
434
|
-
* Validates if an element is a specific Auro component.
|
|
435
|
-
* @param {Object} elem - The element to validate.
|
|
436
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
437
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
438
|
-
*/
|
|
439
|
-
elementMatch(elem, tagName) {
|
|
440
|
-
const tag = tagName.toLowerCase();
|
|
441
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
303
|
+
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}`;
|
|
442
304
|
|
|
443
|
-
|
|
444
|
-
}
|
|
445
|
-
};
|
|
305
|
+
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}`;
|
|
446
306
|
|
|
447
307
|
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}}`;
|
|
448
308
|
|
|
449
|
-
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-
|
|
309
|
+
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}`;
|
|
450
310
|
|
|
451
311
|
var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
452
312
|
|
|
@@ -454,25 +314,6 @@ var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-
|
|
|
454
314
|
// See LICENSE in the project root for license information.
|
|
455
315
|
|
|
456
316
|
|
|
457
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
458
|
-
/**
|
|
459
|
-
* The auro-loader element is an easy to use animated loader component.
|
|
460
|
-
*
|
|
461
|
-
* @attr {Boolean} pulse - sets loader type
|
|
462
|
-
* @attr {Boolean} ringworm - sets loader type
|
|
463
|
-
* @attr {Boolean} laser - sets loader type
|
|
464
|
-
* @attr {Boolean} orbit - sets loader type
|
|
465
|
-
* @attr {Boolean} white - sets color of loader to white
|
|
466
|
-
* @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
|
|
467
|
-
* @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
|
|
468
|
-
* @attr {Boolean} xs - sets size to extra small
|
|
469
|
-
* @attr {Boolean} sm - sets size to small
|
|
470
|
-
* @attr {Boolean} md - sets size to medium
|
|
471
|
-
* @attr {Boolean} lg - sets size to large
|
|
472
|
-
* @csspart element - apply style to adjust speed of animation
|
|
473
|
-
*/
|
|
474
|
-
|
|
475
|
-
// build the component class
|
|
476
317
|
class AuroLoader extends r {
|
|
477
318
|
constructor() {
|
|
478
319
|
super();
|
|
@@ -495,7 +336,7 @@ class AuroLoader extends r {
|
|
|
495
336
|
/**
|
|
496
337
|
* @private
|
|
497
338
|
*/
|
|
498
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
339
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
499
340
|
|
|
500
341
|
this.orbit = false;
|
|
501
342
|
this.ringworm = false;
|
|
@@ -506,19 +347,35 @@ class AuroLoader extends r {
|
|
|
506
347
|
// function to define props used within the scope of this component
|
|
507
348
|
static get properties() {
|
|
508
349
|
return {
|
|
509
|
-
|
|
350
|
+
|
|
351
|
+
/**
|
|
352
|
+
* Sets loader to laser type.
|
|
353
|
+
*/
|
|
354
|
+
laser: {
|
|
510
355
|
type: Boolean,
|
|
511
356
|
reflect: true
|
|
512
357
|
},
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* Sets loader to orbit type.
|
|
361
|
+
*/
|
|
513
362
|
orbit: {
|
|
514
363
|
type: Boolean,
|
|
515
364
|
reflect: true
|
|
516
365
|
},
|
|
517
|
-
|
|
366
|
+
|
|
367
|
+
/**
|
|
368
|
+
* Sets loader to pulse type.
|
|
369
|
+
*/
|
|
370
|
+
pulse: {
|
|
518
371
|
type: Boolean,
|
|
519
372
|
reflect: true
|
|
520
373
|
},
|
|
521
|
-
|
|
374
|
+
|
|
375
|
+
/**
|
|
376
|
+
* Sets loader to ringworm type.
|
|
377
|
+
*/
|
|
378
|
+
ringworm: {
|
|
522
379
|
type: Boolean,
|
|
523
380
|
reflect: true
|
|
524
381
|
}
|
|
@@ -542,7 +399,7 @@ class AuroLoader extends r {
|
|
|
542
399
|
*
|
|
543
400
|
*/
|
|
544
401
|
static register(name = "auro-loader") {
|
|
545
|
-
AuroLibraryRuntimeUtils
|
|
402
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
546
403
|
}
|
|
547
404
|
|
|
548
405
|
firstUpdated() {
|
|
@@ -592,17 +449,19 @@ class AuroLoader extends r {
|
|
|
592
449
|
}
|
|
593
450
|
}
|
|
594
451
|
|
|
595
|
-
var loaderVersion = '
|
|
452
|
+
var loaderVersion = '5.0.0';
|
|
596
453
|
|
|
454
|
+
/* eslint-disable max-lines */
|
|
597
455
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
598
456
|
// See LICENSE in the project root for license information.
|
|
599
457
|
|
|
600
458
|
|
|
601
459
|
/**
|
|
602
460
|
* @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
|
|
603
|
-
* @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
|
|
461
|
+
* @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
|
|
604
462
|
* @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
|
|
605
463
|
* @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
|
|
464
|
+
* @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.
|
|
606
465
|
* @attr {Boolean} onDark - Set value for on-dark version of auro-button
|
|
607
466
|
* @attr {Boolean} rounded - If set to true, the button will have a rounded shape
|
|
608
467
|
* @attr {Boolean} slim - Set value for slim version of auro-button
|
|
@@ -654,6 +513,7 @@ class AuroButton extends r {
|
|
|
654
513
|
this.rounded = false;
|
|
655
514
|
this.slim = false;
|
|
656
515
|
this.fluid = false;
|
|
516
|
+
this.loadingText = this.loadingText || 'Loading...';
|
|
657
517
|
|
|
658
518
|
// Support for HTML5 forms
|
|
659
519
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -668,7 +528,7 @@ class AuroButton extends r {
|
|
|
668
528
|
/**
|
|
669
529
|
* Generate unique names for dependency components.
|
|
670
530
|
*/
|
|
671
|
-
const versioning = new AuroDependencyVersioning
|
|
531
|
+
const versioning = new AuroDependencyVersioning();
|
|
672
532
|
|
|
673
533
|
/**
|
|
674
534
|
* @private
|
|
@@ -714,6 +574,9 @@ class AuroButton extends r {
|
|
|
714
574
|
type: Boolean,
|
|
715
575
|
reflect: true
|
|
716
576
|
},
|
|
577
|
+
loadingText: {
|
|
578
|
+
type: String
|
|
579
|
+
},
|
|
717
580
|
onDark: {
|
|
718
581
|
type: Boolean,
|
|
719
582
|
reflect: true
|
|
@@ -767,7 +630,7 @@ class AuroButton extends r {
|
|
|
767
630
|
*
|
|
768
631
|
*/
|
|
769
632
|
static register(name = "auro-button") {
|
|
770
|
-
AuroLibraryRuntimeUtils
|
|
633
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
771
634
|
}
|
|
772
635
|
|
|
773
636
|
/**
|
|
@@ -809,12 +672,22 @@ class AuroButton extends r {
|
|
|
809
672
|
this.notifyReady();
|
|
810
673
|
}
|
|
811
674
|
|
|
675
|
+
/**
|
|
676
|
+
* Submits the form that this button is associated with.
|
|
677
|
+
* @private
|
|
678
|
+
* @returns {void}
|
|
679
|
+
*/
|
|
812
680
|
surfaceSubmitEvent() {
|
|
813
681
|
if (this.form) {
|
|
814
682
|
this.form.requestSubmit();
|
|
815
683
|
}
|
|
816
684
|
}
|
|
817
685
|
|
|
686
|
+
/**
|
|
687
|
+
* Returns the form element that this button is associated with.
|
|
688
|
+
* @private
|
|
689
|
+
* @returns {HTMLFormElement|null}
|
|
690
|
+
*/
|
|
818
691
|
get form() {
|
|
819
692
|
return this.internals ? this.internals.form : null;
|
|
820
693
|
}
|
|
@@ -834,7 +707,7 @@ class AuroButton extends r {
|
|
|
834
707
|
return u`
|
|
835
708
|
<button
|
|
836
709
|
part="button"
|
|
837
|
-
aria-label="${o(this.
|
|
710
|
+
aria-label="${o(this.loading ? this.loadingText : this.arialabel || undefined)}"
|
|
838
711
|
aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
839
712
|
aria-expanded="${o(this.ariaexpanded)}"
|
|
840
713
|
?autofocus="${this.autofocus}"
|
|
@@ -896,47 +769,7 @@ class AuroAccordionButton extends AuroButton {
|
|
|
896
769
|
*
|
|
897
770
|
*/
|
|
898
771
|
static register(name = "auro-accordion-button") {
|
|
899
|
-
AuroLibraryRuntimeUtils
|
|
900
|
-
}
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
904
|
-
// See LICENSE in the project root for license information.
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
class AuroDependencyVersioning {
|
|
908
|
-
|
|
909
|
-
/**
|
|
910
|
-
* Generates a unique string to be used for child auro element naming.
|
|
911
|
-
* @private
|
|
912
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
913
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
914
|
-
* @returns {string} - Unique string to be used for naming.
|
|
915
|
-
*/
|
|
916
|
-
generateElementName(baseName, version) {
|
|
917
|
-
let result = baseName;
|
|
918
|
-
|
|
919
|
-
result += '-';
|
|
920
|
-
result += version.replace(/[.]/g, '_');
|
|
921
|
-
|
|
922
|
-
return result;
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
/**
|
|
926
|
-
* Generates a unique string to be used for child auro element naming.
|
|
927
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
928
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
929
|
-
* @returns {string} - Unique string to be used for naming.
|
|
930
|
-
*/
|
|
931
|
-
generateTag(baseName, version, tagClass) {
|
|
932
|
-
const elementName = this.generateElementName(baseName, version);
|
|
933
|
-
const tag = i$1`${s(elementName)}`;
|
|
934
|
-
|
|
935
|
-
if (!customElements.get(elementName)) {
|
|
936
|
-
customElements.define(elementName, class extends tagClass {});
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
return tag;
|
|
772
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
|
|
940
773
|
}
|
|
941
774
|
}
|
|
942
775
|
|
|
@@ -1006,7 +839,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
1006
839
|
return _fetchMap.get(uri);
|
|
1007
840
|
};
|
|
1008
841
|
|
|
1009
|
-
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}
|
|
842
|
+
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}`;
|
|
1010
843
|
|
|
1011
844
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1012
845
|
// See LICENSE in the project root for license information.
|
|
@@ -1014,7 +847,6 @@ var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
1014
847
|
|
|
1015
848
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
1016
849
|
/**
|
|
1017
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
1018
850
|
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
1019
851
|
*/
|
|
1020
852
|
|
|
@@ -1029,6 +861,10 @@ class BaseIcon extends AuroElement {
|
|
|
1029
861
|
static get properties() {
|
|
1030
862
|
return {
|
|
1031
863
|
...super.properties,
|
|
864
|
+
|
|
865
|
+
/**
|
|
866
|
+
* Set value for on-dark version of auro-icon.
|
|
867
|
+
*/
|
|
1032
868
|
onDark: {
|
|
1033
869
|
type: Boolean,
|
|
1034
870
|
reflect: true
|
|
@@ -1087,81 +923,11 @@ class BaseIcon extends AuroElement {
|
|
|
1087
923
|
}
|
|
1088
924
|
}
|
|
1089
925
|
|
|
1090
|
-
var tokensCss$1 = i$5`:host{--ds-auro-icon-color:var(--ds-color-
|
|
1091
|
-
|
|
1092
|
-
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)}`;
|
|
1093
|
-
|
|
1094
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1095
|
-
// See LICENSE in the project root for license information.
|
|
1096
|
-
|
|
1097
|
-
// ---------------------------------------------------------------------
|
|
1098
|
-
|
|
1099
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1100
|
-
|
|
1101
|
-
class AuroLibraryRuntimeUtils {
|
|
1102
|
-
|
|
1103
|
-
/* eslint-disable jsdoc/require-param */
|
|
1104
|
-
|
|
1105
|
-
/**
|
|
1106
|
-
* This will register a new custom element with the browser.
|
|
1107
|
-
* @param {String} name - The name of the custom element.
|
|
1108
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
1109
|
-
* @returns {void}
|
|
1110
|
-
*/
|
|
1111
|
-
registerComponent(name, componentClass) {
|
|
1112
|
-
if (!customElements.get(name)) {
|
|
1113
|
-
customElements.define(name, class extends componentClass {});
|
|
1114
|
-
}
|
|
1115
|
-
}
|
|
1116
|
-
|
|
1117
|
-
/**
|
|
1118
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
1119
|
-
* @returns {void}
|
|
1120
|
-
*/
|
|
1121
|
-
closestElement(
|
|
1122
|
-
selector, // selector like in .closest()
|
|
1123
|
-
base = this, // extra functionality to skip a parent
|
|
1124
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1125
|
-
!el || el === document || el === window
|
|
1126
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
1127
|
-
: found
|
|
1128
|
-
? found // found a selector INside this element
|
|
1129
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1130
|
-
) {
|
|
1131
|
-
return __Closest(base);
|
|
1132
|
-
}
|
|
1133
|
-
/* eslint-enable jsdoc/require-param */
|
|
1134
|
-
|
|
1135
|
-
/**
|
|
1136
|
-
* 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.
|
|
1137
|
-
* @param {Object} elem - The element to check.
|
|
1138
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1139
|
-
* @returns {void}
|
|
1140
|
-
*/
|
|
1141
|
-
handleComponentTagRename(elem, tagName) {
|
|
1142
|
-
const tag = tagName.toLowerCase();
|
|
1143
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
1144
|
-
|
|
1145
|
-
if (elemTag !== tag) {
|
|
1146
|
-
elem.setAttribute(tag, true);
|
|
1147
|
-
}
|
|
1148
|
-
}
|
|
926
|
+
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)}`;
|
|
1149
927
|
|
|
1150
|
-
|
|
1151
|
-
* Validates if an element is a specific Auro component.
|
|
1152
|
-
* @param {Object} elem - The element to validate.
|
|
1153
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
1154
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1155
|
-
*/
|
|
1156
|
-
elementMatch(elem, tagName) {
|
|
1157
|
-
const tag = tagName.toLowerCase();
|
|
1158
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
928
|
+
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)}`;
|
|
1159
929
|
|
|
1160
|
-
|
|
1161
|
-
}
|
|
1162
|
-
}
|
|
1163
|
-
|
|
1164
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
930
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1165
931
|
// See LICENSE in the project root for license information.
|
|
1166
932
|
|
|
1167
933
|
|
|
@@ -1169,6 +935,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1169
935
|
constructor() {
|
|
1170
936
|
super();
|
|
1171
937
|
|
|
938
|
+
this.variant = undefined;
|
|
1172
939
|
this.privateDefaults();
|
|
1173
940
|
}
|
|
1174
941
|
|
|
@@ -1178,20 +945,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1178
945
|
* @returns {void}
|
|
1179
946
|
*/
|
|
1180
947
|
privateDefaults() {
|
|
1181
|
-
this.accent = false;
|
|
1182
|
-
this.customColor = false;
|
|
1183
|
-
this.customSvg = false;
|
|
1184
|
-
this.disabled = false;
|
|
1185
|
-
this.emphasis = false;
|
|
1186
|
-
this.error = false;
|
|
1187
|
-
this.info = false;
|
|
1188
|
-
this.label = false;
|
|
1189
|
-
this.primary = false;
|
|
1190
|
-
this.secondary = false;
|
|
1191
|
-
this.subtle = false;
|
|
1192
|
-
this.success = false;
|
|
1193
|
-
this.tertiary = false;
|
|
1194
|
-
this.warning = false;
|
|
1195
948
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
1196
949
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1197
950
|
}
|
|
@@ -1201,14 +954,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1201
954
|
return {
|
|
1202
955
|
...super.properties,
|
|
1203
956
|
|
|
1204
|
-
/**
|
|
1205
|
-
* Sets the icon to use the accent style.
|
|
1206
|
-
*/
|
|
1207
|
-
accent: {
|
|
1208
|
-
type: Boolean,
|
|
1209
|
-
reflect: true
|
|
1210
|
-
},
|
|
1211
|
-
|
|
1212
957
|
/**
|
|
1213
958
|
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
1214
959
|
*/
|
|
@@ -1239,38 +984,6 @@ class AuroIcon extends BaseIcon {
|
|
|
1239
984
|
type: Boolean
|
|
1240
985
|
},
|
|
1241
986
|
|
|
1242
|
-
/**
|
|
1243
|
-
* Sets the icon to use the disabled style.
|
|
1244
|
-
*/
|
|
1245
|
-
disabled: {
|
|
1246
|
-
type: Boolean,
|
|
1247
|
-
reflect: true
|
|
1248
|
-
},
|
|
1249
|
-
|
|
1250
|
-
/**
|
|
1251
|
-
* Sets the icon to use the emphasis style.
|
|
1252
|
-
*/
|
|
1253
|
-
emphasis: {
|
|
1254
|
-
type: Boolean,
|
|
1255
|
-
reflect: true
|
|
1256
|
-
},
|
|
1257
|
-
|
|
1258
|
-
/**
|
|
1259
|
-
* Sets the icon to use the error style.
|
|
1260
|
-
*/
|
|
1261
|
-
error: {
|
|
1262
|
-
type: Boolean,
|
|
1263
|
-
reflect: true
|
|
1264
|
-
},
|
|
1265
|
-
|
|
1266
|
-
/**
|
|
1267
|
-
* Sets the icon to use the info style.
|
|
1268
|
-
*/
|
|
1269
|
-
info: {
|
|
1270
|
-
type: Boolean,
|
|
1271
|
-
reflect: true
|
|
1272
|
-
},
|
|
1273
|
-
|
|
1274
987
|
/**
|
|
1275
988
|
* Exposes content in slot as icon label.
|
|
1276
989
|
*/
|
|
@@ -1288,50 +1001,10 @@ class AuroIcon extends BaseIcon {
|
|
|
1288
1001
|
},
|
|
1289
1002
|
|
|
1290
1003
|
/**
|
|
1291
|
-
*
|
|
1292
|
-
*/
|
|
1293
|
-
primary: {
|
|
1294
|
-
type: Boolean,
|
|
1295
|
-
reflect: true
|
|
1296
|
-
},
|
|
1297
|
-
|
|
1298
|
-
/**
|
|
1299
|
-
* Sets the icon to use the secondary style.
|
|
1300
|
-
*/
|
|
1301
|
-
secondary: {
|
|
1302
|
-
type: Boolean,
|
|
1303
|
-
reflect: true
|
|
1304
|
-
},
|
|
1305
|
-
|
|
1306
|
-
/**
|
|
1307
|
-
* Sets the icon to use the subtle style.
|
|
1004
|
+
* 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`.
|
|
1308
1005
|
*/
|
|
1309
|
-
|
|
1310
|
-
type:
|
|
1311
|
-
reflect: true
|
|
1312
|
-
},
|
|
1313
|
-
|
|
1314
|
-
/**
|
|
1315
|
-
* Sets the icon to use the success style.
|
|
1316
|
-
*/
|
|
1317
|
-
success: {
|
|
1318
|
-
type: Boolean,
|
|
1319
|
-
reflect: true
|
|
1320
|
-
},
|
|
1321
|
-
|
|
1322
|
-
/**
|
|
1323
|
-
* Sets the icon to use the tertiary style.
|
|
1324
|
-
*/
|
|
1325
|
-
tertiary: {
|
|
1326
|
-
type: Boolean,
|
|
1327
|
-
reflect: true
|
|
1328
|
-
},
|
|
1329
|
-
|
|
1330
|
-
/**
|
|
1331
|
-
* Sets the icon to use the warning style.
|
|
1332
|
-
*/
|
|
1333
|
-
warning: {
|
|
1334
|
-
type: Boolean,
|
|
1006
|
+
variant: {
|
|
1007
|
+
type: String,
|
|
1335
1008
|
reflect: true
|
|
1336
1009
|
}
|
|
1337
1010
|
};
|
|
@@ -1421,17 +1094,17 @@ class AuroIcon extends BaseIcon {
|
|
|
1421
1094
|
}
|
|
1422
1095
|
}
|
|
1423
1096
|
|
|
1424
|
-
var iconVersion = '
|
|
1097
|
+
var iconVersion = '8.0.1';
|
|
1425
1098
|
|
|
1426
1099
|
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>"};
|
|
1427
1100
|
|
|
1428
1101
|
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>"};
|
|
1429
1102
|
|
|
1430
|
-
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)
|
|
1103
|
+
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}`;
|
|
1431
1104
|
|
|
1432
|
-
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-
|
|
1105
|
+
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)}`;
|
|
1433
1106
|
|
|
1434
|
-
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-color-border-divider
|
|
1107
|
+
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)}`;
|
|
1435
1108
|
|
|
1436
1109
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1437
1110
|
// See LICENSE in the project root for license information.
|
|
@@ -1482,7 +1155,7 @@ class AuroAccordion extends r {
|
|
|
1482
1155
|
/**
|
|
1483
1156
|
* @private
|
|
1484
1157
|
*/
|
|
1485
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
1158
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1486
1159
|
|
|
1487
1160
|
this.expanded = false;
|
|
1488
1161
|
}
|
|
@@ -1539,7 +1212,7 @@ class AuroAccordion extends r {
|
|
|
1539
1212
|
*/
|
|
1540
1213
|
static register(name = "auro-accordion") {
|
|
1541
1214
|
const nameGroup = `${name}-group`;
|
|
1542
|
-
AuroLibraryRuntimeUtils
|
|
1215
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
|
|
1543
1216
|
AuroAccordionGroup.register(nameGroup);
|
|
1544
1217
|
}
|
|
1545
1218
|
|