@aurodesignsystem/auro-formkit 2.0.3-beta.1 → 2.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/components/bibtemplate/dist/index.js +148 -8
- package/components/bibtemplate/dist/registered.js +148 -8
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/api.min.js +643 -112
- package/components/combobox/demo/index.min.js +643 -112
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/dist/index.js +510 -49
- package/components/combobox/dist/registered.js +510 -49
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.min.js +500 -39
- package/components/counter/demo/index.js +1 -0
- package/components/counter/demo/index.min.js +501 -39
- package/components/counter/demo/readme.md +1 -1
- package/components/counter/dist/index.js +500 -39
- package/components/counter/dist/registered.js +500 -39
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +30 -0
- package/components/datepicker/demo/api.min.js +1280 -206
- package/components/datepicker/demo/index.min.js +1280 -206
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-calendar.d.ts +5 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +7 -0
- package/components/datepicker/dist/buttonVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +1280 -206
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +1280 -206
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.min.js +81 -10
- package/components/dropdown/demo/index.min.js +81 -10
- package/components/dropdown/demo/readme.md +1 -1
- package/components/dropdown/dist/index.js +81 -10
- package/components/dropdown/dist/registered.js +81 -10
- package/components/form/README.md +1 -1
- package/components/form/demo/readme.md +1 -1
- package/components/input/README.md +1 -1
- package/components/input/demo/api.min.js +262 -12
- package/components/input/demo/index.min.js +262 -12
- package/components/input/demo/readme.md +1 -1
- package/components/input/dist/index.js +262 -12
- package/components/input/dist/registered.js +262 -12
- package/components/menu/README.md +1 -1
- package/components/menu/demo/api.min.js +77 -7
- package/components/menu/demo/index.min.js +77 -7
- package/components/menu/demo/readme.md +1 -1
- package/components/menu/dist/index.js +77 -7
- package/components/menu/dist/registered.js +77 -7
- package/components/radio/README.md +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/readme.md +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/README.md +1 -1
- package/components/select/demo/api.min.js +319 -38
- package/components/select/demo/index.min.js +319 -38
- package/components/select/demo/readme.md +1 -1
- package/components/select/dist/index.js +240 -29
- package/components/select/dist/registered.js +240 -29
- package/package.json +2 -2
|
@@ -3980,7 +3980,7 @@ class AuroInputUtilities {
|
|
|
3980
3980
|
|
|
3981
3981
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3982
3982
|
|
|
3983
|
-
let AuroLibraryRuntimeUtils$
|
|
3983
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
3984
3984
|
|
|
3985
3985
|
/* eslint-disable jsdoc/require-param */
|
|
3986
3986
|
|
|
@@ -4049,7 +4049,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
4049
4049
|
|
|
4050
4050
|
class AuroFormValidation {
|
|
4051
4051
|
constructor() {
|
|
4052
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4052
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
4053
4053
|
}
|
|
4054
4054
|
|
|
4055
4055
|
/**
|
|
@@ -5313,7 +5313,7 @@ class BaseInput extends LitElement {
|
|
|
5313
5313
|
// See LICENSE in the project root for license information.
|
|
5314
5314
|
|
|
5315
5315
|
|
|
5316
|
-
class AuroDependencyVersioning {
|
|
5316
|
+
let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
5317
5317
|
|
|
5318
5318
|
/**
|
|
5319
5319
|
* Generates a unique string to be used for child auro element naming.
|
|
@@ -5347,7 +5347,7 @@ class AuroDependencyVersioning {
|
|
|
5347
5347
|
|
|
5348
5348
|
return tag;
|
|
5349
5349
|
}
|
|
5350
|
-
}
|
|
5350
|
+
};
|
|
5351
5351
|
|
|
5352
5352
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5353
5353
|
// See LICENSE in the project root for license information.
|
|
@@ -5500,6 +5500,76 @@ var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-def
|
|
|
5500
5500
|
|
|
5501
5501
|
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)}`;
|
|
5502
5502
|
|
|
5503
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5504
|
+
// See LICENSE in the project root for license information.
|
|
5505
|
+
|
|
5506
|
+
// ---------------------------------------------------------------------
|
|
5507
|
+
|
|
5508
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5509
|
+
|
|
5510
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
5511
|
+
|
|
5512
|
+
/* eslint-disable jsdoc/require-param */
|
|
5513
|
+
|
|
5514
|
+
/**
|
|
5515
|
+
* This will register a new custom element with the browser.
|
|
5516
|
+
* @param {String} name - The name of the custom element.
|
|
5517
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
5518
|
+
* @returns {void}
|
|
5519
|
+
*/
|
|
5520
|
+
registerComponent(name, componentClass) {
|
|
5521
|
+
if (!customElements.get(name)) {
|
|
5522
|
+
customElements.define(name, class extends componentClass {});
|
|
5523
|
+
}
|
|
5524
|
+
}
|
|
5525
|
+
|
|
5526
|
+
/**
|
|
5527
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
5528
|
+
* @returns {void}
|
|
5529
|
+
*/
|
|
5530
|
+
closestElement(
|
|
5531
|
+
selector, // selector like in .closest()
|
|
5532
|
+
base = this, // extra functionality to skip a parent
|
|
5533
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
5534
|
+
!el || el === document || el === window
|
|
5535
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
5536
|
+
: found
|
|
5537
|
+
? found // found a selector INside this element
|
|
5538
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
5539
|
+
) {
|
|
5540
|
+
return __Closest(base);
|
|
5541
|
+
}
|
|
5542
|
+
/* eslint-enable jsdoc/require-param */
|
|
5543
|
+
|
|
5544
|
+
/**
|
|
5545
|
+
* 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.
|
|
5546
|
+
* @param {Object} elem - The element to check.
|
|
5547
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
5548
|
+
* @returns {void}
|
|
5549
|
+
*/
|
|
5550
|
+
handleComponentTagRename(elem, tagName) {
|
|
5551
|
+
const tag = tagName.toLowerCase();
|
|
5552
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
5553
|
+
|
|
5554
|
+
if (elemTag !== tag) {
|
|
5555
|
+
elem.setAttribute(tag, true);
|
|
5556
|
+
}
|
|
5557
|
+
}
|
|
5558
|
+
|
|
5559
|
+
/**
|
|
5560
|
+
* Validates if an element is a specific Auro component.
|
|
5561
|
+
* @param {Object} elem - The element to validate.
|
|
5562
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
5563
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
5564
|
+
*/
|
|
5565
|
+
elementMatch(elem, tagName) {
|
|
5566
|
+
const tag = tagName.toLowerCase();
|
|
5567
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
5568
|
+
|
|
5569
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
5570
|
+
}
|
|
5571
|
+
};
|
|
5572
|
+
|
|
5503
5573
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5504
5574
|
// See LICENSE in the project root for license information.
|
|
5505
5575
|
|
|
@@ -5532,7 +5602,7 @@ class AuroIcon extends BaseIcon {
|
|
|
5532
5602
|
this.tertiary = false;
|
|
5533
5603
|
this.warning = false;
|
|
5534
5604
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
5535
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
5605
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
5536
5606
|
}
|
|
5537
5607
|
|
|
5538
5608
|
// function to define props used within the scope of this component
|
|
@@ -5694,7 +5764,7 @@ class AuroIcon extends BaseIcon {
|
|
|
5694
5764
|
*
|
|
5695
5765
|
*/
|
|
5696
5766
|
static register(name = "auro-icon") {
|
|
5697
|
-
AuroLibraryRuntimeUtils$
|
|
5767
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
|
|
5698
5768
|
}
|
|
5699
5769
|
|
|
5700
5770
|
connectedCallback() {
|
|
@@ -5762,12 +5832,192 @@ class AuroIcon extends BaseIcon {
|
|
|
5762
5832
|
|
|
5763
5833
|
var iconVersion = '6.1.2';
|
|
5764
5834
|
|
|
5835
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5836
|
+
// See LICENSE in the project root for license information.
|
|
5837
|
+
|
|
5838
|
+
|
|
5839
|
+
class AuroDependencyVersioning {
|
|
5840
|
+
|
|
5841
|
+
/**
|
|
5842
|
+
* Generates a unique string to be used for child auro element naming.
|
|
5843
|
+
* @private
|
|
5844
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
5845
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
5846
|
+
* @returns {string} - Unique string to be used for naming.
|
|
5847
|
+
*/
|
|
5848
|
+
generateElementName(baseName, version) {
|
|
5849
|
+
let result = baseName;
|
|
5850
|
+
|
|
5851
|
+
result += '-';
|
|
5852
|
+
result += version.replace(/[.]/g, '_');
|
|
5853
|
+
|
|
5854
|
+
return result;
|
|
5855
|
+
}
|
|
5856
|
+
|
|
5857
|
+
/**
|
|
5858
|
+
* Generates a unique string to be used for child auro element naming.
|
|
5859
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
5860
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
5861
|
+
* @returns {string} - Unique string to be used for naming.
|
|
5862
|
+
*/
|
|
5863
|
+
generateTag(baseName, version, tagClass) {
|
|
5864
|
+
const elementName = this.generateElementName(baseName, version);
|
|
5865
|
+
const tag = literal`${unsafeStatic(elementName)}`;
|
|
5866
|
+
|
|
5867
|
+
if (!customElements.get(elementName)) {
|
|
5868
|
+
customElements.define(elementName, class extends tagClass {});
|
|
5869
|
+
}
|
|
5870
|
+
|
|
5871
|
+
return tag;
|
|
5872
|
+
}
|
|
5873
|
+
}
|
|
5874
|
+
|
|
5875
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5876
|
+
// See LICENSE in the project root for license information.
|
|
5877
|
+
|
|
5878
|
+
// ---------------------------------------------------------------------
|
|
5879
|
+
|
|
5880
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5881
|
+
|
|
5882
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
5883
|
+
|
|
5884
|
+
/* eslint-disable jsdoc/require-param */
|
|
5885
|
+
|
|
5886
|
+
/**
|
|
5887
|
+
* This will register a new custom element with the browser.
|
|
5888
|
+
* @param {String} name - The name of the custom element.
|
|
5889
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
5890
|
+
* @returns {void}
|
|
5891
|
+
*/
|
|
5892
|
+
registerComponent(name, componentClass) {
|
|
5893
|
+
if (!customElements.get(name)) {
|
|
5894
|
+
customElements.define(name, class extends componentClass {});
|
|
5895
|
+
}
|
|
5896
|
+
}
|
|
5897
|
+
|
|
5898
|
+
/**
|
|
5899
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
5900
|
+
* @returns {void}
|
|
5901
|
+
*/
|
|
5902
|
+
closestElement(
|
|
5903
|
+
selector, // selector like in .closest()
|
|
5904
|
+
base = this, // extra functionality to skip a parent
|
|
5905
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
5906
|
+
!el || el === document || el === window
|
|
5907
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
5908
|
+
: found
|
|
5909
|
+
? found // found a selector INside this element
|
|
5910
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
5911
|
+
) {
|
|
5912
|
+
return __Closest(base);
|
|
5913
|
+
}
|
|
5914
|
+
/* eslint-enable jsdoc/require-param */
|
|
5915
|
+
|
|
5916
|
+
/**
|
|
5917
|
+
* 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.
|
|
5918
|
+
* @param {Object} elem - The element to check.
|
|
5919
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
5920
|
+
* @returns {void}
|
|
5921
|
+
*/
|
|
5922
|
+
handleComponentTagRename(elem, tagName) {
|
|
5923
|
+
const tag = tagName.toLowerCase();
|
|
5924
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
5925
|
+
|
|
5926
|
+
if (elemTag !== tag) {
|
|
5927
|
+
elem.setAttribute(tag, true);
|
|
5928
|
+
}
|
|
5929
|
+
}
|
|
5930
|
+
|
|
5931
|
+
/**
|
|
5932
|
+
* Validates if an element is a specific Auro component.
|
|
5933
|
+
* @param {Object} elem - The element to validate.
|
|
5934
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
5935
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
5936
|
+
*/
|
|
5937
|
+
elementMatch(elem, tagName) {
|
|
5938
|
+
const tag = tagName.toLowerCase();
|
|
5939
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
5940
|
+
|
|
5941
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
5942
|
+
}
|
|
5943
|
+
};
|
|
5944
|
+
|
|
5765
5945
|
var styleCss$2 = 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}`;
|
|
5766
5946
|
|
|
5767
5947
|
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}`;
|
|
5768
5948
|
|
|
5769
5949
|
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}`;
|
|
5770
5950
|
|
|
5951
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5952
|
+
// See LICENSE in the project root for license information.
|
|
5953
|
+
|
|
5954
|
+
// ---------------------------------------------------------------------
|
|
5955
|
+
|
|
5956
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5957
|
+
|
|
5958
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
5959
|
+
|
|
5960
|
+
/* eslint-disable jsdoc/require-param */
|
|
5961
|
+
|
|
5962
|
+
/**
|
|
5963
|
+
* This will register a new custom element with the browser.
|
|
5964
|
+
* @param {String} name - The name of the custom element.
|
|
5965
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
5966
|
+
* @returns {void}
|
|
5967
|
+
*/
|
|
5968
|
+
registerComponent(name, componentClass) {
|
|
5969
|
+
if (!customElements.get(name)) {
|
|
5970
|
+
customElements.define(name, class extends componentClass {});
|
|
5971
|
+
}
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
/**
|
|
5975
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
5976
|
+
* @returns {void}
|
|
5977
|
+
*/
|
|
5978
|
+
closestElement(
|
|
5979
|
+
selector, // selector like in .closest()
|
|
5980
|
+
base = this, // extra functionality to skip a parent
|
|
5981
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
5982
|
+
!el || el === document || el === window
|
|
5983
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
5984
|
+
: found
|
|
5985
|
+
? found // found a selector INside this element
|
|
5986
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
5987
|
+
) {
|
|
5988
|
+
return __Closest(base);
|
|
5989
|
+
}
|
|
5990
|
+
/* eslint-enable jsdoc/require-param */
|
|
5991
|
+
|
|
5992
|
+
/**
|
|
5993
|
+
* 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.
|
|
5994
|
+
* @param {Object} elem - The element to check.
|
|
5995
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
5996
|
+
* @returns {void}
|
|
5997
|
+
*/
|
|
5998
|
+
handleComponentTagRename(elem, tagName) {
|
|
5999
|
+
const tag = tagName.toLowerCase();
|
|
6000
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6001
|
+
|
|
6002
|
+
if (elemTag !== tag) {
|
|
6003
|
+
elem.setAttribute(tag, true);
|
|
6004
|
+
}
|
|
6005
|
+
}
|
|
6006
|
+
|
|
6007
|
+
/**
|
|
6008
|
+
* Validates if an element is a specific Auro component.
|
|
6009
|
+
* @param {Object} elem - The element to validate.
|
|
6010
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
6011
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
6012
|
+
*/
|
|
6013
|
+
elementMatch(elem, tagName) {
|
|
6014
|
+
const tag = tagName.toLowerCase();
|
|
6015
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6016
|
+
|
|
6017
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
6018
|
+
}
|
|
6019
|
+
};
|
|
6020
|
+
|
|
5771
6021
|
var styleCss$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}}`;
|
|
5772
6022
|
|
|
5773
6023
|
var colorCss$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-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
@@ -6086,7 +6336,7 @@ class AuroButton extends LitElement {
|
|
|
6086
6336
|
*
|
|
6087
6337
|
*/
|
|
6088
6338
|
static register(name = "auro-button") {
|
|
6089
|
-
AuroLibraryRuntimeUtils$
|
|
6339
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
|
|
6090
6340
|
}
|
|
6091
6341
|
|
|
6092
6342
|
/**
|
|
@@ -6395,22 +6645,22 @@ class AuroInput extends BaseInput {
|
|
|
6395
6645
|
/**
|
|
6396
6646
|
* Generate unique names for dependency components.
|
|
6397
6647
|
*/
|
|
6398
|
-
const versioning = new AuroDependencyVersioning();
|
|
6648
|
+
const versioning = new AuroDependencyVersioning$1();
|
|
6399
6649
|
|
|
6400
6650
|
/**
|
|
6401
6651
|
* @private
|
|
6402
6652
|
*/
|
|
6403
|
-
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
6653
|
+
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
|
|
6404
6654
|
|
|
6405
6655
|
/**
|
|
6406
6656
|
* @private
|
|
6407
6657
|
*/
|
|
6408
|
-
this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
|
|
6658
|
+
this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
|
|
6409
6659
|
|
|
6410
6660
|
/**
|
|
6411
6661
|
* @private
|
|
6412
6662
|
*/
|
|
6413
|
-
this.helpTextTag = versioning.generateTag('auro-helptext', helpTextVersion, AuroHelpText);
|
|
6663
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
|
|
6414
6664
|
}
|
|
6415
6665
|
|
|
6416
6666
|
/**
|
|
@@ -6422,7 +6672,7 @@ class AuroInput extends BaseInput {
|
|
|
6422
6672
|
*
|
|
6423
6673
|
*/
|
|
6424
6674
|
static register(name = "auro-input") {
|
|
6425
|
-
AuroLibraryRuntimeUtils$
|
|
6675
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroInput);
|
|
6426
6676
|
}
|
|
6427
6677
|
|
|
6428
6678
|
/**
|
|
@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
|
|
|
110
110
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
111
111
|
|
|
112
112
|
```html
|
|
113
|
-
<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.
|
|
113
|
+
<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.3-beta.1/auro-menu/+esm"></script>
|
|
114
114
|
```
|
|
115
115
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
116
116
|
|
|
@@ -77,7 +77,7 @@ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
|
|
|
77
77
|
|
|
78
78
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
79
79
|
|
|
80
|
-
class AuroLibraryRuntimeUtils {
|
|
80
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
81
81
|
|
|
82
82
|
/* eslint-disable jsdoc/require-param */
|
|
83
83
|
|
|
@@ -138,7 +138,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
138
138
|
|
|
139
139
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
140
140
|
}
|
|
141
|
-
}
|
|
141
|
+
};
|
|
142
142
|
|
|
143
143
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
144
144
|
// See LICENSE in the project root for license information.
|
|
@@ -423,7 +423,7 @@ class AuroMenu extends r {
|
|
|
423
423
|
*
|
|
424
424
|
*/
|
|
425
425
|
static register(name = "auro-menu") {
|
|
426
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenu);
|
|
426
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
|
|
427
427
|
}
|
|
428
428
|
|
|
429
429
|
// Lifecycle Methods
|
|
@@ -447,7 +447,7 @@ class AuroMenu extends r {
|
|
|
447
447
|
}
|
|
448
448
|
|
|
449
449
|
firstUpdated() {
|
|
450
|
-
AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
450
|
+
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
451
451
|
|
|
452
452
|
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
453
453
|
this.initializeMenu();
|
|
@@ -1204,6 +1204,76 @@ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-defau
|
|
|
1204
1204
|
|
|
1205
1205
|
var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
|
|
1206
1206
|
|
|
1207
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1208
|
+
// See LICENSE in the project root for license information.
|
|
1209
|
+
|
|
1210
|
+
// ---------------------------------------------------------------------
|
|
1211
|
+
|
|
1212
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1213
|
+
|
|
1214
|
+
class AuroLibraryRuntimeUtils {
|
|
1215
|
+
|
|
1216
|
+
/* eslint-disable jsdoc/require-param */
|
|
1217
|
+
|
|
1218
|
+
/**
|
|
1219
|
+
* This will register a new custom element with the browser.
|
|
1220
|
+
* @param {String} name - The name of the custom element.
|
|
1221
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1222
|
+
* @returns {void}
|
|
1223
|
+
*/
|
|
1224
|
+
registerComponent(name, componentClass) {
|
|
1225
|
+
if (!customElements.get(name)) {
|
|
1226
|
+
customElements.define(name, class extends componentClass {});
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
/**
|
|
1231
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1232
|
+
* @returns {void}
|
|
1233
|
+
*/
|
|
1234
|
+
closestElement(
|
|
1235
|
+
selector, // selector like in .closest()
|
|
1236
|
+
base = this, // extra functionality to skip a parent
|
|
1237
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1238
|
+
!el || el === document || el === window
|
|
1239
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1240
|
+
: found
|
|
1241
|
+
? found // found a selector INside this element
|
|
1242
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1243
|
+
) {
|
|
1244
|
+
return __Closest(base);
|
|
1245
|
+
}
|
|
1246
|
+
/* eslint-enable jsdoc/require-param */
|
|
1247
|
+
|
|
1248
|
+
/**
|
|
1249
|
+
* 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.
|
|
1250
|
+
* @param {Object} elem - The element to check.
|
|
1251
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1252
|
+
* @returns {void}
|
|
1253
|
+
*/
|
|
1254
|
+
handleComponentTagRename(elem, tagName) {
|
|
1255
|
+
const tag = tagName.toLowerCase();
|
|
1256
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1257
|
+
|
|
1258
|
+
if (elemTag !== tag) {
|
|
1259
|
+
elem.setAttribute(tag, true);
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
/**
|
|
1264
|
+
* Validates if an element is a specific Auro component.
|
|
1265
|
+
* @param {Object} elem - The element to validate.
|
|
1266
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1267
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1268
|
+
*/
|
|
1269
|
+
elementMatch(elem, tagName) {
|
|
1270
|
+
const tag = tagName.toLowerCase();
|
|
1271
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1272
|
+
|
|
1273
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1274
|
+
}
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1207
1277
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1208
1278
|
// See LICENSE in the project root for license information.
|
|
1209
1279
|
|
|
@@ -1490,7 +1560,7 @@ class AuroMenuOption extends r {
|
|
|
1490
1560
|
* Generate unique names for dependency components.
|
|
1491
1561
|
*/
|
|
1492
1562
|
const versioning = new AuroDependencyVersioning();
|
|
1493
|
-
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
1563
|
+
this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, AuroIcon);
|
|
1494
1564
|
|
|
1495
1565
|
this.selected = false;
|
|
1496
1566
|
this.nocheckmark = false;
|
|
@@ -1504,7 +1574,7 @@ class AuroMenuOption extends r {
|
|
|
1504
1574
|
/**
|
|
1505
1575
|
* @private
|
|
1506
1576
|
*/
|
|
1507
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1577
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
1508
1578
|
}
|
|
1509
1579
|
|
|
1510
1580
|
static get properties() {
|
|
@@ -1548,7 +1618,7 @@ class AuroMenuOption extends r {
|
|
|
1548
1618
|
*
|
|
1549
1619
|
*/
|
|
1550
1620
|
static register(name = "auro-menuoption") {
|
|
1551
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
|
|
1621
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenuOption);
|
|
1552
1622
|
}
|
|
1553
1623
|
|
|
1554
1624
|
firstUpdated() {
|