@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -0
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +18 -178
- package/components/bibtemplate/dist/registered.js +18 -178
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +2 -1
- package/components/checkbox/demo/api.md +129 -58
- package/components/checkbox/demo/api.min.js +41 -8
- package/components/checkbox/demo/index.html +2 -1
- package/components/checkbox/demo/index.md +116 -50
- package/components/checkbox/demo/index.min.js +41 -8
- package/components/checkbox/demo/readme.html +2 -1
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +8 -0
- package/components/checkbox/dist/auro-checkbox.d.ts +8 -0
- package/components/checkbox/dist/index.js +41 -8
- package/components/checkbox/dist/registered.js +41 -8
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/api.html +2 -1
- package/components/combobox/demo/api.md +102 -1
- package/components/combobox/demo/api.min.js +238 -988
- package/components/combobox/demo/index.html +2 -4
- package/components/combobox/demo/index.md +32 -0
- package/components/combobox/demo/index.min.js +238 -988
- package/components/combobox/demo/readme.html +2 -1
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +8 -0
- package/components/combobox/dist/index.js +196 -786
- package/components/combobox/dist/registered.js +196 -786
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.html +2 -1
- package/components/counter/demo/api.md +29 -10
- package/components/counter/demo/api.min.js +187 -785
- package/components/counter/demo/index.html +2 -1
- package/components/counter/demo/index.md +104 -8
- package/components/counter/demo/index.min.js +187 -785
- package/components/counter/demo/readme.html +2 -1
- package/components/counter/demo/readme.md +1 -1
- package/components/counter/dist/auro-counter-group.d.ts +10 -2
- package/components/counter/dist/auro-counter.d.ts +1 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +187 -785
- package/components/counter/dist/registered.js +187 -785
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.html +2 -4
- package/components/datepicker/demo/api.md +15 -14
- package/components/datepicker/demo/api.min.js +286 -1036
- package/components/datepicker/demo/index.html +2 -4
- package/components/datepicker/demo/index.md +38 -0
- package/components/datepicker/demo/index.min.js +286 -1036
- package/components/datepicker/demo/readme.html +2 -1
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
- package/components/datepicker/dist/index.js +286 -1036
- package/components/datepicker/dist/registered.js +286 -1036
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.html +2 -1
- package/components/dropdown/demo/api.md +173 -82
- package/components/dropdown/demo/api.min.js +41 -183
- package/components/dropdown/demo/index.html +2 -1
- package/components/dropdown/demo/index.md +86 -4
- package/components/dropdown/demo/index.min.js +41 -183
- package/components/dropdown/demo/readme.html +2 -1
- package/components/dropdown/demo/readme.md +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +8 -0
- package/components/dropdown/dist/auro-dropdownBib.d.ts +2 -2
- package/components/dropdown/dist/index.js +41 -183
- package/components/dropdown/dist/registered.js +41 -183
- package/components/form/README.md +1 -1
- package/components/form/demo/api.html +2 -1
- package/components/form/demo/api.min.js +1 -1
- package/components/form/demo/index.html +2 -1
- package/components/form/demo/index.min.js +1 -1
- package/components/form/demo/readme.html +2 -1
- package/components/form/demo/readme.md +1 -1
- package/components/form/demo/working.html +2 -1
- package/components/form/dist/index.js +1 -1
- package/components/form/dist/registered.js +1 -1
- package/components/helptext/dist/auro-helptext.d.ts +8 -0
- package/components/helptext/dist/index.js +11 -2
- package/components/helptext/dist/registered.js +11 -2
- package/components/input/README.md +1 -1
- package/components/input/demo/api.html +2 -1
- package/components/input/demo/api.js +2 -0
- package/components/input/demo/api.md +108 -18
- package/components/input/demo/api.min.js +117 -402
- package/components/input/demo/index.html +2 -1
- package/components/input/demo/index.md +30 -0
- package/components/input/demo/index.min.js +103 -402
- package/components/input/demo/readme.html +2 -1
- package/components/input/demo/readme.md +1 -1
- package/components/input/dist/base-input.d.ts +8 -0
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +103 -402
- package/components/input/dist/registered.js +103 -402
- package/components/menu/README.md +1 -1
- package/components/menu/demo/api.html +2 -1
- package/components/menu/demo/api.md +6 -2
- package/components/menu/demo/api.min.js +23 -183
- package/components/menu/demo/index.html +2 -1
- package/components/menu/demo/index.min.js +23 -183
- package/components/menu/demo/readme.html +2 -1
- package/components/menu/demo/readme.md +1 -1
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +23 -183
- package/components/menu/dist/registered.js +23 -183
- package/components/radio/README.md +1 -1
- package/components/radio/demo/api.html +2 -1
- package/components/radio/demo/api.md +160 -56
- package/components/radio/demo/api.min.js +35 -8
- package/components/radio/demo/index.html +2 -1
- package/components/radio/demo/index.md +43 -12
- package/components/radio/demo/index.min.js +35 -8
- package/components/radio/demo/readme.html +2 -1
- package/components/radio/demo/readme.md +1 -1
- package/components/radio/dist/auro-radio-group.d.ts +6 -0
- package/components/radio/dist/auro-radio.d.ts +6 -0
- package/components/radio/dist/index.js +35 -8
- package/components/radio/dist/registered.js +35 -8
- package/components/select/README.md +1 -1
- package/components/select/demo/api.html +2 -1
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +112 -35
- package/components/select/demo/api.min.js +116 -589
- package/components/select/demo/index.html +2 -1
- package/components/select/demo/index.md +100 -0
- package/components/select/demo/index.min.js +116 -576
- package/components/select/demo/readme.html +2 -1
- package/components/select/demo/readme.md +1 -1
- package/components/select/dist/auro-select.d.ts +8 -0
- package/components/select/dist/index.js +91 -391
- package/components/select/dist/registered.js +91 -391
- package/package.json +23 -23
- package/components/counter/dist/styles/counter-button-tokens-css.d.ts +0 -2
- package/components/select/dist/styles/color-css.d.ts +0 -2
- package/components/select/dist/styles/tokens-css.d.ts +0 -2
|
@@ -8,7 +8,7 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
8
8
|
// See LICENSE in the project root for license information.
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
let AuroDependencyVersioning$
|
|
11
|
+
let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -51,7 +51,7 @@ let AuroDependencyVersioning$4 = class AuroDependencyVersioning {
|
|
|
51
51
|
|
|
52
52
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
53
53
|
|
|
54
|
-
let AuroLibraryRuntimeUtils$
|
|
54
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
55
55
|
|
|
56
56
|
/* eslint-disable jsdoc/require-param */
|
|
57
57
|
|
|
@@ -120,7 +120,7 @@ let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
|
|
|
120
120
|
|
|
121
121
|
let AuroFormValidation$1 = class AuroFormValidation {
|
|
122
122
|
constructor() {
|
|
123
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
123
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
/**
|
|
@@ -432,7 +432,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
432
432
|
|
|
433
433
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
434
434
|
|
|
435
|
-
let AuroLibraryRuntimeUtils$
|
|
435
|
+
let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
|
|
436
436
|
|
|
437
437
|
/* eslint-disable jsdoc/require-param */
|
|
438
438
|
|
|
@@ -2631,7 +2631,7 @@ class AuroFloatingUI {
|
|
|
2631
2631
|
// See LICENSE in the project root for license information.
|
|
2632
2632
|
|
|
2633
2633
|
|
|
2634
|
-
let AuroDependencyVersioning$
|
|
2634
|
+
let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
|
|
2635
2635
|
|
|
2636
2636
|
/**
|
|
2637
2637
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -2733,7 +2733,7 @@ const cacheFetch$2 = (uri, options = {}) => {
|
|
|
2733
2733
|
return _fetchMap$2.get(uri);
|
|
2734
2734
|
};
|
|
2735
2735
|
|
|
2736
|
-
var styleCss$3$2 = css`: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}
|
|
2736
|
+
var styleCss$3$2 = css`: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}`;
|
|
2737
2737
|
|
|
2738
2738
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2739
2739
|
// See LICENSE in the project root for license information.
|
|
@@ -2741,7 +2741,6 @@ var styleCss$3$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}
|
|
|
2741
2741
|
|
|
2742
2742
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
2743
2743
|
/**
|
|
2744
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
2745
2744
|
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
2746
2745
|
*/
|
|
2747
2746
|
|
|
@@ -2756,6 +2755,10 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
|
2756
2755
|
static get properties() {
|
|
2757
2756
|
return {
|
|
2758
2757
|
...super.properties,
|
|
2758
|
+
|
|
2759
|
+
/**
|
|
2760
|
+
* Set value for on-dark version of auro-icon.
|
|
2761
|
+
*/
|
|
2759
2762
|
onDark: {
|
|
2760
2763
|
type: Boolean,
|
|
2761
2764
|
reflect: true
|
|
@@ -2814,81 +2817,11 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
|
2814
2817
|
}
|
|
2815
2818
|
};
|
|
2816
2819
|
|
|
2817
|
-
var tokensCss$2$1 = css`:host{--ds-auro-icon-color:var(--ds-color-
|
|
2818
|
-
|
|
2819
|
-
var colorCss$3$1 = css`: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)}`;
|
|
2820
|
-
|
|
2821
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2822
|
-
// See LICENSE in the project root for license information.
|
|
2823
|
-
|
|
2824
|
-
// ---------------------------------------------------------------------
|
|
2825
|
-
|
|
2826
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
2827
|
-
|
|
2828
|
-
let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
|
|
2829
|
-
|
|
2830
|
-
/* eslint-disable jsdoc/require-param */
|
|
2831
|
-
|
|
2832
|
-
/**
|
|
2833
|
-
* This will register a new custom element with the browser.
|
|
2834
|
-
* @param {String} name - The name of the custom element.
|
|
2835
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
2836
|
-
* @returns {void}
|
|
2837
|
-
*/
|
|
2838
|
-
registerComponent(name, componentClass) {
|
|
2839
|
-
if (!customElements.get(name)) {
|
|
2840
|
-
customElements.define(name, class extends componentClass {});
|
|
2841
|
-
}
|
|
2842
|
-
}
|
|
2843
|
-
|
|
2844
|
-
/**
|
|
2845
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
2846
|
-
* @returns {void}
|
|
2847
|
-
*/
|
|
2848
|
-
closestElement(
|
|
2849
|
-
selector, // selector like in .closest()
|
|
2850
|
-
base = this, // extra functionality to skip a parent
|
|
2851
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
2852
|
-
!el || el === document || el === window
|
|
2853
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
2854
|
-
: found
|
|
2855
|
-
? found // found a selector INside this element
|
|
2856
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
2857
|
-
) {
|
|
2858
|
-
return __Closest(base);
|
|
2859
|
-
}
|
|
2860
|
-
/* eslint-enable jsdoc/require-param */
|
|
2861
|
-
|
|
2862
|
-
/**
|
|
2863
|
-
* 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.
|
|
2864
|
-
* @param {Object} elem - The element to check.
|
|
2865
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
2866
|
-
* @returns {void}
|
|
2867
|
-
*/
|
|
2868
|
-
handleComponentTagRename(elem, tagName) {
|
|
2869
|
-
const tag = tagName.toLowerCase();
|
|
2870
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
2871
|
-
|
|
2872
|
-
if (elemTag !== tag) {
|
|
2873
|
-
elem.setAttribute(tag, true);
|
|
2874
|
-
}
|
|
2875
|
-
}
|
|
2876
|
-
|
|
2877
|
-
/**
|
|
2878
|
-
* Validates if an element is a specific Auro component.
|
|
2879
|
-
* @param {Object} elem - The element to validate.
|
|
2880
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
2881
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
2882
|
-
*/
|
|
2883
|
-
elementMatch(elem, tagName) {
|
|
2884
|
-
const tag = tagName.toLowerCase();
|
|
2885
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
2820
|
+
var tokensCss$2$1 = css`: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)}`;
|
|
2886
2821
|
|
|
2887
|
-
|
|
2888
|
-
}
|
|
2889
|
-
};
|
|
2822
|
+
var colorCss$3$1 = css`: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)}`;
|
|
2890
2823
|
|
|
2891
|
-
// Copyright (c)
|
|
2824
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2892
2825
|
// See LICENSE in the project root for license information.
|
|
2893
2826
|
|
|
2894
2827
|
|
|
@@ -2896,6 +2829,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
2896
2829
|
constructor() {
|
|
2897
2830
|
super();
|
|
2898
2831
|
|
|
2832
|
+
this.variant = undefined;
|
|
2899
2833
|
this.privateDefaults();
|
|
2900
2834
|
}
|
|
2901
2835
|
|
|
@@ -2905,20 +2839,6 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
2905
2839
|
* @returns {void}
|
|
2906
2840
|
*/
|
|
2907
2841
|
privateDefaults() {
|
|
2908
|
-
this.accent = false;
|
|
2909
|
-
this.customColor = false;
|
|
2910
|
-
this.customSvg = false;
|
|
2911
|
-
this.disabled = false;
|
|
2912
|
-
this.emphasis = false;
|
|
2913
|
-
this.error = false;
|
|
2914
|
-
this.info = false;
|
|
2915
|
-
this.label = false;
|
|
2916
|
-
this.primary = false;
|
|
2917
|
-
this.secondary = false;
|
|
2918
|
-
this.subtle = false;
|
|
2919
|
-
this.success = false;
|
|
2920
|
-
this.tertiary = false;
|
|
2921
|
-
this.warning = false;
|
|
2922
2842
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
2923
2843
|
this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
|
|
2924
2844
|
}
|
|
@@ -2928,14 +2848,6 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
2928
2848
|
return {
|
|
2929
2849
|
...super.properties,
|
|
2930
2850
|
|
|
2931
|
-
/**
|
|
2932
|
-
* Sets the icon to use the accent style.
|
|
2933
|
-
*/
|
|
2934
|
-
accent: {
|
|
2935
|
-
type: Boolean,
|
|
2936
|
-
reflect: true
|
|
2937
|
-
},
|
|
2938
|
-
|
|
2939
2851
|
/**
|
|
2940
2852
|
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
2941
2853
|
*/
|
|
@@ -2966,38 +2878,6 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
2966
2878
|
type: Boolean
|
|
2967
2879
|
},
|
|
2968
2880
|
|
|
2969
|
-
/**
|
|
2970
|
-
* Sets the icon to use the disabled style.
|
|
2971
|
-
*/
|
|
2972
|
-
disabled: {
|
|
2973
|
-
type: Boolean,
|
|
2974
|
-
reflect: true
|
|
2975
|
-
},
|
|
2976
|
-
|
|
2977
|
-
/**
|
|
2978
|
-
* Sets the icon to use the emphasis style.
|
|
2979
|
-
*/
|
|
2980
|
-
emphasis: {
|
|
2981
|
-
type: Boolean,
|
|
2982
|
-
reflect: true
|
|
2983
|
-
},
|
|
2984
|
-
|
|
2985
|
-
/**
|
|
2986
|
-
* Sets the icon to use the error style.
|
|
2987
|
-
*/
|
|
2988
|
-
error: {
|
|
2989
|
-
type: Boolean,
|
|
2990
|
-
reflect: true
|
|
2991
|
-
},
|
|
2992
|
-
|
|
2993
|
-
/**
|
|
2994
|
-
* Sets the icon to use the info style.
|
|
2995
|
-
*/
|
|
2996
|
-
info: {
|
|
2997
|
-
type: Boolean,
|
|
2998
|
-
reflect: true
|
|
2999
|
-
},
|
|
3000
|
-
|
|
3001
2881
|
/**
|
|
3002
2882
|
* Exposes content in slot as icon label.
|
|
3003
2883
|
*/
|
|
@@ -3015,50 +2895,10 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
3015
2895
|
},
|
|
3016
2896
|
|
|
3017
2897
|
/**
|
|
3018
|
-
*
|
|
3019
|
-
*/
|
|
3020
|
-
primary: {
|
|
3021
|
-
type: Boolean,
|
|
3022
|
-
reflect: true
|
|
3023
|
-
},
|
|
3024
|
-
|
|
3025
|
-
/**
|
|
3026
|
-
* Sets the icon to use the secondary style.
|
|
3027
|
-
*/
|
|
3028
|
-
secondary: {
|
|
3029
|
-
type: Boolean,
|
|
3030
|
-
reflect: true
|
|
3031
|
-
},
|
|
3032
|
-
|
|
3033
|
-
/**
|
|
3034
|
-
* Sets the icon to use the subtle style.
|
|
3035
|
-
*/
|
|
3036
|
-
subtle: {
|
|
3037
|
-
type: Boolean,
|
|
3038
|
-
reflect: true
|
|
3039
|
-
},
|
|
3040
|
-
|
|
3041
|
-
/**
|
|
3042
|
-
* Sets the icon to use the success style.
|
|
3043
|
-
*/
|
|
3044
|
-
success: {
|
|
3045
|
-
type: Boolean,
|
|
3046
|
-
reflect: true
|
|
3047
|
-
},
|
|
3048
|
-
|
|
3049
|
-
/**
|
|
3050
|
-
* Sets the icon to use the tertiary style.
|
|
3051
|
-
*/
|
|
3052
|
-
tertiary: {
|
|
3053
|
-
type: Boolean,
|
|
3054
|
-
reflect: true
|
|
3055
|
-
},
|
|
3056
|
-
|
|
3057
|
-
/**
|
|
3058
|
-
* Sets the icon to use the warning style.
|
|
2898
|
+
* 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`.
|
|
3059
2899
|
*/
|
|
3060
|
-
|
|
3061
|
-
type:
|
|
2900
|
+
variant: {
|
|
2901
|
+
type: String,
|
|
3062
2902
|
reflect: true
|
|
3063
2903
|
}
|
|
3064
2904
|
};
|
|
@@ -3154,7 +2994,7 @@ var styleCss$2$2 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400)
|
|
|
3154
2994
|
|
|
3155
2995
|
var colorCss$2$1 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3156
2996
|
|
|
3157
|
-
var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-
|
|
2997
|
+
var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
3158
2998
|
|
|
3159
2999
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3160
3000
|
// See LICENSE in the project root for license information.
|
|
@@ -3184,7 +3024,7 @@ class AuroDropdownBib extends LitElement {
|
|
|
3184
3024
|
*/
|
|
3185
3025
|
this._mobileBreakpointValue = undefined;
|
|
3186
3026
|
|
|
3187
|
-
AuroLibraryRuntimeUtils$
|
|
3027
|
+
AuroLibraryRuntimeUtils$1$2.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
|
|
3188
3028
|
}
|
|
3189
3029
|
|
|
3190
3030
|
static get styles() {
|
|
@@ -3277,13 +3117,13 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
3277
3117
|
|
|
3278
3118
|
var styleCss$1$2 = css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
|
|
3279
3119
|
|
|
3280
|
-
var colorCss$1$2 = css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-
|
|
3120
|
+
var colorCss$1$2 = css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host([onDark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark]):focus-within,:host([onDark]):active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][common]),:host([onDark][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][common]) .trigger:focus-within,:host([onDark][common]) .trigger:active,:host([onDark][bordered]) .trigger:focus-within,:host([onDark][bordered]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([onDark][error]) .trigger:focus-within,:host([onDark][error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled][common]),:host([onDark][disabled][bordered]){--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
|
|
3281
3121
|
|
|
3282
|
-
var colorCss$6 = css`:host([error]){--ds-auro-helptext-color: var(--ds-color-
|
|
3122
|
+
var colorCss$6 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3283
3123
|
|
|
3284
3124
|
var styleCss$6 = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3285
3125
|
|
|
3286
|
-
var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-color-
|
|
3126
|
+
var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3287
3127
|
|
|
3288
3128
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3289
3129
|
// See LICENSE in the project root for license information.
|
|
@@ -3292,7 +3132,7 @@ var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-color-text-tertia
|
|
|
3292
3132
|
|
|
3293
3133
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3294
3134
|
|
|
3295
|
-
let AuroLibraryRuntimeUtils$
|
|
3135
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
3296
3136
|
|
|
3297
3137
|
/* eslint-disable jsdoc/require-param */
|
|
3298
3138
|
|
|
@@ -3370,9 +3210,10 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
3370
3210
|
super();
|
|
3371
3211
|
|
|
3372
3212
|
this.error = false;
|
|
3213
|
+
this.onDark = false;
|
|
3373
3214
|
this.hasTextContent = false;
|
|
3374
3215
|
|
|
3375
|
-
AuroLibraryRuntimeUtils$
|
|
3216
|
+
AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
3376
3217
|
}
|
|
3377
3218
|
|
|
3378
3219
|
static get styles() {
|
|
@@ -3408,6 +3249,14 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
3408
3249
|
type: Boolean,
|
|
3409
3250
|
reflect: true,
|
|
3410
3251
|
},
|
|
3252
|
+
|
|
3253
|
+
/**
|
|
3254
|
+
* If declared, will apply onDark styles.
|
|
3255
|
+
*/
|
|
3256
|
+
onDark: {
|
|
3257
|
+
type: Boolean,
|
|
3258
|
+
reflect: true
|
|
3259
|
+
}
|
|
3411
3260
|
};
|
|
3412
3261
|
}
|
|
3413
3262
|
|
|
@@ -3420,7 +3269,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
3420
3269
|
*
|
|
3421
3270
|
*/
|
|
3422
3271
|
static register(name = "auro-helptext") {
|
|
3423
|
-
AuroLibraryRuntimeUtils$
|
|
3272
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
|
|
3424
3273
|
}
|
|
3425
3274
|
|
|
3426
3275
|
updated() {
|
|
@@ -3539,6 +3388,7 @@ class AuroDropdown extends LitElement {
|
|
|
3539
3388
|
this.tabIndex = 0;
|
|
3540
3389
|
this.noToggle = false;
|
|
3541
3390
|
this.labeled = true;
|
|
3391
|
+
this.onDark = false;
|
|
3542
3392
|
|
|
3543
3393
|
// floaterConfig
|
|
3544
3394
|
this.placement = 'bottom-start';
|
|
@@ -3559,7 +3409,7 @@ class AuroDropdown extends LitElement {
|
|
|
3559
3409
|
/**
|
|
3560
3410
|
* @private
|
|
3561
3411
|
*/
|
|
3562
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
3412
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
|
|
3563
3413
|
|
|
3564
3414
|
/**
|
|
3565
3415
|
* @private
|
|
@@ -3569,7 +3419,7 @@ class AuroDropdown extends LitElement {
|
|
|
3569
3419
|
/**
|
|
3570
3420
|
* Generate unique names for dependency components.
|
|
3571
3421
|
*/
|
|
3572
|
-
const versioning = new AuroDependencyVersioning$
|
|
3422
|
+
const versioning = new AuroDependencyVersioning$2();
|
|
3573
3423
|
|
|
3574
3424
|
/**
|
|
3575
3425
|
* @private
|
|
@@ -3795,6 +3645,14 @@ class AuroDropdown extends LitElement {
|
|
|
3795
3645
|
reflect: true
|
|
3796
3646
|
},
|
|
3797
3647
|
|
|
3648
|
+
/**
|
|
3649
|
+
* If declared, onDark styles will be applied.
|
|
3650
|
+
*/
|
|
3651
|
+
onDark: {
|
|
3652
|
+
type: Boolean,
|
|
3653
|
+
reflect: true
|
|
3654
|
+
},
|
|
3655
|
+
|
|
3798
3656
|
onSlotChange: {
|
|
3799
3657
|
type: Function,
|
|
3800
3658
|
reflect: false
|
|
@@ -3848,7 +3706,7 @@ class AuroDropdown extends LitElement {
|
|
|
3848
3706
|
*
|
|
3849
3707
|
*/
|
|
3850
3708
|
static register(name = "auro-dropdown") {
|
|
3851
|
-
AuroLibraryRuntimeUtils$
|
|
3709
|
+
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
3852
3710
|
}
|
|
3853
3711
|
|
|
3854
3712
|
connectedCallback() {
|
|
@@ -4165,14 +4023,14 @@ class AuroDropdown extends LitElement {
|
|
|
4165
4023
|
<${this.iconTag}
|
|
4166
4024
|
category="interface"
|
|
4167
4025
|
name="chevron-down"
|
|
4168
|
-
|
|
4169
|
-
|
|
4026
|
+
?onDark="${this.onDark}"
|
|
4027
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
4170
4028
|
>
|
|
4171
4029
|
</${this.iconTag}>
|
|
4172
4030
|
</div>
|
|
4173
4031
|
` : undefined }
|
|
4174
4032
|
</div>
|
|
4175
|
-
<${this.helpTextTag} part="helpText" ?error="${this.error}">
|
|
4033
|
+
<${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
|
|
4176
4034
|
<slot name="helpText"></slot>
|
|
4177
4035
|
</${this.helpTextTag}>
|
|
4178
4036
|
<div class="slotContent">
|
|
@@ -4316,11 +4174,11 @@ function stopNotifyingOnLangChange(element) {
|
|
|
4316
4174
|
watchedItems.delete(element);
|
|
4317
4175
|
}
|
|
4318
4176
|
|
|
4319
|
-
var styleCss$4 = css
|
|
4177
|
+
var styleCss$4 = css`: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}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-200, 1rem);max-height:var(--ds-size-200, 1rem);flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
|
|
4320
4178
|
|
|
4321
|
-
var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-
|
|
4179
|
+
var colorCss$4 = css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}label{color:var(--ds-auro-input-label-text-color)}.alertNotification{color:var(--ds-auro-input-error-icon-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused, #01426a);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark][bordered]){--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([onDark][disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
|
|
4322
4180
|
|
|
4323
|
-
var tokensCss$4 = css`:host{--ds-auro-input-border-color: var(--ds-color-border-
|
|
4181
|
+
var tokensCss$4 = css`:host{--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26)}`;
|
|
4324
4182
|
|
|
4325
4183
|
/** Checks if value is string */
|
|
4326
4184
|
function isString(str) {
|
|
@@ -8171,7 +8029,7 @@ class AuroInputUtilities {
|
|
|
8171
8029
|
|
|
8172
8030
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
8173
8031
|
|
|
8174
|
-
let AuroLibraryRuntimeUtils$
|
|
8032
|
+
let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
|
|
8175
8033
|
|
|
8176
8034
|
/* eslint-disable jsdoc/require-param */
|
|
8177
8035
|
|
|
@@ -8240,7 +8098,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
8240
8098
|
|
|
8241
8099
|
class AuroFormValidation {
|
|
8242
8100
|
constructor() {
|
|
8243
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
8101
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
|
|
8244
8102
|
}
|
|
8245
8103
|
|
|
8246
8104
|
/**
|
|
@@ -8580,6 +8438,7 @@ class BaseInput extends LitElement {
|
|
|
8580
8438
|
this.min = undefined;
|
|
8581
8439
|
this.maxLength = undefined;
|
|
8582
8440
|
this.minLength = undefined;
|
|
8441
|
+
this.onDark = false;
|
|
8583
8442
|
this.activeLabel = false;
|
|
8584
8443
|
this.setCustomValidityForType = undefined;
|
|
8585
8444
|
}
|
|
@@ -8770,6 +8629,14 @@ class BaseInput extends LitElement {
|
|
|
8770
8629
|
type: Boolean
|
|
8771
8630
|
},
|
|
8772
8631
|
|
|
8632
|
+
/**
|
|
8633
|
+
* Sets onDark styles on input.
|
|
8634
|
+
*/
|
|
8635
|
+
onDark: {
|
|
8636
|
+
type: Boolean,
|
|
8637
|
+
reflect: true
|
|
8638
|
+
},
|
|
8639
|
+
|
|
8773
8640
|
/**
|
|
8774
8641
|
* Specifies a regular expression the form control's value should match.
|
|
8775
8642
|
*/
|
|
@@ -9606,7 +9473,7 @@ const cacheFetch$1 = (uri, options = {}) => {
|
|
|
9606
9473
|
return _fetchMap$1.get(uri);
|
|
9607
9474
|
};
|
|
9608
9475
|
|
|
9609
|
-
var styleCss$3$1 = css`: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}
|
|
9476
|
+
var styleCss$3$1 = css`: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}`;
|
|
9610
9477
|
|
|
9611
9478
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9612
9479
|
// See LICENSE in the project root for license information.
|
|
@@ -9614,7 +9481,6 @@ var styleCss$3$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}
|
|
|
9614
9481
|
|
|
9615
9482
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
9616
9483
|
/**
|
|
9617
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
9618
9484
|
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
9619
9485
|
*/
|
|
9620
9486
|
|
|
@@ -9629,6 +9495,10 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
9629
9495
|
static get properties() {
|
|
9630
9496
|
return {
|
|
9631
9497
|
...super.properties,
|
|
9498
|
+
|
|
9499
|
+
/**
|
|
9500
|
+
* Set value for on-dark version of auro-icon.
|
|
9501
|
+
*/
|
|
9632
9502
|
onDark: {
|
|
9633
9503
|
type: Boolean,
|
|
9634
9504
|
reflect: true
|
|
@@ -9687,81 +9557,11 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
9687
9557
|
}
|
|
9688
9558
|
};
|
|
9689
9559
|
|
|
9690
|
-
var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-color-
|
|
9691
|
-
|
|
9692
|
-
var colorCss$3 = css`: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)}`;
|
|
9693
|
-
|
|
9694
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
9695
|
-
// See LICENSE in the project root for license information.
|
|
9696
|
-
|
|
9697
|
-
// ---------------------------------------------------------------------
|
|
9698
|
-
|
|
9699
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
9700
|
-
|
|
9701
|
-
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
9702
|
-
|
|
9703
|
-
/* eslint-disable jsdoc/require-param */
|
|
9704
|
-
|
|
9705
|
-
/**
|
|
9706
|
-
* This will register a new custom element with the browser.
|
|
9707
|
-
* @param {String} name - The name of the custom element.
|
|
9708
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
9709
|
-
* @returns {void}
|
|
9710
|
-
*/
|
|
9711
|
-
registerComponent(name, componentClass) {
|
|
9712
|
-
if (!customElements.get(name)) {
|
|
9713
|
-
customElements.define(name, class extends componentClass {});
|
|
9714
|
-
}
|
|
9715
|
-
}
|
|
9716
|
-
|
|
9717
|
-
/**
|
|
9718
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
9719
|
-
* @returns {void}
|
|
9720
|
-
*/
|
|
9721
|
-
closestElement(
|
|
9722
|
-
selector, // selector like in .closest()
|
|
9723
|
-
base = this, // extra functionality to skip a parent
|
|
9724
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
9725
|
-
!el || el === document || el === window
|
|
9726
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
9727
|
-
: found
|
|
9728
|
-
? found // found a selector INside this element
|
|
9729
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
9730
|
-
) {
|
|
9731
|
-
return __Closest(base);
|
|
9732
|
-
}
|
|
9733
|
-
/* eslint-enable jsdoc/require-param */
|
|
9734
|
-
|
|
9735
|
-
/**
|
|
9736
|
-
* 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.
|
|
9737
|
-
* @param {Object} elem - The element to check.
|
|
9738
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
9739
|
-
* @returns {void}
|
|
9740
|
-
*/
|
|
9741
|
-
handleComponentTagRename(elem, tagName) {
|
|
9742
|
-
const tag = tagName.toLowerCase();
|
|
9743
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9744
|
-
|
|
9745
|
-
if (elemTag !== tag) {
|
|
9746
|
-
elem.setAttribute(tag, true);
|
|
9747
|
-
}
|
|
9748
|
-
}
|
|
9749
|
-
|
|
9750
|
-
/**
|
|
9751
|
-
* Validates if an element is a specific Auro component.
|
|
9752
|
-
* @param {Object} elem - The element to validate.
|
|
9753
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
9754
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
9755
|
-
*/
|
|
9756
|
-
elementMatch(elem, tagName) {
|
|
9757
|
-
const tag = tagName.toLowerCase();
|
|
9758
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9560
|
+
var tokensCss$3 = css`: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)}`;
|
|
9759
9561
|
|
|
9760
|
-
|
|
9761
|
-
}
|
|
9762
|
-
};
|
|
9562
|
+
var colorCss$3 = css`: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)}`;
|
|
9763
9563
|
|
|
9764
|
-
// Copyright (c)
|
|
9564
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9765
9565
|
// See LICENSE in the project root for license information.
|
|
9766
9566
|
|
|
9767
9567
|
|
|
@@ -9769,6 +9569,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9769
9569
|
constructor() {
|
|
9770
9570
|
super();
|
|
9771
9571
|
|
|
9572
|
+
this.variant = undefined;
|
|
9772
9573
|
this.privateDefaults();
|
|
9773
9574
|
}
|
|
9774
9575
|
|
|
@@ -9778,22 +9579,8 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9778
9579
|
* @returns {void}
|
|
9779
9580
|
*/
|
|
9780
9581
|
privateDefaults() {
|
|
9781
|
-
this.accent = false;
|
|
9782
|
-
this.customColor = false;
|
|
9783
|
-
this.customSvg = false;
|
|
9784
|
-
this.disabled = false;
|
|
9785
|
-
this.emphasis = false;
|
|
9786
|
-
this.error = false;
|
|
9787
|
-
this.info = false;
|
|
9788
|
-
this.label = false;
|
|
9789
|
-
this.primary = false;
|
|
9790
|
-
this.secondary = false;
|
|
9791
|
-
this.subtle = false;
|
|
9792
|
-
this.success = false;
|
|
9793
|
-
this.tertiary = false;
|
|
9794
|
-
this.warning = false;
|
|
9795
9582
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
9796
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
9583
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
|
|
9797
9584
|
}
|
|
9798
9585
|
|
|
9799
9586
|
// function to define props used within the scope of this component
|
|
@@ -9801,14 +9588,6 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9801
9588
|
return {
|
|
9802
9589
|
...super.properties,
|
|
9803
9590
|
|
|
9804
|
-
/**
|
|
9805
|
-
* Sets the icon to use the accent style.
|
|
9806
|
-
*/
|
|
9807
|
-
accent: {
|
|
9808
|
-
type: Boolean,
|
|
9809
|
-
reflect: true
|
|
9810
|
-
},
|
|
9811
|
-
|
|
9812
9591
|
/**
|
|
9813
9592
|
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
9814
9593
|
*/
|
|
@@ -9839,38 +9618,6 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9839
9618
|
type: Boolean
|
|
9840
9619
|
},
|
|
9841
9620
|
|
|
9842
|
-
/**
|
|
9843
|
-
* Sets the icon to use the disabled style.
|
|
9844
|
-
*/
|
|
9845
|
-
disabled: {
|
|
9846
|
-
type: Boolean,
|
|
9847
|
-
reflect: true
|
|
9848
|
-
},
|
|
9849
|
-
|
|
9850
|
-
/**
|
|
9851
|
-
* Sets the icon to use the emphasis style.
|
|
9852
|
-
*/
|
|
9853
|
-
emphasis: {
|
|
9854
|
-
type: Boolean,
|
|
9855
|
-
reflect: true
|
|
9856
|
-
},
|
|
9857
|
-
|
|
9858
|
-
/**
|
|
9859
|
-
* Sets the icon to use the error style.
|
|
9860
|
-
*/
|
|
9861
|
-
error: {
|
|
9862
|
-
type: Boolean,
|
|
9863
|
-
reflect: true
|
|
9864
|
-
},
|
|
9865
|
-
|
|
9866
|
-
/**
|
|
9867
|
-
* Sets the icon to use the info style.
|
|
9868
|
-
*/
|
|
9869
|
-
info: {
|
|
9870
|
-
type: Boolean,
|
|
9871
|
-
reflect: true
|
|
9872
|
-
},
|
|
9873
|
-
|
|
9874
9621
|
/**
|
|
9875
9622
|
* Exposes content in slot as icon label.
|
|
9876
9623
|
*/
|
|
@@ -9888,50 +9635,10 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9888
9635
|
},
|
|
9889
9636
|
|
|
9890
9637
|
/**
|
|
9891
|
-
*
|
|
9892
|
-
*/
|
|
9893
|
-
primary: {
|
|
9894
|
-
type: Boolean,
|
|
9895
|
-
reflect: true
|
|
9896
|
-
},
|
|
9897
|
-
|
|
9898
|
-
/**
|
|
9899
|
-
* Sets the icon to use the secondary style.
|
|
9638
|
+
* 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`.
|
|
9900
9639
|
*/
|
|
9901
|
-
|
|
9902
|
-
type:
|
|
9903
|
-
reflect: true
|
|
9904
|
-
},
|
|
9905
|
-
|
|
9906
|
-
/**
|
|
9907
|
-
* Sets the icon to use the subtle style.
|
|
9908
|
-
*/
|
|
9909
|
-
subtle: {
|
|
9910
|
-
type: Boolean,
|
|
9911
|
-
reflect: true
|
|
9912
|
-
},
|
|
9913
|
-
|
|
9914
|
-
/**
|
|
9915
|
-
* Sets the icon to use the success style.
|
|
9916
|
-
*/
|
|
9917
|
-
success: {
|
|
9918
|
-
type: Boolean,
|
|
9919
|
-
reflect: true
|
|
9920
|
-
},
|
|
9921
|
-
|
|
9922
|
-
/**
|
|
9923
|
-
* Sets the icon to use the tertiary style.
|
|
9924
|
-
*/
|
|
9925
|
-
tertiary: {
|
|
9926
|
-
type: Boolean,
|
|
9927
|
-
reflect: true
|
|
9928
|
-
},
|
|
9929
|
-
|
|
9930
|
-
/**
|
|
9931
|
-
* Sets the icon to use the warning style.
|
|
9932
|
-
*/
|
|
9933
|
-
warning: {
|
|
9934
|
-
type: Boolean,
|
|
9640
|
+
variant: {
|
|
9641
|
+
type: String,
|
|
9935
9642
|
reflect: true
|
|
9936
9643
|
}
|
|
9937
9644
|
};
|
|
@@ -9955,7 +9662,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
9955
9662
|
*
|
|
9956
9663
|
*/
|
|
9957
9664
|
static register(name = "auro-icon") {
|
|
9958
|
-
AuroLibraryRuntimeUtils$
|
|
9665
|
+
AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroIcon);
|
|
9959
9666
|
}
|
|
9960
9667
|
|
|
9961
9668
|
connectedCallback() {
|
|
@@ -10021,197 +9728,17 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
10021
9728
|
}
|
|
10022
9729
|
};
|
|
10023
9730
|
|
|
10024
|
-
var iconVersion$1 = '
|
|
10025
|
-
|
|
10026
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
10027
|
-
// See LICENSE in the project root for license information.
|
|
10028
|
-
|
|
10029
|
-
|
|
10030
|
-
let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
|
|
10031
|
-
|
|
10032
|
-
/**
|
|
10033
|
-
* Generates a unique string to be used for child auro element naming.
|
|
10034
|
-
* @private
|
|
10035
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
10036
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
10037
|
-
* @returns {string} - Unique string to be used for naming.
|
|
10038
|
-
*/
|
|
10039
|
-
generateElementName(baseName, version) {
|
|
10040
|
-
let result = baseName;
|
|
10041
|
-
|
|
10042
|
-
result += '-';
|
|
10043
|
-
result += version.replace(/[.]/g, '_');
|
|
10044
|
-
|
|
10045
|
-
return result;
|
|
10046
|
-
}
|
|
10047
|
-
|
|
10048
|
-
/**
|
|
10049
|
-
* Generates a unique string to be used for child auro element naming.
|
|
10050
|
-
* @param {string} baseName - Defines the first part of the unique element name.
|
|
10051
|
-
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
10052
|
-
* @returns {string} - Unique string to be used for naming.
|
|
10053
|
-
*/
|
|
10054
|
-
generateTag(baseName, version, tagClass) {
|
|
10055
|
-
const elementName = this.generateElementName(baseName, version);
|
|
10056
|
-
const tag = literal`${unsafeStatic(elementName)}`;
|
|
10057
|
-
|
|
10058
|
-
if (!customElements.get(elementName)) {
|
|
10059
|
-
customElements.define(elementName, class extends tagClass {});
|
|
10060
|
-
}
|
|
10061
|
-
|
|
10062
|
-
return tag;
|
|
10063
|
-
}
|
|
10064
|
-
};
|
|
10065
|
-
|
|
10066
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
10067
|
-
// See LICENSE in the project root for license information.
|
|
10068
|
-
|
|
10069
|
-
// ---------------------------------------------------------------------
|
|
10070
|
-
|
|
10071
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
10072
|
-
|
|
10073
|
-
let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
|
|
10074
|
-
|
|
10075
|
-
/* eslint-disable jsdoc/require-param */
|
|
10076
|
-
|
|
10077
|
-
/**
|
|
10078
|
-
* This will register a new custom element with the browser.
|
|
10079
|
-
* @param {String} name - The name of the custom element.
|
|
10080
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
10081
|
-
* @returns {void}
|
|
10082
|
-
*/
|
|
10083
|
-
registerComponent(name, componentClass) {
|
|
10084
|
-
if (!customElements.get(name)) {
|
|
10085
|
-
customElements.define(name, class extends componentClass {});
|
|
10086
|
-
}
|
|
10087
|
-
}
|
|
10088
|
-
|
|
10089
|
-
/**
|
|
10090
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
10091
|
-
* @returns {void}
|
|
10092
|
-
*/
|
|
10093
|
-
closestElement(
|
|
10094
|
-
selector, // selector like in .closest()
|
|
10095
|
-
base = this, // extra functionality to skip a parent
|
|
10096
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
10097
|
-
!el || el === document || el === window
|
|
10098
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
10099
|
-
: found
|
|
10100
|
-
? found // found a selector INside this element
|
|
10101
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
10102
|
-
) {
|
|
10103
|
-
return __Closest(base);
|
|
10104
|
-
}
|
|
10105
|
-
/* eslint-enable jsdoc/require-param */
|
|
10106
|
-
|
|
10107
|
-
/**
|
|
10108
|
-
* 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.
|
|
10109
|
-
* @param {Object} elem - The element to check.
|
|
10110
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
10111
|
-
* @returns {void}
|
|
10112
|
-
*/
|
|
10113
|
-
handleComponentTagRename(elem, tagName) {
|
|
10114
|
-
const tag = tagName.toLowerCase();
|
|
10115
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
10116
|
-
|
|
10117
|
-
if (elemTag !== tag) {
|
|
10118
|
-
elem.setAttribute(tag, true);
|
|
10119
|
-
}
|
|
10120
|
-
}
|
|
10121
|
-
|
|
10122
|
-
/**
|
|
10123
|
-
* Validates if an element is a specific Auro component.
|
|
10124
|
-
* @param {Object} elem - The element to validate.
|
|
10125
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
10126
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
10127
|
-
*/
|
|
10128
|
-
elementMatch(elem, tagName) {
|
|
10129
|
-
const tag = tagName.toLowerCase();
|
|
10130
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
10131
|
-
|
|
10132
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
10133
|
-
}
|
|
10134
|
-
};
|
|
10135
|
-
|
|
10136
|
-
var styleCss$2$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
10137
|
-
|
|
10138
|
-
var colorCss$2 = css`[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}`;
|
|
10139
|
-
|
|
10140
|
-
var tokensCss$2 = css`: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}`;
|
|
10141
|
-
|
|
10142
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
10143
|
-
// See LICENSE in the project root for license information.
|
|
10144
|
-
|
|
10145
|
-
// ---------------------------------------------------------------------
|
|
10146
|
-
|
|
10147
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
10148
|
-
|
|
10149
|
-
let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
|
|
10150
|
-
|
|
10151
|
-
/* eslint-disable jsdoc/require-param */
|
|
10152
|
-
|
|
10153
|
-
/**
|
|
10154
|
-
* This will register a new custom element with the browser.
|
|
10155
|
-
* @param {String} name - The name of the custom element.
|
|
10156
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
10157
|
-
* @returns {void}
|
|
10158
|
-
*/
|
|
10159
|
-
registerComponent(name, componentClass) {
|
|
10160
|
-
if (!customElements.get(name)) {
|
|
10161
|
-
customElements.define(name, class extends componentClass {});
|
|
10162
|
-
}
|
|
10163
|
-
}
|
|
10164
|
-
|
|
10165
|
-
/**
|
|
10166
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
10167
|
-
* @returns {void}
|
|
10168
|
-
*/
|
|
10169
|
-
closestElement(
|
|
10170
|
-
selector, // selector like in .closest()
|
|
10171
|
-
base = this, // extra functionality to skip a parent
|
|
10172
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
10173
|
-
!el || el === document || el === window
|
|
10174
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
10175
|
-
: found
|
|
10176
|
-
? found // found a selector INside this element
|
|
10177
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
10178
|
-
) {
|
|
10179
|
-
return __Closest(base);
|
|
10180
|
-
}
|
|
10181
|
-
/* eslint-enable jsdoc/require-param */
|
|
10182
|
-
|
|
10183
|
-
/**
|
|
10184
|
-
* 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.
|
|
10185
|
-
* @param {Object} elem - The element to check.
|
|
10186
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
10187
|
-
* @returns {void}
|
|
10188
|
-
*/
|
|
10189
|
-
handleComponentTagRename(elem, tagName) {
|
|
10190
|
-
const tag = tagName.toLowerCase();
|
|
10191
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9731
|
+
var iconVersion$1 = '8.0.1';
|
|
10192
9732
|
|
|
10193
|
-
|
|
10194
|
-
elem.setAttribute(tag, true);
|
|
10195
|
-
}
|
|
10196
|
-
}
|
|
9733
|
+
var styleCss$2$1 = css`: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}`;
|
|
10197
9734
|
|
|
10198
|
-
|
|
10199
|
-
* Validates if an element is a specific Auro component.
|
|
10200
|
-
* @param {Object} elem - The element to validate.
|
|
10201
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
10202
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
10203
|
-
*/
|
|
10204
|
-
elementMatch(elem, tagName) {
|
|
10205
|
-
const tag = tagName.toLowerCase();
|
|
10206
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9735
|
+
var colorCss$2 = css`[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}`;
|
|
10207
9736
|
|
|
10208
|
-
|
|
10209
|
-
}
|
|
10210
|
-
};
|
|
9737
|
+
var tokensCss$2 = css`: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}`;
|
|
10211
9738
|
|
|
10212
9739
|
var styleCss$1$1 = css`: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}}`;
|
|
10213
9740
|
|
|
10214
|
-
var colorCss$1$1 = css`: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-
|
|
9741
|
+
var colorCss$1$1 = css`: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}`;
|
|
10215
9742
|
|
|
10216
9743
|
var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
10217
9744
|
|
|
@@ -10219,25 +9746,6 @@ var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-
|
|
|
10219
9746
|
// See LICENSE in the project root for license information.
|
|
10220
9747
|
|
|
10221
9748
|
|
|
10222
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
10223
|
-
/**
|
|
10224
|
-
* The auro-loader element is an easy to use animated loader component.
|
|
10225
|
-
*
|
|
10226
|
-
* @attr {Boolean} pulse - sets loader type
|
|
10227
|
-
* @attr {Boolean} ringworm - sets loader type
|
|
10228
|
-
* @attr {Boolean} laser - sets loader type
|
|
10229
|
-
* @attr {Boolean} orbit - sets loader type
|
|
10230
|
-
* @attr {Boolean} white - sets color of loader to white
|
|
10231
|
-
* @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
|
|
10232
|
-
* @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
|
|
10233
|
-
* @attr {Boolean} xs - sets size to extra small
|
|
10234
|
-
* @attr {Boolean} sm - sets size to small
|
|
10235
|
-
* @attr {Boolean} md - sets size to medium
|
|
10236
|
-
* @attr {Boolean} lg - sets size to large
|
|
10237
|
-
* @csspart element - apply style to adjust speed of animation
|
|
10238
|
-
*/
|
|
10239
|
-
|
|
10240
|
-
// build the component class
|
|
10241
9749
|
class AuroLoader extends LitElement {
|
|
10242
9750
|
constructor() {
|
|
10243
9751
|
super();
|
|
@@ -10271,19 +9779,35 @@ class AuroLoader extends LitElement {
|
|
|
10271
9779
|
// function to define props used within the scope of this component
|
|
10272
9780
|
static get properties() {
|
|
10273
9781
|
return {
|
|
10274
|
-
|
|
9782
|
+
|
|
9783
|
+
/**
|
|
9784
|
+
* Sets loader to laser type.
|
|
9785
|
+
*/
|
|
9786
|
+
laser: {
|
|
10275
9787
|
type: Boolean,
|
|
10276
9788
|
reflect: true
|
|
10277
9789
|
},
|
|
9790
|
+
|
|
9791
|
+
/**
|
|
9792
|
+
* Sets loader to orbit type.
|
|
9793
|
+
*/
|
|
10278
9794
|
orbit: {
|
|
10279
9795
|
type: Boolean,
|
|
10280
9796
|
reflect: true
|
|
10281
9797
|
},
|
|
10282
|
-
|
|
9798
|
+
|
|
9799
|
+
/**
|
|
9800
|
+
* Sets loader to pulse type.
|
|
9801
|
+
*/
|
|
9802
|
+
pulse: {
|
|
10283
9803
|
type: Boolean,
|
|
10284
9804
|
reflect: true
|
|
10285
9805
|
},
|
|
10286
|
-
|
|
9806
|
+
|
|
9807
|
+
/**
|
|
9808
|
+
* Sets loader to ringworm type.
|
|
9809
|
+
*/
|
|
9810
|
+
ringworm: {
|
|
10287
9811
|
type: Boolean,
|
|
10288
9812
|
reflect: true
|
|
10289
9813
|
}
|
|
@@ -10357,23 +9881,26 @@ class AuroLoader extends LitElement {
|
|
|
10357
9881
|
}
|
|
10358
9882
|
}
|
|
10359
9883
|
|
|
10360
|
-
var loaderVersion = '
|
|
9884
|
+
var loaderVersion = '5.0.0';
|
|
10361
9885
|
|
|
9886
|
+
/* eslint-disable max-lines */
|
|
10362
9887
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
10363
9888
|
// See LICENSE in the project root for license information.
|
|
10364
9889
|
|
|
10365
9890
|
|
|
10366
9891
|
/**
|
|
10367
9892
|
* @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
|
|
10368
|
-
* @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
|
|
9893
|
+
* @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
|
|
10369
9894
|
* @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
|
|
10370
9895
|
* @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
|
|
9896
|
+
* @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.
|
|
10371
9897
|
* @attr {Boolean} onDark - Set value for on-dark version of auro-button
|
|
10372
9898
|
* @attr {Boolean} rounded - If set to true, the button will have a rounded shape
|
|
10373
9899
|
* @attr {Boolean} slim - Set value for slim version of auro-button
|
|
10374
9900
|
* @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
|
|
10375
9901
|
* @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
10376
9902
|
* @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
|
|
9903
|
+
* @attr {Boolean} ariaexpanded - Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons.
|
|
10377
9904
|
* @attr {String} id - Set the unique ID of an element.
|
|
10378
9905
|
* @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
10379
9906
|
* @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
|
|
@@ -10418,6 +9945,7 @@ class AuroButton extends LitElement {
|
|
|
10418
9945
|
this.rounded = false;
|
|
10419
9946
|
this.slim = false;
|
|
10420
9947
|
this.fluid = false;
|
|
9948
|
+
this.loadingText = this.loadingText || 'Loading...';
|
|
10421
9949
|
|
|
10422
9950
|
// Support for HTML5 forms
|
|
10423
9951
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -10432,7 +9960,7 @@ class AuroButton extends LitElement {
|
|
|
10432
9960
|
/**
|
|
10433
9961
|
* Generate unique names for dependency components.
|
|
10434
9962
|
*/
|
|
10435
|
-
const versioning = new AuroDependencyVersioning$
|
|
9963
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
10436
9964
|
|
|
10437
9965
|
/**
|
|
10438
9966
|
* @private
|
|
@@ -10478,6 +10006,9 @@ class AuroButton extends LitElement {
|
|
|
10478
10006
|
type: Boolean,
|
|
10479
10007
|
reflect: true
|
|
10480
10008
|
},
|
|
10009
|
+
loadingText: {
|
|
10010
|
+
type: String
|
|
10011
|
+
},
|
|
10481
10012
|
onDark: {
|
|
10482
10013
|
type: Boolean,
|
|
10483
10014
|
reflect: true
|
|
@@ -10498,6 +10029,10 @@ class AuroButton extends LitElement {
|
|
|
10498
10029
|
type: String,
|
|
10499
10030
|
reflect: true
|
|
10500
10031
|
},
|
|
10032
|
+
ariaexpanded: {
|
|
10033
|
+
type: Boolean,
|
|
10034
|
+
reflect: true
|
|
10035
|
+
},
|
|
10501
10036
|
title: {
|
|
10502
10037
|
type: String,
|
|
10503
10038
|
reflect: true
|
|
@@ -10527,7 +10062,7 @@ class AuroButton extends LitElement {
|
|
|
10527
10062
|
*
|
|
10528
10063
|
*/
|
|
10529
10064
|
static register(name = "auro-button") {
|
|
10530
|
-
AuroLibraryRuntimeUtils$
|
|
10065
|
+
AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroButton);
|
|
10531
10066
|
}
|
|
10532
10067
|
|
|
10533
10068
|
/**
|
|
@@ -10569,12 +10104,22 @@ class AuroButton extends LitElement {
|
|
|
10569
10104
|
this.notifyReady();
|
|
10570
10105
|
}
|
|
10571
10106
|
|
|
10107
|
+
/**
|
|
10108
|
+
* Submits the form that this button is associated with.
|
|
10109
|
+
* @private
|
|
10110
|
+
* @returns {void}
|
|
10111
|
+
*/
|
|
10572
10112
|
surfaceSubmitEvent() {
|
|
10573
10113
|
if (this.form) {
|
|
10574
10114
|
this.form.requestSubmit();
|
|
10575
10115
|
}
|
|
10576
10116
|
}
|
|
10577
10117
|
|
|
10118
|
+
/**
|
|
10119
|
+
* Returns the form element that this button is associated with.
|
|
10120
|
+
* @private
|
|
10121
|
+
* @returns {HTMLFormElement|null}
|
|
10122
|
+
*/
|
|
10578
10123
|
get form() {
|
|
10579
10124
|
return this.internals ? this.internals.form : null;
|
|
10580
10125
|
}
|
|
@@ -10594,8 +10139,9 @@ class AuroButton extends LitElement {
|
|
|
10594
10139
|
return html`
|
|
10595
10140
|
<button
|
|
10596
10141
|
part="button"
|
|
10597
|
-
aria-label="${ifDefined(this.
|
|
10142
|
+
aria-label="${ifDefined(this.loading ? this.loadingText : this.arialabel || undefined)}"
|
|
10598
10143
|
aria-labelledby="${ifDefined(this.arialabelledby ? this.arialabelledby : undefined)}"
|
|
10144
|
+
aria-expanded="${ifDefined(this.ariaexpanded)}"
|
|
10599
10145
|
?autofocus="${this.autofocus}"
|
|
10600
10146
|
class="${classMap(classes)}"
|
|
10601
10147
|
?disabled="${this.disabled || this.loading}"
|
|
@@ -10623,13 +10169,13 @@ class AuroButton extends LitElement {
|
|
|
10623
10169
|
}
|
|
10624
10170
|
}
|
|
10625
10171
|
|
|
10626
|
-
var buttonVersion = '
|
|
10172
|
+
var buttonVersion = '9.3.0';
|
|
10627
10173
|
|
|
10628
|
-
var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-color-
|
|
10174
|
+
var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
10629
10175
|
|
|
10630
10176
|
var styleCss$5 = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
10631
10177
|
|
|
10632
|
-
var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-color-
|
|
10178
|
+
var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
10633
10179
|
|
|
10634
10180
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
10635
10181
|
// See LICENSE in the project root for license information.
|
|
@@ -10638,7 +10184,7 @@ var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-color-text-tertia
|
|
|
10638
10184
|
|
|
10639
10185
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
10640
10186
|
|
|
10641
|
-
let AuroLibraryRuntimeUtils$
|
|
10187
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
10642
10188
|
|
|
10643
10189
|
/* eslint-disable jsdoc/require-param */
|
|
10644
10190
|
|
|
@@ -10716,9 +10262,10 @@ class AuroHelpText extends LitElement {
|
|
|
10716
10262
|
super();
|
|
10717
10263
|
|
|
10718
10264
|
this.error = false;
|
|
10265
|
+
this.onDark = false;
|
|
10719
10266
|
this.hasTextContent = false;
|
|
10720
10267
|
|
|
10721
|
-
AuroLibraryRuntimeUtils$
|
|
10268
|
+
AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
10722
10269
|
}
|
|
10723
10270
|
|
|
10724
10271
|
static get styles() {
|
|
@@ -10754,6 +10301,14 @@ class AuroHelpText extends LitElement {
|
|
|
10754
10301
|
type: Boolean,
|
|
10755
10302
|
reflect: true,
|
|
10756
10303
|
},
|
|
10304
|
+
|
|
10305
|
+
/**
|
|
10306
|
+
* If declared, will apply onDark styles.
|
|
10307
|
+
*/
|
|
10308
|
+
onDark: {
|
|
10309
|
+
type: Boolean,
|
|
10310
|
+
reflect: true
|
|
10311
|
+
}
|
|
10757
10312
|
};
|
|
10758
10313
|
}
|
|
10759
10314
|
|
|
@@ -10766,7 +10321,7 @@ class AuroHelpText extends LitElement {
|
|
|
10766
10321
|
*
|
|
10767
10322
|
*/
|
|
10768
10323
|
static register(name = "auro-helptext") {
|
|
10769
|
-
AuroLibraryRuntimeUtils$
|
|
10324
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
|
|
10770
10325
|
}
|
|
10771
10326
|
|
|
10772
10327
|
updated() {
|
|
@@ -10863,7 +10418,7 @@ class AuroInput extends BaseInput {
|
|
|
10863
10418
|
*
|
|
10864
10419
|
*/
|
|
10865
10420
|
static register(name = "auro-input") {
|
|
10866
|
-
AuroLibraryRuntimeUtils$
|
|
10421
|
+
AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroInput);
|
|
10867
10422
|
}
|
|
10868
10423
|
|
|
10869
10424
|
/**
|
|
@@ -10903,7 +10458,8 @@ class AuroInput extends BaseInput {
|
|
|
10903
10458
|
category="payment"
|
|
10904
10459
|
name="${name}"
|
|
10905
10460
|
part="accentIcon"
|
|
10906
|
-
?
|
|
10461
|
+
?onDark="${this.onDark}"
|
|
10462
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
10907
10463
|
</${this.iconTag}>
|
|
10908
10464
|
`) : undefined
|
|
10909
10465
|
}
|
|
@@ -10915,7 +10471,8 @@ class AuroInput extends BaseInput {
|
|
|
10915
10471
|
category="interface"
|
|
10916
10472
|
name="calendar"
|
|
10917
10473
|
part="accentIcon"
|
|
10918
|
-
?
|
|
10474
|
+
?onDark="${this.onDark}"
|
|
10475
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
10919
10476
|
</${this.iconTag}>`
|
|
10920
10477
|
: undefined
|
|
10921
10478
|
}
|
|
@@ -10960,7 +10517,7 @@ class AuroInput extends BaseInput {
|
|
|
10960
10517
|
<${this.iconTag}
|
|
10961
10518
|
category="alert"
|
|
10962
10519
|
name="error-stroke"
|
|
10963
|
-
|
|
10520
|
+
customColor
|
|
10964
10521
|
</${this.iconTag}>
|
|
10965
10522
|
</div>
|
|
10966
10523
|
` : undefined}
|
|
@@ -10969,6 +10526,7 @@ class AuroInput extends BaseInput {
|
|
|
10969
10526
|
<div class="notification">
|
|
10970
10527
|
<${this.buttonTag}
|
|
10971
10528
|
variant="flat"
|
|
10529
|
+
?onDark="${this.onDark}"
|
|
10972
10530
|
aria-hidden="true"
|
|
10973
10531
|
tabindex="-1"
|
|
10974
10532
|
@click="${this.handleClickShowPassword}"
|
|
@@ -10992,6 +10550,7 @@ class AuroInput extends BaseInput {
|
|
|
10992
10550
|
<div class="notification">
|
|
10993
10551
|
<${this.buttonTag}
|
|
10994
10552
|
variant="flat"
|
|
10553
|
+
?onDark="${this.onDark}"
|
|
10995
10554
|
class="notificationBtn clearBtn"
|
|
10996
10555
|
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
10997
10556
|
@click="${this.handleClickClear}">
|
|
@@ -11010,14 +10569,14 @@ class AuroInput extends BaseInput {
|
|
|
11010
10569
|
<!-- Help text and error message template -->
|
|
11011
10570
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
11012
10571
|
? html`
|
|
11013
|
-
<${this.helpTextTag}>
|
|
10572
|
+
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
11014
10573
|
<p id="${this.uniqueId}" part="helpText">
|
|
11015
10574
|
<slot name="helptext">${this.getHelpText()}</slot>
|
|
11016
10575
|
</p>
|
|
11017
10576
|
</${this.helpTextTag}>
|
|
11018
10577
|
`
|
|
11019
10578
|
: html`
|
|
11020
|
-
<${this.helpTextTag} error>
|
|
10579
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
11021
10580
|
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
11022
10581
|
${this.errorMessage}
|
|
11023
10582
|
</p>
|
|
@@ -11032,9 +10591,9 @@ var inputVersion = '4.2.0';
|
|
|
11032
10591
|
|
|
11033
10592
|
var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
11034
10593
|
|
|
11035
|
-
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500,
|
|
10594
|
+
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
|
|
11036
10595
|
|
|
11037
|
-
var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-
|
|
10596
|
+
var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
11038
10597
|
|
|
11039
10598
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
11040
10599
|
// See LICENSE in the project root for license information.
|
|
@@ -11043,7 +10602,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
|
|
|
11043
10602
|
|
|
11044
10603
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
11045
10604
|
|
|
11046
|
-
let AuroLibraryRuntimeUtils$
|
|
10605
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
11047
10606
|
|
|
11048
10607
|
/* eslint-disable jsdoc/require-param */
|
|
11049
10608
|
|
|
@@ -11212,7 +10771,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
11212
10771
|
return _fetchMap.get(uri);
|
|
11213
10772
|
};
|
|
11214
10773
|
|
|
11215
|
-
var styleCss$1 = css`: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}
|
|
10774
|
+
var styleCss$1 = css`: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}`;
|
|
11216
10775
|
|
|
11217
10776
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
11218
10777
|
// See LICENSE in the project root for license information.
|
|
@@ -11220,7 +10779,6 @@ var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
11220
10779
|
|
|
11221
10780
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
11222
10781
|
/**
|
|
11223
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-icon
|
|
11224
10782
|
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
11225
10783
|
*/
|
|
11226
10784
|
|
|
@@ -11235,6 +10793,10 @@ class BaseIcon extends AuroElement {
|
|
|
11235
10793
|
static get properties() {
|
|
11236
10794
|
return {
|
|
11237
10795
|
...super.properties,
|
|
10796
|
+
|
|
10797
|
+
/**
|
|
10798
|
+
* Set value for on-dark version of auro-icon.
|
|
10799
|
+
*/
|
|
11238
10800
|
onDark: {
|
|
11239
10801
|
type: Boolean,
|
|
11240
10802
|
reflect: true
|
|
@@ -11293,81 +10855,11 @@ class BaseIcon extends AuroElement {
|
|
|
11293
10855
|
}
|
|
11294
10856
|
}
|
|
11295
10857
|
|
|
11296
|
-
var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-color-
|
|
11297
|
-
|
|
11298
|
-
var colorCss = css`: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)}`;
|
|
11299
|
-
|
|
11300
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
11301
|
-
// See LICENSE in the project root for license information.
|
|
11302
|
-
|
|
11303
|
-
// ---------------------------------------------------------------------
|
|
11304
|
-
|
|
11305
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
11306
|
-
|
|
11307
|
-
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
11308
|
-
|
|
11309
|
-
/* eslint-disable jsdoc/require-param */
|
|
10858
|
+
var tokensCss = css`: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)}`;
|
|
11310
10859
|
|
|
11311
|
-
|
|
11312
|
-
* This will register a new custom element with the browser.
|
|
11313
|
-
* @param {String} name - The name of the custom element.
|
|
11314
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
11315
|
-
* @returns {void}
|
|
11316
|
-
*/
|
|
11317
|
-
registerComponent(name, componentClass) {
|
|
11318
|
-
if (!customElements.get(name)) {
|
|
11319
|
-
customElements.define(name, class extends componentClass {});
|
|
11320
|
-
}
|
|
11321
|
-
}
|
|
10860
|
+
var colorCss = css`: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)}`;
|
|
11322
10861
|
|
|
11323
|
-
|
|
11324
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
11325
|
-
* @returns {void}
|
|
11326
|
-
*/
|
|
11327
|
-
closestElement(
|
|
11328
|
-
selector, // selector like in .closest()
|
|
11329
|
-
base = this, // extra functionality to skip a parent
|
|
11330
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
11331
|
-
!el || el === document || el === window
|
|
11332
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
11333
|
-
: found
|
|
11334
|
-
? found // found a selector INside this element
|
|
11335
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
11336
|
-
) {
|
|
11337
|
-
return __Closest(base);
|
|
11338
|
-
}
|
|
11339
|
-
/* eslint-enable jsdoc/require-param */
|
|
11340
|
-
|
|
11341
|
-
/**
|
|
11342
|
-
* 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.
|
|
11343
|
-
* @param {Object} elem - The element to check.
|
|
11344
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
11345
|
-
* @returns {void}
|
|
11346
|
-
*/
|
|
11347
|
-
handleComponentTagRename(elem, tagName) {
|
|
11348
|
-
const tag = tagName.toLowerCase();
|
|
11349
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
11350
|
-
|
|
11351
|
-
if (elemTag !== tag) {
|
|
11352
|
-
elem.setAttribute(tag, true);
|
|
11353
|
-
}
|
|
11354
|
-
}
|
|
11355
|
-
|
|
11356
|
-
/**
|
|
11357
|
-
* Validates if an element is a specific Auro component.
|
|
11358
|
-
* @param {Object} elem - The element to validate.
|
|
11359
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
11360
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
11361
|
-
*/
|
|
11362
|
-
elementMatch(elem, tagName) {
|
|
11363
|
-
const tag = tagName.toLowerCase();
|
|
11364
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
11365
|
-
|
|
11366
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
11367
|
-
}
|
|
11368
|
-
};
|
|
11369
|
-
|
|
11370
|
-
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
10862
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
11371
10863
|
// See LICENSE in the project root for license information.
|
|
11372
10864
|
|
|
11373
10865
|
|
|
@@ -11375,6 +10867,7 @@ class AuroIcon extends BaseIcon {
|
|
|
11375
10867
|
constructor() {
|
|
11376
10868
|
super();
|
|
11377
10869
|
|
|
10870
|
+
this.variant = undefined;
|
|
11378
10871
|
this.privateDefaults();
|
|
11379
10872
|
}
|
|
11380
10873
|
|
|
@@ -11384,20 +10877,6 @@ class AuroIcon extends BaseIcon {
|
|
|
11384
10877
|
* @returns {void}
|
|
11385
10878
|
*/
|
|
11386
10879
|
privateDefaults() {
|
|
11387
|
-
this.accent = false;
|
|
11388
|
-
this.customColor = false;
|
|
11389
|
-
this.customSvg = false;
|
|
11390
|
-
this.disabled = false;
|
|
11391
|
-
this.emphasis = false;
|
|
11392
|
-
this.error = false;
|
|
11393
|
-
this.info = false;
|
|
11394
|
-
this.label = false;
|
|
11395
|
-
this.primary = false;
|
|
11396
|
-
this.secondary = false;
|
|
11397
|
-
this.subtle = false;
|
|
11398
|
-
this.success = false;
|
|
11399
|
-
this.tertiary = false;
|
|
11400
|
-
this.warning = false;
|
|
11401
10880
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
11402
10881
|
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
11403
10882
|
}
|
|
@@ -11407,14 +10886,6 @@ class AuroIcon extends BaseIcon {
|
|
|
11407
10886
|
return {
|
|
11408
10887
|
...super.properties,
|
|
11409
10888
|
|
|
11410
|
-
/**
|
|
11411
|
-
* Sets the icon to use the accent style.
|
|
11412
|
-
*/
|
|
11413
|
-
accent: {
|
|
11414
|
-
type: Boolean,
|
|
11415
|
-
reflect: true
|
|
11416
|
-
},
|
|
11417
|
-
|
|
11418
10889
|
/**
|
|
11419
10890
|
* Set aria-hidden value. Default is `true`. Option is `false`.
|
|
11420
10891
|
*/
|
|
@@ -11445,38 +10916,6 @@ class AuroIcon extends BaseIcon {
|
|
|
11445
10916
|
type: Boolean
|
|
11446
10917
|
},
|
|
11447
10918
|
|
|
11448
|
-
/**
|
|
11449
|
-
* Sets the icon to use the disabled style.
|
|
11450
|
-
*/
|
|
11451
|
-
disabled: {
|
|
11452
|
-
type: Boolean,
|
|
11453
|
-
reflect: true
|
|
11454
|
-
},
|
|
11455
|
-
|
|
11456
|
-
/**
|
|
11457
|
-
* Sets the icon to use the emphasis style.
|
|
11458
|
-
*/
|
|
11459
|
-
emphasis: {
|
|
11460
|
-
type: Boolean,
|
|
11461
|
-
reflect: true
|
|
11462
|
-
},
|
|
11463
|
-
|
|
11464
|
-
/**
|
|
11465
|
-
* Sets the icon to use the error style.
|
|
11466
|
-
*/
|
|
11467
|
-
error: {
|
|
11468
|
-
type: Boolean,
|
|
11469
|
-
reflect: true
|
|
11470
|
-
},
|
|
11471
|
-
|
|
11472
|
-
/**
|
|
11473
|
-
* Sets the icon to use the info style.
|
|
11474
|
-
*/
|
|
11475
|
-
info: {
|
|
11476
|
-
type: Boolean,
|
|
11477
|
-
reflect: true
|
|
11478
|
-
},
|
|
11479
|
-
|
|
11480
10919
|
/**
|
|
11481
10920
|
* Exposes content in slot as icon label.
|
|
11482
10921
|
*/
|
|
@@ -11494,50 +10933,10 @@ class AuroIcon extends BaseIcon {
|
|
|
11494
10933
|
},
|
|
11495
10934
|
|
|
11496
10935
|
/**
|
|
11497
|
-
*
|
|
11498
|
-
*/
|
|
11499
|
-
primary: {
|
|
11500
|
-
type: Boolean,
|
|
11501
|
-
reflect: true
|
|
11502
|
-
},
|
|
11503
|
-
|
|
11504
|
-
/**
|
|
11505
|
-
* Sets the icon to use the secondary style.
|
|
11506
|
-
*/
|
|
11507
|
-
secondary: {
|
|
11508
|
-
type: Boolean,
|
|
11509
|
-
reflect: true
|
|
11510
|
-
},
|
|
11511
|
-
|
|
11512
|
-
/**
|
|
11513
|
-
* Sets the icon to use the subtle style.
|
|
11514
|
-
*/
|
|
11515
|
-
subtle: {
|
|
11516
|
-
type: Boolean,
|
|
11517
|
-
reflect: true
|
|
11518
|
-
},
|
|
11519
|
-
|
|
11520
|
-
/**
|
|
11521
|
-
* Sets the icon to use the success style.
|
|
11522
|
-
*/
|
|
11523
|
-
success: {
|
|
11524
|
-
type: Boolean,
|
|
11525
|
-
reflect: true
|
|
11526
|
-
},
|
|
11527
|
-
|
|
11528
|
-
/**
|
|
11529
|
-
* Sets the icon to use the tertiary style.
|
|
11530
|
-
*/
|
|
11531
|
-
tertiary: {
|
|
11532
|
-
type: Boolean,
|
|
11533
|
-
reflect: true
|
|
11534
|
-
},
|
|
11535
|
-
|
|
11536
|
-
/**
|
|
11537
|
-
* Sets the icon to use the warning style.
|
|
10936
|
+
* 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`.
|
|
11538
10937
|
*/
|
|
11539
|
-
|
|
11540
|
-
type:
|
|
10938
|
+
variant: {
|
|
10939
|
+
type: String,
|
|
11541
10940
|
reflect: true
|
|
11542
10941
|
}
|
|
11543
10942
|
};
|
|
@@ -11627,7 +11026,7 @@ class AuroIcon extends BaseIcon {
|
|
|
11627
11026
|
}
|
|
11628
11027
|
}
|
|
11629
11028
|
|
|
11630
|
-
var iconVersion = '
|
|
11029
|
+
var iconVersion = '8.0.1';
|
|
11631
11030
|
|
|
11632
11031
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
11633
11032
|
// See LICENSE in the project root for license information.
|
|
@@ -11852,7 +11251,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
11852
11251
|
constructor() {
|
|
11853
11252
|
super();
|
|
11854
11253
|
|
|
11855
|
-
AuroLibraryRuntimeUtils$
|
|
11254
|
+
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
11856
11255
|
|
|
11857
11256
|
const versioning = new AuroDependencyVersioning();
|
|
11858
11257
|
this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
|
|
@@ -11891,7 +11290,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
11891
11290
|
*
|
|
11892
11291
|
*/
|
|
11893
11292
|
static register(name = "auro-bibtemplate") {
|
|
11894
|
-
AuroLibraryRuntimeUtils$
|
|
11293
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
|
|
11895
11294
|
}
|
|
11896
11295
|
|
|
11897
11296
|
/**
|
|
@@ -11963,11 +11362,11 @@ class AuroBibtemplate extends LitElement {
|
|
|
11963
11362
|
|
|
11964
11363
|
var bibTemplateVersion = '1.0.0';
|
|
11965
11364
|
|
|
11966
|
-
css`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
|
|
11365
|
+
css`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
|
|
11967
11366
|
|
|
11968
|
-
css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)
|
|
11367
|
+
css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
11969
11368
|
|
|
11970
|
-
css`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-
|
|
11369
|
+
css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
11971
11370
|
|
|
11972
11371
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
11973
11372
|
// See LICENSE in the project root for license information.
|
|
@@ -12071,15 +11470,15 @@ function arrayOrUndefinedHasChanged(newVal, oldVal) {
|
|
|
12071
11470
|
|
|
12072
11471
|
css`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
12073
11472
|
|
|
12074
|
-
css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)
|
|
11473
|
+
css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
12075
11474
|
|
|
12076
|
-
css`: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}
|
|
11475
|
+
css`: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}`;
|
|
12077
11476
|
|
|
12078
|
-
css`:host{--ds-auro-icon-color:var(--ds-color-
|
|
11477
|
+
css`: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)}`;
|
|
12079
11478
|
|
|
12080
|
-
css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[
|
|
11479
|
+
css`: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)}`;
|
|
12081
11480
|
|
|
12082
|
-
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){
|
|
11481
|
+
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}[auro-input]::part(wrapper):focus-within{border-bottom-width:0 !important;box-shadow:unset !important;outline:unset !important}#slotHolder{display:none}`;
|
|
12083
11482
|
|
|
12084
11483
|
// Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12085
11484
|
// See LICENSE in the project root for license information.
|
|
@@ -12113,6 +11512,7 @@ class AuroCombobox extends LitElement {
|
|
|
12113
11512
|
* @returns {void} Internal defaults.
|
|
12114
11513
|
*/
|
|
12115
11514
|
privateDefaults() {
|
|
11515
|
+
this.onDark = false;
|
|
12116
11516
|
this.availableOptions = [];
|
|
12117
11517
|
this.optionActive = null;
|
|
12118
11518
|
this.msgSelectionMissing = 'Please select an option.';
|
|
@@ -12121,7 +11521,7 @@ class AuroCombobox extends LitElement {
|
|
|
12121
11521
|
|
|
12122
11522
|
this.validation = new AuroFormValidation$1();
|
|
12123
11523
|
|
|
12124
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
11524
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
12125
11525
|
|
|
12126
11526
|
this.isHiddenWhileLoading = false;
|
|
12127
11527
|
|
|
@@ -12131,11 +11531,11 @@ class AuroCombobox extends LitElement {
|
|
|
12131
11531
|
this.noFlip = false;
|
|
12132
11532
|
this.autoPlacement = false;
|
|
12133
11533
|
|
|
12134
|
-
const versioning = new AuroDependencyVersioning$
|
|
11534
|
+
const versioning = new AuroDependencyVersioning$3();
|
|
12135
11535
|
|
|
12136
|
-
this.dropdownTag = versioning.generateTag('auro-formkit-
|
|
12137
|
-
this.bibtemplateTag = versioning.generateTag('auro-formkit-
|
|
12138
|
-
this.inputTag = versioning.generateTag('auro-formkit-
|
|
11536
|
+
this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
|
|
11537
|
+
this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
|
|
11538
|
+
this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
|
|
12139
11539
|
}
|
|
12140
11540
|
|
|
12141
11541
|
// This function is to define props used within the scope of this component
|
|
@@ -12220,6 +11620,14 @@ class AuroCombobox extends LitElement {
|
|
|
12220
11620
|
reflect: true
|
|
12221
11621
|
},
|
|
12222
11622
|
|
|
11623
|
+
/**
|
|
11624
|
+
* If declared, onDark styles will be applied to the trigger.
|
|
11625
|
+
*/
|
|
11626
|
+
onDark: {
|
|
11627
|
+
type: Boolean,
|
|
11628
|
+
reflect: true
|
|
11629
|
+
},
|
|
11630
|
+
|
|
12223
11631
|
/**
|
|
12224
11632
|
* Specifies the current selected option.
|
|
12225
11633
|
*/
|
|
@@ -12346,7 +11754,7 @@ class AuroCombobox extends LitElement {
|
|
|
12346
11754
|
*
|
|
12347
11755
|
*/
|
|
12348
11756
|
static register(name = 'auro-combobox') {
|
|
12349
|
-
AuroLibraryRuntimeUtils$
|
|
11757
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCombobox);
|
|
12350
11758
|
}
|
|
12351
11759
|
|
|
12352
11760
|
/**
|
|
@@ -12989,6 +12397,7 @@ class AuroCombobox extends LitElement {
|
|
|
12989
12397
|
</div>
|
|
12990
12398
|
<${this.dropdownTag}
|
|
12991
12399
|
for="dropdownMenu"
|
|
12400
|
+
?onDark="${this.onDark}"
|
|
12992
12401
|
fluid
|
|
12993
12402
|
bordered
|
|
12994
12403
|
rounded
|
|
@@ -13005,6 +12414,7 @@ class AuroCombobox extends LitElement {
|
|
|
13005
12414
|
<${this.inputTag}
|
|
13006
12415
|
slot="trigger"
|
|
13007
12416
|
bordered
|
|
12417
|
+
?onDark="${this.onDark}"
|
|
13008
12418
|
?required="${this.required}"
|
|
13009
12419
|
?noValidate="${this.noValidate}"
|
|
13010
12420
|
?disabled="${this.disabled}"
|